I wanted to have the screen swap between two background pictures pic0 and pic 1

[Kenleyli]

Hi , I am just starting with Nextion and following a tutorial I have a screen with 2 buttons and a text box

When I press the on button the text window says on and the off button changes the text to off.
They also turn an LED on the Arduino off and on , so far so good

I wanted to have the screen swap between two background pictures pic0 and pic 1 depending on if I had pressed off or on button

by putting this in the arduino code at the place where it acted on the buttons I achieved my aims ,
the screen swapped between pic 0 and pic 1

Serial.print("p0.pic=0");
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);

or

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

The problem is , when it changes the screen it over writes the buttons so you cant see where to press to swap back

How do I make the buttons stay on top and visible or is there a way to make holes in the pics for the buttons to show through . I assume its something to do with crop but I cant understand how to do it

Can any one help please

BTW I am a total Nextion noob so dont be suprised if I ask a lot more questions in the next weeks

Stay Safe

Don

[Fjodor]

Instead of using a pic object as a background image, delete it and change the background image attribute of the page object itself.
This will keep all other objects on top.

[bobcordeiro]

@Kenleyli

``

hello guys, I’m doing the same as you, but without success, I would like to press a button and figure 1 appears, so when I press on figure 1 it disappears, but I can’t even get the basics, take a look at my program below

#include <SoftwareSerial.h>
#include <Nextion.h>

SoftwareSerial nextion(3,1);// Nextion TX to pin 2 and RX to pin 3 of Arduino

Nextion myNextion(nextion, 9600); //create a Nextion object named myNextion using the nextion serial port @ 9600bps

void setup() {
//Serial.begin(9600);
myNextion.init(); // send the initialization commands for Page 0

}

void loop() {
nextion.write(“p2.pic=0”);
nextion.write(0xff);
nextion.write(0xff);
nextion.write(0xff);
delay(3000);
Serial.print(“p0.pic=1”);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
delay(3000);
Serial.print(“p2.pic=0”);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
delay(3000);
Serial.print(“p0.pic=1”);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
}

[Fjodor]

Look at the PIN numbers when you declare SoftwareSerial. (3,1) would mean Nextion Tx on 3 and Nextion Rx on 1. The latter interferes with the hardware UART.

[bobcordeiro]

I’m using esp32, so for this serial port

[Max]

Okay, I don’t know the Nextion Arduino Library and it’s been a few years since I used Arduino the last time. So maybe I shouldn’t try to evaluate your code. On the other side these days knowledge is no more required for having an opinion on anything so here we go…

You’re mixing the software serial nextion with the hardware serial Serial and they probably don’t operate on the same pins. So the first part of the data goes to your nextion serial, and all the rest, after the first delay, goes to your (USB?) serial.
Additionally you use nextion.write to send the string “p2.pic=0” - AFAIK if you want to send a string you have to use the print method, not the write method.

Hope this helps,
Max

[icanfly]

Hey friends.
Long time listener, first time caller…

I too want to have a “background” image change (the full page background needs to update on button press) but I am also having the issue where it will hide the buttons on update of BG. The comment above suggested the following:

“Instead of using a pic object as a background image, delete it and change the background image attribute of the page object itself.
This will keep all other objects on top.”

but I am not finding any way to actually reference the page itself to change the background.
I was using “p0.pic=2” on the press event of a button, which accomplished what I wanted with the side effect of hiding everything else on the screen.

I have 6 buttons (3 top and 3 bottom of screen) that do various things, when pressing each button, I’d like to display a different background (of which the buttons are designed into) to represent the state activity and on release the BG returns to the original image. Could someone share the code relevant to the quoted suggestion of changing the page BG itself in order to keep the buttons on top in place?

I just need to know how to “reference” the bg of the page.
thank you!

[DVEous]

You can set a page background as no fill, a solid colour or image.
Select image for sta, and then the image id to start with.

[icanfly]

Thanks @DVEous - I’ve gotten that far. The particular solution I’m looking for is how to then target that “page0 > backround > Image=#” so that I can programmatically change the background with each of the 6 button presses - again, I have a solution that’s working for updating an image to another image, but when that image is a background, upon button press+image change the background becomes the foreground and covers all the buttons on the screen.

I’m keen to try the suggestion above about targeting the page BG and using that… I just need to know the path that assign that. For instance, what’s the actual code for the onPress event?
(all the things I’ve tried that don’t work):
page 1.bg.pic=12
pg1.background=12
local.background=12
local.bg=12
page 1.local.background=‘12’

nothing seems to work - so what’s the actual path to define/edit the background of the page pogramatically?

[Fjodor]

Simply code “page1.pic=12“ and afterwards “ref page1” to refresh the screen if needed

[icanfly]

Thank you Fjodor!
That’s exactly what I needed and worked a treat.