Facebook Pixel

AN-00037S Smart Widgets: Quarter Gauge

Decription This application note shows how to create custom quarter gauge for Picaso and Diablo16 touch screen display modules.
Supported Processor Picaso, Diablo16
Supported Environment ViSi-Genie
Difficulty Easy


File Downloads


This application note shows how to create custom quarter gauge for Picaso and Diablo16 touch screen display modules.


Before getting started, the following are required:

and other superseded modules which support the ViSi Genie environment


Visit www.4dsystems.com.au to see the latest and/or superseded 4D display module products that use the Picaso, Picaso-Lite, and Diablo16 processors. Non-touch and SB (Super Bright) versions are also available.


This requires the PRO version of Workshop4.

Note: Using a non-4D programming interface could damage the processor and void the warranty.

This application note is applicable to all touch screen 4D displays. However, Smart Gauges can also be used on non-touch displays.


  Application Overview

The Smart Widget Editor enables PRO version users to easily create custom widgets of their own design. It allows the user to create Sliders, Knobs and Gauges.


The purpose of this application note is to introduce the PRO version exclusive tool and to discuss how to create a Smart Gauge. To demonstrate, this application note uses the ViSi-Genie environment.


Setup Procedure


For instructions on how to launch Workshop4, 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


First ViSi-Genie Project for Picaso


First ViSi-Genie Project for Diablo16



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


First ViSi-Genie Project for Picaso


First ViSi-Genie Project for Diablo16


Design the Project


For this application, gen4-uLCD-32DT will be used for the project. Same procedure is applicable for any touch screen Picaso and Diablo16 displays.


Add Smart Gauge to Project


Add a Smart Gauge widget to your ViSi-Genie project. It can be found on the Inputs tab on the Widgets Pane.


Simply click on this icon  to select it. Then place it on the WYSIWYG area.


As displayed on the previous image, the widget appears empty when placed in the WYSIWYG.


Open Smart Widgets Editor

Open the Smart Widgets Editor tool by clicking on  of Config in the Object Inspector Properties tab.


The tool requires that the project is already saved before the tool opens. Therefore, since on this case, it hasn’t been saved yet, Workshop4 will automatically prompt to save


Save the project to desired location. The tool will open after the project has been saved.


As shown in the image, this tool has a lot of parts. The next steps will focus only on the minimum tool functionalities required to make a basic slider.


For detailed discussion on how each part works, please refer to the Smart Widgets Editor User Guide.


Select Face Image


The first step when creating a smart widget is to select the Face (base image).

Click  to select an image.


After selecting a base image, it will be displayed in the preview area.


The size of the output widget depends on the size of this image by default.


Any part of any image used in a smart widget will not be displayed if outside this working area.

Adding Main Indicator


In this project, Lasyer 1 will manipulate the needle and another set of layers will manipulate the other indicators.


Obviously, the needle should be below the base image.

Select the image and click Open



When done adding the images for the layer, simply click OK


Notice that the needle is half way seen below the base image. This is because the base image is hollow.


In case the form has a background image or color, it will also be seen. If this is not desirable, a bottom layer is required.


Adding Bottom Layer


When adding the bottommost layer, it is easiest to use Layer 5.

Enable Layer 5 and add the bottom layer image similar to how the needle layer was added.


Obviously, the bottom layer is below the face image.


Notice that the bottommost image includes 3 graphic LEDs.


These LEDs will serve as the secondary indicators. This will be discussed in Adding Secondary Indicators



Setting Up Main Indicator Layer Parameters

After setting up the previous layers, give a range of values to Layer 1. For this application note, the Layer 1 will be given 0 to 100.


Afterwards, the point of rotation (Reference Point) needs to be set.


For this, the point of rotation of the image is at (41, 194) this is the pixel position on the needle image itself, not on the preview area.

By setting the reference point, it can be noticed that the needle is again not visible. This is because, right now, it is outside the working area.

To illustrate:


  • The rotation point is referred to as Reference Point since this is also used for the X and Y positions (denoted by Min/Max X and Min/Max Y)



This is because Min/Max X and Min/Max Y are still both set to 0.


This makes the reference point of the needle image (41, 194) be located at (0, 0) of the preview area.


This needs to be located on the right position on the preview area. In this application note, the position of the reference point with respect to the preview area is also (41, 194).


Min/Max X and Min/Max Y needs to be set to constant values.


For this gauge, the Min/Max X needs to be at 41 while Min/Max Y needs to be at 194. This will make the X and Y positions of the needle’s rotation point be constant from minimum value to maximum value.


You’ll notice that the needle is back on its original position.

Now, to create frames that rotates the needle, an initial angular position (Min Degree) and final angular position (Max Degree) must both be specified.


Obviously, this is a 90 degrees needle rotation and since the needle is already on the desired angular position Min Degree should be 0 and Max Degree should be 90 to complete the 90 degrees rotation.


  • Notice that an increase from Min to Max Degrees results to a clockwise rotation. Obviously, a decrease would result in a counterclockwise rotation


Here are some images showing the widget at different frames:

At 31st frame (index 30):


At 71st frame (index 70):




Adding Secondary Indicators


For the LED indicators, enable Layer 2.


Add the images the same way as the needle image and bottommost image.



This time multiple images needs to be selected.



The three images shows each of the LEDs turning ON one at a time. If all three are selected and the layer is linked to the needle layer, each of this three will be shown at every 1/3 of the 0 to 100 frames.


This distribution isn’t desirable most of the time so instead we’ll use 4 static image. That will be the previous three images and the bottommost (90deg gauge_back_base.png) image.



Click on Open to continue.

Next, ensure that the images are arranged correctly.


In this case, it should be the order as displayed on the image above.


Click OK to continue


Afterwards, link this layer with the needle layer.


Finally, assign the Min/Max Val for this layer.



Since there are 4 frames in total, the layer value ranges from 0 to 3.


Here are some updated images showing the widget at different frames:

At 31st frame (index 30):


At 71st frame (index 70):



When done designing, click on OK



Add and Configure Input Object


Input objects are great options to control information that will be displayed on gauges.

Add a Slider to the project.


It is important that the Slider has the same number of frames as the Smart Gauge. With values 0 to 100 for both the slider and smart gauge, they have same number of frames.


Then for the Slider, under Events tab of the Object Inspector:


Set the event for OnChanging:


Select SmartGauge0Set and click on OK.


The project is now ready for upload.


Run the Program

For instructions on how to save a ViSi-Genie project, how to connect the target display to the PC, how to select the program destination, and how to compile and download a program, please refer to the section “Run the Program” of the application note


First ViSi-Genie Project for Picaso


First ViSi-Genie Project for Diablo16