View source for Scriptel OmniScript Tutorial 06 - Sending Images to Device

==Video tutorial==

<embedvideo service="youtube">https://www.youtube.com/watch?v=9eaaSuKdJaI</embedvideo> 
'''Scriptel OmniScript Tutorial 06 - Sending Images to Device''' 

==Instructions==

In this video tutorial we'll make an application capable pushing images to your ScripTouch device.

'''Video instructions follow:'''

You'll need a couple tools. 

*You'll need a recent web-browser: Safari 6+, Chrome 16+, Explorer 10+, Firefox 11+, or Opera 12.10+.
*Next you'll need a text editor: Notepad will work, but any text editor should work. 
*Make sure OmniScript is installed and running, and you have a ScripTouch capture device hooked up. 

For this example, we're going to assume that you're going to be using OmniScript installed on your local computer.

===Step 1: Creating the Example Files===

We'll start by creating the files for the example. 

#Open up a folder, create two files: an HTML file and a JS file.
#Open up the HTML file and make a skeleton document. 
#Add the doctype tag because this is an HTML5 application.
#Then create the open and close html tags.
#Next, create the head and body tags.
#Give the document a title and create a script tag that references the new script file.
#Now we'll create a canvas tag we'll use to draw on later in our example.
#Now let's add an onload handler to our document body that calls a function we'll create in the JavaScript file in just a moment.
#Save the document and open up the JavaScript file.
#Create the function we just referenced in the onload handler in the html document.
#Double-check and make sure the function matches the one we're calling. 

Once that's done we can start writing code.

===Step 2: Writing the Code===

#Let's start by creating a websocket along with a callback for the '''"connection established,"''' '''"connection closed,"''' and '''"data received"''' events.
#We'll put console.log() statements in each of the callbacks so we can verify they're being called when we run the application.
#Now, just like in the previous examples, we'll add handlers to our on message callback. 
#We'll start by handling the '''"connection open"''' just like before, where we open the first device on the server as soon as we connect.
#Let's add a reference to our canvas and its drawing context at the top of our function, we'll need this in just a moment.
#Let's also set the stroke style to black while we're at it.
#Now let's add a handler for '''"device open"''' responses.
#We'll use the information we get from this object to set up the canvas, paint a simple X across the screen, and push the image to the device.
#We'll push the canvas to the device using a '''"push bitmap"''' request. 
#These requests allow you to push any P&G data URL to the screen of your device provided the bitmap fits on the screen of your device and won't overflow any of the edges. The two data URL call converts your canvas into a PNG data URL, the bit depth specifies that the picture should be transferred in 4-bit grayscale.

'''Some devices may not support grayscale.'''

OmniScript will convert the image to black and white for your device, if this is the case.

Finally let's add a catch-all to make sure that OmniScript doesn't send us anything we aren't expecting.

Now let's try opening the application. 

===Step 3: Testing===

#Open the HTML page and web browser. 
#You should see the X drawn on your screen.
#That same X should also be displayed on your device.

You can use this to transfer any type of image that your browser supports.