Skip to content

ViSi: Custom Slider

Introduction

As of the time of writing of this codebase example, there exists no facility in Workshop to easily create a custom slider. For the existing built-in slider and trackbar widgets, Workshop does the following:

  1. Internally generate the frames for the widget
  2. Generate the corresponding touch routine for the widget

Demo Video 1


Demo Video 2

Prerequisites

This codebase example assumes the reader can program the 4D Systems display module using Workshop4 IDE ViSi environment. Beginners are advised to read the following aplication notes.

Instructions

To create a custom slider in ViSi, we manually perform these two steps, like as shown below.

  1. Generate the frames of a custom slider

    1. Any method can be used for generating the frames of a custom slider. For this code example, Microsoft PowerPoint was used. First, the parts of a custom slider were created on a new presentation slide using various shapes. The custom slider has 11 frames or unique states. This corresponds to a minimum value of zero and a maximum value of 10. This also corresponds to 11 unique positions of the shapes that make up the custom slider. Second, to create frame 0, for example, the shapes on the presentation slide should be properly positioned and a screenshot image of the entire custom slider is taken and saved as a PNG image. This process is repeated until all frames of the custom slider are generated. Of course the user can make use of more advanced software applications for this.
    2. Create a new ViSi project in Workshop. Add a user button to the project and use the images generated in step 1.1 as the frames of the user button. The custom slider is now inside a user button widget.
  2. Write the 4DGL routine for the custom slider. Essentially, the routine should be able to correctly display the correct frame of the custom slider that corresponds to the point of touch.

  3. Compile the 4DGL program and download or upload it to the target display module (a uLCD-32PTU in this codebase example). Workshop also copies the supporting files to a uSD card mounted to the PC. Unmount the uSD card from the PC and mount it to the display module. The application should now run. If not familiar with the details of this step, see the application notes.

This codebase example presents a working example of the above. The PowerPoint file used for generating the slider frames is attached. The ViSi project is also attached.

Attachment

Project File