Nextion display with DHT11

 

DHT11 humidity and temperature sensor is available as a sensor and as a module. The difference between this sensor and module is the pull-up resistor and a power-on LED.

DHT11 is a relative humidity sensor.  To measure the surrounding air this sensor uses a thermistor and a capacitive humidity sensor.For measuring temperature this sensor uses a Negative Temperature coefficient thermistor, which causes a decrease in its resistance value with increase in temperature.

The temperature range of DHT11 is from 0 to 50 degree Celsius with a 2-degree accuracy. Humidity range of this sensor is from 20 to 80% with 5% accuracy. The sampling rate of this sensor is 1Hz .i.e. it gives one reading for every second.  DHT11 is small in size with operating voltage from 3 to 5 volts. The maximum current used while measuring is 2.5mA.

DHT11 sensor has four pins- VCC, GND, Data Pin and a not connected pin. A pull-up resistor of 5k to 10k ohms is provided for communication between sensor and micro-controller.As amodule it has only 3 pins , pull up resistor provided on board.

Connect DATA pin of DHT11 to D2 of Arduino , Vcc to 5v & Gnd to Gnd.

Open NEXTION EDITOR and start a new project with .HMI file name.

Generate a FONT file and add to the project.

Click on Picture tab at bottom left corner and then + symbol to import a back ground picture.This picture resolution must match that of your NEXTION model

In this demo I’m using 4024T032 ( 400 X 240 pixel 3.2 inch size)

Use IRFANVIEW or INKSCAPE to match the resolution 400 x 240 of the image.

Click on PICTURE tool .It appears p0 on canvas.

At the right side window you can set the attributes for this object.Leave the object name as p0.

Click browse against pic attribute and select the image to be loaded as back ground.

Now the image appears on canvas.

Add 2 TEXT objects  .One for Temperature and the other for Humidity.

As Nextion editor cannot handle fraction numbers , we use Text instead of Number object.

Following are the attribute settings for these 2 Text objects.

t0 objname can be changed to Temperature

vscope to global.All objects that is controlled through SERIAL to be set to global.

sta attribute by default is solid color.Change this to crop image.

Also select the browse against picc attribute and select the back ground image.

This creates a Transparent effect to the object.

Text color can be changed by the pco attribute. 65535 means White & 0 means Black.

You can click on Select against pco to select a color.

Same way repeat for the t1 object Humidity.

             

 

Next add on 4 more Text objects for display purpose.You need to change the txt attribute to change the display name .

txt – to change display name

pco – to change color of text.

sta -crop image  to give transparent effect so that background image is visible through this object.

Click on DEBUG to start the Simulator.

You can test the display by sending STRING Commands.

temperature.txt=”32.0”

changes the Temperature display to 32.0.

Note the usage of double quotes for data to be displayed.While typing the code the interpreter of Nextion editor gives options to select (intellisense).

The commands can be sent as STRING from Arduino and to be followed by 3 bytes of 0xFF.

 

Upload the following sketch on to Arduino.

Here we use the library for DHT Sensor by including the header file DHT.h

We define the DHT data pin connection as 2 (D2 of Arduino) and type as DHT11.

The variables temperature and humidity are initialized with float literal constants.

Reading of sensor is by calling functions readHumidity()  & readTemperature() from the Class dht.

The assigned data is sent to Nextion as a STRING command.

 

Sending data.
Data to Nextion should be sent in the following format:

• String command

=”humidity.txt=\””+String(humidity,1)+”\””;

• name of the receiving element     humidity
• sign “.”
• field name of the receiving element    txt
• sign “=”
• data, and if it is String, then in quotation marks, and if it is digital information, then four bytes of data
• three bytes 0xff

Notice the use of ESCAPE character backslash \ before double quote “.

This is how to send double quotes from Arduino Serially.

Nextion does not work with float. So all to be sent as – String

 

To upload the .tft file on to Nextion we use USB-TTL device.Connect Nextion to USB-TTL

Tx to Rx

Rx to Tx

Gnd – Gnd

5v to 5v

Click on UPLOAD button and select the COM port of USB device and a faster baudrate.

