Facebook Pixel

AN-00033S Smart Widgets: Horizontal Progress Bar

Decription This application note shows how to create custom horizontal 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 horizontal 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 horizontal 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.

 

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 horizontal 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 an 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 an image to it by following the procedure shown below.

 

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

In the manipulation parameters section, set the Min X value to -150.

 

In the working area, the image on Layer 1 is moved by 150 pixels to the left.

 

Change the location of Layer 1 with respect to the base image by clicking the button indicated below.

 

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

Now move the image on Layer 1 further to the left by decreasing the value of Min X further to -260 pixels.

In the working area, the tip of the image on Layer 1 is indicated by the arrow.

 

The Need for Multiple Frames

 

At this point the widget has only one frame. This frame shows the image on Layer 1 offset by 260 pixels to the left. Also, on top of Layer 1 is the base image. Our next objective is to be able to move the image on Layer 1 to the right, until it completely fills the transparent part of the base image. Therefore, the widget has to have multiple frames, each of which will represent the state of the widget as the image on Layer 1 moves to the right.

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 moves to the right. 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):

Note that, in the above images, the frames are indexed from 0 to 99. This results to a total of 100 frames.

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,

 

Thus, the Min and Max Values parameters of a layer need to be set accordingly.

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 100 frames, input the values indicated below to the Min/Max Values fields of Layer 1.

Below is a table showing four parameters of Layer 1:

As can be seen in the table, the X position of the image on Layer 1 at frame index 0 or layer value 0 is -260. The X position of the image on Layer 1 at frame index 99 or layer value 99 is 0. The Y position remains constant. Essentially, therefore, the image on Layer 1 moves from left to right (from x = -260 to x = 0) as the frame index and layer value increase. 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):

   

 

Add a Background Image to Layer 2

 

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

 

The working area now looks like as shown below.

In the layer guide section, Layer 2 is located below Layer 1.

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

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

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

100th frame (frame index 99):

After successfully configuring the smart gauge, press OK.

 

The horizontal progress bar will now appear on the WYSIWYG area of the project.

 

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.

 

Configure the orientation of the slider as shown below.

 

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: