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

Blynk.setProperty() command not changing button color


#1

Hi guys
Is it possible to change the infill color from buttons with an incomming variable.
Thx in the meantime :face_with_raised_eyebrow::grin:
What´s a working programm if the visual appearance isn´t right :wink:


C++ Blynk - Code Examples for Basic Tasks (Work in Progress)
Button Background Color
#2

You can change widget colour with the Blynk.setProperty() command, as I did in example above.

http://docs.blynk.cc/#blynk-main-operations-change-widget-properties


#3

Why you think I post it under the post above?? :see_no_evil:
I read it of course :grin::grin:

#define BLYNK_PRINT Serial
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

char auth[] = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
char ssid[] = "Fritzboxxxxxx";
char pass[] = "xxxxxxxxxxxxxxxxxxxxxxxxxx";

byte SwitchMode1 = 0;
byte MainButton = 0;
byte varMainButton = 0;
byte varSwitchMode1 = 0;

BlynkTimer timer;
WidgetLCD lcd (V101);                                   //LCD Widget attached to Pin V30

void setup()
{
  Serial.begin(9600);
  Blynk.begin(auth, ssid, pass);
  timer.setInterval(100L, Func_Modi);
}

void loop()
{
  Blynk.run();
  timer.run();
}

BLYNK_WRITE(V20)                                                        //MainButton
{
  MainButton = param.asInt();
  if (MainButton == 1) {
    varMainButton = 1;
  }
  if (MainButton == 0) {
    varMainButton = 0;
  }
}
BLYNK_WRITE(V21)                                                         //Modus 1, LED ON/OFF
{
  SwitchMode1 = param.asInt();
  if (SwitchMode1 == 1)  {
    varSwitchMode1 = 1;
  }
  if (SwitchMode1 == 0)  {
    varSwitchMode1 = 0;
}
}

void Func_Modi() {

  if ((varSwitchMode1 == 1) && (varMainButton == 1)) {
    lcd.print(0, 0, " MODE 1      ON ");
    lcd.print(0, 1, " LED ON/OFF     ");
    Blynk.setProperty(V23, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V23, "label", "ON"); // ON
  }
  if ((varSwitchMode1 == 1) && (varMainButton == 0)) {
    lcd.print(0, 0, " MODE 1      OFF");
    lcd.print(0, 1, " LED ON/OFF     ");
    Blynk.setProperty(V23, "color", "#D3435C"); // RED
    Blynk.setProperty(V23, "label", "OFF"); // OFF
  }
}

My button number 3 (V23) doesn´t change his color :man_facepalming::roll_eyes:


#4

Good question… if you are having an issue with a project then you should have created a new topic and explained the details, so that others can know what you are actually talking about :stuck_out_tongue:

Have you tested the command on other widgets? Perhaps your sketch process is not getting to the relevant commands… does the LCD command work?

I don’t see V23 used anywhere else in your code… have you got the correct vPin?


#5

Yes, what you see is only a short cutaway from my sketch … lcd works fine, also the values in serial monitor (you don´t see) I get right :thinking::thinking:


#6

OK, I moved this all into an appropriate topic as it has nothing to do with the prior Idea Topic.

Well. we may need to see it all in order to track the logic flow… otherwise we are just guessing.


#7

Here we go, hope you get along with my “programm-chaos” :joy::joy::joy:
I have more modes with I works only if the MainButton is pressed. When a mode is running and an other mode get pressed, the old one switch of and the new pressed one goes on. Now I want, that the active mode, can not be seen only if you read it on LCD (works), it should be visible on the color from the relative button.

#define BLYNK_PRINT Serial
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

char auth[] = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
char ssid[] = "xxxxxxxxxxxxxxxxxxxxxxxxxxx";
char pass[] = "xxxxxxxxxxxxxxxxxxxxxxxxxx";

int LedPinD1 = D1;
int DimmValue = 0;
int BlinkValue = 0;
int OutputValue = 0;
byte SwitchMode1 = 0;
byte SwitchMode2 = 0;
byte SwitchMode3 = 0;
byte SwitchMode4 = 0;
byte MainButton = 0;
byte ClearLCD = 0;
byte varMainButton = 0;
byte varSwitchMode1 = 0;
byte varSwitchMode2 = 0;
byte varSwitchMode3 = 0;
byte varSwitchMode4 = 0;

