Professional GUI design in 9 steps
A video tutorial
Let’s imagine that you want to build a battery controller. Your MCU (Arduino or whatever) retrieves the basic parameters (battery level, voltage, current) with the analogRead() function which returns abstract digital 10bit values between 0 and 1023. Instead of caring about conversion and scaling in your MCU code, let the Nextion HMI do this job – it has enough free resources. Just have your MCU sending the 3 raw numbers over. The Nextion will do all the math to display them correctly, and – as a cherry on the cake – it will even compute and display the electrical power from the voltage and current values.
Edit: Although this video is intended to teach about how to create a HMI project efficiently in all details and less about this virtual battery monitor, there were people requesting the project file. Please scroll down to find it!
9 steps to success
The video is rather lengthy, I admit, but it is intended to show every required mouse click and every keyboard entry in real time. This is finally the proof that such a HMI project comprising the GUI design and writing the required code in Nextion language can be done in 20 minutes:
And now: Happy Nextioning!
And here, as promised, the project file: blog_editor_demo.HMI
P.S.: Haven’t yet a nice Nextion HMI display? Get one here: https://bit.ly/3bMPtXn
