Facebook Pixel

AN-00016 ViSi-Genie Starter Kit Demos Part 2

Description This application note is dedicated to illustrating how to create an application that contains a simple music player, a video player, and an image viewer. Some of the input and output objects used in the ViSi Genie environment are also shown.
Supported Processor PICASO
Supported Environment
ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Description

As a continuation to ViSi-Genie Starter Kit Demos Part 1, this application note is dedicated to illustrating how to create an application that contains a simple music player, a video player, and an image viewer. Some of the input and output objects used in the ViSi Genie environment are also shown. In order to get started, the following are required:

and other superseded modules which support the ViSi Genie environment

Visit www.4dsystems.com.au/products to see the latest display module products that use the Diablo16 processor. The display module used in this application note is the uLCD-32PTU, which is a Picaso/diablo16 display. This application note is applicable to Diablo16 display modules as well.

 

Each object can have properties edited at the click of a button, all relevant code is produced in the user program.

There are nine different projects combined in this application. Each project uses one or more forms, which are in turn linked together by customised buttons. The user can choose a project from the menu screen, and can navigate from the project screen back to the menu screen using buttons.


Input and Output Objects: Keyboard – External Host Processor

This form shows the possibility of using a customized keyboard as an input and an external host processor as an output.

Add a Customized Keyboard Object

After having created a new form with a background image, go to the Inputs pane and select the keyboard icon.

Click on the WYSIWYG screen to place it.

The object can be dragged and resized. The properties can be edited in the Object Inspector. Now click on the  symbol in the KeyboardType line of the Object Inspector.

The Keyboard Editor window appears. Select Custom for the Keyboard Type.

Then click on the Load button on the lower left part of the window.

A standard Open window file appears and asks for a keyboard layout file. The keyboard layout file used in this application is found here: …\StarterKitDemos.ImgData\. After selecting the file, click open. A customized keyboard now appears.

Change the Keyboard Width and Height to 121 and 161, respectively. Click OK. The WYSIWYG screen is now updated.

For a detailed discussion on customizing keyboards, refer to ViSi-Genie Customised Keyboard.

Add Image Objects

To add an image object, go to the System/Media pane and click on the image icon.

Click on the WYSIWYG screen to place the object. A standard Open window appears. The image files used in this example are found here: …\StarterKitDemos.ImgData\. The image objects can be resized and dragged. The properties can be edited in the Object Inspector. The WYSIWYG screen is now updated.

Refer to ViSi-Genie Show Image for more information on adding image objects in ViSi Genie.

Add Static Text Objects

The text objects are used to label the different parts of the form. Follow the procedure described in the previous forms to complete the labels as shown below.

Add the Navigation Buttons

The navigation buttons are similar to those created in the image viewer. Creating and configuring these buttons are left as an exercise for the reader. The image files used as button icons in this form are found here: …\StarterKitDemos.ImgData\. When finished the final form should look similar to the one shown below.

Build and upload the program. Go to Build ans Upload the Project for the procedure.

Serial Data

To view the serial data from the keyboard, we will use the GTX (Genie Test Executor) tool. Eject the uSD card from the PC and plug it in to the uSD slot of the display module. Select the Tools menu and click on the GTX button.

A new window appears and displays the forms and objects created. Click on Form11 to activate the customised keyboard form. The module will now display the keyboard form.

Press and release any of the keyboard buttons and notice the corresponding outputs on the right side of the GTX window.

The message in green is from the PC to the display module. The messages in red come from the display module and go to the PC. Here the display module is sending report event messages to the PC. The PC can be replaced with any host controller. To understand more about the ViSi Genie communications protocol, refer to ViSi-Genie-Reference-Manual.

Input and Output Objects: Slider – Cool Gauge and LED Digits

Similar Forms

This form is very much similar to the Trackbar – Meter and LED Digits form (Form10). The trackbar is replaced with a horizontal slider, and the meter is replaced with a cool gauge. The slider icon is found in the Inputs pane, beside the trackbar icon.

The cool gauge is located in the Gauges pane.

The procedure for creating Form10 (Input and Output Objects: Trackbar – Meter and LED Digits) can be used to create this form. Don’t forget to configure the navigation buttons properly and link this form to the Next button of Form11 (Input and Output Objects: Keyboard – External Host Processor).

Input and Output Objects: Knob – LED Digits

This form shows how to use a knob as an input and a LED digits object as an output. The background image also sugggests the possibility of using the Picaso/diablo16 display module in controlling and monitoring an external system through serial communication. The knob, when moved, is configured to send data to an external host – a microcontroller-driver circuit. The MCU-driver unit controls the rotation of a motor. The rotary encoder, coupled to the shaft of the motor in a manner which depends on the application, returns data to the MCU. This data is used to interpret the direction of rotation and angle of the motor shaft with respect to a reference.

Add a Knob Object

Add a new form with a background image. The image file used in this example can be found here: …\StarterKitDemos.ImgData\. To add a knob, go to the Inputs pane and click on the knob button.

Click on the WYSIWYG screen to place it. The figure below shows the form with a background image and a knob.

The Object Inspector shows the different properties of the knob. Now we will add a dial scale. Click on the  symbol of the Backimage property.

A Picture Editor window appears. Click on Load, browse for the desired image file, and click OK.

The image file used in this example is found here: …\StarterKitDemos.ImgData\.

The WYSIWYG screen is updated.

Now apply the following additional properties to the knob.

Add a LED Digits, Static Text, and Navigation Button  Objects

Follow the procedures described previously in adding a LED digits and static text objects. Do the same for the navigation buttons. The static text objects are used to label the different parts of the form. Also, don’t forget to configure the navigation buttons properly and to link this form to the next button of Form12. The complete form is shown below.

Serial Data from the Knob and to the LED Digits Object

We will now read and write data from the knob and to the LED digits object with the use of the GTX (Genie Text Executor) tool. The host controller is the PC in this case. In other applications, the PC can be replaced with a microcontroller. Configure the knob as shown below.

When Knob0 is turned, it raises the OnChanging event. When the OnChanging event arises, a message is sent to the PC.

To open the GTX tool, go the Tools menu, then click on the GTX tool.

A new window now appears showing the different objects of the application.

There are three forms in this specific window, Form0 being the one we are working on. The program is reduced to three forms instead of thirteen at this point only, to simplify the tutorial.  Now click on the Form0 button to display the first form.

Notice that on the right part of the screen, you can see the messages sent to and received from the display module.

The message in green is from the PC to the display module; the message in red is from the display module to the PC. All values are in hexadecimal. The message in green is formatted according to the following pattern:

To display Form1 or the second form (if a program has multiple forms), the value of the object index is changed to 0x01; for the third form, 0x02, and so on.

The message in red is an acknowledgment from the display module.

Now move the knob handle on the display module. Notice the new set of messages on the white area of the GTX window.

To interpret the first of the new set of messages:

The minimum and maximum values for the knob are 0 and 358 (decimal), or 0x0000 and 0x0166. The messages are sent when the knob is being moved because Message has been defined for the event OnChanging, which is raised as many times as long as the slider is  being moved.

Now input the value “345” for the middle box under the Leddigits label and click on the set button.

Again, the program has been simplified at this point to have only three LED digits objects. The boxes from left to right correspond to Leddigits0, Leddigits1, and Leddigits2, respectively. We are interested in Leddigits1 (the middle box). To check which LED digits object you should set, close the GTX window, and check the name of the LED digits object controlled by Knob0, or whichever knob object you are working with.

After having clicked the set button, notice that the LED digits object on the display module now shows the value “345”.

The white area also displays a new set of messages.

To interpret:

Again, the message in red is an acknowledgement from the display module.

In summary:

Now we replace the PC with a microcontroller with a motor-encoder system.

The format for the messages transmitted between the Picaso/diablo16 display module and the host in this appication note is defined in the Genie Standard Protocol. For further references, refer to the following documents:

