...
...
...
Create 4 analog tags with “INT16” for Type and “Virtual” for I/O Device.
...
...
Create a clock interface manually or search “3D Silver Clock” in the Image Library, then drag and drop the image to the page.
...
Create an hour hand and a minute hand for the clock using the Line tool, or search “Arrows” in the Image Library, then drag and drop the image to the page.
...
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.
...
On the Edit Script Properties window, configure the “RTC” script Running Type to Startup. As for the “MinuteHandIncrement” and “HourHandIncrement” scripts, set the Running Type to Manual.
...
Edit “CurrentMin” tag to have the script “MinuteHandIncrement” execute when the value changes.
...
Edit tag “CurrentHour” to have the script “HourHandIncrement” execute when the value changes.
...
...
Click on the hour hand object to open the Property Editor pane and bind the “HoursRot” tag to the Rotation under the Transform tab.
...
...
Click on the minute hand object to open the Property Editor pane and blind the “MinutesRot” tag to the Rotation under the Location section.
...
With the current configuration, when updating the value for CurrentHour and CurrentMin in the simulator, the scripts will now update the position of the hands on the clock accordingly.
...
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:
First we will create a button that turns on/off (basic).
Next, we will use that button to gradually control a lamp object (advanced).
Making a Temporary Push Button
A temporary push button is one that only emits a signal while it is pressed. When released, the signal turns off again.
First, make a tag to indicate whether the button is pressed or not (“isPressed”). 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 temporary 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:
| Code Block |
|---|
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:
| Code Block |
|---|
tag.write("isPressed", false); |
At this point, you should have the following in the Script Editor:
...
and 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 image:
...
Changing a Value Gradually
Now, create another tag that will gradually change between 0.0 and 1.0:
...
Instead of a single Switch/Lamp object, we will use two image objects for the lamp. We will use the opacity of the “on“ image to simulate the lamp turning on and off gradually.
Here, we 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:
...
Select the “on” image object, then bind the “amountPressed” tag to its opacity property:
...
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:
| Code Block |
|---|
tag.write("isPressed", true);
var amountPressed = tag.read("amountPressed");
do {
amountPressed += 0.01;
amountPressed = Math.min(1, amountPressed);
tag.write("amountPressed", amountPressed);
thread.msleep(10)
} while (tag.read("isPressed")); |
To summarize how the script works, line by line:
Set the “isPressed” tag to true.
Get the current value and store it to the variable
amountPressed.In a while loop, we do the following:
Increase the value by a small amount (0.01).
Clamp the value so that it doesn’t go over 1.
Write the updated value to the opacity 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:
| Code Block |
|---|
tag.write("isPressed", false);
var amountPressed = tag.read("amountPressed");
do {
amountPressed -= 0.01;
amountPressed = Math.max(0, amountPressed);
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 need to leave any scripts running in the background while the button is not in use.
Now run the project 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.
...