Once uploaded , remove USB device and connect Arduino with Nextion with same configuration as above.

The result is displayed on NEXTION DISPLAY.

The DHT sensor requires 1 second refresh rate for each reading.This is provided by 1 sec delay in Arduino code.

VIDEO :

 

Nextion Analog Read value & Slider Tool

 

This post is on displaying potentiometer reading from Arduino to Nextion display.

 

 

Open Nextion Editor and File –> New  to create a project file with extension .hmi

Always keep your project files in a separate folder.

In the next screen select your Nextion model display , mine is 4024T032 which is 400 x 240 pixel & 3.2 inch size Basic model.Also select the direction of display as Horizontal.

 

Using Fonts Generator create a font file by selecting font size and font type.It is saved as .zi file.Click Yes to add font file to project.

The font file appears under font tab.

Next to Fonts tab you see a Picture tab.

Click on that and then click on the + symbol seen on top f this window.

Browse to the location of the background image you want to import.

Remember the image must match the resolution of the display model.Here mine is 400 x 240 , so I’ve converted the image to 400 x 240 pixels using IRFANVIEW Software.

 

Drag PICTURE tool from toolbox on to canvas or just click on Picture under tool box.

Picture component appears on canvas as p0 object name.

Click on that p0 , to modify attributes for object p0.

Against pic attribute click on browse and select the background picture from the list.

The back ground image appears on workspace canvas.

 

Click on  SLIDER tool and then a NUMBER.

Slider appears as object h0   & number appears as object n0.

You may rename it from attribute section.But we shall leave it to default names.

 

Following is the attribute window for the object h0.

The mode by default is Horizontal , if required can be changed to Vertical.

Color of the slider by default is Green , by clicking against bc0 attribute and select color , you can change it. pc0 is the color of slider knob, Red by default & can be changed.

Set the maxvalue to 1023 , as Analog read of Arduino ranges from 0-1023.

n0 Number attributes

bc0 , pc0 to change color of number.

vscope can be changed from local to global. If global it is available for all pages and if you control it from Arduino through Serial , make it GLOBAL.

 

 

Click on DEBUG to start the Simulator.

Under simulator you can feed in the code to change value of n0 object.

n0.val=524 will change the n0 value to 524.

 

Close the Simulator.

Now to upload the .tft file (after Compile you get this file)  on to Nextion , we use a USB-TTL device.

Connect Tx of Usb device to Rx of Nextion , Rx to Tx , Gnd to Gnd and Vcc to 5v.

 

Plug in usb device to pc and note the COM port allotted to it.

Click on UPLOAD,

Select COM port and baud rate & click GO.

To Arduino we have to upload the following sketch.

 

analogRead of A0 pin where pot pin is connected is assigned to a integer variable value.

A string  n0.val is sent to serial along with this value .

The string is followed by 3 times 0xff hex value.This is the standard format Nextion will accept on its Serial.

Do not use any other Serial commands here.For e.g if you use Serial.println() , then Nextion will not display the value.

Once sketch is uploaded on to Arduino , connect Arduino to Nextion

Tx to Rx, Rx to Tx , 5v to 5v , Gnd to Gnd

Potentiometer Center pin to A0, one end of pot to +5v and other end to Gnd.

Now turning the potentiometer will vary the number on Display from 0 to 1023.

 

Now let us modify the Arduino code so that Slider moves according to number value.

Serial.print(“click n0,1);

click n0,1 means  activate Press Event of object n0

upload this code on to Arduino.

Now on Nextion Editor  click on n0 number object.

Under Touch Press Event feed in

h0.val=n0.val

The touch press event is activated by Arduin code , as if we were physically touching n0.

Now the event code is triggered where we assign value of slider to be same as value of number.

 

compile and upload the file to Nextion using USB-TTL.

Connect Nextion with Arduino nd see the result.

On varying the potentiometer the number value changes from 0 to 1023 .Accordingly the slider changes position.

VIDEO :

 

 

 

Nextion Display– LED On Off with Dual State Button & Image

Nextion HMI Touch Displays are very popular in Industrial panel control boards.

