Help Topics Version 2.0

JavaScript

~sedna touch allows you to control your scenario via JavaScript. Most components in a multi-touch scenario can have a script assigned to it. Since JavaScript is a powerful scripting language, there is no limit to how you can modify the components in ~sedna touch.

This section gives just a cursory overview of how to use JavaScript to improve your multi-touch scenarios. In no way can it replace a study of JavaScript in particular or experience with programming languages in general. This means some effort is needed to master JavaScript.

The next section shows how to create scripts. Since the available functions are categorized as Project Functions and Element Functions, the further sections briefly describe these functions.

Creating Scripts

The JavaScript option is located in the Advanced section of any component in the Inspector Properties tab. Click on the Add button to open the script editor for a new script. If a script already exists, the button label will change to Edit.

There you can edit your script. With JavaScript you do what is done with any programming language: declare variables, functions and events you are working with, and set the property values of objects depending on specific conditions.

Note: To quickly see whether a component has a script assigned to it, check the Scene Manager. Any component with an assigned script has a icon on the right hand side.

Project Functions

Project Functions give you access to objects related to the whole project. For instance, the .find(name) function assigns project components to script variables giving you concrete objects you can work with. The .asset(name) function assigns an asset to a variable. Other functions allow you to read, write or delete files and directories.

Element Functions

The various Element Functions are the bread-and-butter functions that create dynamic content. With a few exceptions, most object properties can be accessed and modified. Note that most functions can both set and retrieve the current value of a component.

The Element Functions are further categorized as follows.

Script Triggering and Runtime

A script is triggered each time the component it is assigned to is activated. As long as the corresponding component or its parent, grandparent etc. is inactive, the script is not run. If a component is activated, then deactivated, then activated again, the script is run again. Switching styles does not trigger the script.

You can write a script so that it does a one-time job when it is run. However, although it requires attention, you can also implement an infinite loop and let the script run on doing its job.

Within a script, you can implement event handlers that stay active. These event handlers monitor events like touching, pressing, releasing components, even if the mother script does not run anymore. Whenever such an event occurs, the event code is triggered doing whatever you want it to.

Scope of a Script

The scope of a script is important to how you code. Declared variables stay valid only in the scope of a script, you can't modify variables declared in another script. However, with script assigned to different components you can access all components and therefore change the same objects from different scripts.

The scope also affects the expressions available. For instance, the self reference always refers to the component the script is assigned to. You may implement a self.on("touched",function()) event handler in a button object named "Knob". This event handler waits for a touch event on Knob and runs some code.

If you want to implement the same handler from another object, you need the .find function to identify the button. The corresponding code would be like project.find("Knob").on("touched",function()). This is more complicated and holds some error potential if there are other objects called "Knob" in the project.

Project Example

You can see some simple code snippets in the exemplary Hello World project. The project is part of the JavaScript SDK that you can download from the Resources section on our homepage. Download the corresponding file, unzip it and navigate to the JavaScript Example projects folder. Then open the Hello World.tcproj file in Touch Creator.

First take a look at the Button 1 component. Its Text property is set to "Original Text". However, you will never see that label in Preview Mode, for the script sets the Text property to "Hello world" when ever the component is activated. This is the code:

The next example is a bit more sophisticated. Take a look at the Press and release component. Open the corresponding script. It says:

The first code section implements a Pressed event handler. When the component is pressed, its text and background color are changed. The second section handles the release of the component changing text and background back.

Now to the last part. The two Hide and Show buttons do what they say: They hide and show the text that is shown above them. The declared text variable associates the Text 1 component and hides it in the text.hide() line. The Hide button has the following code.

The Show button does very much the same, except that it shows the Text 1 component again.

JavaScript SDK

For more details on this object model please download the JavaScript SDK (software development kit) from the ~sedna resources page. The SDK also contains a description of the ~sedna JavaScript API (application programming interface).

We hope this page was successful in raising your interest in scripting. If you wish to get advanced control of your multi-touch scenarios, we recommend you get familiar with both JavaScript and the ~sedna touch JavaScript API.

Good luck with animating your multi-touch scenarios using JavaScript !

© ~sedna gmbh 2016