Scriptel OmniScript Tutorial 03 - Handling Pen Events

Video tutorial

Scriptel OmniScript Tutorial 03 - Handling Pen Events

Instructions

In this video tutorial we're going to walkthrough creating a JavaScript application capable of handling pen events in real time.

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.

1. Open up a folder, create two files: an HTML file and a JS file.
2. Open up the HTML file and make a skeleton document.
3. Add the doctype tag because this is an HTML5 application.
4. Then create the open and close html tags.
5. Next, create the head and body tags.
6. Give the document a title and create a script tag that references the new script file.
7. 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.
8. Now we'll create a canvas tag we'll use to draw on later in our example.
9. Save the document and open up the JavaScript file.
10. Create the function we just referenced in the onload handler in the html document.
11. 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

1. Let's start by creating a websocket along with a callback for the "connection established," "connection closed," and "data received" events.
2. We'll put console.log() statements in each of the callbacks so we can verify they're being called when we run the application.
3. 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 can.
4. Let's add a handler for "device open" response, and then 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.
5. Let's also set the stroke style to black.
6. Back in our "device open" response handler, let's extract the displayed width and height from the device, and set the canvas to that size.
7. Add handlers for our pen events, starting with "pen down."
8. Let's add another variable to store the last point we received. When the pen goes down, let's set the last point to that.
9. Now let's add handlers for "pen up" and "pen move."
10. We'll tell the context to start a path, move the path to the last point, and draw a line to the next point.
11. Then we'll set the new last point into the current point.
12. The last thing we need to do here is to add a handler for "button press." Anytime the user presses a button on the device, they'll cause the screen to clear.

Now let's test our application.

Step 3: Testing

1. Open a web browser and load the document.
2. The device should automatically open, which doesn't appear to be happening. It looks like I forgot to deserialize the incoming data.
3. Let's add a JSON.parse() to that statement and try again. Okay, that looks better.
4. Try writing on your signature pad. While you write, you should be seeing what you're writing mirrored in your web browser. You're handling pen events as they happen.

This provides you much greater flexibility with how you handle input from your device.