Start a new topic

Change Button Pciture from Arduino Code

Hi,

I now got my screen working & outputting 6 buttons. What I am after is a way to change the image of the button from my Arduino code, something like 'b0.picc=2' when output is high & 'b0.picc=1' when output is low.

I have looked at the example for the pic but it is for a page picture not a button.

page picture ref is 'pic' where as a button is 'picc' & 'picc2'. I have generated to pictures & used 1 for 'picc' & the other for 'picc2' (used cropped image).

I have also attached the code for the Arduino.

Thanks

Matt



ino
(4.74 KB)

That can be done from the editor:


@Matt

You can use the solution proposed by Wade Hassler if you want to change the picture while the button is pressed, and come back to the first picture when the button is released.

But based on your Arduino code, I think you want to change the picture after first touch release, then come back to first picture after second touch release.

What is correct ?

Yep, I want to change the picture after the 1st touch release then come back to the 1st picture after 2nd touch release.

I want to do this from the Arduino code so I can change the picture remotely when the output changes state (on/off).

As far as I can see you can pass text back to the Nextion from the Arduino so you should be able to change the picture as well. 

I think it should work exactly as you proposed. 

- In Nextion Editor, you choose sta = 'crop image' and picc = 2 for each button.

- In your Arduino code, you send the command 'b0.picc=1' or 'b0.picc=2' after 'B01State = false;' or 'B01State = true;' respectively.

- Maybe you also need to send these commands once inside 'void setup(void)' based on initial values of the outputs.


The image that you choose for 'picc2' is the image that is shown while the button is pressed.

If you don't want the image to change while you press the button, maybe it's better to choose a Text component instead of a Button component. A Text component can be used as a button, but without picc2.


You can send the commands directly (+ 3 x 0xFF at the end) or maybe use the 'sendCommand' function from the NexTouch library :

/**
 * Send command to Nextion.
 *
 * @param cmd - the string of command.
 */
void NexTouch::sendCommand(const char* cmd)
{
    while (nexSerial.available())
    {
        nexSerial.read();
    }
    
    nexSerial.print(cmd);
    nexSerial.write(0xFF);
    nexSerial.write(0xFF);
    nexSerial.write(0xFF);
}

 

Doesn't work :(, tried sending b0.picc=1 & get an error 

b0.picc=1ÿÿÿrecvRetCommandFinished err

modified the NexPicture code & added to the NexButton code, same error.

Seems to be a problem with the Nextion, I tried the CompPicture example & it does the same thing.

Not sure where to go from here.


/** Change Picture on Button */

bool NexButton::getPic(uint32_t *number)

{

    String cmd;

 cmd += String("get ");

    cmd += getObjName();

    cmd += ".picc";

    sendCommand(cmd.c_str());

    return recvRetNumber(number);

}

bool NexButton::setPic(uint32_t number)

{

    char buf[10] = {0};

    String cmd;

   

    utoa(number, buf, 10);

    cmd += getObjName();

    cmd += ".picc=";

    cmd += buf;

    sendCommand(cmd.c_str());

    return recvRetCommandFinished();

}

/** End Change Picture on Button */

Arduino Code attached.

tft
(508 KB)
h
(1.27 KB)
cpp
(2.41 KB)
ino
(5.13 KB)

I have not gone through your code yet, so I don't know why you get errors bak, but there's another problem, we forgot "ref b0ÿÿÿ" after "b0.picc=1ÿÿÿ" !!


Some of the attributes need "ref xx" to refresh the component on the display. ITEAD said earlier that they would give us more explanations in v0.11, we are still waiting. See post from ITEAD at the bottom of this thread http://support.iteadstudio.com/support/discussions/topics/1000058422 


I tried with the 24.HMI example on the display and sent following commands when page 1 is open :

b1.picc=15ÿÿÿ

ref b1ÿÿÿ

and it works, I don't get errors bak.

See picture :


Of course you can send both commands in one piece : "b1.picc=15ÿÿÿref b1ÿÿÿ".


Added the ref & it still doesn't work.

bool NexButton::setPic(uint32_t number)

{

    char buf[10] = {0};

    String cmd;

    String cmd1;

    utoa(number, buf, 10);

    cmd += getObjName();

    cmd += ".picc=";

    cmd += buf;

 sendCommand(cmd.c_str());

 cmd1 += "ref ";

 cmd1 += getObjName();

    sendCommand(cmd1.c_str());

    return recvRetCommandFinished();

}


Error still there (output from serial)


ÿÿÿpage 0ÿÿÿsetup done

nexLoop

[746:0,1,b0,0,136]

Light 01

b0.picc=1ÿÿÿref b0ÿÿÿrecvRetCommandFinished err

[746:0,1,b0,0,136]

Light 01

b0.picc=2ÿÿÿref b0ÿÿÿrecvRetCommandFinished err

[746:0,1,b0,0,136]

Light 01

b0.picc=1ÿÿÿref b0ÿÿÿrecvRetCommandFinished err

[746:0,1,b0,0,136]

Light 01

b0.picc=2ÿÿÿref b0ÿÿÿrecvRetCommandFinished err

cpp
(2.49 KB)
h
(1.27 KB)

I uploaded your BUTTONS6.tft file to my Nextion and tried to send commands directly from the PC. The picture of the button changes correctly. See picture :




Can you try to send commands directly to your Nextion and see if it works ? 

If it works, then there's probably something wrong in the Arduino code or the library. 

It it doesn't work, then there may be something wrong with your display. 

It seems like there is a problem in the library, see posts from Dirk and Uwe Wilts at the bottom of this thread http://support.iteadstudio.com/support/discussions/topics/1000062402

Thanks Raphaël, it was driving me crazy :). I am waiting on my usb lead to be delivered before I can test it directly. I might bump this to a ticket & see if I get a response directly. 

Not sure If I understand what you are trying to do but Have you tried in Nextion in the touch release event on button 1: 

buttion1.pic=off.pic
ref buttion1
buttion2.pic=on.pic
ref buttion2

Then on your 2nd button add:

buttion1.pic=on.pic 
ref buttion1
buttion2.pic=off.pic
ref buttion2 

Then so on.. This should alternate your pics from one off the other on..

 


Login or Signup to post a comment