Skip to content

ViSi-Genie: A Simple Digital Voltmeter Application using an Arduino


Number 4D-AN-00019
Difficulty Medium
Supported Processors PICASO, DIABLO-16, PIXXI-28, PIXXI-44
Supported Environments ViSi-Genie


This application note explains how to use a 4D display module in displaying voltage readings received from a host controller. The host is an AVR-ATmega328-microcontroller-based Arduino Uno board. The host can also be an Arduino Mega 2560. Ideally, the application described in this document should work with any Arduino board that tolerates an analog input voltage value from 0 to 5 volts and with at least one UART serial port. See specifications of Arduino boards here

Arduino Boards


Some Arduino boards such as the Due operate at 3.3 volts and tolerate analog input voltage levels from ground up to 3.3 V only. Applying more than 3.3 V may damage the chip. If attempting to use 3.3V Arduino boards for this application, make sure to limit the analog input voltage to 3.3 volts only and please read carefully your board's datasheet.

This application note requires:

  • Any of the following 4D Picaso display modules:
  • The target module can also be a Diablo16 display

Visit to see the latest display module products. 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)


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.

Downloadable Resources

The following are the sample project files for Arduino and Genie Projects.

Arduino Project Genie Project

Application Overview

The application developed in this document works in a manner illustrated in the diagram shown on the next page. First, the wiper of a trimmer potentiometer, acting as a voltage divider, is connected to pin A0 of the Arduino Uno.

Arduino Uno

Thus, the voltage level at pin A0 can be of any value between 0 and 5 volts. Thru ADC, an analog voltage level sampled by pin A0 is given a 10-bit binary equivalent value. Given the reference voltage, which is 5 volts by default, the digital voltage value can now be computed. The digital voltage reading is then sent to the display module.


The default range of allowable analog input voltage for the Uno and Mega 2560 is 0 to 5 volts only.

The Arduino host is programmed in the Arduino IDE to perform ADC and send the voltage readings to the display module. The display module, on the other hand, is programmed in Workshop (ViSi Genie environment) to display the voltage readings.

This application note comes with a ViSi Genie program and an Arduino sketch. The process of creating the ViSi Genie program is first shown. Then the flow of the Arduino sketch is discussed. The sketch can be used to develop more complex applications related to ADC. The last section shows how the display module, Arduino host, and trimmer potentiometer are connected.

Display Module

Setup Procedure

For instructions on how to launch Workshop 4, 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:

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

Design the Project

Everything is now ready to start designing the project. Workshop 4 displays an empty screen, called Form0. A form is like a page on the screen. The form can contain widgets or objects, like sliders, displays or keyboards. Below is an empty form.


At the end of this section, the user will able to create a form with four objects. The final form will look like as shown below, with the labels excluded.


Create a LED Digits Object

The LED digits object will display values received from the Arduino host. To add a LED digits object, go to the Digits pane and select the first icon.

Led Digits Object

Click on the WYSIWYG (What-You-See-Is-What-You-Get) screen to place a LED digits object. The WYSIWYG screen simulates the actual appearance of the display module screen.


The object can be dragged to any desired location and resized to the desired dimensions. The Object Inspector on the right part of the screen displays all the properties of the newly created LED digits object named Leddigits0.


Feel free to experiment with the different properties. To know more about digital display objects, refer to ViSi-Genie Digital Displays. The LED digits object in this example has the following properties.

ViSi-Genie Digital Displays

Apply the properties. The WYSIWYG screen is updated.


The object has four digits, three of which are to the left of the decimal point. The object is positioned near the bottom of the screen.

Naming of Objects

Naming is important to differentiate between objects of the same kind. For instance, suppose the user adds another LED digits object to the WYSIWYG screen. This object will be given the name Leddigits1 - it being the second LED digits in the program. The third LED digits object will be given the name Leddigits2, and so on. An object's name therefore identifies the object's kind and unique index number. It has an ID (or type) and an index.


It is important to take note of an object's ID and index. When programming in the Arduino IDE, an object's status can be polled or changed if its ID and index are known. The process of doing this will be shown later.

Add a Static Text

Static text objects are useful for labelling purposes. As the name implies, the status of these objects cannot be changed when the program runs. To add a static text, go to the Labels pane and click on the static text icon.

Static text icon

Click on the WYSIWYG screen to place the object.


In the Object Inspector, change the caption to volts, and increase the font size. The static text object used in this example has the following properties.

Static text object

When done, the WYSIWYG screen should look similar to the one shown below.


Add an Angular Meter

To demonstrate the use of meters and to give the application an "analog touch", an angular meter will be added to the screen. Go to the gauges pane and click on the angular meter icon.

Angular Meter {: class="add-emphasis" }

Click on the WYSIWYG screen to add the object.


The object can be dragged to any desired location and resized to the desired dimensions. The angular meter used in this example has the following properties.

Angular meter properties

Take note of the decimals, maximum, and minimum values. When done, the form will look like the image shown to the right.


To know more about meters and gauges, read ViSi-Genie Gauges.

Add a Rocker Switch

To demonstrate the use of an input widget and to make the application more interactive, a rocker switch will be added as a means to turn on and off the voltmeter. When the rocker switch is off, the angular meter and LED digits objects will display zero volts. This makes the application appear to be turned off. To add a rocker switch, go to the inputs pane and click on the rocker switch icon.

Rocker switch icon {: class="add-emphasis" }

Click on the WYSIWYG screen to place the object.

WYSIWYG screen

