At the risk of repeating myself (apologies to regular readers for this first para) the Nextion display is in fact a range of touch-LCD displays from small to large. The thing they all have in common is a a complete programming environment where, by downloading a desktop graphical tool, you can lay out the display, what it will show and how it will respond to button presses. All of this happens serially so that you program it serially via, say an FTDI (usb-to-serial interface) and when you’re done and a button is pressed, serial output is sent back out to your application and you do what you want with that.
So first things first – what it IS, is an excellent low-cost way to get visual controls onto your IOT device. What it is not, is fun to program. There is a language interpreter built into both the display itself and the desktop “debug” simulator – and I would summarise by saying that it is probably the worst interpreter I have ever experienced since Bill Gates 5K BASIC back in the 80s. However, it works – and with a little effort you can soon bypass the inefficiencies of the interpreter and get the job done.
A friend of mine and I have been looking to use these in our IT projects for some time – and while a serial interface is great, it isn’t much use if you just want to stick a thermostat control on a wall 2 rooms away from where your controller is.
As many of you know I’m a Raspberry Pi/MQTT/Node-Red fan and so everything I do is oriented towards making peripherals that will talk via MQTT protocol, wirelessly back to the Pi – hence my interest in the SONOFF units as they are a VERY cheap mechanism for controlling lights etc – using my own software or that of others which you will have seen in here.
And so it was that Aidan and I set about making a little board to go on the back of the Nextion – the first one came back from the Chinese supplier with the top grounding disconnected – that gave us the opportunity to do a MKII which we’re expecting in a week or so which we actually think will make a GREAT general purpose board for experimenting with the ESP-12… but more of that later.
So – we’ll not concentrate on the communications angle here but on how I managed to get the nice buttons. That entire display is actually put together from TWO images – thanks to a feature of the Nextion called CROPPED IMAGE
One apparently BIG problem with the Nextion displays is their inability to handle transparent PNG images – like round buttons. On the surface this might be fine if you have a static background colour and can match it around the edges of the button -but this is often not the case. In order to work with limited processing power (and I suspect the limited programming ability or program space if the interpreter is anything to go by) they like to handle rectangular areas – these are easy to move about at high speed. But they have come up with a good solution to this – the cropped image.
So let’s say you make 2 images – one with everything turned OFF and one with everything turned on. A BUTTON can be a rectangular area with text on it – which looks ABSOLUTELY AWFUL – or it can be a CROPPED IMAGE – showing part of the chosen image depending on the state of the button. So a rectangular area over a round button showing a window into the overall ON image or the OFF image will give the impression that only the rounded area is changing – and you don’t have to worry about gradiated backgrounds etc.
In essence you use a basic image with everything shown turned off – i.e. the buttons are nothing more than a single image – in my case a pair of Powerpoint images – I use Powerpoint as it is easy to align images,
Use of the second image – with everything turned on – is controlled by the Nextion itself – that is selectively showing parts of that second image as needed – of course this is just a very BASIC example – you can have multiple pages, you could programmatically select more than just 2 alternatives (3 state button or LED… and the Nextions – if you get TOO ambitious – can handle an external SD for even more images. A cheap throwaway 256Meg SD holds quite a few images.
Thanks to advice from friends and people in here I found quite a few images – I put a link in the comments to a previous article – any transparent PNG images can be pulled into Powerpoint or similar to make up your basic pages – the cropping ability of the Nextion makes it possible to turn this into a dymamic display.
And so we come to the Nextion interpreter which is HORRIBLE. How do I get a button press (dual-state button) to send out the right info – this might look like a mess but when you get into the Nextion editor and have a go – you might thank me for this – no it isn’t my lousy programming that makes it look like this and no you can’t put it all one one line and yes, amazingly you can’t have a space after the IF statement – I’ve thought of volunteering to go over and help them with the interpreter!!! But it works so once you’ve done one – it’s a copy and paste job.
printh ff ff ff
As that data comes out of the Nextion, my ESP software picks it up, sends the message out over MQTT and triggers a timer for the little cheap phone buzzer for haptic feedback.
When we get our new boards and I get my office put together – I will endeavour to go into that side of the project – as I see a lot of future in this as a high quality, wireless touch display.