Sparkline Exercise

Exercise

Exercise: Using Sparkline

Please follow the below exercise to understand Sparkline functionality.

Configuration

The following configuration is used to set up this exercise.

Tag Configuration

1. Create the following tags:
   1. Left Button
      • Data type: BOOL
      • Initial value: false
   2. Right Button
      • Data type: BOOL
      • Initial value: false
   3. SparkLine
      • Data type: INT (INT16)
      • Initial value: 0

Script Configuration

2. Create the following scripts:

   1. Left Button
      • Running type: Periodic
   2. Right Button
      • Running type: Periodic

3. Paste the following code into the Right Button script:

while (1) {
	if (tag.read("Right Button")){
		tag.write("SparkLine", tag.read("SparkLine") + 1);
	}
	thread.msleep(50)
}

4. Paste the following code into the Left Button script:

while (1) {
	if (tag.read("Left Button")){
		tag.write("SparkLine", tag.read("SparkLine") - 1);
	}
	thread.msleep(50)
}

• This code will be used for the objects in the next section. If either the left or right button are pressed and held down it will cause the Sparkline to move either up or down depending on which arrow is pressed.

Project Configuration

4. Draw four objects on the screen: Sparkline graph, two vector arrows pointing left and right, and a numeric entry field.

5. Smart bind (drag-and-drop) the SparkLine tag to the sparkline graph and the numeric field.

6. For the left and right vector images, go to Actions, On Press, and select Add New Command.

7. Add a new command and select Set Tag Value.

   • For the left vector image, bind the Left Button tag to the command.
   • For the right vector image, bind the Right Button tag to the command.

8. For the left and right vector images, go to Actions, On Release, and select Add New Command.

   • For the left Vector Image, bind the Left Button tag to the command.
   • For the right vector image, bind the Right Button tag to the command.

Project Deployment

1. Click Tools > Launch Simulator to launch the Canvas Simulator.

2. Press either the left or right arrow buttons to change the Sparkline value.