Change an image on Nextion display

Other Hardware Displays
1

Hi there,

I come right from another thread ( HERE ) where I struggled to establish serial connection with my Nextion display using a Arduino Micro.

Now that I am here, I can change texte field on the display and do various things, but the core of my project is to display images and change them depending which button (physical push button) will be pressed.

I made a simple sketch and a simple Nextion file.

One image block and one text field and we change both content during Setup.
Ultimately it will have to be changed on Loop but I thought maybe I will have some refresh rate problem, so to start and see if it works let's just update it once during Setup.

Well, guess what ? it didn't work.

The text field got updated with the new value but the image didn't change.

(You can find the project files attached with this post).

Here is my code:

/*
This code is based on the software serial example on Arduino's website
 */

#include <SoftwareSerial.h> //Include the library

SoftwareSerial mySerial(10, 11); // RX, TX

void setup() {
  
  Serial.begin(57600); //open the serial port
  while (!Serial) { // wait for serial port to connect. Needed for native USB port only
  ;
  }

  Serial.println("Serial On"); //Print this messages when the serial port is connected
  mySerial.begin(9600); // set the data rate for the SoftwareSerial port

  // We change the image of image box p0
  mySerial.print("p0.pic=\"");
  mySerial.print("1");
  mySerial.print("\"");
  mySerial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display.
  mySerial.write(0xff);
  mySerial.write(0xff);
  Serial.print("img END");

  // We change the txt value of text box t0

  mySerial.print("t0.txt=\"");
  mySerial.print("Monkey");
  mySerial.print("\"");
  mySerial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display.
  mySerial.write(0xff);
  mySerial.write(0xff);
  Serial.print("txt END");
  
 
}

void loop() { // run over and over

  Serial.print("TEST"); // Just to show some activity
  delay(1000);
 
}

Basically, when we import images in the Nextion editor, each image receive a number as an ID.
So by changing the number reference it should change the image:

 mySerial.print("p0.pic=\"");
  mySerial.print("1");
  mySerial.print("\"");
  mySerial.write(0xff);  
  mySerial.write(0xff);
  mySerial.write(0xff);

On my project file, the default image is 0, and I am changing it to 1 during Setup.

Note that if I type the command p0.pic=1 in the Nextion debug window, it does change the image.

Anybody with experience with images on a Nextion device here ?

I've already tried THIS TUTORIAL but it didn't work on my devices... :frowning:

testImgChange.zip (12.5 KB)

2

Try this:

#include <SoftwareSerial.h> //Include the library
SoftwareSerial mySerial(10, 11); // RX, TX

void setup() {
  Serial.begin(57600); //open the serial port
  while (!Serial) { // wait for serial port to connect. Needed for native USB port only
  ;
  }
Serial.println("Serial On"); //Print this messages when the serial port is connected
  mySerial.begin(9600); // set the data rate for the SoftwareSerial port

  // We change the image of image box p0
  mySerial.print("p0.pic=1");
  //mySerial.print("1"); //You don't need this
  //mySerial.print("\""); //Or this 
  mySerial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display.
  mySerial.write(0xff);
  mySerial.write(0xff);
  Serial.print("img END");
  // We change the txt value of text box t0
  mySerial.print("t0.txt=\"");
  mySerial.print("Monkey");
  mySerial.print("\"");
  mySerial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display.
  mySerial.write(0xff);
  mySerial.write(0xff);
  Serial.print("txt END");
}
void loop() { // run over and over
  Serial.print("TEST"); // Just to show some activity
  delay(1000);
}
3

Hello Dyspho,
I've done this for you:

#include <SoftwareSerial.h> //Include the library
SoftwareSerial mySerial(10, 11); // RX, TX

