Using the [Script Editor] feature, an analog clock can be created. To accomplish this, the user will need to create 4 tags, all of them ‘INT16’ tags on a local device as shown in the below image.

...

Once the tags have been created, the user can create a clock interface on their own, or drop in the ‘3D Silver Clock’ object from the [Graphic Library]. Once this clock has been created, use the line tool to create two hands for the clock, as shown below.

...

Once the clock has been created, the user will need to create three scripts. One script establishes a real-time clock and writes the current hour and minute into their own tags, and the other two are used to control the rotation of the hands of the clock.

...

The ‘RTC’ script should be configured to run on startup from the script properties window, the other two scripts should be configured to run when manually called. Next, the user can configure the ‘MinuteHandIncrement’ script to run when the tag ‘CurrentMin’ changes values. A similar setup can be applied for the ‘HourHandIncrement’ script and the ‘CurrentHour’ tag as shown in the below screenshot.

...

Lastly, the user will need to bind the rotation of the clock hands to the ‘HoursRot’ and ‘MinutesRot’ tags, as shown in the below images.

...

With the current configuration, the scripts will now update the position of the hands on the clock to match the current time.

...

For this exercise, we will create a button that gradually turns a lamp on when pressed, then off again when unpressed.

We will split this up into two parts:

• Create a temporary push button (basic).

• Use the button to gradually control a lamp object (advanced).

Making a Temporary Push Button

A temporary push button is a button that only emits a signal while pressed. When released, the signal turns off again.

First, make a tag called “isPressed” to indicate whether the button is pressed or not. Do this by going to the Tag Editor pane, then choosing Add Tag:

...

In the Edit Tag window, use the settings shown below:

...

For the push button, we’ll use a Switch/Lamp object. Press Insert → Switch/Lamp, then draw the object on the page:

...

Then, bind the “isPressed” tag to the object’s “Value” property. This can be done by dragging the tag from the Tag Editor pane to the Basic Properties (Switch/Lamp) pane:

...

To make this look more like a push button, we’ll choose a different image for each state. Use “Push Button Static“ for state 0, and “Push Button Active” for state 1.

...

Now we will assign scripts to the button’s touch actions.

Select the button object. Then, in the “Actions” pane, go to “On Press”, then “Action”, then choose “Create New Script”:

...

In the Script Editor, rename the script to “On Press”, then replace the default script contents with the following:

tag.write("isPressed", true);

Next, assign a new script to the button’s “On Release” property in the same way. Name the script “On Release”. For this script, use the following contents:

tag.write("isPressed", false);

At this point, you should have the following in the Script Editor:

...

and you should have the following in the Actions pane for the button object:

...

When the button is pressed, the “On Press” script will be triggered, setting the “isPressed” tag to true.

When the button is released, the “On Release” script will be triggered, setting the “isPressed” tag to false.

Save the project and run the simulator. Pressing and releasing the button should change the Switch/Lamp state:

...

Changing a Value Gradually

Now, create another tag that will gradually change between 0 and 100:

...

Instead of a single Switch/Lamp object, we will use two image objects to represent the lamp. We will bind a tag to the opacity of the “on“ image to simulate the lamp turning on and off gradually.

We will use the images “3D Lamp Off 010” and “3D Lamp On 010” from the Graphic Library:

...

Position the images so that they overlap, with the “on” image displayed on top. Resize the images as desired. You should have the following:

...

Since the opacity property expects a value between 0 and 1, but the tag value will range from 0 to 100, we will use a scaling expression.

Select the “on” image object, then click the binding icon next to its opacity property:

...

In the Binding Properties window, go to the Expressions tab. For the expression type, choose “Scale Tag Value”, then use the following options:

...

Press OK to close the Binding Properties window.

If you run the simulator, you can manually change the value of the “amountPressed” tag using the tag monitor. This should make the lamp look like it is off (0), on (100), or partially on (1–99).

Now we can modify the button’s scripts to gradually increase and decrease the value of the “amountPressed” tag.

Go back to the “On Press” script, then edit its contents so that you have the following:

tag.write("isPressed", true);
var amountPressed = tag.read("amountPressed");
do {
	amountPressed += 1;
	if (amountPressed > 100) amountPressed = 100;
	tag.write("amountPressed", amountPressed);
	thread.msleep(10);
} while (tag.read("isPressed"));

Here is what the script is doing, line by line:

1. Set the “isPressed” tag to true.

2. Get the current value of the “amountPressed” tag and store it to the variable amountPressed.

3. In a while loop, we do the following:

4. Increase the value by 1.

5. Clamp the value so that it doesn’t go over 100.

6. Write the updated value to the “amountPressed“ tag.

7. Sleep for a small amount of time (10 milliseconds).

8. When the “isPressed” tag gets set to false, we end the loop. This happens when the user lets go of the button, in the “On Release” script.

The “On Release” script should be similar, with a few small changes:

tag.write("isPressed", false);
var amountPressed = tag.read("amountPressed");
do {
	amountPressed -= 1;
	if (amountPressed < 0) amountPressed = 0;
	tag.write("amountPressed", amountPressed);
	thread.msleep(10);
} while (!tag.read("isPressed") && amountPressed > 0);

Note that on line 8, we added the condition that amountPressed must be greater than 0 for the cycle to continue. This means that once the value goes back down to 0, the script ends. This way, we don’t leave any script threads running in the background while the lamp is not in use.

Save the project and run it in the simulator. While the button is pressed, the lamp should gradually get brighter. When the button is released, the lamp should gradually get dimmer.

...