Nextion HMI Display TFT 3.

2"inch

D escr iption :

Nextion HMI Display - A User Interface that is Simple and Easy to Use
Over view :
Nextion is a Seamless Human Machine I nterface (HMI ) solution that provides a
control and visualisation interface between a human and a process, machine,
application or appliance. Nextion is mainly applied to I oT or consumer electronics field.
I t is the best solution to replace the traditional LCD and LED Nixie tube.
Nextion includes hardware part (a series of TFT boards) and software part
(the Nextion editor ). The Nextion TFT board uses only one serial port to communicate. I t
lets you avoid the hassle of wiring. We notice that most engineers spend much time in
application development but get unsatisfactory results. I n this situation, Nextion editor
has mass components such as button, text, progress bar, slider, instrument panel etc. to
enrich your interface design. And the drag-and-drop function ensures that you spend
less time in programming, which will reduce 99% of your development workloads. With
the help of this WYSI WYG editor, designing a GUI is a piece of cake.

H OW TO U SE ! :
With the complexity and sophistication of embedded systems today, a necessary
component is a user interface that is more than an indicator LED. Today it is expected
that the user will be updated with relevant and timely information in an aesthetically
pleasing manner. While I have yet to meet an embedded developer who enjoys GUI
design and programing there are some easy and some not so easy methods to
accomplish this.

Just recently I was placed with the task of creating a controller with a touch
display. The development software has over 1000 pages of “help files” and little to no
worked demos. The first task was to try to use buttons to increase and decrease a
displayed number and then load that to the control unit. After a large undisclosed
number of hours neither have yet to be successfully accomplished. The support
consisted of being sent completed projects to examine and run in simulation, sadly this
did not help.

Out of the Box :

The displays ship in a neatly packed box that fits the displays quite snuggly. The kit
includes the display (3.5” in this case) and a power connector. The connector allows the
display to be easily powered from any USB power source.
When the unit is powered up for the first time there is a clean and neat welcome screen
that displays the I Tead name and logo as well as 6 demos. Going through the demos is
not too impressive as they show the functions available in a very simplified form, that is
except for the last one. The last demo allows an evaluator to see that the display is not
merely a touch screen but can also run intelligent code.
The demo is to find 5 differences between the two pictures and shows three hearts as a
player's lives, when a wrong area is selected these hearts go dark one at a time. While
this may seem trivial, it clearly shows that the display has some computational abilities.

The U ser I nter face :

The GUI design and layout is done in a development environment (I DE) provided
by I Tead Studio. The Nextion I DE downloads with no issues from I Tead Studio’s Nextion
portal and is simple to install. Once installed opening the I DE presents the user with a
clean and well organized user interface. The I DE is organized into 8 sections as shown in
the image below, each section has a unique task to perform or information to convey.
The 8 sections functions are as such.
1) Menus including save, open, etc. are found here.

2) I mage library, images used on the Nextion display need to be uploaded before hand.
I n order to do this all images first need to be imported to the I DE, the I DE then gives
each image a unique number by which that image is referenced. I t is then from this
section that images and backgrounds can be selected and positioned in your GUI .

3) Font library, text entered in the GUI needs to be setup to be correctly displayed on the
display. To do this fonts are created in specific sizes and styles and then configured for
the specific display. After completing the configuration the font can be added to the font
list.

4) Working area, this is where the graphical display is designed and shown. I t is in this
area a scale representation of the display is shown as a canvas on which to work. All
desired components are added and arranged with in this area to represent how the final
display should look.

5) Page area, display screens are called pages. New pages are added and named here. I t
is with the names listed in this panel that different screens are selected by either
internally written code or by a connected microcontroller.

6) Attributes, component attributes such as, display text, value, color, background, are
set in this window.

7) Compiler Output Window: if errors occur, they will be shown in this area.

8) Event area, code to control how the display behaves is added here allowing for simple
display control to be achieved without the need of an external microcontroller.
Getting Star ted :
I Tead Studio have wisely provided a number of demos with explanations to get any
user up and running in a short period of time. The user guide lists 7 examples that start
with simple text and button components and ends with simulating a slide unlock and a battery charging
symbol .

I n each example the components used are well explained. The demos follow a
simple and easy progression making them easy to follow and understand. The demos
can easily be completed in a few minutes including understanding what each demo is
trying to convey. One difficulty is some of the english. Because the sentence structure
does not always flow as it should, one may need to take a second glance, but the intent is
clearly understood. One other issue is the difficulty in finding the resources used in the
demos. Pictures and fonts listed are not easily available. The only remedy for this is to
download the completed demo, then remove all components and images from the
working area. While this works to complete the demo it lacks the hands on feel for
setting up the fonts and importing needed images.
Pr ogr am ing ( I nter nal Code vs M CU Contr olled) :
Once all the demos have been completed the next step is creating your own GUI s.
These GUI s can be self contained or they can interact with a connected MCU. The demo
mentioned at the beginning of this blog is a self contained program. The demo was put
together to explain what an easy to use display is. I n that demo there was 6 lines of code.
Four of the lines were the same and the other two only differed by a sign.

The first line is “page0.z0.val=page0.z0.val+1”. Page0 refers to the screen number

the component is part of. z0 is the name of the component, in this example instead of
using a variable a gauge was used to keep the demo simple. val is the value of the
specific component, in this case the gauge counts between 0 and 360, if a variable was
used this could be set to have different limits. By adding this one line of code the value
of the gauge is incremented by clicking on a button without the need for a
microcontroller.

The second line is “n0.val=z0.val”. This time the page was omitted to demonstrate
that when referencing the same page, the page identifier can be omitted. This simple
line updates the number displayed in the number displayed on the screen.

The last line of code is “cov z0.val, t0.txt, 0”. This takes in a value “z0.val” and
converts it to a second type (string in this case) and sends it to the required parameter,
“t0.txt”. This takes the value from the gauge and displays it in a text box.

The beauty about this is the same code can be easily switched to run on a
microcontroller of your choosing. By attaching the UART lines to your microcontroller
the same commands can be sent to the display to achieve the same results. The Nexion
sends hex commands to the microcontroller in a very predictable and easy to parse
format. While a conversion from hex to the desired result (integer, text, etc) is required
this would not be too complicated for most programmers.

Ar duino Libr ar y :
On the topic of parsing and programing a parser, this is not necessary if an arduino
or arduino like device is being used (eg. Energia). This is because I Tead Studio has taken
the time to write a comprehensive Arduino library for the Nextion. This allows new makers
as well as those trying to get a quick project out the door to complete their project that
much faster.
U ploading Pr ogr am to N extion :
One of the really nice features about the Nextion is the ease with which a new
program can be installed. Open the I DE and click on File > Open Build Folder and select
the .tft you would like to run on the display. Once this file has been copied to the
microSD of your choice, insert the microSD into the Nextion’s microSD card slot and
power on the Nextion.

The Nextion will go into a bootloader mode and will display the file size and the
progress. This takes a few moments, once completed a message “Update Successful!”
will be displayed on the display. Power down the display, remove the microSD card and
power up the display again. This time the GUI you have selected will be running on the
display.