ViSi Genie Reference Manual

ViSi-Genie Connection to a Host with Red Green Blue Control

Input and Output Objects: DIP Switch – User LED and LED Digits

This form shows the basic use of DIP switches and user LEDs.

Add a DIP Switch Object

Create a new form. To add a DIP switch, go to the inputs pane and click on the DIP switch icon.

Click on the WYSIWYG screen to place it.

The object can be dragged and resized. The properties can be edited in the Object Inspector. Apply the following properties to the DIP switch:

Add a User LED Object

To add a user LED, go to the Digits pane and select the user LED icon.

Click on the WYSIWYG screen to place it.

The object can be dragged and resized. The properties can be edited in the Object Inspector. Apply the following properties to the user LED:

When done, the user LED, together with the DIP switch, should look as shown below:

Link the User LED to the DIP Switch

To make the DIP switch control the user LED, configure it as shown below.

Create Additional Pairs of User LED and DIP Switch

Now create two more sets with the colors green and blue. Also configure the DIP switches to control the corresponding user LEDs. When finished, the form should look as shown below.

To test the program, go to page 65 for instructions. Note that the DIP switch has two positions by default, with:

0 or off as value when the switch is on top or leftmost position

 

 

1 or on as value when the switch is on the bottom or rightmost postion

 

 

Add a DIP Switch – LED Digits Pair

A DIP switch can be configured to have more than two positions. Add another DIP- switch object and apply the following properties:

Note that the NumPositions property has a value of 11. When done, the DIP switch will look as shown below.

Now add a LED digits object which will display the position of the DIP switch. Also, configure the DIP switch as shown below to control the LED digits object.

Add Navigation Buttons, Static Objects, and a Background Image

The navigation buttons used here are similar to those created in the previous forms. Make sure that they are configured correctly. Also, configure the next button of Form13(the previous form) to display this form when pressed and released. To make the interface more intuitive, a background image has been added (located here: StarterKitDemos.ImgData\). The final apperance of the form is shown below.

For detailed information on the use of the DIP switch and the user LED, refer to:

ViSi-Genie Inputs

ViSi-Genie Digital Displays

Input and Output Objects: Rocker and Rotary Switches – LED and LED Digits

This form shows the basic use of the rocker switch, the rotary switch, and the LED.

Add a Rocker Switch

Create a new form. To add a rocker switch, go to the Inputs pane and click on the rocker switch icon.

 

Click on the WYSIWYG screen to place it.

Apply the following properties to the rocker switch:

Add an LED Object

To add an LED, go to the digits pane and click on the LED icon.

 

Click on the WYSIWYG screen to place it then apply the following properties:

When done, the LED, together with the rocker switch, will look as shown  below.

Link the LED to the Rocker Switch

Configure the rocker switch as shown below.

Now create two more pairs – blue and green in color. Also, configure each rocker switch to correspond to the proper LED.

Add a Rotary Switch – LED Digits Pair

To add a rotary switch, go to the Inputs pane and click on the rotary switch icon.

Click on WYSIWYG screen to place it.

In the Object Inspector, click on the  symbol of the SwitchPositions property line.

The String List Editor window appears. Type in the letters from A to K then click OK.

The value of the SwitchPositions property is updated.

Apply the following additional properties to the rotary switch.

When done, the rotary switch will look as shown below.

Now add a LED digits object to display the value of the rotary switch when turned. Configure the rotary switch to control the LED digits as shown below.

Add Navigation Buttons, Static Objects, and a Background Image

The navigation buttons used here are similar to those created in the previous forms. Make sure that they are configured correctly. Also, configure the next button of Form14 (the previous form) to display this form when pressed and released. To make the interface more intuitive, a background image has been added (located here: StarterKitDemos.ImgData\). The final apperance of the form is shown below.

For detailed information on the use of the rotary switch and the LED, refer to:

ViSi-Genie Inputs

ViSi-Genie Digital Displays

 

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 – First Project for Picaso Displays (for Picaso/diablo16)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

Share: