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

• 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—loadCount, itemsToLoad, and buttonSheet:

loadCount

This variable will be used as a counter. When an asset has preloaded we will incre‐

ment this value.

itemsToLoad

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.

buttonSheet

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:

audioElement.addEventListener("canplaythrough",itemLoaded,false);

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) {

loadCount++;

if (loadCount >= itemsToLoad) {

canvasApp();

}

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

controlStartY:

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 (playBackX, playBackY), the volume slider back‐

ground (volBackX, volBackY), and the location of the loop/no loop toggle button

(loopX, loopY):

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:

theCanvas.addEventListener("mouseup",eventMouseUp, false);

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:

theCanvas.addEventListener("mousedown",eventMouseDown, false);

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:

theCanvas.addEventListener("mousemove",eventMouseMove, false);

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() {

window.setTimeout(gameLoop, 20);

drawScreen()

}

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:

context.drawImage(buttonSheet, 32,0,playBackW,bH,playBackX,playBackY,

playBackW,bH);

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:

context.drawImage(buttonSheet, 238,0,sliderW,bH,sliderX,controlStartY,sliderW,bH);

if (audioElement.ended && !audioElement.loop) {

audioElement.currentTime = 0;

audioElement.pause();

}

We also need to make sure to update timeWaited so that we don’t accept too many

events:

timeWaited++;

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 +

document.documentElement.scrollLeft;

y = e.clientY + document.body.scrollTop +

document.documentElement.scrollTop;

}

x -= theCanvas.offsetLeft;

y -= theCanvas.offsetTop;

mouseX=x;

mouseY=y;

}

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 (playX, playY) 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) {

audioElement.play();

} else {

audioElement.pause();

}

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(buttonSheet, 0,0,bW,bH,playX,playY,bW,bH);//show play

} else {

context.drawImage(buttonSheet, 0,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(buttonSheet, 114,32,bW,bH,loopX,loopY,bW,bH); // loop

} else {

context.drawImage(buttonSheet, 82,32,bW,bH,loopX,loopY,bW,bH);

// 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

usage:

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

volume.

• 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

setting:

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

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