BlynkTimer timer;
WidgetLCD lcd (V101);                                   //LCD Widget attached to Pin V30
WidgetLED led (V100);                                   //LED Widget attached to Pin V100

void setup()
{
  Serial.begin(9600);
  Blynk.begin(auth, ssid, pass);
  pinMode (LedPinD1, OUTPUT);
  timer.setInterval(1000L, SerialMonitoring);
  timer.setInterval(100L, Func_Modi);
  lcd.clear();
  varMainButton = 0;
  varSwitchMode1 = 1;
  varSwitchMode2 = 0;
  varSwitchMode3 = 0;
  varSwitchMode4 = 0;
}

void loop()
{
  Blynk.run();
  timer.run();
}

BLYNK_WRITE(V20)                                                        //MainButton
{
  MainButton = param.asInt();
  if (MainButton == 1) {
    varMainButton = 1;
  }
  if (MainButton == 0) {
    varMainButton = 0;
  }
}
BLYNK_WRITE(V21)                                                         //Modus 1, LED ON/OFF
{
  SwitchMode1 = param.asInt();
  if (SwitchMode1 == 1)  {
    varSwitchMode1 = 1;
    varSwitchMode2 = 0;
    varSwitchMode3 = 0;
    varSwitchMode4 = 0;
  }
}
BLYNK_WRITE(V22)                                                         //Modus 2, LED SZENE
{
  SwitchMode2 = param.asInt();
  if (SwitchMode2 == 1) {
    varSwitchMode1 = 0;
    varSwitchMode2 = 1;
    varSwitchMode3 = 0;
    varSwitchMode4 = 0;
  }
}
BLYNK_WRITE(V23)                                                         //Modus 3, LED DIMMER
{
  SwitchMode3 = param.asInt();
  if (SwitchMode3 == 1) {
    varSwitchMode1 = 0;
    varSwitchMode2 = 0;
    varSwitchMode3 = 1;
    varSwitchMode4 = 0;
  }
}
BLYNK_WRITE(V24)                                                         //Modus 4, LED BLINKER
{
  SwitchMode4 = param.asInt();
  if (SwitchMode4 == 1) {
    varSwitchMode4++;
    varSwitchMode1 = 0;
    varSwitchMode2 = 0;
    varSwitchMode3 = 0;
  }
}
BLYNK_WRITE(V50)                                                         //Clear LCD
{
  ClearLCD = param.asInt();
  if (ClearLCD == 1) {
    lcd.clear();
  }
}

