Scriptel OmniScript Tutorial 02 - Receiving and Customizing Signature Images

Video tutorial

Scriptel OmniScript Tutorial 02 - Receiving and Customizing Signature Images

Instructions

In this video tutorial we're going to walk through creating a JavaScript application capable of receiving and displaying signature images from Scriptel OmniScript.

Video instructions follow:

You'll need a couple tools to get started.

You'll need a recent web-browser, either Apple Safari 6 or greater, Google Chrome 16 or greater, Microsoft Internet Explorer 10 or greater, Mozilla Firefox 11 or greater, or Opera 12.10 or later.

Next you'll need a text editor: Notepad, G edit, or TextEdit will all work, but pretty much any text editor should do the trick.

Make sure OmniScript is installed and running, and that you have at least one ScripTouch signature capture device hooked up to your computer.

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

Step 1: Creating the Example Files

We'll start by creating the files we'll need to make the example work.
Open up a folder and create two new files. We'll create a tutorial HTML file and a tutorial JavaScript file.
Let's open up the HTML file and make a skeleton HTML document.
Add the <doctype> tag to indicate this is an HTML5 application.
Then create the open and close <html> tags.
Next, create the <head> and <body> tags.
Let's give our document a <title> and create a <script> tag that sources in the script file we just created.
Now we'll add an <img> tag that we'll use later to display our signature images.
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 connecting tutorial, we'll deserialize the JSON messages coming from OmniScript and will handle them by class.
The first class we'll handle is the "connection open" event.
Similar to last time, we'll check to see if the OmniScript server has any open devices.
If it does, we'll go ahead and open the first one.
We'll do this by creating a new "device open" request object and sending it back to OmniScript with the first device's universal unique identifier.
Next we'll handle the "device open" response object.
Just add a console.log() here for now.

Now for the interesting event, the rendered image event. Anytime the "OK" button is hit, OmniScript will render its stored signature buffer as an image and will send it to you.

This means all you need to do to get an image of a signature from your digitizer is to handle this event. Signatures are transferred as data urls which most modern web browsers are capable of displaying as an image.

Let's add a handler for this now, and we'll catch the event and inject the data url into the image we created as part of the html document. That should do it, let's test what we have so far.

Step 3: Testing

Open a web browser and load your web page.
Open the Developer console and check to make sure there aren't any errors, then try to sign on your signature pad and press "OK."
You'll see here when I pressed "OK," I received an error. It looks like I put an extra letter on the last line of my signature handler.
Let's correct that now and try again.

Now when I sign and press "OK," the image of my signature is displayed in the browser. That works, but isn't very flexible. What if i want to change some of the parameters?

Step 4: Change Settings

OmniScript allows you to change your rendering preferences, such as: image type, image size, line color, and pen style.

Let's add some code that pushes our preferences to OmniScript when we open the connection. We'll do this by sending a "render settings update" request to OmniScript.

This object has a lot of properties we can set. Check out the OmniScript documentation for an exhaustive list.

For now let's just change the size of the image to make it a little bit smaller.

Now let's refresh and try again.

You'll notice that after you sign, the signature came out considerably smaller. That's because we changed the scale from the default to 1.

By changing the values you put in the "render settings update" request, you can customize how your signatures are rendered and sent to you.