Scriptel OmniScript Tutorial 04 - Modifying Screen Elements

Video tutorial

Scriptel OmniScript Tutorial 04 - Modifying Screen Elements

Instructions

In this video tutorial, we'll be walking through how to modify elements on the screen of your ScripTouch device. Specifically we'll be adding a custom button to the screen.

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. Save the document and open up the JavaScript file.
9. Create the function we just referenced in the onload handler in the html document.
10. 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.
4. 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.
5. Now we'll add a handler for the device "open response" of it.
6. Once we get the notification "device is open," we'll immediately push a new button to the device.
7. We'll do this by generating a "region update" request and pushing a new region to override the region in one of the device's slots.

Each ScripTouch device has a fixed number of region slots. Regions can be buttons, lines, or containers. Region changes are not persistent. If the device loses power or is told to discard changes, the region updates will be lost. Please see the OmniScript documentation for a complete set of documentation regarding regions.

Step 3: Pushing a Region

1. In our example, we'll push our new button over region 10.
2. Regions 1 and 2 are reserved, but the rest can be freely modified.
3. We'll add text to the caption.
4. We'll set it to button! (exclamation point).
5. We also have to set a parent container. "Parent to" is always safe but it can also be set to a container that you create.
6. We'll add a catch-all here just to make sure that OmniScript doesn't send back any errors.
7. Now save and open your application in a browser. You'll see that you should get back a "region update" response message.

Check the screen of your device. It should now contain your new button.