Facebook Pixel

AN-00036S Smart Widgets: 300-degree Gauge

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

 

File Downloads
Files

  Description

This application note shows how to create a custom 300-degree gauge for Picaso and Diablo16 touch screen display modules. The topics discussed in this application are also applicable to other gauges with different angles of rotation.

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 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 300-degree gauge using a Smart Gauge widget. 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

or

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

or

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 Picaso and Diablo16 displays. First, set the background color of Form0 to white.

 

 

Add a Smart Gauge Object

 

Add a Smart Gauge widget to your ViSi-Genie project. It can be found on the Gauges 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 area.

 

 

Open the Smart Widgets Editor Tool

 

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 the user 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 300-degree gauge.

 

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

 

Add a Face or Base Image

 

The first step when creating a smart widget is to select the face (base image). The face or base image is a static part of the widget. Click  to select an image.

 

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

 

Note that, by default, the area occupied by the base image is the working area.

 

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

 

Add a Manipulated Image to Layer 1

 

A needle is needed to be used as a rotating pointer. To implement this, we need a layer containing a manipulated image. We will use Layer 1 for this purpose.

 

Enable Layer 1 and add a manipulated image to it by following the procedure shown below.

 

The image on Layer 1 now appears in the working area.

 

 

Rotation Point of an Image

 

The rotation point of an image is a point on the image about which it is rotated. The coordinates of this point are set using the Reference point parameters.

 

Furthermore, these coordinates are relative to the top-left corner of the image. Therefore, as can be seen in the default parameters above, the default rotation point of an image is also its top-left corner.

Shown below is the needle image on Layer 1 and its default rotation point. Take note that it is actually a 200x200-pixel image. The red border is added just for illustration purposes. It is not an actual part of the needle image.

 

Location of an Image in the Working Area

The location of an image in the working area is set using the Min/Max X and Y parameters.

 

These coordinates are relative to the top-left corner of the working area. Smart Widgets Editor uses the reference point of an image when it places the image in the working area. As can be seen above, the values of the Min/Max X and Y parameters are set to 0 by default. This means that, by default, the reference point of the image on Layer 1 is placed on the top-left corner of the working area.

 

For a detailed discussion on reference points and their location in the working area, refer to the document .

 

Change the Rotation Point of the Image on Layer 1

 

Obviously, the image on Layer 1 needs to be rotated at its center. For this to happen, set the reference point coordinates to the values indicated below.

 

This can also be achieved by clicking on the Centre button of the Reference point parameters.

 

Now note that the image on Layer 1 disappeared from the working area. This is because it is currently outside the working area. To illustrate:

 

Center the Rotation Point on the Working Area

 

Now move the location of the reference point of the image on Layer 1 to the center of the working area by setting the Min/Max X and Y parameters to the values indicated below.

 

The same can be accomplished by pressing the Centre buttons of the Min/Max X and Y parameters.

 

In the working area, the image on Layer 1 is now visible.

 

 

Set the Minimum and Maximum Angles of Rotation

 

For demonstration purposes, set the minimum angle to -45, as shown below.

In the working area, the image on Layer 1 is rotated by 45 degrees, counter-clockwise, from its original position.

 

Now set the minimum angle to 45, as shown below.

In the working area, the image on Layer 1 is rotated by 45 degrees, clockwise from its original position.

 

The Need for Multiple Frames

 

At this point the widget has only one frame. This frame shows the image on Layer 1 rotated by a certain angle from its original position. Also, below Layer 1 is the base image. Our next objective is to be able to rotate the image on Layer 1 starting and ending at a certain angle. Each state of the widget while the image on Layer 1 is rotating will be represented by a frame. The widget, therefore, has to have multiple frames.

To illustrate, let’s say we want to use 31 frames to represent the different states of the widget as the image on Layer 1 is rotated. The output will look like the following:

 

1st frame (frame index 0):

 

11th frame (frame index 10):

 

21st frame (frame index 20):

 

