|Decription||This application note shows how to create custom horizontal slider for Picaso and Diablo16 touch screen display modules.|
|Supported Processor||Picaso, Diablo16|
This application note shows how to create custom horizontal slider for Picaso and Diablo16 touch screen display modules.
Before getting started, the following are required:
- Any of the following 4D Picaso display modules:
and other superseded modules which support the ViSi Genie environment
- The target module can also be a Diablo16 display
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.
- 4D Programming Cable / uUSB-PA5/uUSB-PA5-II
- Workshop4 IDE (installed according to the installation document)
This requires the PRO version of Workshop4.
Note: Using a non-4D programming interface could damage the processor and void the warranty.
The Smart Widgets Editor 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 Smart Slider. To demonstrate, this application note uses the ViSi Genie environment.
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
For instructions on how to create a new ViSi-Genie project, please refer to the section “Create a New Project” of the application note
For this application, gen4-uLCD-32DT will be used for the project. Same procedure is applicable for any touch screen Picaso and Diablo16 displays.
Add a Smart Slider 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 image, the widget appears empty when placed in the WYSIWYG.
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 discussion on how each part works, please refer to the Smart Widgets Editor User Guide.
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 area.
After selecting the image, a slider needs a thumb and an optional indicator.
In this project, Layer 1 will manipulate the thumb while Layer 2 will manipulate the other indicator. Another layer (Layer 3) will contain a still image.
Enable Layer 1 and select the image.
Obviously the thumb should be above the base image.
Select the image and click Open
You’ll see the knob at the top left of the base image.
The next thing to do is to select its starting and end positions.
First, we want the knob to be centered vertically all the time.
For this slider, the Min/Max Y needs to be both at 28. This will make the Y position of the knob constant from minimum value to maximum value.
Now, to create frames that moves the thumb horizontally, an initial X position (Min X) and final X position (Max X) must both be specified.
In this case, the thumb moves from 15 to 280.
Lastly, it is required to assign the minimum and maximum values (Min/Max Values).
For this application note project, 0 to 100 was used. That is a total 101 frames moving from 15 to 280 X positions.
Here’s the 26th frame (index 25):
While this is the last frame (101st / index 100)
At this state, this slider is already sufficient to be used in the project. However, in this application note project, additional layers will be used to for better design.
Next, add another indicator for the slider. This time with 2 additional layers.
Enable and select the images the same way as Layer 1.
Both Layers will be below the Face (base image)
Layer 3 will serve as a stationary layer which will be covered by Layer 2.
Layer 2 is the gray area covering the middle.
To check Layer 3, temporarily disable Layer 2.
Layer 2 is simply covering Layer 3, therefore if Layer 2 is moved part of Layer 3 will be shown.
Remember that the thumb moves from the above X position. That is a 265-pixel displacement.
For Layer 2, it should have the same displacement (MaxX – MinY) as Layer 1 and Min/Max Values.
Additionally, it also needs to be linked to Layer 1 so both of them will go through their minimum and maximum values at the same time.
This will be the output:
- At 26th frame (index 25)
- At 101st frame (last frame / index 100)
After successfully, configuring the slider, press OK.
The slider can be moved to a desired position.
Some properties needs to be set before properly using the slider.
On the Object Inspector’s Properties tab, Orientation, MaxOffset and MinOffset needs to be provided by the user.
Obviously, Orientation needs to be set to Horizontal.
As for the other two, this project uses:
The values are from the desired touch area for the slider. Refer to the images below
After setting everything up, the slider can be used similar to a normal slider.
Gauges are great options to present information. Add a Coolgauge to the project.
It is important that the Coolgauge has the same number of frames as the slider. With values 0 to 100 for the Coolgauge, they have same number of frames.
Then for the Slider, under Events tab of the Object Inspector:
Set the event for OnChanging:
Select Coolgauge0Set and click on OK.
The project is now ready for upload.
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