MRL MooG - Nextion Display Keyboard Gui - playing samples via MRL serial





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

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
GroG's picture

We dig it !   Wow ..  quality

We dig it !  

Wow ..  quality of your tutorials are always perfecto !

Great detail.  Interesting product, very "straight forward" with a nice IDE.  So, its about $20 per display... 
For some reason, I can imagine wall switches in the future 

becoming much more interesting ...  (where you can command lots of stuff with finer detail) ... 
but that would require you changing menu's dynamically ...
You "uploaded" the  screen from the IDE..  I assume if you have enough "space" on an Arduino or microcontroller, you could upload from that too, switching the screens & hotspots ?

Great work as always Sir Gareth !

Gareth's picture

Page_ing the Nextion

As far as I know at the moment the display Gui cannot be changed dynamically (firmware reprogrammed) over serial..(don't quote me yet)....

.....However it is easy to set up multiple pages on the Nextion which you can switch between (not tried yet) , meaning  you can set up a ton of different control panels beforehand and call them into view "on the fly" over serial.

Its also fast enough to display short animation films too. (there is quite a bit of cache on board)