Basics: Project 081d ESP8266 ESP-12E module and Nextion HMI display at Acoptex.com / ACOPTEX.COM

members

Basics: Project 081d ESP8266 ESP-12E module and Nextion HMI display

of Acoptex.com in ESP8266 ESP-12

Basics: Project 081d

Project name: ESP8266 ESP-12E module and 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, ESP8266 ESP-12E module, ESP, ESP8266, WI FI module, ESP-12E, Ai Thinker, AI-Cloud, SOC, GPIO, General Purpose Input Output, System On a Chip, IOT, internet of things, FTDI232, FTDI 232, LoLin NODEMCU V3, NODEMCU, V3, Development Board with USB-to-Serial Onboard

Attachments: library1, projectfiles, sketch

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

7. Resistor (220 Ohm 1 pc)

9. LED 1 pc (can be different colors)

10. Jumper cables M-M

11. Breadboard 1 pc

12. Arduino IDE ( you can download it from here )

13. ESP8266 ESP-12E module with micro USB cable 1pc

General

We will learn how to use ESP8266 ESP-12E module 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.

Understanding the Nextion HMI display

You can read more about it here.

Commands used with Nextion explained here.

Understanding the ESP8266 ESP-12E WI FI module (LoLin NODEMCU V3)

You can read more about it here.

Signals and connections of LED

The operating voltage of the LED is 1.8V and the operating current is 10mA-20mA. The Arduino Uno board can supply 5V or 3.3V power. We will use 5V for this project, so the minimum resistance of the current limiting resistor should be (5 V to 1.8 V)/20 = 160 Om. The 220 Om offered in the kit is suitable and you can also choose other resistors that meet the condition. The larger the resistance is, the dimmer the LED will get.

Signals and connections of the ESP8266 ESP-12E WI FI module (LoLin NODEMCU V3)

TX - transmit pin. GPIO pin

RX - receive pin. GPIO pin

3V3 (or 3V or 3.3V) - power supply pin (3-3.6V).

GND ( or G) - ground pin.

RST - reset pin. Keep it on high (3.3V) for normal operation. Put it on 0V to reset the chip.

EN - Chip enable. Keep it on high (3.3V) for normal operation.

Vin - External power supply 5VDC.

D0-D8 - GPIO (General Purpose Input Output) pins

D5-D8 - SPI interface

D1-D2– I²C/TWI Interface

SC (or CMD) - (Chip Select) - the pin that the master can use to enable and disable specific devices. GPIO pin

SO (or SDO) - Master In Slave Out (MISO) - SPI communication. The Slave line for sending data to the master. GPIO pin

SK (or CLK) - SCK (Serial Clock) - SPI communication.The clock pulses which synchronize data transmission generated by the master. GPIO pin

S1 (or SD1) - Master Out/Slave In (MOSI). SPI communication. The Master line for sending data to the peripherals. GPIO pin

S2 (or SD2) - GPIO pin

S3 (or SD3) - GPIO pin

VU (or VUSB) - external power 5VDC.

A0 - ADC output.

RSV - reserved

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 ESP8266 ESP-12E module

Step by Step instruction

1. Downloading and installing the Nexion Editor

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.
When download process is done you will see the file in your PC Download folder called nextion-setup-v053.exe
Click on this file to start installation process.
Click on Next> button.
Select installation folder and click on Next> button.
Click on Install button and click on Yes button in pop up window.
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.

Main Menu including new, save, open, debug, upload etc.
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.
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.
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.
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.
Attributes, component attributes such as, display text, value, color, background, are set in this window.
Compiler Output Window: if errors occur, they will be shown in this area.
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

Open Nextion Editor and go to File -> New to create a new file or you can import the .HMI file for this project.
Give it a name and save it.
You will see the window where you can choose your Nextion model.
Select the Display tab and set the Nextion HMI display orientation. For example, we have selected Horizontal.
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:

In the bottom left corner of the Nextion Editor, there is a window for fonts and pictures. Select the Picture tab.
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.
Go to the toolbox, and click on the Picture component. It will be automatically added to your display area.
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

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.
You can select the font height, type, spacing and if you want it to be bold or not.
Give it a name, for example ProFont, and click the Generate font button.
Save the .zi file and add the generator font by clicking on Yes button.
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 label and buttons

Let's start adding components to the display area. Add two buttons, one label 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 button LED ON component. You can edit the components the way you want.

2.5 Touchable components

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

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.
Select one of the buttons and in the event window select the Touch Release Event tab and tick on Send Component ID option.
Repeat this for the other button.

3. How to test the interface in the simulator

You can test your interface in the simulator. Click on the Debug button in the main menu.
A new window will open.
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 03 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 3, 00 Button Release event, FF FF FF End of Message)

4. Compiling and uploading code to the Nextion HMI display

