- Tue Mar 15, 2016 11:14 am
#43212
User
Scargill
Description
The purpose of this project is to provide at the lowest possible cost, a WIFI touch-sensitive LCD display for general purpose use. It achieves that and more, providing a general purpose ESP8266 board in the process.
For many projects it would be very useful to have a WIFI, touch-sensitive display but the cost of these has up to now limited their use. The smaller Nextion displays are inexpensive serial touch-LCD and are ideal but for the need to have the processor nearby for the serial connection. It occurred to us therefore that it would make sense to use the extremely low-cost ESP12 talking to the display and offering wireless access, preferably over a simply protocol such as MQTT. Such an add-on board should be easy to use and low cost.
The end result is a display which can be mounted anywhere and which talks to, for example a Raspberry Pi over MQTT wirelessly. In this example, a central controller (Raspberry Pi) runs Node-RED which has an MQTT node and hence it is simple to update the display from Node-RED.
The Nextion displays themselves come with a free editor but this is not the easiest thing to use and so I like to use only the simplest functions. Experience in using the editor has led us to develop displays using at least two full-screen PowerPoint images (.png files) - one showing all outputs ON, the other showing them OFF. The latter is used as the backdrop and thanks to a feature of the Nextion editor called “crop image” it is possible to make selective rectangular windows of a SECOND image (or more than one) hence giving the illusion of the use of transparent PNG images for changing button states where no such facility exists.
The software in the ESP-12 has been developed as a general purpose controller over a long period of time and has proven to be rock-solid, accepting MQTT commands over WIFI. Special code has been added to facilitate the serial controller for the Nextion and all of this is documented at the blog at http://tech.scargill.net/nextion-wifi-touch-display/ including links to source code, Eagle files, PowerPoint files and a bill of materials for the controller.
FYI
Here is what will be in the BLOG when my service provider gets around to fixing my ability to update the blog!!! It will be entitled “Nextion WIFI Touch Display” – and contains links to everything – it is laid out much better than this paste into email – apologies for this – assuming all is fixed in the morning I’ll send you the link to the blog entry – and I’ll amend said link in the video.
Pete.
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” model.
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.
nextion-wifi-touch-display-1.jpg (13.65 KiB) Viewed 9138 times
nextion-wifi-touch-display-1-4.jpg (20.21 KiB) Viewed 9138 times
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.
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).
nextion-wifi-touch-display-1 (2).jpg (34.09 KiB) Viewed 9138 times
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.
Parts
see Links
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.
Dropbox link
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.
Source code link
Video
Images
Scargill
Description
The purpose of this project is to provide at the lowest possible cost, a WIFI touch-sensitive LCD display for general purpose use. It achieves that and more, providing a general purpose ESP8266 board in the process.
For many projects it would be very useful to have a WIFI, touch-sensitive display but the cost of these has up to now limited their use. The smaller Nextion displays are inexpensive serial touch-LCD and are ideal but for the need to have the processor nearby for the serial connection. It occurred to us therefore that it would make sense to use the extremely low-cost ESP12 talking to the display and offering wireless access, preferably over a simply protocol such as MQTT. Such an add-on board should be easy to use and low cost.
The end result is a display which can be mounted anywhere and which talks to, for example a Raspberry Pi over MQTT wirelessly. In this example, a central controller (Raspberry Pi) runs Node-RED which has an MQTT node and hence it is simple to update the display from Node-RED.
The Nextion displays themselves come with a free editor but this is not the easiest thing to use and so I like to use only the simplest functions. Experience in using the editor has led us to develop displays using at least two full-screen PowerPoint images (.png files) - one showing all outputs ON, the other showing them OFF. The latter is used as the backdrop and thanks to a feature of the Nextion editor called “crop image” it is possible to make selective rectangular windows of a SECOND image (or more than one) hence giving the illusion of the use of transparent PNG images for changing button states where no such facility exists.
The software in the ESP-12 has been developed as a general purpose controller over a long period of time and has proven to be rock-solid, accepting MQTT commands over WIFI. Special code has been added to facilitate the serial controller for the Nextion and all of this is documented at the blog at http://tech.scargill.net/nextion-wifi-touch-display/ including links to source code, Eagle files, PowerPoint files and a bill of materials for the controller.
FYI
Here is what will be in the BLOG when my service provider gets around to fixing my ability to update the blog!!! It will be entitled “Nextion WIFI Touch Display” – and contains links to everything – it is laid out much better than this paste into email – apologies for this – assuming all is fixed in the morning I’ll send you the link to the blog entry – and I’ll amend said link in the video.
Pete.
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” model.
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.
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.
Parts
see Links
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.
Dropbox link
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.
Source code link
Video
Images
Surplus parts
https://epartsconnect.com
Live realtime stock market prediction website. https://www.stocksignalslive.com my latest creation. Uses AI and machine learning.
New site featuring ESP8266 and ESP32 projects. tutorials, and news.
http://EverythingESP.com
ESP8266.com Founder and Administrator
The Mind Factory (get more from your 3D printer)
Home of the ESP8266, ESP8285, and ESP32 microcontrollers....
https://epartsconnect.com
Live realtime stock market prediction website. https://www.stocksignalslive.com my latest creation. Uses AI and machine learning.
New site featuring ESP8266 and ESP32 projects. tutorials, and news.
http://EverythingESP.com
ESP8266.com Founder and Administrator
The Mind Factory (get more from your 3D printer)
Home of the ESP8266, ESP8285, and ESP32 microcontrollers....
