G2 - Graphically Graphical LCD programming for Arduino by John Howarth

G2 - Graphical GUI Metaprogrammer

What does it do?

With this program you can create a GUI (graphical user interface) full of buttons, sliders, and other widgets for display on a LCD screen connected to a microcontroller (e.g. Arduino).

Example steps for an Arduino based LCD project.

To refresh with any GUI design changes, make them in your G2 LCD project, regenerate the files into your project directory, reload the project, and hit upload.

The project image was a design template made in a graphics program, below is a photo of how close the program is currently capable of getting to that. The project image is a design template instead of this photo of the LCD because a photo simply can't capture the vibrancy of the LCD.

Photo of the LCD screen
Photo of the LCD screen

The main differences are with the text, as there are limited fonts and sizes supported by this screen using the basic libraries.

The program also generates its own preview of course.

In-program preview
In-program preview
In-program preview
Full program screen view

What are the hardware requirements?

We are not a hardware manufacturer and do not want to sell you hardware, so we can choose to support hardware that is of the best value to you. However, we do appreciated good value, and the screens we use and directly support will reflect that. Currently we have developed on an Arduino Due and Due Compatible, and an Adafruit RA8875 display driver chip and a similar RA8875 display unit from buydisplay. A complete package priced from as low as $40USD!

Widgets

Widgets are the buttons, display items and anything else that can be dragged and dropped onto an LCD layout.

Basic Level Widgets

While there is not many, and they are not the prettiest widgets, there is very little you can't do with just the basics.

Advanced Level Widgets

Some of these widgets are not yet developed/available.

Advanced widgets are for when form is important, or when function is intricate.

User Widgets

Users with the advanced widgets unlocked can also add their own widgets, through an xml scripting system.

Part of the Side Toggle widget
Part of the Side Toggle widget

For Makers of all levels and even Professionals

If you can use the Arduino IDE, you can use this program. You don't need to know all about the C++ classes and structs and pointers this relies on. However, the generated code is well annotated and can be modified if you have very specific requirements which are not supported. And the program itself has many places to write C++ code which can be parsed and put into the generated files. The running GUI code requires just one function call, setup is another single function call.

How it works

This software is designed to be very object oriented, and uses object abstraction with regards to hardware.

Hardware Overview
Hardware Overview

The hardware configuration is very simple, your screen (or screen controller + screen) is wired to the microcontroller, which is then wired to anything else it needs to be, as per normal.

The object oriented nature of the software structure means is the generated code will always use basic C++, and will run on any (the vast majority) microcontroller that supports this. All those Arduinos so popular with makers will work just fine.

Software Overview
Software Overview

The generated class files are the main part of this system. The main microcontroller file initializes this in the standard fashion. It must also periodically call a display scan function to update and perform any display functions. Display functions like changing the menu, registering a button press; and even using the micro's digital I/O. This function call can also return an integer to represent data the microcontroller code should act on; these will generally be higher level functions as simple I/O can be more easily performed from within the generated class.

On the other side the screen requires another library class to interpret the basic commands from the generated code. These commands are things like; draw a rounded rectangle here, draw this text, draw these lines, etc, and also touch commands if the screen supports it. Most screens cannot do this directly, but any of these methods can be simplified down as required, right down to a draw this pixel which makes up part of this bordered rounded rectangle. This down-simplification will always be the same for a specific screen, thus a static library class can be written to do it, and be completely transparent to the user. So, we expect to add more and more of these screen specific libraries as we add more and more display units over time.

Simple Setup

Each supported LCD will have instructions on what code to add to your sketch (only a few lines), common wiring configurations for the device, which is really all you need to get a GUI running.

The following video shows the process of adding inputs and output through the screen using basic arduino functions. It's a bit longer than the Project Video but will give you a better idea how the software is used.

Program interface may be subject to change over the course of this project.

Capabilities

All the capabilities of your microcontroller, with a nice user interface.
  • Hobby projects like a servo controlled laser pointer
  • Automation projects like pump and valve control for your sprinkler or fountains
  • Multi-screen projects like home lighting control.
  • Whatever else you can think of!

Benefits

Faster Development! No wiring needed to add another button or led.

More I/O! SPI capable displays can use fewer than 6 I/O pins.

Potentially Lower Component Cost! With an LCD screen you have a flat rate cost of hardware, 1000 buttons cost the same as 1.

Waterproof! No, not my demo one, but an LCD is suitable for waterproofing, flush mount the LCD within a waterproof enclosure then place a clear film across the LCD and enclosure. The touch functions will still work, and water will not be able to enter.

It Just Looks Better! Using a touchscreen creates a modern and sophisticated look for the device.

Tutorial Video

Stretch Goals

This was orinally launched as a kickstarter, though it did not receive funding, I'll leave the stretch goal list here just to show you what could be coming down the pipeline.

10k In-built calibration function. Assign a button to this and a screen will pop up to click on a number of points, which then calculates the calibration data for the touchscreen. This can be saved to ROM if available, or recorded and written into the program.

15k Dial display widgets. Common dial types to make your project look really good, including needle and fill style dials.

20k Picture object. An rgb image stored in program memory or on an SD card if available. Used as a background or in picture buttons.

25k Keyboard. A pop up keyboard for text entry and text entry boxes.

30k Open source. At the conclusion of this project's development it will be released as open source. This is expected to be in Q1 of 2016. Backers will still get earlier release versions at the specified times.

35k Comprehensive open source documentation. Including xml scripting guides for both the creation of new widgets, and the addition of widget functionality. Support in a web forum with regular developer Q&A access.

So what is all this money for?

The funds raised will cover my time (both already spent, and still required) to make this into quality software. The stretch goals are where I stand to make a little profit, with the open source goal set where I feel is a decent value for the project; from which it can then grow into something even better with community involvement.

Links


What's in a name?

The development title for the project has been Graphical GUI Metaprogrammer, as it is a graphical way to create GUI code for use in another programmer. Or, G2 for short.