Introduction: Diy Nextion Touchscreen HMI
I always wanted to have a touchscreen Interface in my projects which are related to arduino, raspberry pi and esp8266. I earlier used the cheap Chinese touchscreen display which used to have resistive touchscreen. The problem with these display is that they take a lot of I/O's on our micro controller. So, we are limited with the extent of the project. Also debugging them is also is a pain in a ass. and also we are limited by the storage space of our favorite arduino. So, there is this Nextion HMI display which solves the need.
Step 1: Introduction
You may wonder what is the Nextion HMI Display . Nextion is a Seamless Human Machine Interface (HMI) solution that provides a control and visualization 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 . This display is manufactured by Itead Studio . This display is graphically programmed using a software named Nextion editor which is also made by Itead Studio.
Step 2: Features
- This Nextion display Has Ton's Of Features.
- It comes in various Display Sizes ranging from 2.4" to 7" (diagonally) to suit anyone's needs .
- They have Two model categories :-
- Basic Model
- Enhanced Model
The enhanced version of these display has a RTC (Real Time Clock), more storage and faster processor upto 108MHz.
- Inbuilt flash memory in the display ranging from 4 Mb to 32 Mb.
- The processor has a frequency ranging from 48 MHz to 108 MHz.
- USART communication with your micro controller which means you need only two wires. AWESOME!!
- This Display Is graphically programmed using their Software called Nextion Editor which makes the GUI making tasking very easy.
- The software also has inbuilt Debugger and simulator which enables debugging very easy . As it has an inbuilt simulator so you can test the working display without having display at all.
To Know more Click Here:- http://shink.in/Gh5c2
The above link is paid and i get small income from the ads.
The below link is without ads
Step 3: Getting Started
Enough of the talks So let's get to some work. First of all this is not a full guide to use the display but rather it is a overview to get you started using this display because after you know the basics you can make anything on this very device. This is important as there is little to no documentation provided and it takes a while to know everything.
In the box you get The display itself , a wire set, and a micro USB C breakout Board.
The one I chose for this tutorial is "NX3224T024_011R" it is 2.4" display having 320x240 resolution and 4 Mb of memory.
Also you require a micro SD card of about 4 GB to 32 GB formatted with FAT 32.
At first you need to download the Nextion editor software.
The link to the software is here :-http://shink.in/21hOS
the above link is paid
The below link is add free link
Step 4: Installing the Software and Setting Up the Display
Installing the software is easy but still i have provided the pictures to illustrate the steps.
After you have installed the software download the file provided below
This link without ads
Download the file above you while see a file named "First_Test.hmi". Double click to open that file and the Nextion Editor Software will start. It will prompt you to set the display first. First click the button that has your nextion display model on it . Then go the display tab on the left and choose the orientation of the display. In my case i Chose 90 degree horizontal.
This it Now you have succesfully setup your display.
Step 5: First Test
Now, I will not get into Detail on how the software is used. but i will tell you about the basic tools that will get up and running.
On the top bar you can see icons of ' Open , New, Save , Compile, Debug , Upload.
All the icons are self explanatory except Debug and compile. The Compile icon will obviously compile the code and debug icon is used for debugging and simulation.
Follow these Steps Carefully:-
- Click the compile icon and wait till the code is compiled and make sure it is error free.
- After compiling Then go to file menu at the top and then click " OPEN Build Folder" .
- There just see your "first_test.tft" file and copy that file to the desktop.
- plug in your memory card and make sure it is formatted , then paste the above file to the SD card. and the eject SD card.
- Then plug the memory card in the display and connect the power lines to the display using the micro USB breakout board. and then you can connect it to your PC or laptop using the micro USB c cable
- The screen will boot up and it will start copying the data from the SD card to the inbuilt flash memory.
- After it has copied the data it will show a message saying " Uploaded Successfully " .
- Then Remove the memory card from the display and disconnect the power cable from the PC.
- After removing the memory card again connect the power cable to the PC.
- You will see the display working and you could navigate to different pages .
So you have your own DIY touchscreen display.
Step 6: FINISH
This is just the beginning of the tutorial on this display . In coming instructable I will post an instructable on how to use it with esp8266, arduino and raspberry pi. So follow me for more.
Also consider voting for this instructable.
Participated in the
Invention Challenge 2017
Participated in the
Power Supply Contest
Participated in the
Makerspace Contest 2017