Facebook Pixel

AN-00034S Smart Widgets: Circular Progress Bar

Decription This application note shows how to create custom circular progress bar 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 custom circular progress bar 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 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 circular progress bar 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 basic circular progress bar.

 

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. 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 moving part that fills up the transparent part of 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 reference and rotation point of an image is also its top-left corner.

 

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 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 Reference 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 Min and Max 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 position (the reason for this will become apparent later). 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 100 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):

 

100th frame (frame index 99):

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 2.

Therefore, to make Smart Widgets Editor generate 100 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 -180 degrees. The angle of rotation is 180 degrees at frame index 99 or layer value 99. 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 -180 degrees to 180 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):

 

   

 

34th frame (frame index 33):

 

   

 

67th frame (frame index 66):

 

   

 

100th frame (frame index 99):

 

   

 

Technique for Showing and Hiding Widget Parts

 

The technique chosen to animate this widget is to hide the right-half side of the transparent part of the widget as the image on Layer 1 rotates from -180 degrees to 0 degrees. As soon as the image on Layer 1 reaches the 0 degree position, another image is added to cover the transparent part of the left-half side of the widget. At this point the image covering the right-half side of the transparent part of the widget is removed. The logic behind this will become more apparent in the subsequent sections.

The table below shows how the complete rotation of the image on Layer 1 is divided.

Two foreground images (image A and image B) are then used to cover the right-half and left-half sides of the transparent part of the widget, respectively. These images will be on top of Layer 1, so they will also cover the rotating image on Layer 1.

 

Foreground image A on top of the image on Layer 1:

 

 

 

Foreground image B on top of the image on Layer 1(image A is removed):

 

 

Note that foreground image B and the image on Layer 1 are identical. The alpha of foreground image B in the illustration above is reduced so the user can distinguish between the two. The intended outcome is shown by the following sequence of frames.

 

1st frame, frame index 0 (image on Layer 1 at -180 degrees, foreground image A on top):

 

34th frame, frame index 33 (image on Layer 1 at -60 degrees, foreground image A on top):

 

50th frame, frame index 49 (image on Layer 1 at -1 degree, foreground image A on top):

 

51st frame, frame index 50 (image on Layer 1 at 0 degrees, foreground image B on top, foreground image A is removed):

 

67th frame, frame index 66 (image on Layer 1 at 60 degrees, foreground image B on top):

 

100th frame, frame index 99 (image on Layer 1 at 180 degrees, foreground image B on top):

 

To achieve the above, the widget has to be able to hide and show specific parts at a certain range of frame indices. This can be implemented using a layer containing static images.

 

Add a New Layer and Swap Contents

 

A new layer is now needed on top of Layer 1. This layer will contain the foreground images A and B. However, since Layer 1 is always the topmost layer, its content must be moved to Layer 2. To do this, follow the procedure below.

 

 

The rotating image originally on Layer 1 is now on Layer 2.

 

Layer 1 is now an empty layer.

 

Note also that Layer 1 is on top of Layer 2.

 

Add Two Static Images to Layer 1

 

The foreground images A and B are added as static images to Layer 1. The procedure for this is as follows.

 

In the image list, make sure that image A is indexed before image B. Click on the Up and Down buttons to rearrange the images if necessary.

 

Foreground image A is now shown in the working area.

Also, set the Min/Max Values parameters for Layer 1 as follows:

 

Link Layer 1 and Layer 2

 

To review, the objective is that foreground image A on Layer 1 must be shown while the image on Layer 2 rotates from -180 to -1 degree (frame 0 to 49). Similarly, foreground image B on Layer 1 must be shown while the image on Layer 2 rotates from 0 to 180 degrees (frame 50 to 99). Also, foreground image A is removed from the working area from frame 50 to 99. To implement this, Layer 1 and Layer 2 must be linked. The procedure for this is shown below.

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

Add a Background Image to Layer 3

 

Let us add a background image to cover the transparent part of the base image that is being filled. This background image will reside on Layer 3. Follow the procedure shown below.

 

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

 

Rearrange the Layers with Respect to the Base Image

 

At this point, the arrangement of the layers is as follows:

 

For best aesthetic effect, Layer 1 and Layer 2 must be below the base image. To implement this, follow the procedure below.

 

 

The appearance of the widget is now updated.

 

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

100th frame (frame index 99):

 

 

Add a Numeric Part to Layer 2

 

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 2, follow the procedure shown below.

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

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

100th frame (frame index 99):

 

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

 

100th frame (frame index 99):

 

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 2, 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 100. The table below shows the frame index numbers and the associated values.

 

The numerical part on Layer 2 is now updated.

1st frame (frame index 0):

 

34th frame (frame index 33):

 

67th frame (frame index 66):

 

100th frame (frame index 99):

 

After successfully configuring the smart gauge, press OK.

 

The circular progress bar 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 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: