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:

Set the “isPressed” tag to true.
Get the current value of the “amountPressed” tag and store it to the variable amountPressed.
In a while loop, we do the following:
Increase the value by 1.
Clamp the value so that it doesn’t go over 100.
Write the updated value to the “amountPressed“ tag.
Sleep for a small amount of time (10 milliseconds).
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.

13.1.7 Exercise

Making a Temporary Push Button

Changing a Value Gradually