The rocker switch used in this example has the following properties.

Rocker switch properties

The user may need to move the static text object. The final form is shown below.

Added Static text object

To know more about inputs and switches, read ViSi-Genie Inputs.

Build and Upload the Project

For instructions on how to build and upload a ViSi-Genie project to the target display, please refer to the section Build and Upload the Project of the application note

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

Program the Arduino Host

A thorough understanding of the application note ViSi-Genie Connecting a 4D Display to an Arduino Host is required before attempting to proceed further beyond this point. ViSi-Genie Connecting a 4D Display to an Arduino Host provides all the basic information that a user needs to be able to get started with ViSi-Genie and Arduino. The following is a list of the topics discussed in ViSi-Genie Connecting a 4D Display to an Arduino Host.

  • How to download and install the ViSi-Genie-Arduino library

  • How to open a serial port for communicating with the display and how to set the baud rate

  • The genieAttachEventHandler() function

  • How to reset the host and the display

  • How to set the screen contrast

  • How to send a text string

  • The main loop

  • Receiving data from the display

  • The use of a non-blocking delay in the main loop

  • How to change the status of an object

  • How to know the status of an object

  • The user's event handler

Discussion of any of these topics is avoided in other ViSi-Genie-Arduino application notes unless necessary. Users are encouraged to read ViSi-Genie Connecting a 4D Display to an Arduino Host first.

Writing Data to the Display

This and the following sections discuss how the main loop and the user's event handler work. It is strongly recommended that the user opens and analyses the accompanying Arduino sketch while reading this text.

In the main loop, the function below receives and queues the data received from the display.

genie.DoEvents() ;

Initially, there is no data received from the display since none of the objects were configured to report an event. The program now evaluates if the voltmeter is turned on or off.


Since flag is initially set to 0, the following statements are executed.


These lines send or write the value 0 to Leddigits0 and Angularmeter0. The voltmeter application is "off" in this case.

Interrogating the Display

After writing the value zero to Leddigits0 and Angularmeter0, the program executes the command

genie.ReadObject(GENIE_OBJ_ROCKERSW, 0x00) ;

This command sends a message to the display inquiring for the status of Rockerswitch0. The display will respond with the appropriate message, which will be received at the next iteration of the loop. The program now goes back to the start of the loop.

Receiving Data from the Display

In the second execution of the main loop, data is received from the display as a result of the statement

genie.ReadObject(GENIE_OBJ_ROCKERSW, 0x00) ;

The data or message is received and queued by

genie.DoEvents() ;

Another function (to be written by the user) is needed to process the received data. This function is the user's event handler, which was arbitrarily given the name myGenieEventHandler(). This function is called from inside the function genie.DoEvents().

The User's Event Handler

The user's event handler now takes out a message from the events queue and evaluates it. Hence, the following lines:

genieFrame Event;

The message is then tested if it is a REPORT_OBJ event from Rockerswitch0. This is the expected response of the display to the interrogation message sent earlier.

if (genie.EventIs(&Event, GENIE_REPOERT_OBJ, GENIE_OBJ_ROCKERSW, 0x00))

If the above condition is true, the value of the event is stored in rockersw_val.

rockersw_val = genie.GetEventData(&Event);

The value of an object event or message represents that object's status. For instance, the message for Rockerswitch0 will have a value of 0 when it is off, a value of 1 when it is on. This concept is applicable to widgets or objects having only two states such as the DIP switch (default mode), and the Winbutton (toggle mode).

Suppose the user has turned on Rockerswitch0 by touch, the statement below is executed.


The program exits the user's event handler and goes back to the main loop. There it processes the block

if (flag == 1) {
  voltLED = (5.0 * analogRead(sensorPin) * 1000.0) / 1023;
  genie.WriteObject(GENIE_OBJ_LED_DIGITS, 0x00, voltLED);
  voltMeter = voltLED/100;
  genie.WriteObject(GENIE_OBJ_ANGULAR_METER, 0x00, VoltMeter);

since flag has just been set to 1.

The line

voltLED = (5.0 * analogRead(sensorPin) * 1000.0) / 1023;

performs the conversion below.


The variable voltLED will hold a value between 0 and 5000, which will be sent to Leddigits0.

genie.WriteObject(GENIE_OBJ_LED_DIGITS, 0x00, voltLed);

Remember that Leddigits0 has four digits so it can display 0000 to 5000. Now, since three of the four digits are to the right of the decimal point, it will display 0.000 to 5.000.

Angularmeter0, on the other hand, is configured to display 0.0 to 5.0. For more information on writing to Genie objects, refer to ViSi-Genie Writing to Genie Objects Using an Arduino Host.

Set Up the Project

Refer to the section Connect the Display Module to the Arduino Host of the application note ViSi-Genie Connecting a 4D Display to an Arduino Host for the following topics:

  • Using the New 4D Arduino Adaptor Shield (Rev 2.00)

  • Definition of Jumpers and Headers

  • Default Jumper Settings

  • Change the Arduino Host Serial Port

  • Power the Arduino Host and the Display Separately

  • Using the Old 4D Arduino Adaptor Shield (Rev 1)

  • Connection Using Jumper Wires

  • Changing the Serial port of the Genie Program

  • Changing the Maximum String Length

Connect the Trimmer Potentiometer to the Arduino

Trimmer Potentiometer

Breadboard layout

The Complete Project

uUSB-PA5 programming adaptor

The uUSB-PA5 programming adaptor is used here only to power the display.


Adjusting the trimmer potentiometer.