The Sunday blog: HMI, cybernetics and the steam engine

Part 5: Well thought-out and efficient HMI code

In the last episode of this series, we considered how we could transfer the status information of our virtual dishwasher to the HMI as efficiently as possible without placing unnecessary load on the MCU. We saw that we put everything into a 30-bit bit field, so that sending a single 32-bit integer number is sufficient. Today we want to see how we use Nextion code to unpack and display the information.

Analysis of the bit field

As a reminder here again the structure of our data packet from the MCU:

Our first task now is to provide enough variables for all this information. Since editor version 1.60 this has become much more convenient. We don’t need to generate numeric variable objects (global or local) anymore. But can define them in the Program.s file, just like we are used to in C/C++. So let’s write for the raw data first:

This allows us to save all primary information after the data packet has been decomposed. The choice of the prefixes n_ for numerical information and b_ for logical information is a matter of personal programming style and not mandatory. However, we need some additional auxiliary variables, which we also initialize immediately, to prepare some information in a way that makes it easier to display it:

Extract and display the information

Since there is no trigger or event in the Nextion system, which reacts directly to our variable sys0 changed by the MCU, we use a timer to check regularly if the status has changed and then update our display if necessary. We choose an interval of 1 second (1000ms), with our display showing the machine status almost in real time. At the same time, we use the if clause at the very beginning to prevent the display from being rewritten if nothing has changed. So the timer gets the following event code:

As you can see, there is no magic sauce, just simple operations, similar to what you need to manipulate 32bit hardware registers on your ARM based MCU. This is everything one needs to create a simple and rudimentary interface. You have still to add the corresponding number and text fields on page 0 with the graphic editor. But that is a trivial task and I let it up to you.

Next Sunday, we will see how we can use free tools to embellish our GUI with nice graphics. Advanced programming will reduce the number of data fields. That will give it a more professional and finished look! Thank you for reading and stay tuned!