0

members

Easy Basics: Project 081a How to use the Nextion Editor with Nextion HMI display

of Acoptex.com in UNO

Basics: Project 081a

Project name: How to use the Nextion Editor with Nextion HMI display

Tags: Arduino, Arduino Uno, How to use the Nextion Editor, Nextion, Nextion HMI display, Smart LCD Display Module, NX4832T035_011, Nextion editor, IM150918001

Attachments: library1, projectfiles

In this project, you needed these parts (Dear visitors. You can support our project buy clicking on the links of parts and buying them or donate us to keep this website alive. Thank you):

1. NEXTION HMI Display NX4832T035_011 1 pc

Package normally includes: Nextion Display, connecting wire, a power supply test board.

2. Nextion editor v 0.53 ( you can download it from here  )

3. Micro USB cable 1 pc

4. Phone charger 5V DC 0.5A 1pc (it can be different - depends on your display model)

5. Micro SD card with adapter 1 pc (optional)

6. USB to TTL/Serial adaptor/converter 1 pc

General

We will learn how to use the Nextion Editor with Nextion HMI display module.

Understanding the USB to TTL/Serial adaptor/converter

You can read more about USB to TTL/Serial adaptor/converter  here.

What is the Nextion?

NEXTION is a Human Machine Interface (HMI) solution combining a TFT touch display with an onboard processor and memory, developing by a free and downloadable NEXTION Editor software. Using the NEXTION Editor software, you can quickly develop the HMI GUI by drag-and-drop components (graphics, text, button, slider etc.) and ASCII text based instructions for coding how components interact at display side. With just 2 wires (RX,TX), NEXTION display quickly connects to MCU via 5V TTL Serial to provide event notifications that MCU can act on, and utilizes simple ASCII text based instructions so the MCU can easily provide progress and status updates back to your HMI user.

NEXTION is available in various TFT LCD display sizes including 2.4”, 2.8”, 3.2”, 3.5”, 4.3”, 5.0”, 7.0” . With a large selection to choose from, one will likely fit your needs. 

The NEXTION Editor software offers an easy way to create the intuitive and superb touch user interface even for beginners. Add a static picture as background, define functions by components, you can make a simple GUI in minutes.

Easy-to-use components, touch event programming and customized GUI at screen side allow you to develop projects rapidly in cost-effective way. The TTL serial NEXTION display is the best balance HMI solution between cost and benefit with low and decreased learning curve. 

Nextion Basic Models:

  • NX3224T024 (2.4”)
  • NX3224T028 (2.8”)
  • NX4024T032 (3.2”)
  • NX4832T035 (3.5”)
  • NX4827T043 (4.3”)
  • NX8048T050 (5.0”)
  • NX8048T070 (7.0”)

 Nextion Enhanced Models:

  • NX3224K024 (2.4”)
  • NX3224K028 (2.8”)
  • NX4024K032 (3.2”)
  • NX4832K035 (3.5”)
  • NX4827K043 (4.3”)
  • NX8048K050 (5.0”)
  • NX8048K070 (7.0”)

We will use Nextion Basic Model NX4832T035 (3.5”) in this project. You can find this display datasheet here. If you have N letter after the model,for example, NX4832T035_011N - it means that it doesn't have a touch sensor but if you have R letter NX4832T035_011R - it is with touch sensor.

Features
480 x 320 Resolution
RGB 65K true to life colours
TFT screen with integrated resistive touch panel 
4 pin TTL serial interface
16M Flash memory for User Application Code and Data 
On board micro-SD card slot for firmware upgrade 
Visual Area: 73.44mm(L)×48.96mm(W) 
Adjustable Brightness: 0~180 nit, the interval of adjustment is 1% 
5V500mA DC recommended power supply
5V145mA power consumption

NEXTION product numbering rules , eg. NX4832T035 :

  • NX -NEXTION
  • 48 -Horizontal resolution: 48=480
  • 32 -Vertical resolution: 32=320
  • T  -Series model: T=Basic Model     K=Enhanced Model
  • 035 -Display size:”035″ means 3.5 inch
  • R   -Touch screen type:N=non touch; R=resistive touch; C=capacitive touch

All basic models  are resistive touch screen display, 4M Flash, 3.5KByte RAM, 65k colors., except 3.5 inch model which has 16M Flash.

Features:

  • 480 x 320 Resolution
  • RGB 65K true to life colours
  • TFT screen with integrated resistive touch panel 
  • 4 pin TTL serial interface
  • 16M Flash memory for User Application Code and Data 
  • On board micro-SD card slot for firmware upgrade, FAT32 format, maximum 32G Micro TF/SD Card
  • Visual Area: 73.44mm(L)×48.96mm(W) 
  • Adjustable Brightness: 0~180 nit, the interval of adjustment is 1% 
  • 5V 500mA DC recommended power supply
  • 5V 145mA power consumption
  • Weight 58g
  • Product Dimension drawing see here
  • Serial Port Baudrate 2400, 9600,115200 bps