BLYNK_WRITE(V25)                                                         //Slider DimmValue
{
  DimmValue = param.asInt();
}
BLYNK_WRITE(V26)                                                         //Slider DimmValue
{
  BlinkValue = param.asInt();
}
void SerialMonitoring() {
  Serial.print ("varSwitchMode1 = ");
  Serial.println (varSwitchMode1);
  Serial.print ("varSwitchMode2 = ");
  Serial.println (varSwitchMode2);
  Serial.print ("varSwitchMode3 = ");
  Serial.println (varSwitchMode3);
  Serial.print ("varSwitchMode4 = ");
  Serial.println (varSwitchMode4);
  Serial.print ("varMainButton  = ");
  Serial.println (varMainButton);
  Serial.print ("DimmValue      = ");
  Serial.println (DimmValue);
}
void Func_Modi() {
  led.setValue(OutputValue);
  Blynk.virtualWrite (V102, OutputValue);
  analogWrite(LedPinD1, OutputValue);

  if ((varSwitchMode1 == 1) && (varMainButton == 1)) {
    lcd.print(0, 0, " MODE 1      ON ");
    lcd.print(0, 1, " LED ON/OFF     ");
    OutputValue = 50;
    Blynk.setProperty(V21, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V21, "label", "ON"); // ON
  }
  if ((varSwitchMode1 == 1) && (varMainButton == 0)) {
    lcd.print(0, 0, " MODE 1      OFF");
    lcd.print(0, 1, " LED ON/OFF     ");
    OutputValue = 0;
    Blynk.setProperty(V21, "color", "#D3435C"); // RED
    Blynk.setProperty(V21, "label", "OFF"); // OFF
  }
  if ((varSwitchMode2 == 1) && (varMainButton == 1)) {
    lcd.print(0, 0, " MODE 2      ON ");
    lcd.print(0, 1, " LED SZENE      ");
    OutputValue = 150;
    Blynk.setProperty(V22, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V22, "label", "ON"); // ON
  }
  if ((varSwitchMode2 == 1) && (varMainButton == 0)) {
    lcd.print(0, 0, " MODE 2      OFF");
    lcd.print(0, 1, " LED SZENE      ");
    OutputValue = 0;
    Blynk.setProperty(V22, "color", "#D3435C"); // RED
    Blynk.setProperty(V22, "label", "OFF"); // OFF
  }
  if ((varSwitchMode3 == 1) && (varMainButton == 1)) {
    lcd.print(0, 0, " MODE 3      ON ");
    lcd.print(0, 1, " LED DIMMER     ");
    OutputValue = DimmValue;
    Blynk.setProperty(V23, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V23, "label", "ON"); // ON
  }
  if ((varSwitchMode3 == 1) && (varMainButton == 0)) {
    lcd.print(0, 0, " MODE 3      OFF");
    lcd.print(0, 1, " LED DIMMER     ");
    OutputValue = 0;
    Blynk.setProperty(V23, "color", "#D3435C"); // RED
    Blynk.setProperty(V23, "label", "OFF"); // OFF
  }
  if ((varSwitchMode4 == 1) && (varMainButton == 1)) {
    lcd.print(0, 0, " MODE 4      ON ");
    lcd.print(0, 1, " LED BLINKER    ");
    OutputValue = 50;
    Blynk.setProperty(V24, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V24, "label", "ON"); // ON
  }
  if ((varSwitchMode4 == 1) && (varMainButton == 0)) {
    lcd.print(0, 0, " MODE 4      OFF");
    lcd.print(0, 1, " LED BLINKER    ");
    OutputValue = 0;
    Blynk.setProperty(V24, "color", "#D3435C"); // RED
    Blynk.setProperty(V24, "label", "OFF"); // OFF
  }
}

#8

To be clear… you are trying to change the infill colour of a button that is ON, correct? Because we cannot change the OFF infill colour, only the outline.

That little example I provided was a workaround that basically had a button ON all the time and only reacted to the attempted state change… I don’t see that happening in your code.

I also showed that example here…


#9

If it´s only possible to change color when it´s ON would be also okay, better than no color…:smiley:


#10

Well as long as your App and libraries are up to date, I don’t see why something like Blynk.setProperty(V24, "color", "#D3435C"); // RED wouldn’t work. I use those commands all the time for various widgets and in many projects.


#11

Do you have one of your working sketches by hand? Both app and librarys are at the newest versions


#12

I have them posted already… follow and read the rest of that topic link I gave you above.


#13

Have just read the topic you post above… and yes it works, so I can suspend an error with my libs. Fundamentally, my sketch doesn´t works different, only that I compare to values and say, if both are true, the button should change his color else it should remain with his “old” color. The main difference between us two sketches lies where the lines to change color :astonished::astonished:

    Blynk.setProperty(V24, "color", "#23C48E"); // GREEN
    Blynk.setProperty(V24, "label", "ON"); // ON

are written. You put them in a Blynk function and I outside in an extra function where I compare the values.
I redraft my original question:
How to change the background color from a button in a function outside the Blynk-function? :kissing:


#14

Well, I can’t dig through your whole sketch… but my example is quite different than what I see in your code…

I don’t really treat the button function as a normal one… The button is set to be ALWAYS ON, and the function just senses that the button was turned OFF then toggles two variables, one which is what would be used in another function to do something, and the other to track the colour to use, then turns the button back on but with a different colour (probably possible to do both with one variable, but need to take into consideration the possible inverted state vs need)

You would need to make multiple copies of that example, one for each button you use, but use the ButtonState variable (renamed for each new button) to control whatever you want to.

Doesn’t matter where the command is (LOOK at all my other colour changing examples)… just as long as it is in a valid function or process.