You can use Micro SD card with this module only.
You’ll need a SD card reader or micro SD card adapter and computer to format your card.
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...
A new window pops up. Select FAT32, press Start to initialize the formatting process and follow the onscreen instructions.
Click on the Compile button in the main menu to generate the .TFT file.
This is the file to be uploaded on to the Nextion HMI display.
To see the file generated go to File -> Open Build Folder. It will open a folder inside of which you find the generated file.
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.
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.
When upload done you will see the message: Download finished! Total time:....
We will describe the SD card method now. Copy the .TFT file corresponding to the file you are currently working;
Paste that file in the Micro SD card.
Insert the Micro SD card on the Nextion display and plug power.
You will see a message on the Nextion HMI display that the code is being uploaded.
When all done, it should display the following message: Check data... 100% Update successed!
Remove the power from the Nextion HMI display, and take out the Micro SD card.
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:

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

6. Adding ESP8266 platform to Arduino IDE

The Arduino environment has to be set up to make it compatible with the ESP8266 ESP-12E module. We are using PC with Windows 7 OS.

Download and install the Arduino IDE. You can download it here
Open Arduino IDE.
Open the Preferences window from the Arduino IDE. Go to File -> Preferences.
Enter http://arduino.esp8266.com/stable/package_esp8266com_index.json into Additional Board Manager URLs field and click the “OK” button. If you already have a URL in there, and want to keep it, you can separate multiple URLs by placing a comma between them. (Arduino 1.6.5 added an expanded text box, separate links in here by line.)
Open Boards manager. Go to Tools -> Board -> Boards Manager…
There should be a couple new entries in addition to the standard Arduino boards. Look for esp8266. or scroll down to the ESP8266 entry (usually at the bottom). Select the ESP8266 entry. When you click it an install option will appear. Select the latest version and click install.
The board definitions and tools for the ESP8266 include a whole new set of gcc, g++, and other reasonably large, compiled binaries, so it may take a few minutes to download and install (the archived file is ~110MB). Once the installation has completed, an Arduino-blue “INSTALLED” will appear next to the entry.

7. Uploading sketch to ESP8266 ESP-12E development board

If you’re using an ESP-12E NodeMCU Kit, uploading the sketch is very simple, since it has built-in programmer.

Before use ESP8266 ESP-12E WI FI module (LoLin NODEMCU V3), you need to download the manufacture's driver (CH340) for this chip and install it in your PC. Here is the link. See the description of driver installation package below: CH340 / CH341 USB to serial WINDOWS driver installation package that supports 32/64 bit Windows 10 / 8.1 / 8/7 / VISTA / XP, SERVER 2016/2012/2008/2003, 2000 / ME / 98, through Microsoft digital signature authentication, support USB to 3-wire and 9-wire serial port, with the product release To the end user. Applicable scope: CH340G, CH340C, CH340B, CH340E, CH340T, CH340R, CH341A, CH341T, CH341H chips.

If you have CP2102 chip then you need to download the manufacture's driver for this chip and install it in your PC. Driver for Mac, Windows, Linux or more..

Do wiring.
Open Arduino IDE.
Plug your ESP8266 ESP-12E module into your PC USB port.
Choose your NodeMCU board. Go to Tools -> Board -> NodeMCU 1.0 (ESP-12E Module)
Select the correct com port.
Open, compile and upload the sketch to your ESP8266 ESP-12E module. If everything went as expected, you should see a “Done uploading” message. Note: make sure that you remove the TX and RX connections when uploading code.
Press RST button on your ESP8266 ESP-12E module to reset it.
With the Nextion GUI and the code on the ESP8266 ESP-12E module you should be able to control the ESP8266 ESP-12E pins from the Nextion HMI display. Tap the LED ON and LED OFF buttons to turn on/off red led.

Code

Once the Nextion GUI is ready, you need to write the Arduino code so that the Nextion can interact with the Arduino and Arduino with Nextion.

Take a note of your components in the Nextion GUI that will interact with the ESP8266 ESP-12E module (their ID, names and page). See the example below:

Objname Type Page ID

b0 button 0 3

b1 button 0 4

t0 text 0 5

Let's descuss the code. First, you include the Nextion librarY. The RED LED attached to the ESP8266 ESP-12E module digital pin D2 (GPIO4).

You need to declare all your Nextion objects, you need the page, the component ID and name – just check the table above with all the components. To define a text you use NexText, to define a button you use NexButton.

Next, you should add in the following snippet all the touchable components that should trigger events on the Arduino.

NexTouch *nex_listen_list[] = {

&b0,

&b1,

NULL

};

You should create callback functions that will be triggered when you touch the corresponding components.

The following function will be triggered when you release the touch from the b0 button:

void b0PopCallback(void *ptr)

{

t0.setText ("State:ON");

digitalWrite(led,HIGH);

}

This function will set the red led to HIGH, as well as update the t0 label with the text “State: ON”. Updating text labels is as simple as using setText().

The b1 button works in a similar way:

void b1PopCallback(void *ptr){

t0.setText ("State:OFF");

digitalWrite(led,LOW);

}

In the setup(), you need to attach the functions created to the corresponding events. For example, when you click on the b0 button, the b0PopCallback function will be triggered.

b0.attachPop(b0PopCallback,&b0);

b1.attachPop(b1PopCallback,&b1);

In the loop() when an event occurs, the corresponding function will be triggered: nexLoop(nex_listen_list);

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

Summary

We learnt how to use ESP8266 ESP-12E module with Nextion HMI display module.

Libraries:

See attachments on the begining of this project description
ITEADLIB_Arduino_Nextion library included. 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.

Project resources: