pdf to image c# open source : Sign pdf form reader application SDK tool html wpf azure online fulton_fulton42-part554

• The “on” state of the loop button
Figure 7-5. audiocontrols.png
Loading the Button Assets
Because we are going to load in both an audio file and an image file for this application,
we need to employ a strategy that will allow us to preload two assets instead of just one.
This process is much like the one we employed in Chapter 6 when we created controls
for a video. Previously in this chapter, we used a function named audioLoaded() to
make sure the audio was loaded before we started use it. However, that strategy will not
work when we have two assets to load. We could create two separate event listeners, but
what if we need to load 3, 4, or 10 assets? What we need is a simple way to ensure that
we can preload any number of assets before our application executes.
We will start this process by creating some variables that are global in scope to all the
functions in the applications. First, outside of all the JavaScript functions, we will create
three new variables—loadCountitemsToLoad, and buttonSheet:
This variable will be used as a counter. When an asset has preloaded we will incre‐
ment this value.
This is a numeric value that represents the number of assets we need to load before
we can execute the application in the HTML page.
This  variable  will  hold  a  reference  to  the  audiocontrols.png  image  shown  in
Figure 7-5. We will use it to create our audio controls.
Here is the code with values included:
var loadCount = 0;
var itemsToLoad = 2;
var buttonSheet;
var audioElement;
To make these variables scope only to the Canvas app and not globally
to all of JavaScript, you can encapsulate this code in a function(). The
final version of the code in Example A-1 shows that process.
Creating a Canvas Audio Player  |  399
Sign pdf form reader - 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
how to save editable pdf form in reader; extract data from pdf form fields
Sign pdf form reader - 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
change font size pdf form reader; how to save a pdf form in reader
Also, like in the video player application from the last chapter (CH6EX11.html), we need
to create some variables to set a wait time between button presses:
var buttonWait = 5;
var timeWaited = buttonWait;
Inside the eventWindowLoaded() function, we now need to set the event handlers for
the assets to load. For the audioElement, we will change the handler from audioLoa
ded to itemLoaded:
To load and use the audiocontrols.png image, we first create a new Image() object and
place a reference to it into the buttonSheet variable. Next, we set the src attribute of
the  new Image  object  to  the  image  file  we  want  to  load—in  this  case,  audiocon
trols.png. We then set the onload event handler of the Image object to itemLoaded, which
is the same event handler we used for the audio file:
buttonSheet = new Image();
buttonSheet.onload = itemLoaded;
buttonSheet.src = "audiocontrols.png";
Now we need to create the itemLoaded() event handler. This function is quite simple.
Every time it is called, we increment the loadCount variable. We then test loadCount
to see whether it is equal to or has surpassed the number of items we want to preload,
which is represented by the itemsToLoad variable. If so, we call the canvasApp() func‐
tion to start our application:
function itemLoaded(event) {
if (loadCount >= itemsToLoad) {
Setting Up the Audio Player Values
Inside the canvasApp() function, we need to create some values to help us place all the
various buttons and sliders on the canvas.
First, bH represents the height of all the controls; bW represents the width of a standard
button (play/pause, loop/not loop):
var bW = 32;
var bH = 32;
Next we set the width of the playback area, playBackW, and the width of the volume
background, volBackW. We also set the slider’s width (sliderW) and height (sliderH):
400  |  Chapter 7: Working with Audio
C# WinForms Viewer: Load, View, Convert, Annotate and Edit PDF
PDF Protection. • Sign PDF document with signature. To view, convert, edit, process, protect, sign PDF files, please refer to XDoc.PDF SDK for .NET overview.
extract pdf data into excel; saving pdf forms in acrobat reader
C# WPF Viewer: Load, View, Convert, Annotate and Edit PDF
View PDF outlines. Related Resources. To view, convert, edit, process, protect, sign PDF files, please refer to XDoc.PDF SDK for .NET overview.
vb extract data from pdf; extract data out of pdf file
var playBackW = 206;
var volBackW = 50;
var sliderW = 10;
var sliderH = 32;
We also need a couple variables to represent the x and y locations on the canvas where
we will start to build our audio controls. We will define those as controlStartX and
var controlStartX = 25;
var controlStartY = 200;
Finally, we need to specify the x and y locations for the play/pause button (playX,
playY), the playing slider background (playBackXplayBackY), the volume slider back‐
ground  (volBackX, volBackY),  and  the  location  of the  loop/no  loop  toggle button
var playX = controlStartX;
var playY = controlStartY;
var playBackX = controlStartX+bW
var playBackY = controlStartY;
var volBackX = controlStartX+bW+playBackW;
var volBackY = controlStartY;
var loopX = controlStartX+bW+playBackW+volBackW
var loopY = controlStartY;
We are going to use all of these values to help design and add functionality to our audio
controls. It might seem like overkill to create so many variables, but when trying to “roll
your own” collision detection and drag-and-drop functionality into the canvas, having
variable names to manipulate instead of literals makes the job much easier.
Mouse Events
Because we are going to create our own functions for interactivity between the mouse
and our custom canvas audio controls, we need to add some event handlers for certain
common mouse events.
First, we need to create a couple variables—mouseX and mouseY—that will hold the
current x and y locations of the mouse pointer:
var mouseX;
var mouseY;
Next we need to create the event handlers. First, we listen for the mouseup event. This
event fires when a user stops pressing the mouse button. We will listen for this event
when we are trying to determine whether we should stop dragging the volume slider:
Creating a Canvas Audio Player  |  401
C# PDF Digital Signature Library: add, remove, update PDF digital
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Field. Use C# Demo to Sign Your PDF Document.
extract data from pdf to excel online; how to save filled out pdf form in reader
C# HTML5 Viewer: Load, View, Convert, Annotate and Edit PDF
HTML5 Viewer for C# .NET. Related Resources. To view, convert, edit, process, protect, sign PDF files, please refer to XDoc.PDF SDK for .NET overview.
save data in pdf form reader; how to fill out a pdf form with reader
We also need to listen for the mousedown event to determine whether the play/pause
button was pressed, the loop on/off toggle button was pressed, and/or the volume slider
was clicked, so that we can start dragging it:
Finally, we listen for the mousemove event so that we can figure out the current x and y
locations of the mouse pointer. We use this value to determine whether buttons have
been pressed, as well as whether the volume slider has been clicked and/or dragged:
Sliding Play Indicator
The sliding play indicator is the simplest control we are going to draw onto the canvas.
It is not interactive—it just gives the user a visual indication of how much of the audio
clip is left to play.
First of all, in canvasApp() we need to make sure that we call the drawScreen() function
on an interval so that our updated controls will be displayed:
function gameLoop() {
Unlike when displaying video on the canvas, we do not have to call
drawScreen() to update the playing audio. In JavaScript, audio plays
completely separate from the canvas. Our need to call drawScreen()
on an interval is necessary because the audio controls we are creating
need to be updated as the audio plays.
In the drawScreen() function, we need to draw the slider and background on the canvas.
We are going to “cut” all the images we display from the single buttonSheet image we
loaded from audiocontrols.png. To draw the background, we use the values we set up
earlier. We use literals (32,0) to locate the starting point of the image because those
values do not change on the buttonSheet image. However, we use the variables we
created to find the width and height, and to locate the final position of the background
on the canvas:
Drawing the play slider is only a bit more complicated. Before we draw it, we need to
create a variable that represents the relationship between the length of playing audio
402  |  Chapter 7: Working with Audio
C# HTML5 Viewer: Load, View, Convert, Annotate and Edit Word
users can convert Convert Microsoft Office Word to searchable PDF online, create To view, convert, edit, process, built, sign Word documents, please refer to
extract data from pdf using java; how to make a pdf form fillable in reader
VB.NET PDF Digital Signature Library: add, remove, update PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Use VB.NET Demo to Sign Your PDF Document. Add necessary references:
online form pdf output; fill in pdf form reader
and the width of slider area. This is so we will know how far on the x-axis to move the
slider based on how much of the song has played. This might sound complicated, but
it’s just a simple fraction. Divide the width of the play background (playBackW) by the
duration of the playing audio (audioElement.duration). We will store that ratio in
sliderIncrement and use it to place the play slider on the canvas:
var slideIncrement = playBackW/audioElement.duration;
Now we need to calculate the x position of the slider. The x position is the sum of the
slider’s starting position (the place on the canvas where the controls start) plus the width
of the play/pause button (controlStartX+bW), plus the audio’s current play position.
We calculate the play position by taking the ratio we just created, sliderIncrement, and
multiplying it by the current play time of the audio clip (audioElement.currentTime).
That’s it!
var sliderX = (controlStartX+bW+ (slideIncrement*audioElement.currentTime);
Now all we need to do is draw the image onto the canvas and then test to see whether
the audio clip has ended. If it has ended, we put the play position back to the beginning
of the playback area and call audioElement.pause() to pause the audio clip. That is,
unless the loop property is sent, in which case we start playing the audio clip from the
beginning by setting the currentTime property to 0:
if (audioElement.ended && !audioElement.loop) {
audioElement.currentTime = 0;
We also need to make sure to update timeWaited so that we don’t accept too many
This leads us right into our next topic, handling the play/pause button.
Play/Pause Push Button: Hit Test Point Revisited
The first thing we need to do when implementing the play/pause button is create the
event handler for the mousemove event. The function really is just the standard cross-
browser code we introduced earlier in the book for tracking the mouse position, de‐
pending on which properties the DOM in browsers supports: pageX/pageY or e.cli
enX/e.clientY. This function is called every time the mouse is moved on the canvas to
update the mouseX and mouseY variables. Those variables are scoped to canvasApp() so
that all functions defined inside of it can access them:
function eventMouseMove(event) {
var x;
var y;
Creating a Canvas Audio Player  |  403
How to C#: Set Image Thumbnail in C#.NET
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff Add a new Form Item to the project, and choose to design mode sign.
extract data from pdf into excel; export pdf form data to excel
How to C#: Quick to Start Using XImage.Raster
project’s reference. Add a new Form Item to the project, and choose to design mode sign. Make the ToolBox view show. Right click
extract data from pdf file to excel; java read pdf form fields
if (event.pageX || event.pageY) {
x = event.pageX;
y = event.pageY;
else {
x = e.clientX + document.body.scrollLeft +
y = e.clientY + document.body.scrollTop + 
x -= theCanvas.offsetLeft;
y -= theCanvas.offsetTop;
Now we need to create the eventMouseUp() handler function. This function is called
when the user releases the mouse button after clicking. Why after, and not when the
mouse is clicked? Well, one reason is because we generally use the mousedown event for
the start of a “dragging” operation, which we will show you shortly.
The first thing we do here, just like in CH6EX11.html in the last chapter, is test to see
whether timeWaited is greater than buttonWait. If so, we will accept a new mouseUp
event. If not, we skip it.
The heart of this function is a hit test point-style collision detection check for the but‐
tons. We discussed this in depth in Chapter 6 when we created the buttons for the video
puzzle game (CH6EX10.html). Notice that here we are using the variables we create to
represent the x and y locations of the button (playXplayY) and the width and height
of a button (bW, bH) to form the bounds of the area we will test. If the mouse pointer is
within those bounds, we know the button has been clicked:
function eventMouseUp(event) {
if (timeWaited >= buttonWait) {
timeWaited = 0;
if ( (mouseY >= playY) && (mouseY <= playY+bH) && (mouseX >= playX) &&
(mouseX <= playX+bW) ) {
If you had images stacked on top of one another, you would need to
store some kind of stacking value or z-index to know which item was
on top and was clicked at any one time. Because the canvas works in
immediate mode, you would have to “roll your own,” just like the other
functionality we have discussed.
After a hit is detected, we need to determine whether we are going to call the play() or
pause() method of the HTMLAudioElement object represented by the audioElement
404  |  Chapter 7: Working with Audio
XDoc.HTML5 Viewer for .NET, Zero Footprint AJAX Document Image
View, Convert, Edit, Sign Documents and Images. We are dedicated to provide powerful & profession imaging controls, PDF document, image to pdf files and
pdf data extraction tool; exporting pdf data to excel
How to C#: Create a Winforms Control
VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB.NET PowerPoint, VB.NET Tiff Add a new Form Item to the project, and choose to design mode sign.
make pdf form editable in reader; pdf form save in reader
variable. To figure out which method to call, we simply test to see whether the audio is
paused by checking the audioElement.paused property. If so, we call the play() meth‐
od; if not, we call pause(). Recall that the HTMLAudioElement.paused property is set to
true if the audio is not playing, regardless of whether the paused() function was called.
This means that when the application starts but we have not set autoplay, we can easily
display the proper button (play or pause) just by testing this property:
if (audioElement.paused) {
else {
Now, in drawScreen(), we need to choose which button to display: the one representing
play (green triangle) or pause (two horizontal boxes). The play button is displayed when
the audio is paused, and the pause button is displayed when the audio is playing. This
button is a “call to action,” so it displays what will happen when you click on it, not the
status of the audio element that is playing. This inverse relationship exists because it is
the standard way audio players work.
If the audioElement is paused, we display the graphic from the top row of the audio
controls.png image represented by buttonSheet. (See Figure 7-5.) If it is not paused, we
display the button on the second row right below it. Because that button starts at the y
position of 32, we use that literal value in the call to drawImage():
if (audioElement.paused) {
context.drawImage(buttonSheet0,0,bW,bH,playX,playY,bW,bH);//show play
else {
context.drawImage(buttonSheet0,32,bW,bH,playX,playY,bW,bH); //show pause
Again, we could have represented the literal values of locations in the
buttonSheet with variables, but we decided to use literals to show you
the difference between how we specify buttonSheet pixel locations and
how we calculate widths and distances for placing those elements.
Creating a Canvas Audio Player  |  405
Loop/No Loop Toggle Button
Implementing the loop/no loop toggle button is nearly identical to implementing the
play/pause button. In Figure 7-5, you can see that the last two buttons on the bottom
row represent the “on” and “off” states of the loop/no loop button. Unlike the play/pause
button, this button shows the “state” of looping: the lighter, 3D-looking “out” button is
displayed when the audio is not set to loop. The inverse, darker button is displayed when
the audio is set to loop (because it looks like the button has been pressed).
In the eventMouseUp() function, we need to add support for loop/no loop. First, we test
for a hit test point on the button with the current location of the mouse pointer. This is
identical to the test we did for the play/pause button, except that we use loopX and loopY
to find the current location of the loop/no loop button.
Next we check the value of audioElement.loop. We need to update the value to the
opposite of the current setting. If loop is true, we set it to false; if it is false, we set it
to true:
if ( (mouseY >=loopY&& (mouseY <= loopY+bH&& (mouseX >= loopX&&
(mouseX <= loopX+bW) ) {
if (audioElement.loop) {
audioElement.loop = false;
else {
audioElement.loop = true;
Finally, in drawScreen(), we will display the proper part of the buttonSheet image for
whichever state of loop/no loop is currently set. Unlike play/pause, we display the “off”
state when loop is false and the “on” state when it is set to true, because, again, there
is not an inverse relationship to the states of the button:
if (audioElement.loop) {
context.drawImage(buttonSheet114,32,bW,bH,loopX,loopY,bW,bH); // loop
else {
// no loop
Click-and-Drag Volume Slider
So now we make it to the last, but certainly not least, piece of functionality for the audio
player: the volume slider. The volume slider is an interactive control allowing the user
to manipulate it by sliding it right or left to control the volume of the playing audio
element. Before we create the volume slider, we need to define some boundaries for its
406  |  Chapter 7: Working with Audio
• The slider never moves on the y-axis; it will always keep a y value.
• The farther the volume slider is to the right (the greater the x value), the higher the
• The slider moves on the x-axis but is bounded by the starting x value of the volume
slider image—volumeSliderStart on the left and volumeSliderEnd on the right.
• When the user clicks on the volume slider, we will assume that the user wants to
set the volume, so we will start “dragging” the slider. This means that if the user
moves the mouse on the x-axis, we will move the slider accordingly.
• When the user takes his finger off the mouse button, we will assume that he no
longer wishes to set the volume, and we still stop “dragging” the slider.
• The volume will be set based on the slider’s position on the x-axis in relation to the
volumeSliderStart plus a ratio (volumeIncrement) that we create describing how
much volume to increase or decrease based on where the slider rests.
Volume slider variables
Now that we have thoroughly confused you, let’s talk about the process in depth. First,
we start with the canvasApp() function. In canvasApp(), we need to set up some vari‐
ables to set the rules we defined in the list above.
The starting x position for the volume slider is volumeSliderStart. When the appli‐
cation starts, it is equal to the x position of the volume background, or volBackX. This
means that it will start at the leftmost edge of the volume slider where the volume will
be set to 0. We will update this to the correct position based on the volume as soon as
we calculate that value:
var volumeSliderStart = volBackX;
The final x position for the volume slider is volumeSliderEnd, which is the rightmost
position. It is the position where the volume will be set to 100% (or 1). This position
lies at the x position of volumeSliderStart plus the width of the volume slider back‐
ground (volBackW), less the width of the volume slider itself (sliderW):
var volumeSliderEnd = volumeSliderStart + volBackW - sliderW;
volumeSliderX and volumeSliderY are the slider’s x and y positions on the canvas. The
y position is the same as the other elements in the audio player, controlStartY. How‐
ever, the x position is calculated in quite a different way. First, we take the value of
volumeSliderStart and add the difference between slider volume background width
and the slider width (volBackW – sliderW), multiplied by the volume property of the
audioElement, which is a number between 0 and 1. This will give us the position relative
to the starting point from which we want to draw the volume slider for any given volume
Creating a Canvas Audio Player  |  407
var volumeSliderX  = volumeSliderStart + (audioElement.volume*
(volBackW - sliderW));
var volumeSliderY  = controlStartY;
Next we create the volumeSliderDrag variable, which we will use as a switch to tell us
whether the volume slider is being dragged by the user at any given moment:
var volumeSliderDrag = false;
Finally, we create the volumeIncrement variable. This variable tells us how much volume
to increase or decrease on the audioElement.volume property based on where the slider
is positioned on the volume background. Because the maximum value of the volume is
1, we simply find the total width that the volume slider can move on the x-axis (volBackW
- sliderW) and divide 1 by that value. This will give us a product that we can multiply
by the x position of the slider, relative to volumeSliderStart, to give us the volume we
should set for the audioElement:
var volumeIncrement = 1/(volBackW - sliderW);
Volume slider functionality
Now that we have discussed the variables we need for the volume slider, we will talk
about how we use them in the various functions of the audio player. The good news is
that the implementation is simple now that you know how the variables work.
In the eventMouseDown() handler, we perform a hit test point-style test, just like we did
with the play/pause and loop/no loop buttons to see whether the volume slider was
clicked. If so, we set the volumeSliderDrag variable to true. This means that the volume
slider will now to move to the x position of the mouse when we call drawScreen():
function eventMouseDown(event) {
if ( (mouseY >= volumeSliderY&& (mouseY <=volumeSliderY+sliderH&&
(mouseX >= volumeSliderX&& (mouseX <= volumeSliderX+sliderW) ) {
volumeSliderDrag = true;
In the eventMouseUp() handler, we test to see whether volumeSliderDrag is set to
true. If so, it means that the user has released the mouse button and no longer wants
to drag the volume slider. We set volumeSliderDrag to false so that the slider will not
move with the mouse:
if (volumeSliderDrag) {
volumeSliderDrag = false;
Also, make sure this test is outside the test of (timeWaited >= buttonWait), or the
slider will stick to the mouse (in some browsers).
408  |  Chapter 7: Working with Audio
Documents you may be interested
Documents you may be interested