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: