Facebook Pixel

AN-00038S Smart Widgets: 120-degree Gauge

Decription This application note shows how to create custom 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 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 Widgets 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 area. This will serve as your working area.


Adding Bottom Layer


As shown in the image from the previous step, the gauge is hollow.

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

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.


Select the image and click Open


After selecting the face image and placing the bottommost image, a gauge still needs a needle.



Adding Main Indicator


In this project, a Layer 1 will manipulate the needle.

Enable Layer 1 and select the needle the same way as the bottommost image.




Select the needle image and click Open



Setting Up Main Indicator Layer Parameters



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



Afterwards, we need to set the point of rotation.


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

By setting the rotation point, it can be noticed that the needle is almost entirely hidden.



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


This makes the rotation point of the needle image (120, 120) be located at (0, 0) of the working area.



  • The area covered by rectangle is the working area. This is basically the size of your widget. By default this is the size of the face image.


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


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


For this gauge, both the Min/Max X and while Min/Max Y need to be at 120. 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 120 degrees needle rotation. As shown in the back image and the current needle position, Min Degree needs to be at -60 degrees and Max Degree should be 60 to complete the 120 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


Adjusting Angular Position


As you may have noticed, the needle at its minimum value is a bit off from the first tick mark:


Same way that at its maximum value, the needle is a bit of from the last tick mark


This can easily be fixed by using the increment and decrement buttons:


The final values used for this application note is -61.5 and 61.5.


Here are some frames from the widget:


At 31st frame (index 30):

At 76th frame (index 75):



Adding Numeric Part


As shown from the images, there’s an empty space on the widget.


This is designed to contain the value that the gauge is currently at.


First, enable numeric part.


The font properties of the numeric part can be set using the buttons below.


Next, set the position and alignment of the numeric part.

The way a numeric value is printed on the set position can be controlled using Format.


In this application note, the values shown in the images were used.


After setting the desired numeric part parameters, the smart gauge is ready to be used.



Here are some frames from the widget:


At 31st frame (index 30):

At 76th frame (index 75):


Press OK to continue.


The widget will be displayed on the WYSIWYG area. Drag the widget to your desired position.


The gauge is now ready to be used in the project. This simply acts like a regular gauge.



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