convert pdf to image c# free : Extract data out of pdf file software SDK cloud windows wpf web page class fulton_fulton64-part578

Beyond the Canvas
A nice set of tools and frameworks are available (with more emerging every day) that
can help transform the look and feel of an HTML or an HTML5 application (not
necessarily just on Canvas) into an iPhone-like application. These can be used in con‐
junction with a canvas app to provide a seamless iPhone look and feel for the user.
If you would like to explore mobile functionality further, we recommend the following
technologies, which can be combined with other technologies, such as Cordova Pho‐
neGap, to create very powerful mobile applications:
jQT
jQT is a framework that makes use of jQuery to target mobile-device-specific fea‐
tures across platforms that use WebKit (iOS, Palm, Nexus, and so on).
jQuery Mobile Framework
The jQuery Mobile Framework is another jQuery-based mobile framework for
building cross-platform applications. It can be used to create a unified user interface
across mobile platforms.
What’s Next?
As you can see, HTML5 Canvas is a powerful and easy way to target the iOS Safari
browser. In this chapter, we built a small game to run in the Safari browser and then
modified the application to run on the iPhone in full screen. After the simulation was
successful, we modified the GeoBlaster Extended game from Chapter 9 to create a new
game called Retro Blaster Touch. Finally, we were able to see this completed application
running on an actual iOS device.
In Chapter 11, we will look at applying multiplayer capabilities to a canvas application
using ElectroServer. We’ll also take a small tour of 3D in Canvas. We will continue to
explore the Canvas by creating a framework for a drag-and-drop application, and finally,
we will take a look at HTML5 in Microsoft Windows 8.
Beyond the Canvas  |  619
Extract data out of pdf file - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract data from pdf c#; pdf form data extraction
Extract data out of pdf file - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
export pdf data to excel; extracting data from pdf forms to excel
C# PDF Text Extract Library: extract text content from PDF file in
class. Able to extract and get all and partial text content from PDF file. Ability to extract highlighted text out of PDF document.
pdf form save with reader; how to save filled out pdf form in reader
VB.NET PDF Text Extract Library: extract text content from PDF
NET Programming. Extract and get partial and all text content from PDF file. Extract highlighted text out of PDF document. Image text
how to save a filled out pdf form in reader; how to save a pdf form in reader
CHAPTER 11
Further Explorations
There are many emerging technologies and frameworks that can help take HTML5
Canvas into rarely explored areas. In this chapter, we will cover a couple of those areas:
using Canvas for 3D with WebGL, and using Canvas for multiplayer applications. Both
of these areas are still experimental, requiring you either to download beta/developer
versions of browsers or to launch browsers using command-line switches so that you
can turn various technologies off and on.
We will also cover a couple more topics that, while still involving the Canvas, veer into
software design and emerging platforms. We will create a sample structure for our Can‐
vas code and then apply it to a drag-and-drop application. After that, we will take that
application and deploy it on the Microsoft Windows 8 desktop.
This chapter is structured a bit differently. The discussions are focused on giving you
some tools and information about these new and emerging areas for Canvas. While we
will offer code, examples, and some explanation, it’s geared more toward getting you
started on the path to learning than on teaching you how every detail works.
3D with WebGL
The 2D capabilities of HTML5 Canvas are impressive, but what about 3D? There is no
“production” 3D context available in the standard version of any web browser at this
time. However, the best support for a 3D context will probably come in the form of
WebGL.
What Is WebGL?
WebGL is a JavaScript API that gives programmers access to the 3D hardware on the
user’s machine. Currently, it is supported only by the debug/development versions of
Opera, Firefox, and Chrome. The API is managed by Kronos, the same organization
621
C# HTML5 PDF Viewer SDK to view PDF document online in C#.NET
Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert VB.NET convert PDF to text, VB.NET extract PDF pages, VB Support to zoom in and zoom out PDF page
extracting data from pdf forms to excel; export pdf form data to excel
VB.NET PDF- View PDF Online with VB.NET HTML5 PDF Viewer
Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert file & pages edit, C#.NET PDF pages extract, copy, paste Support to zoom in and zoom out PDF page
how to flatten a pdf form in reader; java read pdf form fields
that manages OpenGL. In fact, much of WebGL is similar to programming in OpenGL.
This is both good and bad. It’s good because it’s a standard programming interface that
is recognizable to many developers, but it is bad because it is not as easy to learn as the
2D Canvas context.
How Does One Test WebGL?
First, you need to find a web browser that supports WebGL. When trying to run a
WebGL application, a browser that does not support WebGL might give a message like
the one shown in Figure 11-1.
Figure 11-1. Trying to run WebGL in a standard web browser
Currently, the release versions of both Google Chrome and Firefox support WebGL.
When you have a browser that can display WebGL, you need to write the code to make
it happen. You start that process by accessing the WebGL context instead of the Canvas
2d context. So, instead of the following code, which we have used throughout this book:
context = theCanvas.getContext("2d");
We reference the experimental-webgl context, like this:
gl = theCanvas.getContext("experimental-webgl");
How Do I Learn More About WebGL?
The best place to learn about WebGL is at http://learningwebgl.com/. This site has an
FAQ, a blog, and some helpful low-level lessons on how to create apps using WebGL.
You can also find a ton of great content about WebGL at http://developer.mozilla.org.
One warning, however: programming WebGL is not for the uninitiated. Although
WebGL is based on OpenGL, it is still a very low-level API, meaning that you will need
to create everything by hand. At the end of this section, we will guide you toward some
higher-level libraries that should make this process a bit easier.
622  |  Chapter 11: Further Explorations
C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#
Able to fill out all PDF form field in C# RasterEdge XDoc.PDF SDK package provides PDF field processing features for will learn how to fill-in field data to PDF
how to fill in a pdf form in reader; sign pdf form reader
C# WPF PDF Viewer SDK to view PDF document in C#.NET
Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste, C# Abilities to zoom in and zoom out PDF page
make pdf form editable in reader; extract pdf data to excel
What Does a WebGL Application Look Like?
Now we are going to show you a WebGL application demo that rotates a 3D cube on
Canvas (see Figure 11-2). Because we are not experts in 3D graphics, we will forgo our
practice of describing every line of code in the example; instead, we will highlight in‐
teresting sections of code to help you understand what is happening.
This demo is based on Lesson 4 from Giles Thomas’s Learning WebGL website. While
this is only one short demo, it should give you a very good idea of how to structure and
build code for a WebGL application.
Much of this code has been adapted from the work of Giles Thomas
with his express written permission.
Figure 11-2. 3D rotating cube (CH11EX1.html)
JavaScript libraries
First, we add some JavaScript libraries. Modernizr includes a test for WebGL support
in a web browser. This version was freshly released, but it could be updated with new
3D with WebGL  |  623
VB.NET PDF - View PDF with WPF PDF Viewer for VB.NET
Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste, C# Abilities to zoom in and zoom out PDF page
extract data from pdf form fields; extracting data from pdf to excel
VB.NET PDF- HTML5 PDF Viewer for VB.NET Project
Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert VB.NET convert PDF to text, VB.NET extract PDF pages, VB PDF page and zoom in or zoom out PDF page
collect data from pdf forms; extract data from pdf using java
features at any time (in fact, at the time of this writing, this had been updated to version
2.6). It is necessary to make sure that you have the most recent versions of your libraries:
<script src="modernizr.js"></script>
We now need to include some JavaScript libraries to assist with our application. sylvest
er.js and glUtils.js are two libraries that you will find included for most apps that use
WebGL. sylvester.js is a library that helps when performing vector and matrix math
calculations in JavaScript. glUtils.js is an extension for sylvester.js, specifically for helping
with math related to WebGL:
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
Shaders
Shaders are pieces of code that run directly on a graphics card. They describe how a
scene—how you refer to a 3D canvas when working with WebGL—should be rendered.
Many of these little programs perform mathematical transformations that would other‐
wise run very slowly in JavaScript. In fact, we are pointing these out because they are
not JavaScript; they are written in a way that WebGL can understand. These sections of
code will be read in like text files and passed to the graphics hardware. Full discussions
of topics like shaders are far out of scope for this little section of the book, but we will
tell you a bit about each one of them to help set the tone for what comes next.
The first shader below is a fragment shader, which tells the graphics card that we will be
using floating-point numbers and blended colors. The second shader is the vertex shad‐
er. It works with the vertices (defined points in 3D space used to create 3D objects) and
will be used for every vertex we draw onto the Canvas 3D context:
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
624  |  Chapter 11: Further Explorations
VB.NET PDF - WPF PDF Viewer for VB.NET Program
Field Data. Data: Auto Fill-in Field Data. Field: Insert & pages edit, C#.NET PDF pages extract, copy, paste rotate PDF pages, zoom in or zoom out PDF pages and go
extract data from pdf c#; extract data from pdf to excel
VB.NET PDF File & Page Process Library SDK for vb.net, ASP.NET
Moreover, when you get a PDF document which is out of order, you need to adding a page into PDF document, deleting unnecessary page from PDF file and changing
change font size pdf form reader; exporting pdf form to excel
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition1.0);
vColor = aVertexColor;
}
</script>
Testing for WebGL support with Modernizr
The structure of the code in this example is much like the other applications we have
written in this book. However, it has been modified to work with the specific needs of
the 3D context. In the canvasApp() function, we need to test to see whether the browser
has WebGL support. This is easily accomplished by using the Modernizr.webgl static 
constant in Modernizr:
if ( !webglSupport()) {
alert("Unable to initialize WebGL");
return;
}
function webglSupport() {
return Modernizr.webgl;
}
Initialization in canvasApp()
In canvasApp(), we still get a context, but this time it is the experimental-webgl
context. Also, just like in our other apps, we still call drawScreen() on an interval to
render the canvas:
var theCanvas = document.getElementById("canvasOne");
webGLContext = theCanvas.getContext("experimental-webgl");
setInterval(drawScreen33);
However, there is additional code in canvasApp() required to set up the application to
rotate the cube. A couple of the most important initialization steps are the calls to
initShaders() and initBuffers():
initShaders();
initBuffers();
The initShaders() function itself calls a function named getShader() to load in the
text of the shader programs we have already defined. You can see the code for these
functions in the code listing in Example A-3.
You can learn about the shaders used in this program in “Lesson 2—
Adding colour” on the LearningWebGL website.
3D with WebGL  |  625
After we have loaded the shader programs, we need to create the buffers. Buffers refer
to space in the video card’s memory that we set aside to hold the geometry describing
our 3D objects. In our case, we need to create buffers to describe the cube we will rotate
on the canvas. We do this in initBuffers().
The initBuffers() function contains a lot of code, but we’ll discuss only a couple very
interesting sections. The first is the Vertex Position buffer, which describes the vertices
that make up the sides of the cube:
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFERcubeVertexPositionBuffer);
vertices = [
// Front face
1.01.0,  1.0,
1.01.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
// Back face
1.01.01.0,
1.0,  1.01.0,
1.0,  1.01.0,
1.01.01.0,
// Top face
1.0,  1.01.0,
1.0,  1.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.01.0,
// Bottom face
1.01.01.0,
1.01.01.0,
1.01.0,  1.0,
1.01.0,  1.0,        // Right face
1.01.01.0,
1.0,  1.01.0,
1.0,  1.0,  1.0,
1.01.0,  1.0,
// Left face
1.01.01.0,
1.01.0,  1.0,
1.0,  1.0,  1.0,
1.0,  1.01.0,
];
The Vertex Color buffer holds information about the color that will appear on each side
of the cube. These values are set as percentages of RGBA values (red, green, blue, alpha):
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFERcubeVertexColorBuffer);
var colors = [
[1.01.0, 1.0, 1.0],     // Front face
626  |  Chapter 11: Further Explorations
[0.90.0, 0.0, 1.0],     // Back face
[0.60.6, 0.6, 1.0],     // Top face
[0.60.0, 0.0, 1.0],     // Bottom face
[0.3 ,0.00.0, 1.0],     // Right face
[0.30.3, 0.3, 1.0],     // Left face
];
The Vertex Index buffer is kind of like a map that builds the object (our cube) based on
the colors specified in Vertex Color (the order of these elements) and the vertices speci‐
fied in the Vertex Position buffer. Each of these sets of three values represents a triangle
that will be drawn onto the 3D context:
webGLContext.bindBuffer(webGLContext.ELEMENT_ARRAY_BUFFERcubeVertexIndexBuffer);
var cubeVertexIndices = [
012,      023   // Front face
456,      467   // Back face
8910    810, 11 // Top face
1213, 14,   12, 1415, // Bottom face
1617, 18,   16, 1819, // Right face
2021, 22,   20, 2223  // Left face
]
Again, there is more code in initBuffers() than we described here, but start with these
three sections when you want to play with the code and make your own objects.
Animating the cube
Now that you know a bit about creating an object in WebGL, let’s learn about animating
the cube  on  the canvas. Similar  to  what  we  did  in the  2D context,  we  use the
drawScreen() function to position, draw, and animate objects in the 3D context. The
first thing we do here is set up the viewport, which defines the canvas’s view of the 3D
scene. Next, we clear the canvas and then set up the perspective:
function drawScreen() {
webGLContext.viewport(00webGLContext.viewportWidth,
webGLContext.viewportHeight);
webGLContext.clear(webGLContext.COLOR_BUFFER_BIT |
webGLContext.DEPTH_BUFFER_BIT);
perspective(25, (webGLContext.viewportWidth / webGLContext.viewportHeight),
0.1100.0);
The perspective has four parameters:
Field of view
The angle at which we will view the 3D scene (25 degrees).
Width-to-height ratio
The radio of width to height of the current size of the canvas (500×500).
3D with WebGL  |  627
Minimum units
The smallest unit size away from our viewport that we want to display (0.1).
Maximum units
The furthest unit size away from our viewport that we want to see (100.0).
Next, we move to the center of the 3D scene, calling loadIdentity() so that we can
start drawing. We then call mvTranslate(), passing the locations on the x-, y-, and z-
axes to draw the cube. To rotate the cube, we call a function named mvPushMatrix(),
and later mvPopMatrix(), which is similar to how we called context.save() and con
text.restore() when rotating objects on the 2D canvas. The call to mvRotate() then
makes the cube rotate from the center, tilted up and to the right:
loadIdentity();
mvTranslate([00.010.0]);
mvPushMatrix();
mvRotate(rotateCube, [0, .5, .5]);
Next, we draw the cube by binding the buffers that hold the vertices and color infor‐
mation that we set up earlier for the cube’s sides. We then draw each side, made up of
two triangles each:
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFERcubeVertexPositionBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSizewebGLContext.FLOATfalse00);
webGLContext.bindBuffer(webGLContext.ARRAY_BUFFERcubeVertexColorBuffer);
webGLContext.vertexAttribPointer(shaderProgram.vertexColorAttribute,
cubeVertexColorBuffer.itemSizewebGLContext.FLOATfalse00);
webGLContext.bindBuffer(webGLContext.ELEMENT_ARRAY_BUFFERcubeVertexIndexBuffer);
setMatrixUniforms();webGLContext.drawElements(webGLContext.TRIANGLES
cubeVertexIndexBuffer.numItemswebGLContext.UNSIGNED_SHORT0);
mvPopMatrix();
Finally, we increase the rotateCube variable so that the next time drawScreen() is
called, the cube will be updated with a new angle. The following code adds 2 degrees to
the rotation angle each time drawScreen() is called:
rotateCube += 2;
}
Further Explorations with WebGL
Obviously, we cannot teach you all about WebGL in this chapter. We opted to include
this demo and short discussion to introduce you to WebGL and show you what it looks
628  |  Chapter 11: Further Explorations
Documents you may be interested
Documents you may be interested