View source for Scriptel OmniScript Tutorial 01 - Connecting to Scriptel OmniScript

==Video tutorial==

<embedvideo service="youtube">https://www.youtube.com/watch?v=FlmtNAlQVBY
</embedvideo> 
'''Scriptel OmniScript Tutorial 01 - Connecting to Scriptel OmniScript''' 

==Instructions==

In this video tutorial we'll create a basic JavaScript app capable of connecting to Scriptel's OmniScript and opening a ScripTouch signature capture 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: Create the files===

#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 &lt;html&gt; tags.
#Next, create the &lt;head&gt; and &lt;body&gt; tags.
#Give the document a &lt;title&gt; and create a &lt;script&gt; tag that references the new script file.
#Add an onload handler to the body that calls a function. (We'll create the JavaScript file in just a moment.)
#Save the document, and open up the JavaScript.
#Create the function we just referenced in the onload handler.
#Double-check the function name matches the one we're calling. Now we can start writing code.
#Create a web socket 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.
#Every message will be a JSON-encoded object. We'll take the message event we get passed as part of the onmessage handler and will deserialize it.
#Add a console.log() statement to print the de-serialized object.

===Step 2: Test the Skeleton Application===

#Open your web browser. 
#Open the HTML file. 
#Now open the '''Developer Console.''' In Chrome, do this by clicking the ''Menu'' button, going to the ''Tools'' menu, and hitting '''Developer Tools.''' This will open a window on the bottom of your screen. 
#If it's not selected already, click the ''Console'' tab in the ''Developer Tools'' window. In this window, if everything is working correctly, you should see the messages you just placed in the application.
#Expand the message object and see the deserialized object members that OmniScript sent you. You've just received a "connection open" event that contains information about the OmniScript server and what devices are connected to it.

===Step 3: Add More to the  Application===

Every message you received from OmniScript has an underbar class member that indicates what type of object it is. Let's add a set of conditionals to check for specific types of messages. 

The first condition will check if you get a "connection open" message. Next, the "silence condition" will make sure that the OmniScript server has an attached device. If it does, it will tell OmniScript to open up that device for us.

We'll do this by extracting the device out of the "connection open" message, and using the first device's universally unique identifier. 

#We'll create a '''"device open"''' request object that will serialize and send to OmniScript.
#Let's add another console.log() message here to make sure we're hitting this.
#Now let's test again. In your browser, back up and refresh your page. 
#This time, you receive the '''"connection open"''' request and immediately sent back a '''"device open"''' request. At this point OmniScript has reserved the first device connected to your computer for your application. 

Let's add a little more code to see what kind of information we can get from OmniScript now.

#Let's add a handler for '''"device open"''' response objects. These objects contain information about the device you just opened. 
#Add a console.log() statement so we can see it in the browser.
#Next we'll add a catch-all for any messages that we haven't already caught. This will let us see what Omnicript is sending us, even if our application doesn't know how to handle it right now.
#Save and refresh the page in your browser. 
#Now after you see the successfully opened device message, try pressing the '''"OK"''' button on your ScripTouch digitizer. 
#You should see a couple messages come over from OmniScript: A '''"button down"''' button press and "rendered image" object. OmniScript is intercepting the events from your digitizer and forwarding them to your application for you.