Nextion Displays and the ESP8266

Peter Scargillnextion59 Comments on Nextion Displays and the ESP8266

the Nextion boxSo a parcel arrived for me this morning in the post. A Nextion display. And what is that, you may well ask?

Think of something like a thermostat or really any home control situation, at some point you have to stop sending text commands from an expensive PC and reduce the operation down to neat and tidy button pushing so that everyone else in the house can actually participate in your invention!

This is where things often fall down, the “Heath Robinson” home-made-looking box with pretty awful buttons telling everyone you have “amateur” status.   Now of course, today, you could choose to use a second hand phone or tablet for your wall-mounted family-friendly display and control panel… OR you can use a touch-sensitive display.

These are REASONABLY cheap – for example….  http://www.banggood.com/UNO-R3-ATmega328P-Board-2_4-Inch-TFT-LCD-Screen-Module-For-Arduino-p-945755.html

So this is an Arduino + touch display for under a tenner. You have to sort out libraries and basically write everything from scratch – and that’s fine – but time consuming.

Te Nextion PCBAnd so it was that my friend introduced me to the Nextion displays. This is a display board that isn’t too expensive – and which has everything built in. Essentially, on a PC you run a free editing program, tell it where you want buttons, text and images and what should happen when you press the buttons.  A button lets you download that to the Nextion board and “Bob’s your uncle”.

The board has only 4 pins – power (5v), ground, serial in, serial out. Press a button and stuff comes out of the serial pin at logic levels and 9600 baud.

You really can’t get any easier than this. Perfect? No, far from it. In my initial trials. the editor has some polishing to do, my first attempt at running the font convertor on a Windows SANS font produced a pretty awful output and I’ve clearly got a learning curve ahead of me – but after 15 minutes I have a display running with serial output on button press – that is one HELL of a lot faster than any other way I can think of.

Nextion displayThe board has another advantage over alternatives – the whole thing is very THIN and so will easily fit into a nice slim wall mounted case.

You could choose to run the board serially – OR via something like an ESP-01 and that is almost definitely what I will be doing.

I’ll have the EXP capture button outputs and send MQTT commands back to base – and accept MQTT commands and send them to the display.

Welcome to NextionWhen you first power up the unit, it comes up with a nice display and responds to button presses… so that gives you a feel for how things will work – that’s before you do any programming – just power the board up.

All you have to do is use the PC software to drop  in some screens, some buttons and some dials and off you go.

So that’s the theory – what is the board like in practice. I have to say that my first experience suggests that the translations have some way to go.  The simplest thing you can do is have a button send something out of the serial port when you press it.

GaugesThat is a 5 seconds job to implement – but it took me nearly an hour to realise because my friend who has already done this showed the use of an on-press function called PRINT which on his board works on it’s own. With the new software you build up commands and add a special command at the end to send everything out of the buffer. Until I found that command, mysteriously named “com_star” which I’m going to assume means “comms_start” – I was lost.

So commands tend to end with a binary zero for reasons I’ve not yet figured out… and at the end of any command, incoming or outgoing, you have 0xff 0xff 0xff  (i.e. 3 bytes each one binary 255).  That in itself makes testing interesting as a simple ASCII terminal might have difficulty with the terminating characters. Not sure what’s wrong with a simple carriage return myself – but I’m sure they have their reasons.

Now that I KNOW – it’s easy. Kind of – the manual needs a lot of work – but I guess it is early days yet – as long as they keep improving things, this little display could well be a winner.

The thing that stuns me the most – looking around the web – is people using this with an Arduino – with an ESP8266 stuck on the end for WIFI! Seems like major overkill to me not to mention the cost.  An ESP-01 talking to one of these devices, with 512k programming space on the ESP, it seems to me one could accomplish one hell of a lot!

Right now  I have the Nextion sending out instructions when a button is pressed, via it’s serial – at 115,200 baud. The text is encoded to be the same as my home control. My home control boards are of course ESP8266 and I’ve used a resistive divider on the serial input…  All good fun.

UPDATE: See comments in here – lots of issues with the software right now – this is not going to be as easy a ride as I thought…. comparison operations that just don’t work – we’ve been writing to the designers all day and I hope that our issues will be sorted. Right now you may want to consider this a work in progress – SO many possibilities but not without pain it would seem. More as we get responses to our questions.