You can find all Nextion displays' datasheets here.

Commands used with Nextion explained here.

Signals and connections of the Nextion HMI display module


Nextion HMI display module has four pins: power supply +5V DC, ground GND,  transmit TX,  receive RX.

Wiring

1. Powering the Nextion HMI display module

Note: the small power supply test board and connecting wire inside the package allow you to test if the electrical supply is enough or not. See the image below on how to use it.

2. Uploading .TFT file to the Nextion HMI display module

3. Using the Nextion HMI display module with Arduino UNO


Step by Step instruction

1. Downloading and installing the Nexion Editor

  1. To get started with Nextion, first you need to install Nextion Editor. Go to Nextion website and download the Nextion Editor v 0.53 by clicking on download exe.
  2. When download process is done you will see the file in your PC Download folder called nextion-setup-v053.exe
  3. Click on this file to start installation process.
  4. Click on Next> button.
  5. Select installation folder and click on Next> button.
  6. Click on Install button and click on Yes button in pop up window.
  7. You will see the shortcut on you PC desktop and the Nextion Editor starts automatically after installation is done.

2. Using the Nextion Editor

This is a quick overview of the different sections of the Nextion Editor.

  1. Main Menu including new, save, open, debug, upload etc.
  2. 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.
  3. Toolbox – this is where you have a wide variety of components you can add to the user interface, like pictures, progress bar, buttons, sliders, and much more.
  4. Picture 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. 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.
  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.

The resources you need to complete any Nextion HMI project (be aware that you may need to change some settings on the user interface to match your display size):

  • .HMI file (this file can be imported into the Nextion Editor to edit the GUI);
  • background image used in the user interface should also be in the project folder;
  • .TFT file (this file should be uploaded to the Nextion display, this is the file that the display runs);
  • .ino file (this is the file you should upload to your Arduino board).

2.1 Creating a New Project in Nextion Editor

  1. Open Nextion Editor and go to File -> New to create a new file or you can import the .HMI file for this project.
  2. Give it a name and save it. 
  3. You will see the window where you can choose your Nextion model.
  4. Select the Display tab and set the Nextion HMI display orientation. For example, we have selected Horizontal.
  5. Click on OK button to close.

2.2 Adding a Background Image

To use an image as a background, it should be exactly of the same dimensions as your Nextion display. We’re using the 3.5” display, so the background image needs to be 480 x 320 pixels. Check your display dimensions and edit your background image accordingly. You can download wanted images and use them for the background from this website.

Huge collection of free and paid images are available for download. 

You can use INKSCAPE program to convert image width and height (W x H) to match our Nextion display.

If you have a background image with the proper dimensions:

  1. In the bottom left corner of the Nextion Editor, there is a window for fonts and pictures. Select the Picture tab.
  2. Click the (+) button and select your background image. The image will be added to the pictures list and it will be given an id. In this case it is 0.
  3. Go to the toolbox, and click on the Picture component. It will be automatically added to your display area.
  4. When this component selected, you should see its attribute in the attribute area.  You can double click on the attributes to edit them. Double-click on the pic attribute to select the picture you want. You must write “0” which is the index of the picture you want, or select the image on the new window that pops up. After writing “0”, you actually need to hit ENTER to save the changes.

2.3 Adding Fonts

  1. To write text on the display, you need to generate a font in the Nextion Editor. Go to Tools -> Font Generator. A new window will open.
  2. You can select the font height, type, spacing and if you want it to be bold or not. 
  3. Give it a name, for example ProFont, and click the Generate font button. 
  4. Save the .zi file and add the generator font by clicking on Yes button.
  5. The font will be added to the Fonts library at the left bottom corner and it will be given an index. As this is your first font, it will have the index 0.

2.4 Adding text labels, sliders and buttons

Let's start adding components to the display area. Add three buttons, two labels and one slider from Toolbox area to Display area. Just click on required component.

All components have an attribute called objname. This is the name of the component. Give good names to your components because you’ll need to use them later in an Arduino code. Also note that each component has one id number that is unique to that component in that page. The figure below shows the objname and id for the selected label on top of slider component. You can edit the components the way you want, but make sure to edit the slider maxval.

2.5 Touchable components

You should trigger an event for the touchable components (the buttons and the slider) so that the Arduino knows that a component was touched. You can trigger events when you press or when you release a component.

  1. Let's see how to trigger an event when the touch is pressed. That event is simply sending the ID of the component that was touched.
  2. Select one of the buttons and in the event window select the Touch Release Event tab and tick on Send Component ID option.
  3. Repeat this for the other button.
  4. Select slider and in the event window select the Touch Release Event tab and tick on Send Component ID option.

2.6 How to create and navigate to a new page

It's very simple to add more pages to your GUI.

  1. On the top right corner, in the Page area, select the Add button to add a new page. A new page will be created. In this case, page1.
  2. To navigate to one page to another, we have added a button in each page, at the top right corner – in this case it is called bNext and bBack.
  3. To make this buttons redirect to page1 and to page 0, you need to add the page 1 and page 0 accordingly to the Event window, in the user code section.
  4. Our second page let's display data from the DHT11 temperature and humidity sensor. We have to add three labels to hold the temperatures in Celsius and Fahrenheit, humidity; progress bar to display the humidity and REFRESH button to update the readings. The bBack button redirects to page 0.
  5. Select Refresh button and in the event window select the Touch Release Event tab and tick on Send Component ID option.
  6. Notice that we have labels to hold the units like "ºC", "ºF" and "%", and empty labels that will be filled with the readings if the Arduino code will be running.

3. How to test the interface in the simulator

  1. You can test your interface in the simulator. Click on the Debug button in the main menu.
  2. A new window will open.
  3. In that window when you click on the buttons you see the data returned (HEX code is generated inside the simulator return area).  Let's see the example: 65 00 02 00 FF FF FF (65 is the Touch Detection code, 00 is page ID which is page 0 for our project, 02 Component ID which is 2, 00 Button Release event, FF FF FF  End of Message)
  4. You will be able to change between pages by clicking the corresponding buttons. 

4. Compiling and uploading code to the Nextion HMI display

  1. You can use Micro SD card with this module only.
  2. You’ll need a SD card reader or micro SD card adapter and computer to format your card. 
  3. Format the Micro SD card as FAT32. Insert the Micro SD card with SD card adapter in your computer. Go to My Computer and right click on the SD card. Select Format... 

  4. A new window pops up. Select FAT32, press Start to initialize the formatting process and follow the onscreen instructions.
  5. Click on the Compile button  in the main menu to generate the .TFT file.
  6. This is the file to be uploaded on to the Nextion HMI  display.
  7. To see the file generated go to File -> Open Build Folder. It will open a folder inside of which you find the generated file.
  8. The .TFT file can be uploaded on to Nextion HMI  display by 2 methods. One is the USB – TTL method where we connect USB-TTL device to serial port of display. Another method is SD card method.
  9. USB – TTL method is very easy. Connect the USB to TTL adapter to PC and note the serial COM port allotted. Click on Upload button on the Nextion Editor. On the upload window select the COM port (for example, we had COM4) and set the Baud Rate to 115200. Click on GO button.
  10. When upload done you will see the message: Download finished! Total time:....
  11. We will describe the SD card method now. Copy the .TFT file corresponding to the file you are currently working;
  12. Paste that file in the Micro SD card.
  13. Insert the Micro SD card on the Nextion display and plug power.
  14. You will see a message on the Nextion HMI display that the code is being uploaded.
  15. When all done, it should display the following message: Check data... 100% Update successed!
  16. Remove the power from the Nextion HMI display, and take out the Micro SD card.
  17. Apply power again and you will see the interface you have built in the Nextion Editor on your Nextion HMI display.

5. Required libraries for projects with Arduino boards

To use Nextion HMI display with Arduino board you need to download and install the Nextion libraries for Arduino IDE.

We have attached the ITEADLIB_Arduino_Nextion library on the begining of this project description. This library is configured for Arduino MEGA2560 by default. To make it work for Arduino Uno, you need to do the following:

  1. Open the ITEADLIB_Arduino_Nextion folder.
  2. There should be a NexConfig.h file – open it with Notepad integrated in Windows OS or additionally installed Notepad Plus.
  3. Comment line 27, so that it stays as follows: //#define DEBUG_SERIAL_ENABLE
  4. Comment line 32: //#define dbSerial Serial
  5. Change line 37, so that you have the following: #define nexSerial Serial
  6. Save the NexConfig.h file.

Summary

We learnt how to use the Nextion Editor with Nextion HMI display module.

Nextion displays are very useful in many projects. They can be used with any microcontroller since they require only two wire to connect. We can build so many projects with the Nextion displays. But the Nextion displays are far from perfect. The software for it is really poor, and the documentation inexistent. The hardware might be good but the overall user experience is poor. 

Libraries:

  • See attachments on the begining of this project description
  • ITEADLIB_Arduino_Nextion library. Download, unzip and add to libraries in your PC, for example C:\Users\toshiba\Documents\Arduino\libraries or in C:\Program Files (x86)\Arduino\libraries. This link you can find in Preferences of Adruino IDE program which installed in your PC. You can find more about it here.

Sketch:

  • None


Other projects of Acoptex.com
Easy Basics: Project 105a SIM900A GSM GPRS mini module of Acoptex.com in NANO 28-11-2019

« Go back to category
Is this project fake? Report it!   
Recommend to a friend
Published at 21-03-2019
Viewed: 2401 times