31st frame (frame index 30):

 

 

To achieve this, the values of the minimum and maximum angle parameters should be set to the values indicated below.

 

Set the Minimum and Maximum Values

 

Furthermore, let’s say we want to associate a range of values to the different frames of the widget. Each value will correspond to a unique frame. To illustrate:

In the table above, N is the total number of frames. The index number always starts at 0. The associated value, on the other hand, can start with any number. Hence,

For a layer containing a manipulated image, the user needs to set the Min and Max Values parameters.

Smart Widgets Editor then computes for the total number of frames, generates the frames, then assigns the index number for each frame. The values of the Min and Max Values parameters are also used by Smart Widgets Editor when displaying the numeric part of the widget. This is discussed in the section Add a Numeric Part to Layer 1.

Therefore, to make Smart Widgets Editor generate 31 frames, input the values indicated below to the Min/Max Values fields of Layer 1.

Below is a table showing six parameters of Layer 1 at this point:

As can be seen in the table, the angle of rotation of the image on Layer 1 at frame index 0 or layer value 0 is 0 degrees. The angle of rotation is 300 degrees at frame index 30 or layer value 30. The rotation point is the center of the image. The Min/Max X and Y parameters remain constant. Essentially, therefore, the image on Layer 1 rotates clockwise from 0 degrees to 300 degrees at its center as the frame index and layer value increase. Moreover, the rotation point of the image on Layer 1 remains fixed at the center of the working area at all frames. Smart Widgets Editor then generates all of the frames needed to satisfy this behavior of the image on Layer 1.

 

Check the Generated Frames

 

To see the generated frames, move the thumb of the GCI frame slider indicated in the image below. The layer guide section also shows the index of the current frame and the total number of frames in a layer.

   

 

1st frame (frame index 0):

 

   

 

11th frame (frame index 10):

 

   

 

21st frame (frame index 20):

 

   

 

31st frame (frame index 30):

 

   

 

Add a Numeric Part to Layer 1

 

As mentioned earlier, there is a range of values that is associated to a layer, and the layer can display these values on the corresponding frames. These values can be shown by adding a numerical part to the layer. To add a numerical part to Layer 1, follow the procedure shown below.

The numerical part on Layer 1 can now be seen in the working area.

1st frame (frame index 0):

 

11th frame (frame index 10):

 

21st frame (frame index 20):

 

31st frame (frame index 30):

 

 

Add Static Characters to a Numerical Part

 

It is also possible to display static characters on the numerical part of a layer. This is implemented by inserting the characters to the Format field of the Numeric part section. For instance, to insert a flow rate unit to the numerical part on Layer 1, the settings below could be used.

 

The output would then look like the following.

 

1st frame (frame index 0):

 

11th frame (frame index 10):

 

21st frame (frame index 20):

 

31st frame (frame index 30):

 

 

For more information on the different properties of the numerical part of a layer, refer to the document Smart Widgets Editor User Guide.

 

Display Negative Values

 

In some applications it is necessary for a widget to display negative values. To illustrate this on Layer 1, simply change the values of the Min/Max Values parameters to those indicated below.

 

 

Note that with the above Min/Max Values parameter values, the total number of frames is still 31. The table below shows the frame index numbers and the associated values.

 

The numerical part on Layer 1 is now updated.

1st frame (frame index 0):

 

11th frame (frame index 10):

 

21st frame (frame index 20):

 

31st frame (frame index 30):

 

After successfully configuring the smart gauge, press OK.

 

The smart widget will now appear on the WYSIWYG area of the project.

 

 

Set the background color of the form back to black by following the procedure shown earlier.

 

Add and Configure an Input Object

 

Input objects such as sliders can be used to control information that will be displayed on gauge objects. Add a slider to the project.

 

Set the Maxvalue and Minvalue of the slider as shown below.

 

Configure the OnChanging event handler of the slider as shown below.

 

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

or

First ViSi-Genie Project for Diablo16

 

Share: