The Sunday Blog: Understanding and Customizing HMI components

Part 1: Introduction

From today on, for the next few weeks, we well have a closer look onto the NEXTION HMI components which you place in the Nextion Editor and which allow you to design your GUI in the WYSIWYG way. The goal is that your GUI designing capabilities increase while you get a better understanding of how everything is built up and works under the hood.

But first, a quick reminder:

Don’t miss the NEXTION SUMMER CONTEST! Win a Nextion HMI and a Foca Max adapter by submitting your solution to the coding challenge, based on the “advanced mathematics” episodes of the Sunday Blog.

And now, back to the topic:

Some of you have perhaps, before finding out that things are much easier with the NEXTION HMIs, tried to add a simple color LCD display with a resistive touch sensor to your Arduino or any other MCU. While different Gfx libraries for drawing shapes, text, and numbers might prevent you from dealing with.every.single.pixel and touch controller drivers exist, there remains a heavy workload for the developer and for the MCU until things will work as expected. You might also have run into RAM issues, trying to set up a frame buffer and/or a component map (to  find out which component was clicked after your MCU received the touch coordinates over I2C or SPI).

All this belongs now to the past! The Nextion HMI gives you the same LCD plus a dedicated MCU for all these GUI related task, a WYSIWYG editor, and an easy to learn programming language which can be used either directly in the editor to add local event handler code or send specific data to the MCU, or command sequences can be sent over Serial from your MCU to the NEXTION HMI as simple ASCII text over Serial. No more hassle with installing SPI, I2C, Gfx, and touch controller libraries. It’s all in the Nextion firmware. And there is more. We call it components (more details later) which represent prefabricated typical GUI elements.

Using a Gfx library to show “hello world” in blue letters on a white background centered on a black screen means:

  • finding and including an appropriate font.h file in the desired size
  • drawing a full screen filled rectangle in black
  • calculating how much height and width your “hello world” will be in pixels
  • adding a few pixels to these, so that there will be a little white space around the letters
  • calculating the start coordinates for the rectangle to be centered on the screen
  • drawing the rectangle
  • drawing the text
  • phew…

 

In the Nextion editor

  • set the page background color (bco) to 0 (BLACK)
  • take a Text component and place it at the center of the page
  • set its txt_maxl to 11, and the pco  to 255

 

you are done and your MCU hasn’t been used for a single CPU cycle. For this example, you even don’t need a MCU, the NEXTION HMI was able to handle everything by itself!

But we won’t do the second step before the first. Let’s look at the available components in their functional and logical order.

In the beginning, there was the Hotspot

… or the Page because it is needed as a container for all other components. But a page is a hotspot by itself, so let the egg-hen discussion aside and let’s have a closer look at the hotspot.

It’s the simplest of all components, so simple that it is invisible. But it has a mighty functionality which almost all other components inherit from it: When you touch the screen, the hotspot is listening on the touch coordinates and will, if these match inside its dimensions, launch some event code. If it’s only about a simple notification towards your MCU, there is no need to write any code, enabling the “Send component ID” will even generate the corresponding line of code.

We’ll learn more about using the hotspot next week, since there is a way of highly efficient GUI programming using only hotspots, which considerably increases the execution speed and keeps resource usage low on our beloved NEXTION HMIs. But that’s a longer story.

Stay tuned!