Software apps and online services
The Biomaker Arduino starter kit contains a 4D Systems µLCD-32DT-AR Arduino Display Module Pack, which includes a Gen4 µLCD-32DT 3.2" LCD display with resistive touch, a 4D Arduino adaptor shield and 5 way interface cable. The LCD display can be hooked up to the Arduino via a serial port. It is possible to build sophisticated user interfaces for Arduino-based instrumentation using graphical tools.
The µLCD-32DT-AR customises the µLCD Display specifically for interfacing with the Arduino, to provide a quick and easy interface without any wiring hassles. The Arduino Display Module Pack enables an Arduino user to quickly connect the 4D Arduino Adaptor Shield to their Arduino, connect the 5 way cable between the Adaptor and the Display Module, and be connected in seconds to start programming their new 4D Systems Display. The µLCD-32DT-AR has a comprehensive range of serial commands ready to be received from the Arduino, to draw primitives such as lines, rectangles, circles and text, displaying images, playing sound and logging data to uSD card. It can utilise the Arduino's UART Serial Port and a single Digital pin. 4D Systems also provides a graphical programming environment for the code-free assembly of sophisticated user interfaces.
The 4D Systems touchscreen display can be hooked up to the Arduino via a serial port. It is now possible to build sophisticated user interfaces for Arduino-based instrumentation using graphical tools. Here’s a guide for how to go about this:
1. Program the touchscreen display
- Plan your scheme for hardware connections and lay out a draft of the onscreen indicators and control elements that you want to use.
- Load the 4D Systems IDE on a Windows PC, or Windows emulator on a Mac (Parallels works well). The software environment provides ViSi-Genie, a wysiwyg tool for layout of user interface tools.
- ViSi-Genie provides a wide range of interactive user interface elements for display of gauges, meters, indicators and input devices such as switches, knobs, sliders and buttons.
- After laying out the screen display, (i) the interactive code can be downloaded to the flash memory in the programmable display via a 4DS adapter, and (ii) the graphical elements can be downloaded directly to a µSD memory card that plugs into the display.
2. Build interaction between the Arduino hardware and the customised display
- There is now a XOD library that allows graphical programming of Arduino hardware for two-way communication with screen graphical elements through a serial port.
- Use the XOD graphical programming environment to build interactions between the Arduino-connected hardware and screen widgets.
- Test interaction between the Arduino hardware and 4DS touchscreen through the XOD development environment.
4D Systems provides four different environments for programming the touchscreen - we recommend use of the ViSi-Genie interface for code-free layout of custom user interfaces. Obtain from: (https://www.4dsystems.com.au/product/4D_Workshop_4_IDE/downloads). The basic version is free.
4D Systems provides a free Windows-compatible software environment for programming the touchscreen displays. Workshop4 includes four development environments, for the user to choose based on application requirements or user skill level. ViSi-Genie is an advanced environment that doesn't require any text-based coding, it is done automatically for you. The software provides a toolbar filled with graphical widgets. These can be simply dragged to lay out the prototype interface with the objects you want, set the events to drive them and the code is written for you automatically.
ViSi-Genie is a drag-and-drop rapid development tool for designing and building graphic user interface on 4D Labs processor-based displays. It provides an easy method for designing complex graphics user interface (GUI) applications without any coding. A simple GUI application to be ‘designed’ from scratch in literally seconds. ViSi-Genie does all the background coding, with no programming language to learn.
Above:Screen objects can be interactively resized, positioned and aligned in ViSi-Genie, before being downloaded to the display.
Pick and choose the relevant objects to place on a virtual display. The full animation of the objects is done under-the-hood, such as pressing a button or moving the thumb of the slider. Each object has parameters which can be set, and configurable events to animate and drive other objects or communicate with an external host. Simply place an object on the screen, position and size it to suit, set the parameters such as colour, range, text, and finally select the event you wish the object to be associated with, it is that simple. Objects are classified in three different groups:
- INPUT OBJECTS, as a button or a keyboard,
- OUTPUT OBJECTS, as a gauge or a meter, and
- COMBINED OBJECTS or INPUT/OUTPUT OBJECTS, as a slider which acts as both an input and an output.
In seconds you can transform a blank display into a fully animated GUI with moving meters, animated press and release buttons, and much more. The assembled code can be directly downloaded to a 4D Systems display to check the screen display. (Note: compiled code is downloaded to the display ViSi-Genie, and stored graphic elements are separately downloaded to a µSD memory card in a semi-automated process). ViSi-Genie provides debugging tools to interrogate communication streams to/from the programmed display. The ViSi-Genie environment runs under Windows, but can be well implemented under Mac OS X using an emulator like Parallels.
Above: examples of button/switch input widgets that can be added to a display, to create a custom user interface.
Lists of the types of elements that can be added to the 4D Systems displays from the ViSi-Genie programming environment.
After a user interface has been developed in ViSi-Genie, it must be downloaded to the 4D Systems display in a two-step semi-automated process. Code is loaded onto non-volatile memory on the display board via its serial port (while it is disconnected from the Arduino). Second, graphical interface data is loaded onto the display's µSD card, using a card writer attached to the ViSi-Genie host computer. The µSD card is plugged back into the 4D Systems display, and display plugged back into the Arduino via the dedicated shield.
4D Systems Application Note: Connecting a 4D display to an Arduino hostThis application note shows how to create a ViSi Genie program and how to use the ViSi Genie library for the Arduino IDE. A simple project is described. This consists of a 4D Picaso module displaying six objects – a LED digits, a slider, a cool gauge, a string, a user LED, and a static text (label). To recreate the application described in this demo, the user first creates a ViSi Genie program in the 4D Workshop IDE and downloads it to a 4D display module. In this example, the Arduino host is programmed using the Arduino IDE. The Arduino and display communicate via a serial port. The Arduino programme loop must be configured to receive commands from interactive controls on the display, and to send relevant updates.(https://www.4dsystems.com.au/appnote/4D-AN-00017/)
Once a graphical interface has been programmed and downloaded to the display using ViSi-Genie-Genie in the 4D Systems Workshop4 environment, Arduino hardware can be used to communicate with individual interface elements. Communication takes place through a serial port, where information is read from, or written to display objects through a series of commands. The commands take the general format of:
Format for serial communication between the programmable display and the host device, which could be a Biomaker Arduino, computer or Raspberry Pi. Each command is followed by an identifier for the target GUI widget, parameters and checksum.
ViSi-Genie is used to design the user interface for the specific display model. The layout can be tweaked interactively in the development software. When finished, the interface code is downloaded to the display controller via its serial port. GUI interface features can be tested by interacting with the display. ViSi-Genie also provides debugging features for serial communication. When ready, the programmed display can be connected to an Arduino board via serial ports. The Arduino must then be programmed to communicate with the different graphical screen elements
The task is made easier by (i) a limited number of precomposed user interface elements, and and conserved communication formats and addresses, and (ii) the availability of a new XOD library for code-free programming of 4D Systems touchscreens - thanks to Max Danilin and Victor Nakoryakov, who are play a key role in the development of XOD. They haved helped with the development of XOD nodes for touchscreen support (https://forum.xod.io/t/visi-genie-library-to-work-with-4d-ulcd-displays/1625) - to allow simple programming of sophisticated interfaces and communication with Arduino-controlled hardware, using XOD nodes. (Check out https://youtu.be/9Nm_3ucTNcM for a video summary of the type of outcomes one can expect). The draft XOD library can be found at: https://xod.io/libs/gabbapeople/4d-ulcd/. It provides a library to work with gen4-µLCD-DT display modules by 4D Systems. This library provides graphical nodes for basic operations with common ViSi-Genie objects of the 4D Systems workshop IDE - and allows simple programming of user interface interactions.
read-dip-switch: Reads a value from a genie "DIP SWITCH" objectread-knob: Reads a value from a genie "KNOB" objectread-rocker-switch: Reads a value from a genie "ROCKER SWITCH" objectread-rotary-switch: Reads a value from a genie "ROTARY SWITCH" objectread-slider: Reads a value from a genie "SLIDER" objectread-trackbar: Reads a value from a genie "TRACKBAR" objectread-winbutton: Reads a value from a genie "WINBUTTON" objectwrite-angular-meter: Writes an integer value to a genie "ANGULAR METER" objectwrite-cool-gauge: Writes an integer value to a genie "COOL GAUGE" objectwrite-custom-digits: Writes an integer value to a genie "CUSTOM DIGITS" objectwrite-led: Writes an integer value to a genie "LED" objectwrite-led-digits: Writes an integer value to a genie "LED DIGITS" objectwrite-meter: Writes an integer value to a genie "METER" objectwrite-tank: Writes an integer value to a genie "TANK" objectwrite-user-led: Writes an integer value to a genie "USER LED" objectinit: Initializes a 4D uLCD device with custom settings
Following this, Bradzilla84 has extended the support in XOD - and has provided a library that contains the following functions (bradzilla84/visi-genie-extra-library):
Contrast: Display on or off (uLCD-43P/PT/PCT Brightness 0-15)Dip switch: Read and WriteKnob: Read and WriteRocker switch: Read and WriteRotary switch: Read and WriteSlider: Read and WriteTrackbar: Read and WriteWinbutton: Read and WriteAngular meter: Read and WriteCoolgauge: Read and WriteCustom digits: Read and WriteForm: WriteGauge: Read and WriteImage: Read and WriteKeyboard: ReadLed: Read and WriteLed digits: Read and WriteMeter: Read and WriteStrings: Pre-Read, Pre-Write, Dynamically Created ASCIIThermometer: Read and WriteUser led: Read and WriteVideo: Read and WriteSound: Read, Play, Volume, Pause, Continue, StopTimer: Write
Grab a copy of the two libraries for code-free programming of custom interfaces using your Biomaker Starter Kit at https://xod.io/libs/gabbapeople/4d-ulcd/ and bradzilla84/visi-genie-extra-library (install both), and please provide feedback to the developers. These tools are hugely enabling - providing a code-free development environment for building sophisticated user interfaces for low cost, DIY instrumentation.
The Arduino device and the touchscreen are connected via an Arduino shield, and communication is established by seting up a serial port connection throught the UART node. The 4D-µLCD nodes can then be used read and write data to the screen elements. For example, inputs from switches and knobs can be used to animate on-screen indicators and gauges. Most of the animated interactions are handled directly by the display processor and the ViSi-Genie-Genie programmed elements (for example, graphical responses to touching an on-screen switch).
4D Systems ViSi Genie User Guide(https://www.4dsystems.com.au/productpages/ViSi-Genie/downloads/Visi-Genie_userguide_R_2_0.pdf)
4D Systems ViSi-Genie Reference Manual(https://www.4dsystems.com.au/productpages/ViSi-Genie/downloads/Visi-Genie_refmanual_R_2_0.pdf)
Arduino IDE software library:(https://github.com/4dsystems/ViSi-Genie-Arduino-Library)
Demonstration: This demo creates a touchscreen calculatorCode: (https://github.com/4dsystems/ViSi-Genie-Arduino-Demo-Calculator/)Video: (http://www.youtube.com/watch?v=KFdDmTqGhK4)
Demonstration: This demo controls a tri-coloured LED along with displaying images from the SD card on the display in a slide show. Code:https://github.com/4dsystems/ViSi-Genie-Arduino-Demo-Mood/
Arduino IDE software library:4D Systems provides an Arduino IDE library that allows the use of programmed displays with Arduino boards programmed with the standard IDE. (https://github.com/4dsystems/ViSi-Genie-Arduino-Library)
This IDE library provides high level functions for the Arduino, to simplify communication with 4D Systems modules when using a module configured with ViSi-Genie. Inside the library are 3 example sketches, to assist with getting started using this library. Inside is also a ViSi-Genie Workshop4 project, which can be used on a range of 4D Systems displays (designed for a uLCD-32DT). It illustrates how to use some of the commands in the library include Read Object, Write Object, Reported Messages, Write Contrast and Write String. There are well-documented examples available from 4D Systems.
4D Systems Gen4 µLCD 3.2” resistive touch screen:Current Price: around £50/$70 per kitRS online: https://uk.rs-online.com/web/p/lcd-colour-displays/12580202