Touch and Graphical displays: Part 3 - ESP32 M5stack Dial programming

Figure 1 - Cover

1. The project
2. The Hardwear
3. The software
4. Conclusion
5. Resources

The project

This is a simple project to show you how you can program the M5stack dial. In this project we are going to show you how you can use the display. This program is simple – it just draws a test card. A test card is useful as it allows us to check the quality of a display, measure the speed of the display and show off some drawing, bitmap display and graphing functions. The M5 stack dial includes a bright capacitive touch screen display with a resolution of 240 x 240 pixels. The program completes the test card program in around 2 seconds.

Figure 2 - the project

The hardware

The M5 stack dial consists of a programmable ESP32 processor, graphical display with touch screen, a rotating bezel with encoder, and a single push-to-make switch on the lower part of the bezel.

Figure 3 - M5 stack dial front and rear views

On the back of the unit there are two simple ports with Grove style connectors: one with two GPIO input outputs and another with I2C serial port. There is also a USB-C connector for programming and a separate power connector.

We really like the M5stack dial for a number of reasons:

• Firstly it is a surprisingly useful device that you can use for rapid development of electronic systems. You don’t always need lots of input output pins and connections - for many applications one input and one output is fine.
• The user interface provided by the encoder on the Dial is really neat. With good user interface design a rotary encoder and a single switch is all you need to provide a good way of inputting commands from a user. It has a touch screen interface but this is not really necessary - the encoder and switch are enough.
• It’s a tiny product with a big specification: ESP32 processor, touch screen graphical display, wi-fi interface, RFID interface, Real Time Clock, SPI/I2C/UART comms interface, and a couple of I/O pins.
• Its a great example of Chinese innovation from M5stack and a great examples of inovation in the graphical display market.

The software

Figure 4 - Flowcode software

You can program the M5stack Dial easily in Flowcode software which you can see in Figure 4. Flowcode allows you to simulate the M5stack dial’s graphical display as well as develop code for all other parts of the program. You can find out how to get hold of Flowcode and the ESP32 chip pack in the Resources section.

The program is well commented throughout so we will not go through the details in this article. The program consists of a number of macros that draw a background grid, draw the black and white chequers, daw the coloured side rectangles and draw a graph with a sinusoidal waveform that repeats forever.

There are some things of note about the components used in the program:

Figure 5 - Panel close up

• The display is type GC9A01A. It is a round display but is actually programmed in the same way as a GC9A01A square display. Flowcode has an option to select the display as round so you don’t see the missing corners. This display comes with a large library of built-in software macros
• You can embed up to 4 different fonts in the M5stack dial component: Flowcode allows you to choose from a library of fonts of various sizes.
• The Bitmap Drawer component allows you to embed up to 10 bitmaps in the ESP32 memory - there is no need for an external SD card in this system as the ESP32 device has huge amounts of built-in flash. The girl with the doll is only a 20KB image.
• You need to activate the backlight on pin IO9 (Port A bit 9) or the M5stack dial display will be all black.
• Flowcode has a graph component that allows you to draw different types of graph. For a bit of interaction we have mocked up a sine wave display in the program.

Conclusion

• The M5stack Dial is a wonderful device that combines the power of ESP32 processors with a graphical display in a really innovative form factor
• It's very easy to program
• It’s a great example of a packaged control and display product in a ready-to-use package
• It will find lots of uses in electronic systems

Resources

The program for the M5 stack dial is available from the Flowcode Wiki:

https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials

The M5stack dial is available in the Flowcode ESP32 chip pack. This is currently not a free part: the ESP32 chip pack costs around £60 or US$80 and is available from the RS website.

You can find pre-written Flowcode programs on the Flowcode website at: https://www.flowcode.co.uk/app-developer/free-apps/

Flowcode 10 is now available from the RS website. A free version of Flowode allows users to create programs for selected PIC, Arduino, ESP and RPi devices. Flowcode for professional users is a paid-for licence which includes compilers for 500 embedded devices and professional user benefits.

Buy Flowcode: https://software.rs-online.com/product-category/software/ 

Articles in the series:

• Touch and Graphical displays: Part 1- Basics
• Touch and Graphical displays: Part 2 - Display Programming
• Touch and Graphical displays: Part 3 - M5stack Dial programming (This article)
• Touch and Graphical displays: Part 4 - Graphics and Widgets
• Touch and Graphical displays: Part 5 - Menu system programming

Bio