AN-00009 ViSi-Genie Inputs

Description

This Application Note explores the possibilities provided by ViSi-Genie for the Input objects:
• Knob
• Rotary switch
• Slider
• Track-bar
• Keyboard
• DIP-switch
• Rocker

 

Supported Processor DIABLO16, PICASO
Supported Environment ViSi-Genie
Difficulty Medium

 

File Downloads
Files

This Application Note explores the possibilities provided by ViSi-Genie for the Gauges objects:

 

This application note requires:

  • Workshop 4 has been installed according to the document Workshop 4 Installation;
  • The user is familiar with the Workshop 4 environment and with the fundamentals of ViSi-Genie, as described in Workshop 4 User Guide and ViSi-Genie User Guide;
  • When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics discussed in these recommended application notes.

Seven ViSi-Genie projects are provided as examples to help you along this application note.

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 the user to see the instant results of their desired graphical layout with this large selection of gauges and meters that can simply be dragged and dropped onto the simulated module display.

  • Knob 
  • Rotary switch
  • Slider
  • Track-bar
  • Keyboard
  • DIP-switch
  • Rocker

Each object can have properties edited and at the click of a button, all relevant code is produced in the user program. Each feature of ViSi-Genie will be outlined with examples below.

  Setup Procedure

This application note comes with a zip file which contains two ViSi-Genie projects.

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

or

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

 

  Create a New Project

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

or

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

 

  Simulation Procedure

You can load the example…

Example:  4D-AN-00009 PICASO – Knob or 4D-AN-00009 DIABLO16  – Knob

…orfollow the procedure described hereafter.

Select the Home menu to display the objects:

The Input object is located on the Inputs pane:

 

To add an object, first click on the desired icon, here start with the first one, the Knob

…and then click on the WYSIWYG screen to place it.

 

Add a meter as output object…

 

…from the Gauges pane…

 

…and place it on the right of the form:

 

Define the event onChanging for the Knob0 as Meter0Set:

 

Each time the knob is rotated, the meter is updated accordingly.

  Knob Options

You can load the example…

Example:  4D-AN-00009 PICASO – Knob or 4D-AN-00009 DIABLO16  – Knob

…or follow the procedure described hereafter.

The options are listed on the Object Inspector:

Standard options are font, colour, size, back image… are not going to be discussed here.

 

Minimum and Maximum

Minimum and maximum are defined by:

Base Angle

The base angle sets the point 0 for the knob:

   
   

 

Radius

The radius defines the position of the red dot:

   
   

 

  Rotary Switch Options

You can load the example…

Example:  4D-AN-00009 PICASO – Rotary Switch or 4D-AN-00009 DIABLO16 – Rotary Switch

…or follow the procedure described hereafter.

Start with a new project and select the Rotary Switch…

…from the Inputs pane…

…and then click on the WYSIWYG screen to place it.

 

Add a LED digits object as output object…

 

…from the Digits pane…

 

…and place it on the bottom of the form:

 

Define the event onChanging for the RotarySwitch0 as LedDigits0Set:

Each time the rotary switch is changed, the LED digits are updated accordingly.

Define the Positions

The rotary switch has no position, so the first step is to define positions.

Select the line SwitchPositions


…and click on the  to display a new window:

The labels of the different positions of the rotary switch are defined in the String List Editor window.

Enter each position on a separate line…

…and click  to confirm.

The SwitchPositions line is updated with the values…

…as the rotary switch on the form:

 

Improve the Interface

The screen isn’t especially nice!

How to reach that nicer one?

Change first the colour of the back-ground to black…

…then the colour of the text to white…

…and finally the colours of the different parts of the rotary switch to shades of blue…

…to obtain a much more pleasant interface:

Other Options

Labels can be hidden:

   
   

 

Offset can be changed:

   
   

 

Radius can be modified…

   
   

…as the size of the winch:

   
   

 

Angle Options

Two angles of the rotary switch can be set:

   

Here is the final result…

…with the properties associated:

 

  Slider Options

You can load the example…

Example:  4D-AN-00009 PICASO – Slider or 4D-AN-00009 DIABLO16 - Slider

…orfollow the procedure described hereafter.

 

The Slider object is located on the Inputs pane:

To add an object, first click on the desired icon, here start with the first one, the Slider

 

…and then click on the WYSIWYG screen to place it.

 

Add a meter as output object…

 

…from the Gauges pane…

…and place it on the right of the form:

Define the event onChanging for the Slider0 as Meter0Set:

Each time the slider is moved, the meter is updated accordingly.

The bevel offers many options to customise its presentation:

 

Minimum and Maximum

Minimum and maximum are defined by:

 

Slider Options

The options related to the slider include:

Orientation can be vertical or horizontal:

   
   

There are two colours to define: one for high, another for low:

Choosing two contrasted colours provides an instant feed-back on the position selected.

Spacing can be adjusted…

   
   

 

…and set to solid or no…

   
   

 

…and ticks size changed:

   
   

 

  Track-Bar Options

You can load the example…

Example:  4D-AN-00009 PICASO – Track Bar or 4D-AN-00009 DIABLO16 – Track Bar

…orfollow the procedure described hereafter.