This post is on usage of DUAL STATE BUTTON tool of the new NEXTION EDITOR to make an LED ON or OFF with switch images.

I’m using the model  NX 4024T032 display

which means  Resolution of 400 x 240 pixels & display size 3.2 inch

 

 

Nextion Editor is used to create .tft file from .hmi file.

Download the latest version from :

https://nextion.tech/nextion-editor/

NO LIBRARY is used in this project.

Open the Nextion Editor.

Always create a new folder for your project and save all files in that folder.

From Tools click on Fonts generator to generate font file for your project.

 

Select the size of font and the type of font.

Provide a name and store this file.

The Nextion editor will store it as .zi file and add it to your project.

At the bottom left corner you can see the Fonts tab under which your font file is added.

Now click on the Picture tab to import some pictures for your project.

Remember to resize the background image to match the resolution of your Nextion display model.

Here mine is 400 x 240 pixels. I use IRFAN VIEW software to resize the image pixels to 400 x 240.

Other application like  INKSCAPE  is also powerful image tool like photoshop.

You can even use the Windows PAINT to edit.

Here are the images used in this project.

 

                     

Click on the Picture tab and then the + symbol to import these pictures in to the Picture tab.

 

From tool box double click on Picture tool.

A picture element appears on canvas with default name p0.

If you want you can rename the object name.

 

At the right side attribute section there is an attribute called pic

Double click against the empty space near pic.

The images you imported appears .Select the back ground image and click ok.

 

The background image appears on canvas if the resolution matches with that of your Nextion display model.

Now from tool box double click on DOUBLE STSTE BUTTON.

An object with name bt0 appears on canvas.

 

 

The main attribute of bt0 to change is the

sta attribute.   (status attribute)

Change the sta attribute from solid to image.

Now you will get 2 more attributes pic0 & pic1

 

Click against empty space of pic0 and select the OFF SWITCH image.

Click against empty space of pic0 and select ON SWITCH image.

Change the txt attribute to empty space.

Now click on the DEBUG button on top.

The SIMULATOR opens.

Without a physical NEXTION Display in hand , you can develop your project with NEXTION EDITOR.

 

On Simulator you can test the ON / OFF condition which changes the image accordingly.

 

Close the Simulator.

Click on bt0 dual state switch object.

Below the canvas you can see 2 Events.

Click on the TOUCH RELEASE EVENT.

Type in the following code :

print bt0.val

When the bt0 button is touched and on release this code is executed.

The value of bt0 button will be printed or sent out to serial as 4 bytes of HEX data..

 

Click on DEBUG to test the code.

On  simulator , if you touch and release the button once , the switch image changes and accordingly 4 bytes of HEX data sent

01 00 00 00  for ON

00 00 00 00 for OFF

Close the simulator and add a TEXT object on the canvas.

You can change the attributes :

bc0 – back ground color

pc0 – text color

txt – name of text to display.

Now under TOUCH RELEASE EVENT modify the code as :

 

print bt0.val
if(bt0.val==1)
{
t0.txt=”LED ON”
}else if(bt0.val==0)
{
t0.txt=”LED OFF”
}

 

We add an if condition to change the text value according to switch ON or OFF.uiuiui

 

Click on DEBUG to see the result on simulator.

 

Once the testing is fine you can click on COMPILE to generate the .tft file.

Once the compilation is successful you can find the file under bianyi folder or tft output folder.

To upload the .tft file on to Nextion display we use USB-TTL method.

Connect USB-TTL Nextion

Vcc—5v,  Gnd-Gnd , Tx—Rx ,, Rx –TX

 

Plug in the USB-TTL to PC and note the COM port allotted under Device Manager.

Click on UPLOAD button.

Select the COM port and Baud rate as 115200.

Now the file is uploaded and the screen we developed appears on Nextion screen.

Let us connect the Arduino with Nextion

Vcc—5v , Gnd – Gnd , Tx-Rx ,Rx-Tx

Upload the following code.While uploading remove the Tx,Rx wires and then connect back.

 

Once Done uploading you can test the project result.

In built LED on Arduino switched ON or OFF as per touch switch on the display.

 

Download code and images HERE :

 

VIDEO :