Introducing the Nextion Display :-

The display show here is a Basic NX3224T024_011

2.4 inch (240x320) , Resistive Touch screen

4M Flash RAM:3584B

48Mz running speed

On the back side is a SD card that can be use as one way to update the Firmware/display Gui only (at moment you can not access the SD card for own use)

The idea behind the display is simple :-

Place all your buttons and graphics,sliders, check&radio boxes, text, etcetcetc onto the display and let a serial interface change the values for you.

This means that all the housekeeping of the display is done for you and allows a connected MCU to gain significantly more time (away from intensive slow graphic display duties).

To this end Nextion supplies a Nextion Editor which allows you to design your screen layout with a WYSYWYG type overlay...... its really magic.

*****************************************************************************************************

Here is a walkthrough to wet your appetite.......

Fire up the Nextion editor and create a new project.

Select your particular Display , in our case its a Basic display - more about the Enhanced version at the end of the walkthrough.

and in our case we need to rotate the display 90°

Select your model number , in our case a NX3224T024_011

This jumps you into GUI development.

To start the ball rolling we need to add some graphics to the graphics container

Simply load in your graphics , in our case a keyboard.

In the toolbox select the picture entry

This brings up an empty placement box , with a label of p1

To populate this there is a "pic" setting in the attributes, on double click this brings up your graphics container where you can select your graphic

Bingo it is placed onto your GUI

keep adding your graphics this way........

If you notice below "p1" has been selected and you can see two possible events (a touch press and a touch release event)

This is where you write your display code ... i.e. when this graphic is pressed you can send a serial character on the serial port (where your mcu will be listening)

There is also a "send component id ID" radio box , when enabled each time the graphic is press it sends a short serial message with its ID , ( your MCU can then track what component has been pressed on the screen)

In our case this is NOT selected.

The keyboard graphic is one big graphic area, so we need to break it down into individual keys.

Under tools there is a "Hotspot" selection.

Adjust the powder blue box over the area you need a touch sensitive "Hotspot"

This is where it gets interesting, in the event box we can enter our first code instructions :-

printh 31

      when this hotspot is pressed it will send hex31 (ie ascii "1") onto the Serial link

Add as many "Hotspots" as you need - overlayed hotspots take priority (thank the lords).

The Nextion Editor comes with its own "Debug" , which emulates the display GUI you have just made.

In our case below it flags an error, "Printh 32" is false "printh 32" works - its case sensitive.

When no errors exist the editor presents you with a fully working version of you GUI to test out.

The simulator output box confirms that the characters are being sent when keys pressed

Last stage is to upload the software GUI to your Hardware Nextion GUI, and that's it.

The MRL code is relatively simple, a Serial service , Python Service and in our case for testing an Audio Service. The important part is below .

def onByte(code):  decoded = "".join(chr(code))        # the python listener traps the serial data off the Nextion  print decoded  if (decoded == "1"):                     # This is the first key of the keyboard as sent by the Nextion     audiofile.track("newTrack1")    # If you need to play sounds simultaneously add new track     audiofile.playFile("C:/MooG/tubalarBells1.mp3")  # where your audio files are located.

The Enhanced Nextion screen version has a handful of  GPIO pins with the possibility of PWM out (so conceivable the display can be directly connected to InMoovs servos (with Slider Nextion GUI controls).

Below is an example of what can be done. Buttons,text areas , graphs overlayed on graphics.

On the left is a slider object , its slider is second graphic which can be updated in real time (in my case nixie tube numbers which change when you slide the slider), your external MCU just needs to sit and RX or TX serial values to/from each component ID.

That's it in a "Nutshell", I have used a music keyboard in this example just to show the speed and flexibility the screen has, this is only a short walkthrough to give a taster of the display,

......only the surface has been touched (there is a joke there somewhere).