A Remote Wireless Connected Colour Nextion Display

Introduction

In an earlier project I presented Loadmaster XP, a maximum power point (mppt) PV Solar Hot Water controller.

With such solar projects, you can easily become obsessed with understanding data:- How many KWhrs of solar energy have I received today?, What's the PV power now? What was the highest power delivered today?, What is the current water temperature? How much hot water is there in the cylinder? What was todays Maximum water temperature?, is everything working ok?, etc, etc

I wanted a colour display providing more visual appeal than a 20x4 character LCD and with sufficient viewing area to display all parameters at a single glance. I really didn't fancy the idea of vast amounts of code that often goes with driving a colour LCD touchscreen. I also wanted this display to operate 100% reliably when located anywhere in our house using a wireless link. Enter a Nextion Display and a pair of HC-12 wireless modules:-

Nextion displays include an on board processor, memory and touch display and are supported by this free Editor software for creation of the graphical user interfaces. The Nextion Editor software enables you to quickly (well, once you understand it!) develop a user interface from drag-and-drop components which include multi-state graphic images, text boxes, buttons, gauges, sliders, number boxes and progress bars etc.). The Nextion display is connected to a micro controller device (i.e The Arduino Nano in a Loadmaster) via TTL Serial (5V, TX, RX, GND). Simple ASCII commands received from the Loadmaster are used control all the graphical elements and update data values shown on the display. In addition 'event notifications' (for say touch screen button presses) can be transmitted serially from the display to the peripheral MCU (Arduino) for it to act upon. The LoadMaster remote display application discussed here is primarily aimed at updating the display data but also includes the ability to turn LoadMaster ON&OFF using a touch screen button. (In my application, the Nextion is located behind a glass kitchen cupboard door to provide 'at a glance' information only,-the touch screen can't function through glass!):-

The GUI includes a touch screen button control for ON/OFF switching.

Loadmaster is generally setup and configured (not a frequent operation) using a serial terminal interface, with more development time it would be possible to expand the Nextion functionality with a multi-page U.I. The Nextion smart display concept is great for producing relatively quick results and cost is attractive (almost comparable to producing a remote display solution based upon another Nano and say a 20x4 graphics module etc). ITEAD or Banggood typically supply displays at a reasonable prices.

Note:- Nextion offer a number of different display families Standard, Enhanced and the budget Discovery version. All displays are code compatible and the 2.8" Discovery version works perfectly in this application. Two code versions can be downloaded with graphics configured for for use with 2.8 or 3.2" Nextion displays. However! (and I don't believe I am alone in saying this), the lack of detailed documentation with code / graphics creation examples, and my slow brain, made the learning curve somewhat confusing and time consuming. I am certainly no Nextion expert but hopefully this project may help to clarify a few aspects of using this remote display with Loadmaster, alternatively you can take the simple route and load my default 'tft' display codes which should take <2 mins using a uSD card:-

Connecting the Nextion Display to LoadMaster.

The Nextion may be directly wired to connector CN6 of a LoadMaster PCB V4 as follows:-

Or, for a remote display via HC-12 (or other) wireless modules, wire as follows:-

Programming the display with my default display code is simple:-

From the software downloads section, download the appropriate 'tft' file to suit your display size (the grahics and code are designed to suit either 2.8 or 3.2" displays). Copy the 'tft' file onto a micro SD card (<32GB). Insert the card into the display's card socket and then apply 5V. The display will show programming progress. When complete, remove the card and re-apply power. The display is now programmed. Simple, you should have a working remote display.

The Nextion's default baud rate is 9600. This is suited the HC-12 radio modules and so this was left at 9600.

I wanted the display to be wireless and operate reliably at 30m or so from the LoadMaster through brick walls etc. After trying a few different modules, I selected to use 433Mhz HC-12 modules which gave excellent 'error free' range well beyond 50m (using the basic wire spring antennas). These modules have some intelligence to manage the flow of Tx and Rx messages. They appear to work 100% flawlessly.

HC-12 modules can be programmed to operate on different RF Channels and baud rates etc, it is a very well documented module on the web and so, enough said.

Creating the Graphical User Interface..A basic overview

To understand the basics of how the Nextion display is used, I will focus on the graphical elements, especially the power of cropped images and how best to update variable values on the display with minimum of serial 'traffic'.

Nextion Display Coding and Libraries

There are several Nextion libraries for Arduino. I initially looked at using these but then, like others, concluded that using a library for a small to medium user interface application probably has little benefit and in fact adds more complexity and confusion! If you have lots of pages and buttons then yes, consider using a library.

There are several approaches to using and controlling a Nextion, I will attempt to explain a few methods here.

My LoadMaster Display is shown below:-

Active display elements include:-

Linear Bargraphs - with max / Min bars. The Nextions toolbox contains a Progress Bar tool however the Cropped image function provides a good alternative method.

Gauge / Meter for WHrs

Number Boxes for Watts and Temperatures.

Picture elements - providing a flashing wireless 'data received' icon.

TouchPush button for ON/OFF Status - The two state Button also displays fault error messages

Graphics work

Firstly you need to know your Display type / resolution (3.2" = 400x240, 2.8" = 320 x 240). In the editor application, open a new project selecting the appropriate display and Landscape / Portrait layout.

Generally the attribute box for Page 0 will specify either a solid background colour or a background image (for a more attractive look).

The background image file started life in MS PowerPoint. This handles a range of image file formats including transparent PNG images, it is easy to layout the graphics and add lines and text etc. A very important point is to create a rectangular background image having an aspect ratio to exactly match the display (i.e 400x240 pixels = say 16cm x 9.6cm). Use PowerPoint's size values to set the dimensions. (Example PowerPoint files are available in the downloads section)

PowerPoint allows you to select the background image and 'Save as a picture', however this has no option to set the actual pixel dimensions. Instead I select the image and paste it into Inkscape. Inkscape can also be used to add other graphic effects (I found it adds text elements better than Powerpoint without altering the aspect ratio). Finally, use Inkscape to 'Export as a PNG' using required pixel dimensions, 3.2" =400x240 or 2.8" =320x240.

I created a background image which included all bargraph elements in their blank state.

and another image with all segments on:-

Why not use the Nextion Progress Bar tool? Well you can. Progress bar elements can be configured to show either a solid colour progress bar with a width dependent upon the val attribute (0-100), or they can show part of an associated image. To produce colour graduated bars, you would need to create or 'cut-out' images of the different sized 'full' colour bars using the correct pixel width, height and with edges to match and blend into the background ('ppic' in the Attribute settings) plus the image which is shown for empty parts of the bar (bpic). Any shading effects, anti aliasing /blending into the background may become more awkward. My chosen method to create the progress bars is discussed next and is based on using the cropped image instruction 'picq' (not to be confused with 'crop' in the toolbox). With this method, you only need to create and load two 'full size' screen images, one with all elements in their on condition, the other with them all off. From the Nextion instructions:-

usage: picq <x>, <y>, <w>, <h>, <picid>

<x> is the x coordinate of upper left corner of defined crop area

<y> is the y coordinate of upper left corner of defined crop area

<w> is the width of the defined crop area

<h> is the height of the defined crop area

<picid> is the ID number of the associated full screen image.

The cropped image will be shown on top of the pages background image, eg

The only problem we have now is that if we now wish to display only 25% of the bar width, we need some method to clear the area of the bar above the target width value to 100%. picq can be used to do this by cropping and displaying a section from the 'off' image (image ID = 5 in this example).

The above could all be achieved in the Arduio using the following code:-

void UpdateNextionWatts (void) {
int BarWidth = map(PVWatts, 0, 3000, 0, 300);  // map PVWatts  FSD range to match the bar width
mySerial.print(F("picq 84,3,"));  // X,Y Position
mySerial.print(F(",51,6"));  // This is the value Serial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display mySerial.write(0xff); mySerial.write(0xff); mySerial.write(0xff);
mySerial.print(F("picq "));         
mySerial.print(84 + BarWidth);   // This will clear the area of the bar
mySerial.print(F(",3,"));        // above the value of BarWidth
mySerial.print (300 - BarWidth);
mySerial.print(F(",51,5")); 
mySerial.write(0xff); mySerial.write(0xff);

However! ...this is a sizeable serial data exchange plus next we will need to send commands to update the numeric value of PVwatts.

Using Variables

Moving to the use of Nextion variables made my life much much simpler. It is possible to create integer variables in the Nextion editor. We can then simple send the Nextion commands which set the value of these variables inside the Nextion. We then manage the updating of individual screen elements using a small amount of code in the Nextion.

If we add a timer element to the display, we can use this to periodically update all elements of the display using received values of the different variables.

Click on the timer element, tm0, to see its Event code window :-

Every time Timer 0 triggers it runs this code:-

tm0.en=1 // tm0 Starttm0.tim=500 // tm0 Time base 500 mS
//********************
//use cropped images to
width.val=TopC.val/8 //600 = 60degC and bar width =60 pixels
picq 18,90,width.val,37,6picq17+width.val,90,75-width.val,37,5
x0.val=TopC.val // Update XFloat display for Top Tempvalue//use cropped images tocreate graduated Mid Temp progress bar.
width.val=MidC.val/8 //600 = 60degC and bar width =60 pixels
picq 18,136,width.val,34,6
picq18+width.val,136,75-width.val,34,5
x1.val=MidC.val // Update XFloat display for Mid Tempvalue
//
//use cropped images to
width.val=BotC.val/8 //600 = 60degC and bar width =60pixels
picq 18,187,width.val,34,6
picq18+width.val,187,75-width.val,34,5
//use cropped images tocreate Min Mid Temp bar.width.val=MinC.val/8 //600 = 60degC and bar width =60pixels
picq 18,170,width.val,5,6
picq18+width.val,170,75-width.val,5,5
//use cropped image to showmax mid temp bar.
width.val=MaxC.val/8 //600 = 60degC and bar width =60pixels
picq 18,131,width.val,5,6
picq18+width.val,131,75-width.val,5,5//Show Whrs on gauge, widthvariable is used to hold the scaled angular needle position.n0.val=Whrs.val
width.val=Whrs.val/35 //Gauge to go 6 to 235 for 0 to8000W = W/35 +6
z0.val=width.val+6
//
//create graduated Watts progress bar
width.val=Watts.val/10 //600 = 60degC and bar width =60 pixels
picq 85,2,width.val,36,6
picq
n1.val=Watts.val // Update watts number box
// create graduated Max Watts progress bar
width.val=MaxW.val/10 //600 = 60degC and bar width =60 pixels
picq 85,38,width.val,12,6
picq

Basically the above code uses the Nextion timer function to periodically update the various display elements based upon the value of received variables.

Downloads

In the Schematics and circuit diagrams section you will find:-

Example PowerPoint files used to create the graphics.

The Nextion 'HMI' development code - Open this in the Nextion Editor to aid understanding and for you to implement your own modifications!

The TFT file which is loaded into the display using a uSD card.