ViSi-Genie: Tank
Details
| Number | 4D-AN-00026 |
| Difficulty | Medium |
| Supported Processors | PICASO, DIABLO-16, PIXXI-28, PIXXI-44 |
| Supported Environments | ViSi-Genie |
Description
The project developed in this application note demonstrates basic touch functionality and object interaction. The user moves or touches the slider, and the tank and LED digits change their values to correspond with the slider’s change in status. By default, input objects such as the slider respond to touch. The user can configure an input object to drive an output object such as the tank or the LED digits.
Prerequisites
- General: How to Update the PmmC for DIABLO-16
- General: Migrating from PICASO-SGC-GFX to PICASO
- General: How to Update the PmmC for PICASO
- General: Partitioning a micro-SD into FAT and RAW Components
Application Overview
It is often difficult to design a graphical display without being able to see the immediate results of the application code. ViSi-Genie is the perfect software tool that allows users to see the instant results of their desired graphical layout with this large selection of gauges and meters (called objects or widgets). The user can simply click on the desired widget to select it and click on the simulated display to place the widget. The following are examples of widgets used in this application note.
The project developed in this application note demonstrates basic touch functionality and object interaction. The user moves or touches the slider, and the tank and LED digits change their values to correspond with the slider’s change in status. By default, input objects such as the slider respond to touch. The user can configure an input object to drive an output object such as the tank or the LED digits.
Setup Procedure
For instructions on how to launch Workshop 4, how to open a ViSi-Genie project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note:
ViSi-Genie: Getting Started with PICASO Displays
ViSi-Genie: Getting Started with DIABLO-16 Displays
Create a New Project
For instructions on how to create a new ViSi-Genie project, please refer to the section “Create a New Project” of the application note.
ViSi-Genie: Getting Started with PICASO Displays
ViSi-Genie: Getting Started with DIABLO-16 Displays
Design the Project
Everything is now ready to start designing the project. Workshop 4 displays an empty screen, called Form0. A form is like a page on the screen. The form can contain widgets or objects, like trackbars, sliders, displays or keyboards. Below is an empty form.
At the end of this section, the user will able to create a form with four objects. The final form will look like as shown below, with the labels excluded.
The procedure for adding each of these objects will now be discussed.
Adding a Tank
The tank can be used to visually represent how much of a container is occupied. In this example, the tank is used as a water level indicator. In real world applications, water level can be determined using various kinds of sensors - ultrasonic, resistive, pressure, etc. Through ADC or use of timers, a host controller can convert the output signal of these sensors (pulse or usually voltage) to binary levels or time intervals. These values can be further scaled or translated to values within a range of 0 to 100, which can be sent to a 4D display module to drive the tank object. To illustrate:
In this project, the values to be received from an external host controller will be simulated using a slider instead. The slider, when moved, will send values to the tank. The tank will then change its level or value. To add a tank, go to the Gauges pane then click on the tank icon.
Click on the WYSIWYG (What-You-See-Is-What-You-Get) screen to put the tank in place. The WYSIWYG screen simulates the actual appearance of the display module screen.
The object can be dragged to any desired location and resized to the desired dimensions. The Object Inspector on the right part of the screen displays all the properties of the newly created tank object named Tank0.
Take time to experiment with the different properties. Take note of the maximum and minimum values. These will correspond to the maximum and minimum values of the slider. The final appearance of the tank used in this project is shown below.
The shape and containers properties can also be edited to come up with different tank shapes.
Adding LED Digits
The LED digits object updates its value when the value of Tank0 has changed. To add a LED digits object, go to the Digits pane and select the first icon.
Click on the WYSIWYG screen to place the object.
Go to the Object inspector and set the following property values.
The updated appearance of the LED digits object is shown below.
Adding a Slider
The slider responds to the user’s touch and drives the tank and LED digits. To add a slider, go to the Inputs pane and click on the slider icon.
Click on the WYSIWYG screen to place the slider. Drag the object to any desired location.
In the Object Inspector, the minimum value is 0 and maximum value is 100 by default. The slider in this project has the following properties.
The final appearance of the slider is shown below.
Configure the Slider
The OnChanged Event
An input object such as the slider can be configured to change the status of another object when its status has changed. To do this, click on the Events tab in the object inspector and click on the 
symbol in the OnChanged line.
The On event selection window appears. Select Tank0Set and click OK.
The Events pane is now updated.
Now when Slider0 has moved, it sends its value to Tank0. Tank0 then change its status to reflect the value received from Slider0.
Linking Objects
After having linked Slider0 to Tank0, it is also possible to further extend the link by configuring Tank0 to send its value to Leddigits0. To do this, click on Tank0 to select it. Select the Events tab in the object inspector and click on the symbol in the OnChanged line.
The On event selection window appears. Select Leddigit0Set and click OK.
The Events pane is now updated.
Now when Slider0 has moved, it sends its value to Tank0. Tank0 then changes its status and sends a value to Leddigits0. Leddigits0 receives and displays the value from Tank0. To learn more about how objects are linked and classified (input/output/combined), refer to the ViSi-Genie User Guide.
Adding Scale
To add a scale, go to the Backgrounds pane and click on the scale icon.
Click on the WYSIWYG screen to place the object.
The Object Inspector on the right part of the screen displays all the properties of the newly created scale named Scale0. The scale object used in this project has the following properties.
Shown below is the final appearance of the scale.
Adding a Static Text
To add a static text, go to the Labels pane and click on the static text icon.
Click on the WYSIWYG screen to place the object. Drag it to any desired location.
Change the caption in the object inspector.
The WYSIWYG screen is updated accordingly.
Now add two more static text objects – “Input” and “Water Tank”.
Build and Upload the Project
For instructions on how to build and upload a ViSi-Genie project to the target display, please refer to the section “Build and Upload the Project” of the application note.
ViSi-Genie: Getting Started with PICASO Displays
ViSi-Genie: Getting Started with DIABLO-16 Displays
The uLCD-32PTU and/or the uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.
Write to Tank Object
The slider sends values to the tank to simulate the values to be received from an external host controller. Being without a host, this application is a stand-alone project with input and output objects. However, it can be made to work with an external host controller thru serial communication. The host controller will send messages to the display module to control the status of the tank. The communication between the display module and the host controller has a protocol (called the ViSi-Genie Communications Protocol) which defines the format of the messages sent and received. This section explains to the user how to interpret these messages. An understanding of this section is necessary for users who intend to interface the display to a host. The ViSi-Genie Reference Manual is recommended for advanced users.
Use the GTX Tool to Analyze the Messages
Using the GTX or Genie Test eXecutor tool is the first option to get the messages sent by the screen to the host. Here the PC will be the host. The GTX tool is a part of the Workshop 4 IDE. It allows the user to receive, observe, and send messages from and to the display module. It is an essential debugging tool.
Launch the GTX Tool
Under Tools menu click on the GTX tool button.
A new window appears, with the form and objects created previously.
The Tank
Change the Status of the Tank
In the GTX tool window, use the up/down buttons of the tank object or type in the box an integer between 0 and 100 and press Set. On the display module, note that the level of the tank has changed.
Also, messages are sent to and received from the display module.
The white area on the right displays
- in green the messages sent to the display module
- and in red the messages received from the display module
The actual message bytes are those inside the brackets. These values are in hexadecimal. The figure preceding the actual message is the computer time at which the message is sent. A label is also included to tell the observer what the message represents.
The message sent is formatted according to the following pattern:
| Command | Object Type | Object Index | Value MSB | Value LSB | Checksum |
|---|---|---|---|---|---|
| 01 | 1A | 00 | 00 | 0D | 16 |
| WRITE_OBJ | Tank | First |
The message stands for “Write to the first tank object on the display module the value 0x000D.” Converting the hexadecimal value 0x000D to decimal will yield the value 13.
The checksum is a means for the host to verify if the message received is correct. This byte is calculated by XOR’ing all bytes in the message from (and including) the CMD or command byte to the last parameter byte. Then, the result is appended to the end to yield the checksum byte. If the message is correct, XOR’ing all the bytes (including the checksum byte) will give a result of zero. Checking the integrity of a message using the checksum byte shall be handled by the host.
ACK = 0x06 as shown below
is an acknowledgment from the display module which means that it has understood the message.
Interrogate the Display for the Status of the Tank
The PC can ask the display module for the value of the tank by sending a message. Now on the display module randomly move the slider to drive the tank. In the GTX tool window press Query.
Observe the message area.
The PC sends a request message. The display module replies with the current value of the tank. The messages sent and received are formatted according to the following patterns.
| Command | Object Type | Object Index | Value MSB | Value LSB | Checksum |
|---|---|---|---|---|---|
| 01 | 1A | 00 | - | - | 16 |
| READ_OBJ | Tank | First | Not Applicable | Not Applicable | |
| 05 | 1A | 00 | 00 | 4F | 50 |
| REPORT_OBJ | Tank | First |
Experimentation with the different objects using the GTX tool is now left to the user as an exercise. The following tables are shown below as a reference. Consult the ViSi-Genie Reference Manual for more information.
This table is in ViSi-Genie Reference Manual.
This table is in ViSi-Genie Reference Manual.