BLYNK
HOME       📲 GETTING STARTED       📗 DOCS       ❓HELP CENTER       👉 SKETCH BUILDER

Button Background Color

Was wondering if a function could be added to change the background color of a button? I’m using the button as a “mode” selector and would like the entire button to change color - not just the text inside.

Richard

Do you mean like this?..

Pete.

Yep! just like that.

Well, I do this in Node-Red, but as far as I’m aware you can do it in code as well. It’s the color property I think.

Pete.

Yup. Use blynk.setProperty(pin, property, value) to set the button colour. It will not set the background but the fill colour of the circle for certain. Explained well in the docs.

1 Like

setProperty only works to change the fill color of the button when the button is turned on. When you use properties in an “OFF” situation only the outline of the button and text change color. The fill doesn’t change. I’m trying to change the fill even if the button is off.

Deep customizations are only available when you subscribe for Blynk plans: http://blynk.io/plans

Not to take away from Blynks business :innocent: sorry @Pavel, I was working on this “solution” before seeing your response.

@rawest With a little code you can simulate your request… The button (in switch mode) is essentially ON all the time, but pressing it toggles a variable (buttonState) between 0 & 1 so you can still control things. You can also change the small labeling… However, there is no current way, that I am aware of, to change the buttons center text from within code.

In pre-setup…

int buttonToggle = 1;  // Set buttonToggle to 1 to start buttonState in OFF mode
int buttonState = 0;  // Set buttonState variable OFF

In setup after connection…

Blynk.virtualWrite(V0, 1); // set coloured button to default ON state
BLYNK_WRITE(V0) {
  if (param.asInt() == 0 && buttonToggle == 1) {
    buttonToggle = 0;
    buttonState = 1;
    Blynk.setProperty(V0, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V0, "label", "ON"); // ON
  } else if (param.asInt() == 0 && buttonToggle == 0) {
    buttonToggle = 1;
    buttonState = 0;
    Blynk.setProperty(V0, "color", "#D3435C"); // RED
    Blynk.setProperty(V0, "label", "OFF"); // OFF
  }
  Blynk.virtualWrite(V1, buttonState);  // Display buttons usable state
  Blynk.virtualWrite(V0, 1);  // reset button widget to ON
}

Not sure how it works this way, but I just discovered that if you set the widget to momentary mode, then if you quickly press it, it will toggle the variable ON and OFF as expected… but if you hold it for a second, it will stay either in the ON or OFF setting… as if it was in switch mode.

Unintentional benniffit :stuck_out_tongue:

I don’t think there’s a way to do that.
I’d go for changing the text so that you get additional information that way, maybe usieng an emoji with a colourted background if that would help. See this threadd for more info:

Or, you could go for adding an LED that you can change the colour of at any time, or labelled value widget next to the switch where you can change the text and the text colour.

Pete.

5 posts were split to a new topic: Blynk.setProperty() command not changing button color