AN-00008 ViSi-Genie Gauges

Description : This Application Note explores the possibilities provided by ViSi-Genie for the Gauges objects:
• Meter 
• Gauge
• Angular meter
• Cool gauge
• Thermometer
Supported Processor : PICASO, DIABLO16
Supported Environment : ViSi-Genie
Difficulty : Medium

File Downloads
Files

Description

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.

Six 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.

  • Meter
  • Gauge
  • Angular meter
  • Cool gauge
  • Thermometer

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 Procedures

Select the Home menu to display the objects:

The Gauges objects are located on the Gauges pane:

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

 

 

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

Add a track-bar as input object…

…from the Inputs pane…

…and place it on the left of the form:

 

By default, the track-bar has the following minimum and maximum values:

 

Define the event onChanging for the TrackBar0 as Meter0Set:

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

 

Meter Options

You can load the example…

Example:  4D-AN-00008 PICASO– Meter or 4D-AN-00008 DIABLO16 - Meter

…or follow the procedures 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.

For example, the bevel can be full customised. Press the  close on the line Bevel

…to display all the possible options for the bevel:

The font options are under the line Font

Angle Option

By default, the angle is set to 40°.

 

Here is an example with Angle set to 60°…

                                    

             

…and to 20°:

                                    

              

Minimum and Maximum

Minimum and maximum are defined by:

Just enter the new values.

Labels Options

Three options are available:

The Labels value defines the number of labels.

Default value is 10 labels:

Here an example with 5 labels:

LabelOffsetX and LabelOffsetY define the position of the labels.

Default values are 15 on horizontal axis and 10 on vertical axis:

Setting 20 to LabelOffsetX widens the labels on the horizontal axis:

Setting 15 to LabelOffsetY widens the labels on the vertical axis:

Needle Options

By default, the needle colour is silver and its width is 1:

To increase readability, let’s choose red as colour and 3 as width:

Scale Options

The Scale options are under the line

Click on the  to display them:

Three areas are available, each one with its colour. Colours can be changed. Here the colour of the last area is set to blue:

Areas Options

The areas are defined by two values, Percent1 and Percent2:

  • The first area goes from 0% to Percent1, here from 0% to 60%;
  • The second area covers additional Percent2starting from Percent1, here 25% starting from 60%, so from 60% to 85%;
  • The third area includes what’s left up to 100%, here from 85% to 100%.

Setting Percent2 to 0 skips the 2nd area. The yellow area has disappeared and the red one starts at 60%:

Setting Percent2 to 40 skips the 3rd area. The red area has disappeared and the yellow one goes up to 100%:

Setting Percent1 to 100% skips the 2nd and 3rd areas. Only the green area is shown, from 0% to 100%:

An alternative consists on defining the same colour for different areas.

Ticks Options

The ticks can be hidden by setting Visible to No:

The number of ticks is defined by Ticks, with default value set to 61 on the left. On the right an example of the same meter with 21 ticks:

 

Gauge Options

You can load the example…

Example:  4D-AN-00008 PICASO - Gauge or 4D-AN-00008 DIABLO16 - Gauge

…or follow the procedures described hereafter.

Delete the Meter0 object…

…add a Gauge object…

…to the form…

…and update the event onChanging for the TrackBar0to Gauge0Set:

Orientation Options

The gauge can be vertical or horizontal:

Bevel Options

The Bevel properties include all the options:

Click on the  to show the list:

The bevel can be shown or hidden:

The style of the bevel is selectable among three options:

Scale Options

The gauge is divided in three areas:

Click on the  to display the details:

 

Three areas are available, each one with its colour.

Colours can be changed. Here, the Palette3 is set to blue:

The areas are defined by two values, Percent1 and Percent2:

  • The first area goes from 0% to Percent1, here from 0% to 60%;
  • The second area covers additional Percent2starting from Percent1, here 25% starting from 60%, so from 60% to 85%;
  • The third area includes what’s left up to 100%, here from 85% to 100%.

Setting Percent2 to 0 skips the 2nd area. The yellow area has disappeared and the red one starts at 60%:

Setting Percent2 to 40 skips the 3rd area. The red area has disappeared and the yellow one goes up to 100%.

An alternative consists on defining the same colour for different areas.

 

Angular Meter Options

You can load the example…

Example:  4D-AN-00008 PICASO – Angular Meter or 4D-AN-00008 DIABLO16 – Angular Meter

…or follow the procedures described hereafter.

Delete the Gauge0 object…

…add an Angular Meter object…

…to the form…

…and update the event onChanging for the TrackBar0 to AngularMeter0Set:

Angle Option

By default, the angle is set to 40° and the offset to 280°.

Both parameters are linked.

Here is an example with Angle set to 60°butAngleOffset unchanged…

AngleOffset changed to 240°:

Minimum and Maximum

Minimum and maximum are defined by:

Just enter the new values.

Labels Options

Three options are available:

The Labels value defines the number of labels, with default value 10 labels.

Here an example with 5 labels:

Setting 40 to LabelOffset widens the labels:

Decimal Places

Decimals defines the number of decimal, with default value 2.

Needle Options

By default, the needle colour is red and its length is automatic with the value set to -1:

The dot at the centre is white with a size of 2:

To increase readability, let’s choose 65 as length for the needle:

Let’s change the width of the base and set it to 15:

Centre Dot Options

The dot in the centre can also be customised:

Zone Options

The logic for the zones for the AngularMeter object is the same as the scale for the Meter object.

Three zones are available, each one with its colour…

…and the zones are defined by two percentages:

Colours can be changed. Here the colour of the area in the middle is set to yellow:

The areas are defined by two values, Percent1 and Percent2:

  • The first area goes from 0% to Percent1, here from 0% to 60%;
  • The second area covers additional Percent2starting from Percent1, here 25% starting from 60%, so from 60% to 85%;
  • The third area includes what’s left up to 100%, here from 85% to 100%.
  • Setting Percent2 to 0 skips the 2nd The yellow area has disappeared and the red one starts at 60%:

Setting Percent2 to 40 skips the 3rd area. The red area has disappeared and the yellow one goes up to 100%:

Setting Percent1 to 100% skips the 2nd and 3rd areas. Only the green area is shown, from 0% to 100%:

An alternative consists on defining the same colour for different zones.

Ticks Options

The ticks can be hidden and resized:

The number of ticks is defined by Ticks, with default value set to 100 on the left. On the right an example of the same meter with 50 ticks:

To hide the ticks, just set Ticks to 0:

 

There two kinds of ticks, large and small. A large tick is shown every TicksEnlarge-thtick.

On the left, default is every 10th; on the right, set to every 20th:

The size of the ticks can be customised by changing TicksMax and TicksMin:

Combining different options produce this result, proposed as example:

 

Cool Gauge Options

You can load the example…

Example:  4D-AN-00008 PICASO – Cool Gauge or 4D-AN-00008 DIABLO16 – Cool Gauge

…or follow the procedures described hereafter.

Delete the Angular Meter object…

…add a Cool Gauge object…

…to the form…

…and update the event onChanging for the TrackBar0 to CoolGauge0Set:

The CoolGauge object combines a needle and a display in a rich graphical interface.

Arc and Threshold Option

By default, the arcof the dial starts at 135° and stops at 405°.

The threshold is defined by a StartAngle and a SweepAngle.

Both parameters are linked.

Minimum and Maximum

Minimum and maximum are defined by:

Just enter the new values.

Logarithmic Option

Linear and logarithmic scales are selectable, with the base for the later:

Display Options

The values on the dial can be displayed or hidden.

The same option exists for the digits:

Divisions Options

There are two kinds of divisions. Count, width and colour are selectable:

Thermometer Options

You can load the example…

Example:  4D-AN-00008 PICASO – Thermometer or 4D-AN-00008 PICASO Thermometer

…or follow the procedures described hereafter.

Delete the Cool Gauge object…

 

…add a Thermometer object…

…to the form…

…and update the event onChanging for the TrackBar0 as Thermometer0Set:

Scale Options

The options for Scale are under the line Scale:

The scale can be set to linear or logarithmic:

Offset can be adjusted, with 20 as default:

The size of the step can be adjusted:

Combining different options produce this result:

 

Here is the result with a yellow triangle:

Value Options

Colour and shape can be changed, under the line Value:

Here is the result with an aqua triangle:

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 cool gauge example previously:

Use the Debugger

To set a value for the track-bar, move the slider…

…and then click on . The screen module redraws the track-bar and the cool gauge with the new value.

The right part of the GTX window displays the command sent and the acknowledgement 06:

Reading the Value from the Cool Gauge

To read the value from the cool gauge, click on  on top of the CoolGauges area:

   

The right part of the GTX window displays the command sent and the answer, here 0022 corresponding to 34 in decimal:

 

Setting the Value to the Cool Gauge

To set a value to the cool gauge, enter a value in the box, here 100…

…and click on . The cool gauge is updated on the screen module.

The right part of the GTX window displays the command sent with value 64 or 100 in decimal and the successful acknowledgement 06:

 

 

Share: