Facebook Pixel

AN-00035S Smart Widgets: Knob

Decription This application note shows how to create knob 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 knob 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 Knob objects can also be uploaded to non-touch displays if really needed.

 

  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 knob using a Smart Knob widget. This application note uses the ViSi-Genie environment.

The output of this project is shown below.

 

This widget is actually composed of five layers, including the layer for the base image. The following table shows the layers, their order of arrangement, and the motion of the image contained in each layer.

 

For the rotating parts (images on Layer 1 and Layer 3), the point of rotation of each image is its center. Furthermore, note that Layer 2 is actually composed of two images. Referring to the figure below, the first image of Layer 2 (image A) is shown while the rotating parts are being rotated along the area subtended by angle A. The second image on Layer 2 (image B) is shown while the rotating parts are being rotated along the area subtended by angle B.

 

Since Layer 2 is above Layer 3, the images on Layer 2, therefore, are essentially for hiding the unwanted part of and for filling up the void left by the rotating image on Layer 3. This can be easily observed when playing with the completed knob in Smart Widgets Editor.

 

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, a 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 Knob Object

Add a Smart Knob 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 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 knob.

 

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 the base image has a transparent part.

 

Note that the base image has a transparent part. Also, 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 the working area.

 

 

Add a Manipulated Image to Layer 1

 

An image is needed to be used as a rotating pointer for the widget. 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 above, the default rotation point of an image is also its top-left corner.  Shown below is the pointer image on Layer 1 with the rotation point indicated at the top-left corner. Note that the red border is added just for illustration purposes and is not an actual part of the 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 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 Smart Widgets Editor User Guide.

 

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 rotation 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 certain positions. 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 101 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):

34th frame (frame index 33):

67th frame (frame index 66): 

101st frame (frame index 100):

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 101 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 275 degrees at frame index 100 or layer value 100. 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 275 degrees about 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):

 

   

 

34th frame (frame index 33):

 

   

 

67th frame (frame index 66):

 

   

 

101st frame (frame index 100):

 

   

 

 

Add an Indicator Image to Layer 3

 

The next step is to add another manipulated image to Layer 3. This will serve as the rotating indicator part of the widget.

 

The working area is now updated.

 

Input the parameter values indicated below to Layer 3.

 

Smart Widgets Editor then generates the frames necessary to satisfy the behavior of the image on Layer 3 as defined by the parameters above. Before checking the generated frames for Layer 3, however, disable Layer 1 first.

 

Now use the GCI frame slider to check the generated frames for Layer 3. They should look similar to those shown below.

 

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

101st frame (frame index 100):

 

 

Link Layer 1 and Layer 3

 

To synchronize the rotating images on Layer 1 and Layer 3, follow the procedure shown below.

 

 

Check the generated frames again by moving the thumb of the GCI frame slider. The output frames should look like those shown below.

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

101st frame (frame index 100):

For more information on linking layers, refer to the Smart Widgets Editor User Guide.

Add Static Images to Layer 2

 

As can be seen in the generated frames above, the operation of the knob doesn’t look normal. At frame index 0 for example, there is an unwanted part of the image on Layer 3 at the right part of the widget.

 

At frame index 100, there is a void at the left part of the widget.

 

These can be resolved through the use of static images. Two static images will now be added to Layer 2.

 

In the image list editor, make sure that the black right-half circle is indexed first before the cyan left-half circle.

 

Use the Up and Down arrows to arrange the images if necessary.

 

Before checking the generated frames for Layer 2, disable Layer 1 and Layer 3 first.

 

 

At this point, the generated frames of the widget should look like those shown below.

 

1st frame (frame index 0):

 

2nd frame (frame index 1):

 

 

Link Layer 1, Layer 2, and Layer 3

 

To synchronize the movement of the images on Layer 1, Layer 2, and Layer 3, enable all three layers and link them as shown below.

 

 

 

Now check the generated frames of the widget. They should look like those shown below.

 

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

101st frame (frame index 100):

 

 

For more information on linking layers, refer to the Smart Widgets Editor User Guide.

 

Add a Background Image to Layer 4

 

Let us add a background image to cover the remaining transparent parts of the base image. This background image will reside on Layer 4. Follow the procedure shown below.

 

 

 

The image on Layer 4 now appears in the working area, and the knob should now function properly.

 

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

101st frame (frame index 100):

 

 

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):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

101st frame (frame index 100):

 

 

Add a Special Character to a Numerical Part

 

It is also possible to display a special character on the numerical part of a layer. This is implemented by inserting the special character to the Format field of the Numeric part section. For instance, to insert a percent symbol 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):

34th frame (frame index 33):

67th frame (frame index 66):

101st frame (frame index 100):

 

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 for Layer 1 is still 101. 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):

34th frame (frame index 33):

67th frame (frame index 66):

101st frame (frame index 100):

 

Configure the Touch Region of the Smart Knob Object

 

At this point, the properties of the numerical part on Layer 1 are restored to the first version.

 

After successfully configuring the smart widget, 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.

In the object inspector, set the MaxAngle and MinAngle parameters of the newly created smart knob object as shown below.

 

These angles define the touch region of the knob. 0 degrees starts at the bottom, as shown in the following image.

 

Using the preceding image as a reference, the touch region for the newly created knob object is, therefore, as shown below.

 

Add a LED Digits Object

 

A LED digits object is added to the project to display the value of the knob.

 

 

Configure the OnChanged event handler of the knob 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: