Skip to content
Copyright © 2024 4D Systems

ViSi-Genie Magic: Custom Slider

Introduction

As of the time of writing of this codebase example, there exists no facility in ViSi-Genie 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 a slider widget
  2. Generate the corresponding touch routine for the slider widget

Note

Worskhop 4 PRO is needed for this codebase example.

Demo Video 1


Demo Video 2

Prerequisites

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

Instructions

To create a custom slider in ViSi-Genie, 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-Genie project in Workshop. Add a user images object to the project and use the images generated in step 1.1 as the frames of the user images object. The custom slider is now inside a user images object or widget.

  2. Write the 4DGL routine for the custom slider. For this we will need to use two magic objects - the Magic Move object and the Magic Code object. Essentially, the magic objects should be able to correctly display the correct frame of the custom slider that corresponds to the point of touch.

  3. Compile the project and download or upload the program 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-Genie project is also attached.

Attachment

Project File