AN-00078 ViSi Input Objects

Description This application note is intended to demonstrating to the user the basic of using the input objects of the Workshop IDE ViSi environment. Input objects in ViSi are those that respond to touch such as a slider, track bar, rotary switch, and others. They are useful as a means by which a GUI application gets an input from the user.
Supported Processor PICASO, DIABLO16
Supported Environment ViSi
Difficulty Medium

File Downloads


This application note requires:

and other superseded modules which support the ViSi Genie environment

Visit to see the latest display module products that use the Diablo16 processor. The display module used in this application note is the uLCD-32PTU, which is a Picaso display. This application note is applicable to Diablo16 display modules as well.

for non-gen4 displays(uLCD-xxx)

for gen4 displays (gen4-uLCD-xxx)

  • micro-SD (µSD) memory card
  • Workshop 4 IDE (installed according to the installation document)
  • Any Arduino board with a UART serial port
  • 4D Arduino Adaptor Shield (optional) or connecting wires
  • Arduino IDE

When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.

Application Overview

This application note is intended to demonstrating to the user the basic of using the input objects of the Workshop IDE ViSi environment. Input objects in ViSi are those that respond to touch such as a slider, track bar, rotary switch, and others. They are useful as a means by which a GUI application gets an input from the user.


Setup Procedure

For instructions on how to launch Workshop 4, how to open a ViSi project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16


Create a New Project

For instructions on how to create a new ViSi project, please refer to the section “Create a New Project” of the application note


ViSi Getting Started - First Project for Picaso and Diablo16


Design the Project

Adding the Input objects on the ViSi environment is fairly simple. Start by accessing the Widgets menu of an open project.  WIDGETS >> INPUTS


Setting up the objects in the likeness of the project presented here is also easy. The objects can be placed and positioned according to the need of the user. There are particular options on the object inspector that greatly helps the user in achieving their desired graphic user interface.


Let us take the image on the side, we could see here the track bar’s properties. Colours and position alongside with other features are enlisted in this object inspector which can be easily changed according to preferences.


The ViSi-based Inputs Project


 After all the objects have been laid-out, let’s continue with the other half which involves the coding of the project. This will be presented in a sectional manner so as not to create confusion with the project. For an in-depth detail of the functions used in this application note please refer to the DIABLO16 Internal Functions Reference Manual.


The Include Section

This project starts with the identification of the platform being used as declared by the #platform function. For the program to be able to function properly files are included herein using the #inherit function. Three other files are included automatically during creation of the new project, namely:  4DGL_16bitColours.fnc, the, and  Notice that one of the include file is almost the same as the project filename. This file is automatically generated as soon as project saving is done.


Other additional include files were added to this project. The ‘’ is an include files dedicated for the proper operation of the KNOB object. Likewise, the ‘’  is needed to enable the use of LED DIGITS properly.


The Main Program

The main program contains a simple program that first detects and initializes the micro SD card, the initial displaying of the objects used in the project and an endless loop that detects the buttons pressed by the user and subsequently executes other included statements or call out a sub-routine.


The micro-SD Initialization

Let’s start with the initialization of the uSD card. The uSD card contains all the image information about the objects used in the project. The object information and data are saved under a *.DAT and a *.GCI filename extension which is copied to the uSD during project compilation. Mounting of the disk in this application note was done using the following set of program statements.


When starting a new project in the ViSi environment these set of statements are already included in the coding area. Another part of these set of statements uses a function file_LoadImageControl() to call on the object data/information files on the uSD drive. This initializes the data to be called in using the variable ‘hndl’.  In addition, the filenames for the dat and gci files are automatically changed to the project filename as soon as the project is saved.

Added to the statements above are the screen orientation setup function and the      touch enable function. The screen orientation is set to portrait thereby providing an 800x480 pixel dimension. This setup is attained using the gfx_Set() function.

Having been able to load and initialize the uSD drive, the processor is now able to access the information stored therein. As mentioned from the previous section, the filenames with an extension of DAT and GCI has the image data and information.  Therefore, the next part of the main program is to display all the objects that were placed on the Workshop IDE form viewer.

A special button from the Object Inspector can help reduce the time of coding of this part. The ‘Paste Code” simply pastes object code.


Displaying the Objects

In this part of the program, the img_Show() function simply calls out the object image and information found in the microSD drive.  This set of statements call out the images from their handlers and are displayed on screen. The img_ClearAttributes() function is used to enable the touch feature for the input objects.


The Repeat-forever Loop

The endless loop repeat-forever contains several statements.  The first of the statements contained in this loop enables a constant monitoring of the touch status. The resulting status of the touch is saved on a variable named state. Following this is the variable ‘n’ that saves the index of the object being touched.

Inside the repeat-forever loop are the touch related conditions that involve – a ‘touch_pressed’, a ‘touch_released’ and a ‘touch_moving’. Each of this conditions contains several other statements that are related to the input objects that were placed into the project.

For the touch_pressed condition, if a press is detected on the touch panel the next to be considered is  the object that was touched. This is returned to the variable n. 


Within the touch_pressed condition, if the rockerswitch is being set to the compliment of its initial frame position- given by the rockerPos value. The value is a transitioned between 1 and 0 each time the object is touched therefore giving a toggle effect.

The next of the touch-related conditions is the touch_moving condition. This condition has several statements that are related to the other four input objects. If a touch_moving condition is detected over an object this results to the call and execution of the sub-routine.


The trackbar() and slider() Sub-routines

When a ‘touch_moving’ condition is detected over the track bar input object, this results to the call and execution of a sub-routine named trackbar(). The sub-routine contains a code automatically generated by the Object Inspector – ‘Paste Code’.


For the generated code on the trackbar() sub-routine, the variable ‘posn’ should be declared. The content of the trackbar()  sub-routine is a conditional calculation of the current value for a trackbar object. The resulting value of the calculation is made the effective frame number of the trackbar. The same value is then made to be the effective value for the LedDigits object.

The same routine is effective for the slider object. The trackbar and slider input objects have the same manner of calculation. The only difference is the reference starting value for the x and y position. This is the result of the different position by which it is placed.

The dipswitch() Sub-routine

As compared to the previous sub-routine, the dipswitch() sub-routine is much simpler. Due to the limited number of positions that is takes it is relatively easier to understand the automatically generated object codes of the dip switch object. The simple calculation is still included to set the object into the desired switch position.


The resulting value of the switch position is saved on the variable ‘state’. This is then used to the Led digit object for a better visual of the current position.

The knob() Sub-routine

This subroutine is quite different from the other  input objects. It involves conversion of x and y coordinate values into angular position. Using the detected result for x and y under the touch_moving condition, this is processed with a conditional mathematical set of equations to convert this x/y value to position to an angular position in degrees saved in the variable ‘posit’.

Similar to the other objects, this is transferred to the led digits to display the value in degree units.


Run the Program

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination (this option is not available for Goldelox displays), and how to compile and download a program, please refer to the section “Run the Program” of the application note


ViSi Getting Started - First Project for Picaso and Diablo16


The uLCD-32PTU and uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.