This article was written by Pete Scargill, from Scargill’s Tech Blog.

April 16 2016 announcement – the project won second prize in the 1st Annual ESP8266 Design Contest over at esp8266.com

This award-winning project is a development of previous (home control 2016) 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” model. A word of thanks to everyone who voted for us in the esp8266.com 1st annual competion – the design was beaten to top place by the excellent ESP8266 Basic interpreter and rightly so as that is a great addition to the ESP8266 programming arsenal.

The background to this project is the ESP8266 software we developed for general use over many month, which loosely started off as a MQTT demonstration and grew over time to become general purpose ESP8266 software written in C to make good use of the various IO pins of the ESP8266 and MQTT as a communication protocol. The peculiarities of the Nextion display is that it is normally 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.

Demonstration video:

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 I need a thermostat for a holiday rental installation and used this 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 any 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.

In 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. I should point out that at the time of writing a major update to the Nextion editor is in the works! More on that in a future article.

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.

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.

Of 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.

The board features reset and programming buttons to make life easy, an FTDI-compatible programming connector on the left and all the general IO pins are brought out to 0.1” on the right – this board will have many more uses than simply this display! What else does the software (which compiles under Windows – Unofficial Development Environment) do? Just about everything – RGB LEDs, PWM, general IO, software clock – there’s a WORD doc file with the project.

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 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.

Generalised software:

There is of course (optionally) a LOT more to this board than just using the Nextion Displays… if you choose to use our software (which should compile without issue in Windows using the Unofficial Development environment) you can expect to be able to control the other ports via MQTT and serial. See the home control project on the blog – or the documentation file. I’ve just successfully tested the above boards to control GPIO0, 2,4,5,13,15 and 16 as outputs. GPIO2 is attached to the DS18B20 tracks on the board and simply dropping in a DS18B20 on the board will allow for temperature control (averaged and to the nearest degree C). You can also use DHT11 (not recommended as not very accurate) or DHT22 (more expensive but WAY better). Defines are in the user_config.c file.

Using a standard FTDI and the Eclipse environment it is not necessary to use the reset button – simply press the programming button and start programming – then release. The reset is handled by a cap on the board and some Python software in the project. A future version will likely do away with the need to press the (GPIO0) programming button.