Facebook Pixel

AN-00039S Smart Widgets: Compass

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



This application note shows how to create compass 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 tool 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 compass widget (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-43DT will be used for the project. Same procedure is applicable for any touch screen Picaso and Diablo16 displays.


Add Smart Gauge to Project


A compass widget is obviously an output object. It is best suited that this widget be made as a Smart Gauge.


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 discussions on how each part works, please refer to the  .


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 Bottom Layer


In case the form has a background image or color, it will also be seen through the any 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



Click OK



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


Adding Needle Indicator


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

Enable Layer 1.


Add compass needle



Select the needle image and click Open



Setting Up Needle Layer Parameters


After setting up the layers, give a range of values to Layer 1 (needle layer). For this compass, Layer 1 will be given 0 to 359 to cover for a whole 360 degrees.


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 outside the working area.


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 preview area.


To illustrate:



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.


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.

To initially point to the North (upwards), since the needle is off by 45 degrees clockwise, the Min Degree needs to be set to -45. Since this is a 360 degrees needle rotation. Max Degree needs to be set to:


360 - Min Degree -1




Here are some frames from the widget:

At 1st frame (index 0):


At 91st frame (index 90):


At 181st frame (index 180):


At 271st frame (index 270):



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


Press OK to continue.


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



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


Add and Configure Input Object

In this application note project, an input object will be used to display the individual frames of the compass for simplicity.

Take note that the purpose of this appnote is only to discuss how to make a compass widget.

Input objects are great options to control information that will be displayed on other 4D objects.

Add a Slider to the project.


It is important that the Slider has the same number of frames as the compass. With values 0 to 359 for both the slider and compass, 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