Nextion WIFI Touch Display

tmpAE8DPlease note ALL of this information is now dated – the blog http://tech.scargill.net is now the place to see this and MUCH more tech info, thanks. The blog has thousands of followers and covers ESP8266, Raspberry Pi, reviews of many single board computers, Node-Red development and much, much more. Please visit the new blog.

This project is a development of previous work on the Nextion touch serial displays and offers a WIFI-controlled (MQTT) touch display which can be used with the full range of Nextion displays from the little 320*240 display you see here, up to the 7” resistive-touch model (note that in 2017, Itead are bringing out new capacitive models).

Please note this was created as a temporary solution during downtime on my main blog – the real project is here – http://tech.scargill.net/nextion-wifi-touch-display/ – suggest you read that instead. All items in this blog have been transferred to http://tech.scargill.net and in many cases updated.

The background to this is the ESP8266 software we developed for general use, which loosely started off as a MQTT demonstration and grew over time to be general purpose ESP8266 software written in C to make good use of the various IO pins of the ESP8266. The peculiarities of the Nextion display is that it is communicated with serially. The serial lines of the ESP8266 are really needed for programming and debugging and also put out some debug info on power-up at 78k so that was really a non-starter and so a software UART was added to the code to provide a second serial line at 56Kbaud to control the Nextion.

There is a video of this example display here. The example image shown above right is merely a prototype as we await Rear View of the WIFI serial boarddelivery of a new 3D printer at which time we’ll put together a better front bezel. In this case we’re looking at a thermostat for a holiday rental installation and used here merely as an example of  what a serial WIFI display could be used for. The techniques I’ve used are applicable to a wide range of products.

The board mounts onto the back of the various displays with simple double-sided adhesive foam and as you’ll see in this example connects to the Nextion serial connector.

So the basis here is that we have an MQTT controlled touch display with haptic feedback and visual indication of button change of state.

tmp59C6In this example there are only two states for each button i.e. on and off and as the Nextion Editor cannot handle rounded transparent PNG images we use another way., The editor has a feature called “crop image” in which you can select an overall backdrop image but on demand replace any rectangular area with a window through to another image. So all that is required in this case are 2 images as shown below, one featuring everything turned off – the other with everything turned on.

Compared to trying to match background colours to simulate transparent PNG files, this method works extremely well. Of course you don’t have to use Powerpoint but I find it produces the best results for the least work.

tmp6C4B

tmp26E2

If you look at the two slides/images above you’ll see the difference and how a series of rectangular windows to the second image could give the impression that we have both on and off states for individual buttons – and even pressed states in the case of the up/down buttons.

Nextion EditorOf course – using our code is probably well over-kill and may not suit your purposes – really all you need do is ensure you have a software UART on the ESP which is able to run at up to 56kbaud – you could use a slower baud rate as long as you don’t wish to fire TOO much information at the Nextion display (though it the most likely area of issue would be returned data – you should have a software UART that is running under interrupts).

We keep our instructions to and from the Nextion displays down to a minimum of complexity. In the image on the right you’ll see how this all looks inside the Nextion Editor.

On the right we define hotspots for touch sensitivity – which COVER the various buttons and those hotspots can be defined not only to return a value when pressed but also to change to make use of the “crop image” feature of the Nextion – to show part of ANOTHER image when required – and that is the second image of the two above.

For the likes of the up and down buttons – a touch press event in the editor like get “nodered~down” suffices to send out a message back – I’ve used a tilde to separate topic and payload in the message to be sent back out so that in this case it will be sending an MQTT message topic:”nodered” and payload:”down” – so you could send messages to Node-Red to communicate with controllers – OR you could control them directly by using the right topic and payload.  In the case of indicators, nothing is done at the display end – sending a message from Node-Red to, for example “led1” to tell it to use an alternative image is sufficient to make it look “on”.

Alternatively we may be simply displaying text. The Nextion does text in various sizes fairly well whereas image handling is not quite so good (no transparent PNG files yet and hence the “crop image” method). Even with a graduated background this method works well.

Links:

Here is the link for the EAGLE files for the PCB, PNG files of same, a bill of materials for parts and Nextions own 3d printer file for a simple bezel (we will endeavour to produce a better one for our own use an include it in the coming weeks, time permitting). Also included my own demo PowerPoint file as used here.

Here is the link to the entire source code for the general purpose ESP code which includes commands to handle this display and to send out MQTT commands.  This is has been put together using the Windows unofficial Development environment using Eclipse.