Introduction

The Script Editor allows Chameleon Designer users to define custom logic that runs in the Chameleon Web Server (aka Ticker Player). Each scene has its own scripts, although global functions can be defined for the project if multiple scenes need the same logic. Scripts and animations are triggered by the same events: Scene In, Scene Out, Update In, Update Out and Loop.

Scripts are written in CoffeeScript and can access and update many properties of the objects in a scene. For example, a script could set the color of a quad based on the current contents of a text object.

The Script Editor

To launch the Script Editor, select a scene and click here:

Open

That opens the Script Editor for the selected scene:

Open

At the top are three tabs. The Event Handlers tab is where you select an event and write a script for it. The Global Functions tab lets you write logic that can be used by multiple scripts (see below), and the Sample Scripts tab lets you browse a number of examples.

The Enabled checkbox lets you disable a script. The Animated checkbox and Duration value are used with animated scripts, which are explained below.

The Check button at the bottom checks the script for errors, and displays error messages in the area just above the buttons. Scripts are also checked when you click Save.

Getting Started

Before writing your first script, it's best to review the examples in the Sample Scripts tab. Note that you can copy code from there and paste it into your own script. It's easy to get going with simple scripts. For example:

Objects are identified by ID, as in object[1000] or object[1001]. To insert an object reference, you can drag it from the object tree on the left and drop it into the script where you want it.

When you type the period at the end of “object[xxxx].”, where xxxx is the ID, the editor will display a list of properties for you to choose from, like this:

The list of properties depends on the object type, e.g. FontSize is displayed for text objects only.

Here are a couple of examples of setting a property based on a condition:

Indentation is used to indicate which statements fall within the scope of the “if” statement. The colors above are assigned RGB arrays. See the Color sample script for more detail on setting colors.

Animated Scripts

Animated scripts provide a flexible alternative to writing animations using the Animation Editor. To write an animated script that runs for 2.0 seconds after an Update In event occurs (i.e. after new data is applied), select the Update In event, check the Animated box, and set Duration = 2.0.

The script will be called repeatedly with different values assigned to a predefined variable called “time”. The following animated script will increase the font size from 50 to 200 over 2 seconds:

It uses a built-in function called “builtin.Interpolate”. The first two parameters are the starting and ending values you want, the next two are the starting and ending times, and the last is the “time” variable. If the statement above is called at the 1-second mark, it will set the font size to 125, which is half way between 50 and 200.

Global Functions

If you click the Add button at the top of the Global Functions tab, you will see the Add Global Function dialog:

For example, suppose you want a function that writes an object's name, X and Y coordinates to the browser console while you are debugging scripts. You could provide a name of “LogObject” and a parameter of “obj”, and write it like this:

Then you could write a corresponding log statement from any script like this:

Search and Replace

Click Ctrl-F in the Script Editor to bring up the Search and Replace dialog: