How to Use Nextion Serial Touchscreen Displays – Part 1: Standalone Mode

Itead Studio launched an Indiegogo campaign earlier this year for their Nextion TFT displays that can be connected to external board such as Arduino or Raspberry Pi via the serial interface, or even a standard computer provided you have a USB to TTL debug board. The campaign was successful with over 1,700 backers, and the company recently sent me two samples for review: a 2.4″ display and a 5″ display. In this post, I’ll look at the boards, and make a small standalone demo with Nextion Editor in Windows.

Nextion NX3224T024 2.4″ Display

Click to Enlarge
Click to Enlarge

The first item is a 2.4″ TFT display called NX3224T024_011N (non-touch) or NX3224T024_011R (Resistive touch) with 65536 color, 320×240 pixel resolution, LED backlight and up to 200nit brightness. It ships with a cable for the serial connection (5V, Tx, Rx, and GND).

Click to Enlarge
Click to Enlarge

The back of the display features the serial connector, a micro SD used to load the HMI files, and J2 unpopulated connector with 3.3V and GND, and some “test points” the company asked me to ignore. STMicro STM32F03C8T6 ARM Cortex M0 micro-controller, which be called “GPU” on the Wiki, but it is likely mostly used to handle the serial connection, and send data to the display controller since it does not have a display controller itself, as well as interface with the micro SD card. U5 (XPT2046) is the touch sensor, and it will be removed for the non-touch version, which is only available for customized orders in larger quantities.

Nextion NX8048T050 5.0″ Display

Click to Enlarge
Click to Enlarge

The second display I received was NX8048T050_011 5″ display available in no-touch (011N) and resistive touch (011R) version. The display has 800×480 pixel resolution with up to 65K colors, up to 250 nit brightness, and an LED backlight.

Click to Enlarge
Click to Enlarge

The display’s board has a the same serial connector, micro SD slot and STM32 MCU as the smaller display, but at two extra chip can be seen with Winbond W9864C6KH-6 SDRAM (8MB) used as an “RGB buffer”, and Altera MAX II EPM570T144CSN CPLD used as the RGB driver. Texas Instruments TSC2046I (U5) is the touch sensor, and it will be there if you simply order online, as the company will only provide the non-touch option for large orders.

diode_inductance_capacitor

I also received a bunch of components including diodes, inductances, and capacitor, so I was a little confused. Itead Studio explained me it was part of their “Grab Bag” activity which adds some present to randomly selected orders, so those did not need to be used with the displays…

Hello World Tutorial for Nextion TFT Serial Displays

In this first post, I’ll mainly play around with Nextion Editor, and run the display in standalone mode without connection to any other board.

Itead Studio initially said they would focus on the Windows version of their WYSIWYG editor, with Linux and Mac OS planned for later. So far there’s no Linux version, and since the Windows version is being developed around DotNet framework it’s not really promising for multiple OS support.

So I fired up a Virtual machine with Windows 7, downloaded Nextion Editor, and installed the program (Nextion Editor 0.3) without issues.

Click to Enlarge
Click to Enlarge

The editor has 6 zones

  • Picture – To import pictures from your computer
  • Fonts – The list of fixed size fonts generated for your display
  • Compiler Output – Show results of creation of HMI files when clicking on “Compile”
  • Event Zone – Set behaviors of buttons or other components before or after taps.
  • Component Parameter – Will show detailed options for components such as text, button, sliders, and so on.
  • Page – To create, modify or delete pages for your user interface
  • Display – Main editing window

Before starting a new project, you’ll want to know the resolution of the display you’ve purchased.
Netxion_TFT_Display_ModelI’m using NX8048T050_011R with 800×480. To get started click on File->New, and you’ll be prompted for the screen resolution and orientation.
Nextion_Device_Parameter
You’ll need to select the one for your display. That means if you have displays with different resolution, you’ll have to design one user interface per resolution. Ideally, this should be done at compile time automatically, but it’s not one feature supported by the system.

I was a bit lazy to read Nextion Editor Quick Start Guide at first, but I recommend you do read it, as the software is not always intuitive, and still work in progress. For example, the software does not support drag and drop for pictures, and you need to insert your pictures first, before inserting them with the top menu. Dynamic fonts (TTF) are not supported, so you need to define your font sizes in advance. I have not found a way to move components to lower and higher layer, so for example, you’ll need to create the background image first, as if you create it after other components it will cover them all without options to move it under. There’s no contextual menu when you right-click on components. If the image is larger than the screen, you need to resize it first, or added a “crop” components, instead of “picture” components. Components are created with an inconvenient and small default size, instead of being automatically resize based on your parameters, and I could go on and on.

Adding pictures is pretty straightforward. Go to the picture zone, click Add, select and your pictures. Once you have imported the picture, you can click on Add Component->Picture, which will create a p0 component that you can resize and place where you want on your display. Remember to use “Crop” component if your image is larger than the display.

There aren’t any fonts by default, so you’ll have to create your own by clicking on Tools->Font Creator.
Font_Creator

Define a size, select the ISO code and check Bold if needed, then select a font from your computer as well as a range, input a font name and click on Generate font. I’ve done that for two fonts with 112 pixel and 64 pixel fonts.

Once external resources where ready, I created the first page (Hello World – page 0) with a background image, “Hello World!!!” text (Add Component->Text), and “Clock” button (Add Component->Button), and a second one (Clock – page 1) with a “clock”, actually just a Text component, and a back button.

Nextion_Hello_World_1
Hello World Page (Click to Enlarge)
Clock Page (Click to Enlarge)
Clock Page (Click to Enlarge)

I’ve selected the buttons in both pages in the screenshot above to show I defined Touch Press Event “page 0” for “Back to Hello” button, and “page 1” for the “Clock” button to be able to switch between the two pages. You can see the complete list of components below including slider, timer, progress bar, and upcoming support for Radio boxes and Check boxes.

Nextion_Editor_Components

Once you are happy with the result, you can click on “Compile” to generate the HMI file with .tft extension. Before uploading the interface to Nextion display, you may want to run the simulator to double check it’s working as expected by clicking on “Debug”

Click to Enlarge
Click to Enlarge

You can click on buttons to switch between the two pages, and monitor the data processed. You could also simulate MCU input in the bottom left part of the simulator, but I have not tried that part.

Now you can load the .tft file to the board, with one of two methods:

  1. micro SD card method – Go to File->Open build folder, and copy the file (e.g. netxion_cnx.tft) to a micro SD card formatted with FAT32 (32GB mac), and insert it into the board to complete installation. You’ll also need to provide 5V power to the power
  2. Serial upload – Connect a 5V USB to TTL debug board to the display’s board and your computer, and click on Upload, and Go
    Nextion_UART_UpdateProgress will show both in Nextion Editor, and on the display with “UART Update” and progress status. If the Windows program says connection failed please double check your debug board connections.

Once the transfer is complete, the user interface will start automatically.

Nextion_Display_Serial_Board

The first time I connected my USB debug board through a USB 2.0 hub, and the display started flickering a lot with nothing displayed. The Wiki states that this is probably a power supply issue (not enough power), and you should disconnect the power immediately to avoid damaging the board.

I explain the steps I followed, and show a quick demo in the video below.

Itead Studio wrote a lot of documentation for their Nextion module, but it looks all over the place to me. You can find more on two documents they provided for reviews with a list of useful links and a list of videos providing tutorials and video demos for Arduino and Raspberry Pi.

The next step for me will be to try using the display(s) with Arduino, Raspberry Pi or ESP8266 boards.

Nextion displays can be purchased on Itead e-Store. Nexteon NX8048T050 5″ display used in this review is going for $64.90, including a micro USB to 2-pin header board that was not in my package, while the 2.4″ display is selling for just $13.90 plus shipping, which would amount to $4.26 for registered airmail to my location.

Share this:

Support CNX Software! Donate via cryptocurrencies, become a Patron on Patreon, or purchase goods on Amazon or Aliexpress

ROCK 5 ITX RK3588 mini-ITX motherboard
Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.
19 Comments
oldest
newest
TonyT
TonyT
8 years ago

If Itead is using WinForms for their GUI, there’s a possibility that they can make it run on Linux, since the Mono project supports .NET framework and WinForms (but not WPF) on Linux.

Thanks for the article – I have the 2.4″ touch model, and have an Arduino project in mind for it.

Alexandre
8 years ago

Hello

I Saw tha you have a nextion LCD.

I just have fried my when i plug into a 12 volts power source.

Can you tell me what is the name of the component nex to “U4” tag on the board?
so i can try to replace it.

Thank you!!!

Alexandre
8 years ago


Thanks!!! The chineses already anwser to me , it´s an MP3202 .

dunk
dunk
8 years ago

@Alexandre
what made you plug in 12v it says everywhere its 5 and on the board?!!!!

dunk
dunk
8 years ago

since when does usb give 12v that usb plug you get with it must of been a clue,and its compatable with arduino 5v loads of pointers there to show its 5v lol give your head a wobble was you having a blond moment?

Peter Scargill
8 years ago

Another way to use the Nextion boards is over WIFI – see the award-winning open design for this over at the tech blog here. http://tech.scargill.net/nextion-wifi-touch-display/

alex
8 years ago

Hi,
can I send, only with this display, some digital commands trough rxd txd ?
For example if I make a button ON, when i press him, this send via rs232
$18 $00
and for OFF button
$18 $01
thank you in advance !

Onkel Joerg
Onkel Joerg
8 years ago

Any progress in controlling the display from a Pi?

Anderson Grossi
Anderson Grossi
8 years ago

Hello my friend! Could you please post how to make a working clock? I believe this one is only a text, isn’t it?!
Thanks!

Paulo Oliveira
Paulo Oliveira
6 years ago

@Anderson Grossi
Hello i saw a topic where you fixed your nextion screen but i cant reply in that topic.

I could use your help and buy from you u7 and u4. hope this thread doesnt get blocked as well.

I have 8 nextion 7 screens i spent over 1000 eur on nextion products it sucks that they dont want you to fix their screens when they burn out, in mi case because of a failed power supply.

anyway if you are willing to help please let me know. tank you so much in advance.

NoNextionForMe
NoNextionForMe
6 years ago

This HMI is crap! All component flickering when updating info.
I did read a lot complains about this issue 🙁
Better spend a few more $ and buy a real one.
This HMI can’t be called a HMI. For every function you need a lot of variables and workarounds to make them work properly. Very very inefficient!

Quintin
Quintin
4 years ago

Hi there, does any of you guys still have the Nextion Editor install files for v0.3 or older? My device is bricked and it appears the only way to recover is to use the oldest version I can find. 0.33 is the oldest available on the Nextion site, but it is not old enough. Would appreciate if someone could check their archives.

Thanks in advance.

Quintin

Quintin
Quintin
4 years ago

Wow, Thank you SO much @Jean-Luc, really appreciate it. Hopefully this will save my Nextion display lol. If it doesn’t work I may have to try and find an older version, will let you know.

Thank again 🙂

Khadas VIM4 SBC