The Track-bar object is located on the Inputs pane:

 

To add an object, first click on the desired icon, here start with the first one, the TrackBar

 

…and then click on the WYSIWYG screen to place it.

 

Add a meter as output object…

…from the Gauges pane…

…and place it on the right of the form:

Define the event onChanging for the TrackBar0 as Meter0Set:

Each time the track-bar is moved, the meter is updated accordingly.

Minimum and Maximum

Minimum and maximum are defined by:

Orientation Option

Orientation can be vertical or horizontal:

   
   

Colours Options

Changing the colours options to obtain this…

 

…requires coordinating the colour of the object, Color, and the colour of the ticks, TickColor:

 

Gutter Options

The gutter offers many options to customise its presentation:

 

  Keyboard Options

You can load the example…

Example:  4D-AN-00009 PICASO – Keyboard or 4D-AN-00009 DIABLO16 - Keyboard

…orfollow the procedure described hereafter.

To add a keyboard, select the Inputs pane…

 

…then the Keyboard object…

 

…and finally click on the screen to place it:

Select the Keyboard Type

The object inspector shows all the properties of the keyboard:

To select the keyboard, we need to change the keyboard type:

To do so, click on the KeyboardType line:

A  symbol appears. Click on it.

A new window appears: the Keyboard Editor.

 

On top of the window, different keyboard types are proposed:

ViSi-Genie comes with various defined ready-to-use keyboards:

  • QWERTY keyboard, by default,

  • Cell-phone keyboard

  • Numeric keyboard

  • And a customised keyboard.

Customise the Keyboard

The customisation of the keyboard is detailed in the application note ViSi-Genie Customised Keyboard with a step-by-step guide to define a PIN code keyboard:

  DIP-Switch Options

You can load the example…

Example:  4D-AN-00009 PICASO – DIP Switch or 4D-AN-00009 DIABLO16 – DIP Switch

…orfollow the procedure described hereafter.

Start with a new project and select the DIP-switch…

…from the Inputs pane…

…and then click on the WYSIWYG screen to place it.

 

Add a LED digits object as output object…

…from the Digits pane…

…and place it on the bottom of the form:

 

Define the event onChanging for the DipSwitch0 as LedDigits0Set:

Each time the DIP-switch is changed, the LED digits are updated accordingly.

The options relative to colours for the different parts of the DIP-switch are defined under Background

 

…and Thumb:

Orientation Option

The DIP-switch can be vertical or horizontal:

   
   

 

Define the Orientation

The DIP-switch has two positions by default, with:

  • 0 as value when the switch is on topmost of leftmost position

                                                                      

  • 1 as value when the switch is on bottommost or rightmost position

                                                                    

           

Define the Positions

To define the number of positions, select the line NumPositions

…and enter the number of positions desired, here 3:

This adds an intermediate position:

                                                                     

 

Numbering is always the same, starting at 0 when the switch is on topmost or leftmost position, and increasing when going down or right:

 

Value

Vertical

Horizontal

0

   

1

   

2

   

 

  Rocker Options

You can load the example…

Example:  4D-AN-00009 PICASO – Rocker Switch or 4D-AN-00009 DIABLO16 – Rocker Switch

…or follow the procedure described hereafter.

Start with a new project and select the rocker switch…

…from the Inputs pane…

…and then click on the WYSIWYG screen to place it.

Add a LED digits object as output object…

…from the Digits pane…

…and place it on the bottom of the form:

Define the event onChanged for the RockerSwitch0 as LedDigits0Set:

Each time the rocker switch is changed, the LED digits are updated accordingly.

 

The options relative to colours for the different parts of the rocker switch are defined under LED

…and SwitchColours:

Define the Orientation

The rocker switch has 4 different orientations:

The orientation refers to the position of the LED.

Left

Right

   

Top

Bottom

   

 

The rocker switch has two positions, off and on, and thus two values:

Value

      Position

0

 

Off

1

 

On

 

  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)

or

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

 

The uLCD-32PTU and/or the uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.

 

 

  Debugger Output

Setting the handler to Message sends the values to the debugger, Genie Test Executor or GTX.

Launch the Debugger

To launch the Genie Test Executor or GTX, select the Tools menu…

…and then click on the GTX button.

A new screen appears, with the form and objects we have defined on the rotary switch example:

Note the labels are displayed on the debugger window exactly as they are on the screen module.

 

Use the Debugger

Setting a Value to the Track-Bar

To set a value for the track-bar, move the rotary switch to Half speed…

                                                 

…and then click on . The screen module redraws the rotary switch and the LED digits with the new value:

The right part of the GTX window displays the command sent with position 00 01and the acknowledgement 06:

Set Rotaryswitch Value 14:40:07.929 [01 03 00 00 01 03]

ACK 14:40:08.007 [06]

Reading a Value from the Track-Bar

On the screen module, place the rotary switch on the Full speed position:

To read the value of the rotary switch, click now on .

The debugger shows the new value corresponding to the second position Full Speed…

…and the right part of the GTX window displays the command sent and the answer, here 0002:

Request Rotaryswitch Value 14:41:36.472 [00 03 00 03]

Rotaryswitch Value 14:41:36.519 [05 03 00 00 02 04]

 

Share: