Facebook Pixel

AN-00062 ViSi Cool Gauge

Description This simple application note explains how to create a cool gauge object in the WYSIWYG screen, how to paste the generated code, and how to display the different frames.
Supported Processor GOLDELOX
Supported Environment ViSi
Difficulty Medium


File Downloads


This simple application note shows how to add and configure a cool gauge object, one of the widgets available in Workshop. Before getting started, the following are required:

  • Any of the following 4D Goldelox display modules:






or any superseded module that supports the ViSi environment

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 presented in these recommended application notes.

  Application Overview

It is often difficult to design a graphical display without being able to see the immediate results of the application code. 4D-ViSi is the perfect software tool that allows users to see the instant results of their desired graphical layout. Additionally, there is a selection of inbuilt dials, gauges and meters (called widgets) that can simply be dragged and dropped onto the simulated module display. From here, each can have properties edited and at the click of a button, all relevant code is produced in the user program. 


This simple application note explains how to create a cool gauge object in the WYSIWYG screen, how to paste the generated code, and how to display the different frames.

  Setup Procedure

For instructions on how to launch Workshop 4, how to open a ViSi project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

ViSi Getting Started - First Project for Goldelox

  Create a New Project

For instructions on how to create a new ViSi project, please refer to the section “Create a New Project” of the application note


ViSi Getting Started - First Project for Goldelox


  Design the Project

Create a Cool Gauge in the WYSIWYG Screen

Go to the Widgets menu, select the Gauges pane, and click on the cool gauge icon.


Once the cool gauge icon is selected, click on the WYSIWYG screen to place it. Drag the borders to resize the object to the desired dimensions.


The needle points to tick marks with values. It also has a digit display at the bottom part. This will display the corresponding tick mark value to which the needle is pointed. Below is a cool gauge with a digit display in green.


The Object Inspector shows the different properties of the object. The user can edit the properties and modify the appearance of the cool gauge using the Object Inspector.


Generated Frames

Detailed information about the cool gauge object can be found in the application note ViSi-Genie Gauges. For now, take note of the default maximum and minimum values – 100 and 0, and the default ValueFormat setting – 0. ValueFormat defines the format by which digits are displayed in the cool gauge digit display. When set to 0, only integers are displayed. With the following property values for example,


the range of possible integer values that can be displayed is from 0 to 100 – a total of 101 discrete values. Workshop then automatically generates one image for each discrete value of the object. Each image can be thought of as a frame of a video. Three frames are shown below.


The user can then display any of these frames using a simple command, which will be shown later.

Insert the Cool Gauge Code

Go to the code area and place the cursor just after the wend statement (line 22 in this example). Note that the uSD-card initialization routine is now uncommented.


Having selected the cool gauge object, go to the Object Inspector and click on the Paste Code button.


The code will be updated accordingly.


A new block for the object is generated, along with comments for each line. Additional explanations are given below.


The statement in line 24


sets the µSD internal address pointer for bytewise access. iCoolgaugeH specifies the high word (upper 2 bytes) and iCoolgauge1L specifies the low word (lower 2 bytes) of the 4 byte µSD address location of the cool gauge object created. The command


in line 25 displays a video frame from the μSD card, the address of which was previously specified with the function media_SetAdd(“HiWord”, “LoWord”). The arguments 4 and 16 are the x and y coordinates or the left and top properties of the object. The argument numx is the frame to be shown. Before running the program, the user needs to declare numx as a variable first then assign it a value between 0 and 100.

A Simple Example – Displaying Frames

We will now write a simple code to display five frames of the cool gauge object.


  Run the Program

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination (this option is not available for Goldelox displays), and how to compile and download a program, please refer to the section “Run the Program” of the application note

ViSi Getting Started - First Project for Goldelox


Attached ViSi File

Attached is a ViSi file, CoolGaugeTutorial.4dViSi, which contains the code for displaying five frames of the cool gauge discussed earlier. A simple for loop routine for displaying increasing and decreasing values of the cool gauge is also included.


Workshop Sample Programs

Workshop comes with many sample programs, one of which is for displaying random values of a cool gauge object. To open it, click on the File menu.


Near the bottom of the drop down menu, you can find the Samples button, click on it.


The samples window now appears. Select Goldelox ViSi.


Select the file COOLGAUGE then click on Open.


The program now opens.