59 thoughts on “Nextion Displays and the ESP8266”

  1. I have just started working with Nextion I need to put float\real values in box and be able to change them.
    Does anyone have any examples of this. I was hoping to see floats but only saw number and text options

  2. Peter, can the display read images from a remote file system such as an RPi or from the SD card only? I have some RRD graphs that are updated every 5-15 minutes that I would like to show on a display and this one fits the bill in all other aspects. I’m thinking if I should go for one of these or the standard LCD touchscreens and then build my own GUI to show the graphs.

    1. You can read images from the sd card attached to the display. Consult the Nextion docs for instructions. Not done it myself but I would imagine its a one liner.

      1. Thanks, that’s not quite enough as my graphs are updated regularly on the RPi. I guess I’ll have to go for a regular LCD screen instead.

        1. Oh I see, no, that setup is not intended for graphing though if I recall rightly the Nextion has some kind of graph built in..

  3. Thanks for the response Peter. Sorry if I gave the impression that Idead hadn’t been helpful as I believe they have given the support when asked – just couldn’t solve the issue at that point in time. I have just received an email stating they will be replacing it. I would still like to solve the original issue, hopefully it wont manifest itself in the replacement display.
    Cheers.

  4. Peter – After having originally seen the Nextion displays on your ESP project I went ahead and ordered one to play with – the NX3224T024. On arrival and connected to a 5vdc supply I was greeted with the very nice demo program.
    I downloaded the software and created a simple button and downloaded it to the display.
    That was the end of it. Since then I have only managed to get a white screen. The software keeps telling
    me I have selected the wrong display module and wont do anything from then on.
    Apparently this is quite a common issue and there are quite a lot of posts relating to this, some have had success and others still have a brick.
    I have been in contact with Nextion support and I have followed their instructions to no avail.
    Is there anybody out there who has had this issue and managed to resolve it?
    Any assistance is appreciated.

    1. I’ve never had this problem – but then you may have one of the newer Nextion displays which I have yet to receive (next few days hopefully). I will certainly write in here if I come across any issues meanwhile if any readers have had the same issue as Murray above I’m sure he’d like to hear from you. I’m surprised that Idead support were not more helpful.

  5. Hi, I must say I really like fallowing you. this is my first post/question.

    I have a need to create a fairly complex display, possibly with tabs. For example, 5 tabs with around 20 to 30 switches, about 10 to 20 other types of controls like sliders and up/down controls for temp. I would also have a dashboard tab with just status information. I know the http://www.4dsystems.com.au/ devices do not have enough memory for more than 2 or 3 different sub screens/tabs. Do the Nextion devices have enough memory for multiple screens?

    Thank you,

    Mike

    1. That’s a trick question Mike – the limit on the Nextions is image memory so it depends on how much imagery you have that is unique. If each page has a completely different backdrop then you might find yourself running out of room after half a dozen or so pages – no, maybe 10 – it really is hard to say – but then I forget !!! You can put images on an SD (I just haven’t done that as I’ve not needed to) – so the answer I guess is – if you’re careful and make good use of the SD imagery – it will be a long time before you run out of memory. It just so happens that REAL SOON now I have a new article coming up on the subject of the Nextions – you’ll like it – I’ve been having service provider problems which have made it impossible to put blogs up – but as I was attempting to reply to your post I realised I am back in action. Keep an eye out for new articles…

  6. I am looking for a bigger display for ESP8266 Node-MCU, too.
    Did anybody have success in connecting the little MCU with a Nexion Display?

    1. You might want to take a look at my blog… I’ve had great success in connecting ESP to Nextion displays – and blogged it..

  7. These look really cool if you had a single, isolated piece of machinery working somewhere that needed an interface, but what about for the home automation scenario? With 7″ Android tablets approaching the $40-$50 range, don’t those present a larger and cheaper way to create a control panel? They would also have the advantage that using a web based layout of some sort means you wouldn’t have to update each individual control panel when you made changes to the devices on the network. I’m just curious what the optimal use case is for these things. It looks like they’re more for isolated cases rather than one where everything is within reach of a local network anyway.

    1. I’ve thought of that Lucas and if one doesn’t mind re-inventing the wheel then tablets are a great idea though the $50 ones usually are absolute rubbish. You then need a usb to serial interface, FAR more power, some kind of development environment that doesn’t mean you spend more time developing than the project is worth etc etc… thought about it a lot but not come up with a good solution. The Nextions you pull them out of the box, program on the web, plug them in, done. I’m not really sure if they have any competition.

  8. The solution from Alex worked fine for me (from October 7, 2015 at 12:47 pm)
    It worked with a slider (h0) and a progress bar (j0).
    (I’m even considering a light sensor/photo cel resistor to control the brightness in the future)

    Anyone any tips for skipping the ‘+’ and ‘-‘ buttons and only using the slider?

  9. Hi,
    Could you send me some LUA code that you use to connect and communicate with the screen?
    I can not get my device to work with this display 🙁
    Best regards

  10. For changing the screen brightness I used the following…. The if statement stops the screen from blacking out, and going beyond 100.

    PLUS BUTTON Touch Release Event
    if(dim>90)
    {
    dim=90
    }
    dim=dim+10
    j0.val=dim

    MINUS BUTTON Touch Release Event
    if(dim<20)
    {
    dim=20
    }
    dim=dim-10
    j0.val=dim

    I've got j0 as a progress bar, for it's initialisation code I have j0.val=dim.

    If you want the brightness setting to survive power cycles, then use the variable 'dims' in place of 'dim'

    @Juan C Galvez – Your if clause had an assignment of '=' not a comparison '=='. See http://wiki.iteadstudio.com/Nextion_Instruction_Set#Nextion_HMI:_System_Variables_List

    1. Thanks for that Alex – I was waiting for them to come up with a new version of the editor with lots of bug fixes before continuing with this – I’m not seeing much action though…

  11. I actually started looking at displays for my Arduino and already have several. But then I was looking for larger and stumbled onto these. Reasonably priced but as you found out their manual and even their ads lack telling you how things fit together. But over the past couple of days found a lot more help.

    What I love is I can spend most of my coding and space on my Arduino for doing work vs trying to draw buttons etc. Not to mention my projects could look so much more professional.

    As for the comment on using ESP8266 as WiFi and then going to an Arduino is overkill. If they want just WiFi with their Arduino you can get a HC-05 or HC-06 which will do the same thing. But again for the price you can about get the ESP8266 and use it in other projects. If I were going the ESP8266 route for the processing and WiFi I’d probably go for the SP-12 version or NodeMCU.

    But since I’m doing mostly Arduino for the moment I use the HC-05/06 since I already have them for the WiFi work. I’ve even got some STM32 devices.

    But back to the display. I’m loving this idea more and more. I’ve got some Ham radio projects I can use this in to give it a lot more controls.

  12. Oh dear, another example of the IF statement appearing to fail..

    if (page0.va0.val<=90) { page0.va0.val=page0.va0.val+10 } j0.val=page0.va0.val This code is for a progress bar, so hit the + button the bar goes up - hit the - button it goes down. The progress bars seem to be fixed at 0-100. Problem is - keep hitting + past the end and you have to hit - the same number of times before you see visible change in the bar - in other words - the IF statement is failing.

    1. In the progress bar, I only did ” j0.val = j0.val+10 ” or ” j0.val = j0.val – 10 ” in the buttons “+”\”-” when pressed.
      If I press to much it somehow ignore it, I mean that even if the bar is “empty” (0) and still press 10 times “-” , I only need one press on “+” button to set in to 10

  13. I could not tell you how many emails I’ve just sent off to them – the timer cannot be programmatically reset until it has timed out!!!

    Ok, so we wanted to dim the display – having given up on doing ANYTHING clever with the timer, we decided to run the timer 10 times a second…. and decrement a counter, if the counter was below a certain value, it would dim the display accordingly – so in the last second you could actually visible dim the display… problem is – their if statement has neither an ELSE or a break – unbelievable how difficult that makes things..

    So here’s something that works – create the timer and a variable – and on any button or the screen background, set the variable to say 60 – that’s 6 seconds. At one second the display starts to dim – to a certain minimum.

    Oh did I mention you can’t have variables that start with an internal variable? So there’s a variable called DIM… set that to change the brilliance of the display.. you can’t have a variable called DIMSUM !!!

    I’ve reported that.

    SO in the interrupt, here’s code that WORKS.

    if(dtimer.val==0)
    {
    dim=20
    }
    if(dtimer.val>10)
    {
    dim=100
    }
    if(dtimer.val==2)
    {
    dim=20
    dtimer.val=0
    }
    if(dtimer.val==3)
    {
    dim=30
    }
    if(dtimer.val==4)
    {
    dim=40
    }
    if(dtimer.val==5)
    {
    dim=50
    }
    if(dtimer.val==6)
    {
    dim=60
    }
    if(dtimer.val==7)
    {
    dim=70
    }
    if(dtimer.val==8)
    {
    dim=80
    }
    if(dtimer.val==9)
    {
    dim=90
    }

    if(dtimer.val>0)
    {
    dtimer.val=dtimer.val-1
    }

    And that’s fine – but here’s code that DOESN’T work…. and for the life of me – I cannot figure why other than to assume a compiler/interpreter error.

    if (dtimer.val<0)
    {
    dtimer.val=2
    }
    if(dtimer.val>=10)
    {
    dim=100
    }
    if(dtimer.val==9)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==8)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==7)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==6)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==5)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==4)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==3)
    {
    dim=dtimer.val*10
    }
    if(dtimer.val==2)
    {
    dim=dtimer.val*10
    }
    if (dtimer.val!=0)
    {
    dtimer.val=dtimer.val-1
    }

    The last IF statement DOES NOT stop decrementing when dtimer gets to zero – which means it goes negative – no problem you might thing – but the check at the TOP – for values greater than 10 – ie full brilliance- guess what – the display goes full brilliance after it dims down.

    So some way to go – or can anyone spot a fault in the second code… I can’t.

    1. You could replace your code with:

      if (dtimer.val=10)
      {
      dim=100
      }
      if (dtimer.val>0)
      {
      dtimer.val=dtimer.val-1
      }

      In the last if, don’t compare to different to 0 but greater than 0. Probably they are using floating point variables and even if you are using integers the internal representation is not exactly 0.

      1. A portion of code didn’t appear. I hope this time it does.

        This is the code:

        if (dtimer.val=10)
        {
        dim=100
        }
        if (dtimer.val>0)
        {
        dtimer.val=dtimer.val-1
        }

        1. Not, It didn’t.

          There is an additiona line containing:

          dim = dtimer.val * 10

          after the first if and before the second one.

          A preview functionality is missing here.

          1. I’m sorry Peter but the code shown is not what I have typed. I don’t know why.

            I am going to write it one more time. If it doesn’t appear correctly please ignore my posts.

            if (dtimer.val=10)
            {
            dim=100
            }
            if (dtimer.val>0)
            {
            dtimer.val=dtimer.val-1
            }

            I am going to pseudo code it:

            if dtimer.val is less than 0 then dtimer.val equals 2
            dim = dtimer.val times 10
            if dtimer.val is greater than or equal to 10 then dim equals 100
            if dtimer.val greater than 0 then dtimer.val = dtimer.val – 1

            I hope this time you can see what I am writing.

  14. Ok RAN (and others) have a solution to the variables issue on the Nextion (they just wrote to me)

    You have to put the page number on the variables.. so I have a button – and when pressed it updates a slider J0. Variable is va0… and this is what you put in the button press event.

    page0.va0.val=page0.va0.val-1
    j0.val=page0.va0.val

    Simples.. works a treat – all I need now is a decent graphics library for such low res display… anyone know where there are countless .PNG buttons and panels?

    1. Glad to hear that, will check that in a bit.
      I just figured out that my editor version was 0.21 and not the last 0.26 🙂

      It’s so good to have your blog around! keep up the good work 🙂

      1. while writing those lines a new version came up 🙂 ver-0.28

        1, add new components: global variable, Timer
        2, add “if” statement
        3, upgrade font generator
        4, change default value of bkcmd from “0” to “2”

  15. Hi Pete,

    I too have received my Nextion (3.2″) last week and am now trying to get my head round how to build UIs quickly.

    I found this tutorial which used Inkscape with Google’s Material icons / UI elements (I think). Check the video to see how only 3 images are needed to display an interactive / responsive GUI on the Nextion:

    http://openhardware.gridshield.net/home/nextion-lcd-getting-started-for-arduino

    I like the approach very much but wonder if Inkscape is really the best tool for this. I am now trying another bit of opensource software called Evolus Pencil, which was specifically designed to build UI mockups.

    http://pencil.evolus.vn/

    Someone put together an Android Lollipop elements collection on Github (if that’s your thing):
    https://github.com/nathanielw/Android-Lollipop-Pencil-Stencils

    Even so, the buit-in collections would already give you a good starting point. Then export as PNG and use in the Nextion software.

    This took me a while to find: To add an image (bitmap or SVG), Common shapes collection -> Bitmap Image -> click on your document -> Right click -> Actions -> Load Linked/Embedded image

    Keep on hacking mate, I love your blog!

    1. Thanks for that John… I’m just finding it a shame that there’s a lot of concentration on the Arduino, which having gotten used to programming the ESPs I’m now finding rather old-hat. Still, any tutorials that help with improving graphics are most welcome – we do need to give the Nextion guys lots of feedback as their PC end has a long way to go – the emulator doesn’t do half the stuff the real thing does (you can’t even emulate sending text responses out via the serial port) and the translations are awful right now.

      I’m going to have a look at that evulus pencil – I remember it from a while ago but just ignored it – so now I’ve downloaded it and the buttons are GREAT.. but I’m not convinced… I dropped in a button – got rid of it’s text (after making a canvas 240*480 for my Nextion) – and exported the selection (the button) – sure enough – a nice PNG button IDEAL for the Nextion… erm, except for a little horizontal white line in the middle of it…. have you come across this???

      If that’s a fluke then that’s definitely a great resource…

      1. Ok, now I’m frustrated – Evulus Pencil seems ideal for the job.. but it has these lines on all of the elements – like buttons etc – there are thing white guidelines on them and I cannot for the life of me figure out how to turn them off – all of this would be just dandy – but when you EXPORT selections – it partially keeps the lines in the export – I’m sure that wasn’t deliberate… argggghhhhhhh.

        1. Just remember that there is a limit for the number of pictures you can put on the Nextion.
          If you can use the colors for indications, it will be better for big scale “touch programs”

          1. Ran…. erm, I’ve really not gone TOO heavily into this yet.. but can you not load images from SD if you run out of room? There’s an SD on the back of the unit….

        2. Oh no! Hopefully you will get it sorted. This is one I made earlier (just messing about with the Android Lollipop collection).

          View post on imgur.com

          The image is 400×240 for my 3.2″ display (just following the tutorial I linked for now).

          An individual element export is here:

          View post on imgur.com

          No white lines across anywhere. So it’s either a problem with the collection you used or possibly your OS (I’m on Win7 64 bit if that’s any use).

          1. Looking at your image, you are right John… that’s strange….Well I’m on Windows 10 with standard parts… weird… I just pulled up the first button I came across…

          2. OK, replying to myself. It looks like another team has picked-up the Pencil development. See:

            https://github.com/prikhi/pencil

            The latest version on Github is 2.0.13 (rather than 2.0.5), available from here:

            https://github.com/prikhi/pencil/releases

            Looking at the changelog, in v2.0.7 I see…
            Fix exporting PNGs

            Maybe this will fix your issue, Pete?

            Also worth a look, there’s an XPI version of Pencil, which will install/run inside Firefox. It’s a smaller download (doesn’t include XULRunner) but works just like the standalone version. You will however need to options -> customize… Firefox’s display to add a “Pencil” icon.

            1. Oh, that’s good – looks like most of the improvements are not Windows- but I’m downloading it now anyway – thanks for the info John.

    1. I hope that I’m wrong but from the libraries for the arduino, it seems that variables values are changed from the esp8266/arduino and not from the next’ itself :-/

  17. Just ordered a few. Let’s see what they’re worth. At that price, one can add an interactive display to about any sensor in the house (or outside). Just a pity that they are resistive,not capacitive.

      1. Thanks for that – the 4024T032 at $19 may seem a lot but when you think that it doesn’t need an Arduino or anything – and now I’ve realised it has variables – the sky is the limit.

        1. I just received one yesterday.
          I tried using variables as in C code like if pressed ‘+’ or ‘-‘ then variable will be incres decrees, didn’t worked for me 🙁

          2. Not for me either. I put a progress bar (J0) up – and a button who’s click property was

            va0.val=va0.val+1
            j0.val=va0.val

            Nothing, zilch – and I can’t figure out how to put numbers into a text box. I will try to get an answer. Meanwhile if you figure it out do let us know.

  20. There is an Australian company that has been producing similar displays (including a display IDE with which you can design your display looks by placing widgets and so on in certain positions, thereby taking the programming work of your hands also.
    Prices may be a little higher, but the IDE software looks better to me. Anyway, here’s the link:

    Home

    1. Thanks for that – I’m sure readers in here will find it useful. For me, the iTead is on the price limit and I would not want to pay more. Just needs more work on the editor and they are working on it – I’ll send them a list of fixes which will help – but it IS usable – I intend to make a wall panel to control colour lighting and monitor and control heating etc…. all talking via an ESP8266 back to my PI2 main controlller.

    2. I have worked with 4d systems are hard to use compared to nextion. We started off project with 4d systems and ended up using nextion which is inexpensive and easy to use.

Comments are closed.