In this section we show you how to use the Display component in Flowcode. Once you know the colours, fonts and other parameters of your design, display graphics are just a series of commands to draw the lines, graphics and text in the right places.
One of the great features of Flowcode is that you can simulate the graphical display on screen - this saves hours of coding time.
First set up the panel in Flowcode as above: PWM channel connected to PortA.9 (GPIO9) This allows us to control the brightness of the display.
Then add the GC9A01A_SPI display. Use the images here to get the correct settings.
If you need more information then you can left click on the display and click on HELP to get more information from the Flowcode Wiki.
Notice that we have not got the exact fonts that we wanted - Flowcode does not include all fonts - although more can be made - but the fonts that we have should be fine.
You can also set up the Bitmap drawer. This will need the central graphic copying to the same directory as the Flowcode file so that it simulates properly.
The flowchart you can see above will produce the screen you can see below.
Over to you#
Now that you understand the basics of how to control the graphics and text you can complete the design of the first screen using the specification:
Download the program to the M5 stack dial and check is all works ok! Note that if you want to you can also create your program in C code or in Pseudocode:
Open the program ‘Using the display.fcfx’ and download it to your M5 stack Dial.
Use Flowcode to create the Home screen you can see here.
Make sure you include the light purple cross hatch - you may want to make a separate macro to print those.
- You will need to have the bitmap ‘M5Stack Lock Test Purple.bmp’ in the same directory as the Flowcode program.
Video and example file#
A Flowcode example file accompanies this tutorial:
Further reading: Flowcode Wiki.