Nextion is a Seamless Human Machine Interface (HMI) solution that provides a control and visualisation interface between a human and a process, machine, application or appliance. Nextion is mainly applied to IoT or consumer electronics field. It 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. It lets you avoid the hassle of wiring. We notice that most engineers spend much time in application development but get unsatisfactory results. In 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 WYSIWYG editor, designing a GUI is a piece of cake.
HOW TO USE ! :
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.2” 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 ITead 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 User Interface :
The GUI design and layout is done in a development environment (IDE) provided by ITead Studio. The Nextion IDE downloads with no issues from ITead Studio’s Nextion portal and is simple to install. Once installed opening the IDE presents the user with a clean and well organized user interface. The IDE 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) Image library, images used on the Nextion display need to be uploaded before hand. In order to do this all images first need to be imported to the IDE, the IDE then gives each image a unique number by which that image is referenced. It 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. It 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. It 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 Started :
ITead 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.
In 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.
Programing (Internal Code vs MCU Controlled) :
Once all the demos have been completed the next step is creating your own GUIs. These GUIs 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. In 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.
Arduino Library :
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 ITead 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.
Uploading Program to Nextion :
One of the really nice features about the Nextion is the ease with which a new program can be installed. Open the IDE 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.