void setup() {

  Serial.begin(57600); //open the serial port
  while (!Serial) { // wait for serial port to connect. Needed for native USB port only
    ;
  }
  Serial.println("Serial On"); //Print this messages when the serial port is connected
  mySerial.begin(9600); // set the data rate for the SoftwareSerial port
}

  void loop() { // run over and over
    Lion();
    delay(5000);
    Monkey();
    delay(5000);
  }

  void Lion() {
    //Change the image of image box p0
    mySerial.print("p0.pic=0");
    mySerial.write(0xff);  //Send this three lines after each command sent to the nextion display.
    mySerial.write(0xff);
    mySerial.write(0xff);
    Serial.print("Lion img END");

    //Change the txt value of text box t0

    mySerial.print("t0.txt=\"");
    mySerial.print("Lion");
    mySerial.print("\"");
    mySerial.write(0xff);
    mySerial.write(0xff);
    mySerial.write(0xff);
    Serial.println("Lion txt END");
  }

  void Monkey() {
    //Change the image of image box p0
    mySerial.print("p0.pic=1");
    mySerial.write(0xff);
    mySerial.write(0xff);
    mySerial.write(0xff);
    Serial.print("Monkey img END");

    //Change the txt value of text box t0

    mySerial.print("t0.txt=\"");
    mySerial.print("Monkey");
    mySerial.print("\"");
    mySerial.write(0xff);
    mySerial.write(0xff);
    mySerial.write(0xff);
    Serial.println("Monkey txt END");
  }

Just be aware that I have not tested that exact code because I am using a different Arduino and different serial ports. It does work, but after I tested it I changed all the serial port references to the ones you are using, so it's possible I miss typed one somewhere.

Something to keep in mind, although nothing you have said suggests to me that this is causing you a problem, the Nextion displays take a certain amount of time to start up. I don't know how long this is (I've never tried to measure it properly), but I suspect it's a few hundred milliseconds. If you send anything to the Nextion immediately after power is applied you risk losing that data. If you need to send data during setup() then keep in mind that it might be lost if it happens very soon after power is applied.

1 Like
4

Hi Perry !

Thanks a lot for your code !

It's perfect ! it works !

When in the case of the p0 box we don't need the start and end "\ ?
Those details were in the Nextion documentation ?

Thanks again for your help I really appreciate !

5

I have a last question regarding this topic, but I feel I know the answer already.

Is there a way to read an image store on a SD card on the Arduino side ?
So far, the data displayed on the Nextion are from the internal memory, which in my case might be a bit limited regarding how big I want this project to be...

I was wondering if we can send external datas to the Nextion display ?

6

Dyspho:
Hi Perry !

Thanks a lot for your code !

It's perfect ! it works !

When in the case of the p0 box we don't need the start and end "\ ?
Those details were in the Nextion documentation ?

Thanks again for your help I really appreciate !

Hello Dyspho,
I'm pleased that works for you :slight_smile:

It seems clear to me that there are 2 things you need to play around with and learn; the exact strings that the Nextion expects to receive and how to make Serial.print() produce the correct strings.

Open the Nextion editor, compile your project then click on debug at the top. You will see another window and below 2 text boxes. Into the left hand one type a string that you want to send to the display. If it's correct you will get the response you want, if you don't get the right response then it's the wrong string. When you find the right string then that's what you have to get Serial.print() to produce that string.

When in the case of the p0 box we don't need the start and end "\ ?

That tells me you don't understand how Serial.print() works. You are not sending "\ to the Nextion (which is why it is not in the Nextion documentation), you are telling Serial.print() what you want to send. Firstly it's not ", it is ". If you put a " on its own into Serial.print() it doesn't send it. If you want to send a " then you need a \ in front of it. " sends a ", so, if the Nextion is expecting t0.txt="This is page 1" it's no good putting

Serial.print("t0.txt="this is page 1"")

Because the inner pair of " won't be sent. This is because Serial.print() treats a pair of " as telling it that what is between the 2 " should be sent as text, it doesn't send them. If you want a " (and a few other characters) to actually be sent then they have to be preceded by .

Once you have worked out how to use debug in the Nextion editor and got the correct strings, then send what you think is a correct string to the serial monitor. When you get that right then try the same thing but sending to the Nexion.

I suggest you read more about how Serial.print() works. You might also find it useful to find on the internet a C or C++ tutorial about printf().

7

Is there a way to read an image store on a SD card on the Arduino side ?

When I first used Nextion displays I read in a few places that this was possible, the trouble is I have never found anything that explains how to do it. From what I know of Nextion displays I can't see any way it would be possible either. If you find a way to do it please let me know!