text.skipToContent text.skipToNavigation

Arduino Round Gauge

The XC4284 Round LCD Module for Arduino is an impressive piece of gear, and is capable of all manner of graphics. What it really suits is being used as a round gauge, perhaps neatly filling a hole in the dash that used to have a gauge, but doesn’t now. Here we’ll show you how to interface the Round LCD Module to an Arduino board for displaying system voltage, including a few different styles. All we’re really doing is displaying a numerical value, so any sort of numerical data (eg temperature) could be added to the gauge.

Shopping List

XC4430 Leonardo Main Board
XC4284 Round LCD Module
RR0596 10kOhm Resistor Pack
RR0572 1kOhm Resistor Pack
HM3211 Header Strip

We’re using a Leonardo here because it has a serial port which is separate to the USB serial port. Other boards may work with changes; for example, the Mega has three extra hardware serial ports or you could use a software serial library to operate on other pins.


To use the Round LCD Module to its full capacity, we need to install the 4D Systems Workshop IDE. This will allow us to build the graphics that will be displayed on the module, and also create a small program for the module to allow it to interact with the Arduino board. The download for the Workshop IDE is on this page: http://www.4dsystems.com.au/product/4D_Workshop_4_IDE, or can be accessed directly from http://www.4dsystems.com.au/get/ws4/software/. The PRO version is not needed for our project.

Install the software as per the instructions (install instructions here: http://www.4dsystems.com.au/productpages/4D-Workshop-4-IDE/downloads/4D-Workshop-4-IDE_installguide_R_2_0.pdf). You will also need the driver for the uUsb-PA5 USB-Serial adapter which is included- these can be found at https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers, or by following the link in the installation manual.

Then run the Workshop IDE. There is a user guide here: http://www.4dsystems.com.au/productpages/4D-Workshop-4-IDE/downloads/Workshop-4_userguide_R_2_1.pdf, but we will walk through everything we need to create our gauges. We will be using the Visi-Genie tool.

Click on File>New, and choose the display from the list (the proper name is uLCD-220RD).

There will be a message about the round display clipping some pixels - click OK, then click the Visi-Genie option:

We can now start composing the gauges on the display using this screen. The buttons and gauges can be selected at the top, and then placed by clicking on the screen.

Alternatively, you may wish to use one of the gauge displays that we have already created, in which case select 'Open' from the menu bar, and choose a file to open. You may even wish to tweak the already created files.

Once some graphics items have been placed, they can be adjusted using the 'Property' drop down on the right of the screen. The panel at left should give a good approximation of how the display will look, but doesn't fully clip the curved corners of the display. When you have finished configuring your display (or even just want to test it out to fine tune it), plug the uUsb-PA5 USB-Serial adapter into the computer and into the display module, making sure the colours and pins match as per the photo.

Click the Comms tab and ensure that the Round LCD Module is connected. You may need to check and change the COM port and click the round button to make sure the connection is made. The display below is typical of a correctly connected display.

The display should light up with some diagnostic/boot information after a few seconds.

Click the Comms tab and ensure that the Round LCD Module is connected. You may need to check and change the COM port and click the round button to make sure the connection is made. The display below is typical of a correctly connected display.

Click the left Build/Copy/Load button to build the project. The Workshop IDE will generate the graphics and then request to copy the graphics files to a MicroSD card (there should be a MicroSD card in the box). Make sure the MicroSD card is inserted into a reader and click 'OK'. The drive letter and filenames may be different.

The IDE will then ask to upload a control program to the display. The PmmC is like an operating system on the module, and there is no need to update it unless you know that there are updated features that you need. Simply click 'OK'.

After this, the module will reboot, but will be showing an error message due to the card not being inserted- take the card out of the reader and put it in the display module, and the display should reflect the design from the IDE.

Note how the corners are cut off due to the limitations of the display. To test the display and commands needed to operate it, click on the tools tab and click on the GTX icon:

This opens a window which can be used to send commands to the display.

The above is the window in use. The lines of green text to the right are the commands, and are triggered by the buttons on the left. The lines of red are the display's responses and acknowledgments- for the most part, these are the hex value 0x06, which means received OK.

What we need to know is the structure of the commands so that the Arduino can emulate them. The first three commands start with '01', and are 'set value' commands, and require a ID (second byte), index (third byte) and value (fourth and fifth bytes). The sixth byte is a checksum calculated to ensure that the data is not corrupted. We've written a command to emulate these:

sendcmd(byte id, byte index, unsigned int n)

For the Arduino to issue the same as the first command above (set gauge to value 0), we would put the following in the code (the 0x0B is for gauge objects, and the index of 0 is the 'first' gauge object):

sendcmd(0x0B, 0x00, 0);

Note the addition of 0x to show that we are using hexadecimal to the Arduino IDE. There is also a command for sending text to string objects. Note that the third object can be controlled by the sendcmd function to display an indexed pre-programmed string or raw text:


Finally, there is the setcontrast command, which simply takes a value between 0 and 15. The actual result is more of a change to the brightness, and is ideal for dimming the display, for example to ensure the display doesn't dazzle the driver in a car at night.

setcontrast(15); //full brightness

At this stage, check that the display is doing what you would like, and record the object IDs and indexes for implementation in the Arduino version. If the display isn't quite what you want, you can close the GTX window, make changes, and rebuild using the build/copy/load button, making sure to take the MicroSD card out so that it can have the files copied.


To connect the display to the Arduino using the data cable, and make sure the headers are set as per the photo:

At this stage, you can use the XC4284_TEST to cycle through the values and run some basic test routines to see that the display is responding correctly to Arduino commands.

There are also a few components to be added to be able to read the supply voltage. Snap off a length of four header pins, and insert them into the headers on the Arduino to hold them steady (it doesn't matter where for now). Solder the resistors like this:

And then plug into GND/VIN/A0 as shown. One of the pins will be hanging in space, but it doesn't have anything connected anyway. You should have the rest of the circuit connected by now.

At this stage, the construction is complete and the final Arduino_Round_Gauge sketch can be uploaded. Check that the display reflects the voltage on the VIN pin. Even if the Arduino is connected via USB, you should still get a reading of around four volts. The Arduino's voltage regulator ensures that it gets 5V. The regulator can handle up to 15V, which should be fine for most automotive 12V systems. The display was using about 180mA at full brightness, so power dissipation of the regulator should be fine at these levels too.


A good way to connect the project to a car (for example) is to use a PA3711 plug to provide power to the DC jack on the Leonardo, making sure to connect the centre pin to positive.

If you want more background on how Visi-Genie works, a guide can be found here: http://www.4dsystems.com.au/downloads/Application-Notes/4D-AN-00017_R_1_01.pdf This includes information like how the ID's are allocated, and might help troubleshooting a display.

As always, there are many options for customizing the project, and pretty much any information that can be displayed numerically can be displayed on the Round LCD Module.

Please see the attached Arduino-Round-Gauge.zip for code files.