Styled Button (custom colours/intensity)

[tecMaker]

Hi Blynkers, I had a quick questions about the new Styled Buttons. Is it possible to change the brightness from a styled button, like setValue by the Widget LED?

[Gunner]

A Widgets colour ‘intensity’ is usually deterned by, well, its colour value as translated with this little routine I use to get the proper #HEX code for Blynk.setProperty(vPin, "color", "#D3435C")…

However, the Styled button apparently doesn’t support the color property… so not sure if / how well this ‘alternate’ option works…

New Android Release 2.22.0

You need to use onColor/onBackColor/offColor/offBackColor properties for it to work, as Styled Button has no ‘color’ property.

[Gunner]

@Gunner

so not sure if / how well this ‘alternate’ option works…

In hindsight… possibly (but untested as of yet - EDIT tested below) like this…

Blynk.setProperty(vPin, "onColor", "#D3435C"); // or "onBackColor" "offColor" "offBackColor"

[PeteKnight]

In the iOS app, the pop-up help screen for styled buttons says the following:

You can change button labels from hardware with :
Blynk.setProperty(V1, “onLabel”, “ON”); Blynk.setProperty(V1, “offLabel”, “OFF”);

or change color of the button :
Blynk.setProperty(V1, “onColor”, “#D3435C”); Blynk.setProperty(V1, “offColor”, “#D3435C”);

or change background color of the button :
Blynk.setProperty(V1, “onBackColor”, “#D3435C”); Blynk.setProperty(V1, “offBackColor”, “#D3435C”);

I’ve not tried this, as I don’t really run Blynk code on my hardware and the Node-Red websockets plugin for Blynk doesn’t support these new Styled Button functions yet.

I’ve tried an API call to:
http://blynk-cloud.com/[TOKEN]/update/V10?onBackColor=%235F7CD8

but that just returns “Wrong request format” so maybe the styled buttons aren’t fully implemented in the API yet.

Pete

[Gunner]

@PeteKnight

but that just returns “Wrong request format” so maybe the styled buttons aren’t fully implemented in the API yet.

I am unable to find reference to these “new” parameters anywhere in the Blynk libraries… and they seem like they should appear in this file if they were active.

BlynkWidgetBase.h

/**
 * @file       BlynkWidgetBase.h
 * @author     Volodymyr Shymanskyy
 * @license    This project is released under the MIT License (MIT)
 * @copyright  Copyright (c) 2016 Volodymyr Shymanskyy
 * @date       Nov 2016
 * @brief
 */

#ifndef BlynkWidgetBase_h
#define BlynkWidgetBase_h

#include <Blynk/BlynkApi.h>

class BlynkWidgetBase
{
public:
    BlynkWidgetBase(uint8_t vPin) : mPin(vPin) {}
    void setVPin(uint8_t vPin) { mPin = vPin; }

    void onWrite(BlynkReq BLYNK_UNUSED &request, const BlynkParam BLYNK_UNUSED &param) {
        BLYNK_LOG1(BLYNK_F("BlynkWidgetBase::onWrite should not be called"));
    }

    template<typename... Args>
    void setLabel(Args... args) {
        Blynk.setProperty(mPin, "label", args...);
    }

    template<typename... Args>
    void setColor(Args... args) {
        Blynk.setProperty(mPin, "color", args...);
    }

    template<typename... Args>
    void setMin(Args... args) {
        Blynk.setProperty(mPin, "min", args...);
    }

    template<typename... Args>
    void setMax(Args... args) {
        Blynk.setProperty(mPin, "max", args...);
    }

protected:
    uint8_t mPin;
};

class BlynkAttachWidgetHelper {
public:
    template<typename T>
    explicit BlynkAttachWidgetHelper(T& widget, uint8_t vPin) {
        widget.setVPin(vPin);
    }
};

// Could use __attribute__ ((constructor)), but hope for better portability
#define BLYNK_ATTACH_WIDGET(widget, pin) \
    BlynkAttachWidgetHelper BLYNK_CONCAT2(blnk_widget_helper_, __COUNTER__)((widget), (pin)); \
    BLYNK_WRITE(pin) { (widget).onWrite(request, param); }

#endif

Might need to await the next Library update.

[Gunner]

OK, actual testing is always better then guesswork … Not sure how, as I can’t find the references in the library, but this actually works in Code…

Blynk.setProperty(V65, "offBackColor", "#FF00F9");
Blynk.setProperty(V65, "onBackColor", "#5FFF60");

Just not in the API.

[Gunner]

@tecMaker

Is it possible to change the brightness from a styled button

To clarify… using the setProperty method, you can pick the HEX equivalent value of 0-255 for each of the Red, Green & Blue channels with a HEX range of 00-FF for the “brightness/intensity” of each colour: #RRGGBB

Thus a 1/4 dim Red (DEC 64 = HEX 40) would be #400000 while a full Red (DEC 255 = HEX FF) would be #FF0000

[Dmitriy]

@Gunner

Just not in the API.

Correct. Created ticket - https://github.com/blynkkk/blynk-server/issues/1083

[tecMaker]

Thanks guys for your answers, but I did not heard something, I until now, did not tried or knew.
Yeah… changing colors by set.Property would be possible, but there I would need a lot values or rather a lot code lines where I have to change the button color, so that it looks like a flowing motion from bright to dark
But I am sure, that the Blynk team (sorry but I must say it: The best team ever!) establish for this cases something in future.

[Blynk_Coeur]

@tecMaker

changing colors

like that ?

[tecMaker]

Nice, is there behind also a code??

[Gunner]

@tecMaker

is there behind also a code??

Thought you didn’t want a coded solution? … although I highly doubt there will be a flashing button option any time soon, so code is your only option.

Now that you know how to adjust the colours, show us how would you try to go about it with timers, for(), counters and setProperty?

[tecMaker]

challenge accepted

[Gunner]

This is a bit overly convoluted and not quite the required effect (just changing colours, not fading)… but there is a few code ideas here for things like #HEX code string generation, etc.

C++ Blynk (Legacy) - Code Examples for Basic Tasks

#6 Matrix of LARGE Randomly Flashing & Coloured Virtual RGB “Super LEDs” (AKA Buttons) I don’t know why I didn’t do this one sooner… less energy and at about 80% less “LEDs” to flash, it should be theoretically faster… well… it costs less energy at least (3200 units of energy) Challenge Question for the Developers… why is it seem faster to change the colour properties on 71 LEDs compared to 16 Buttons? http://docs.blynk.cc/#widgets-controllers-button http://docs.blynk.cc/#…

[Blynk_Coeur]

@Gunner

generation

it is a color fading.
slider are used only to change the green and blue , the red is fading from 0 to 255 automatically…
I will provide the code after my TV series

[Gunner]

@Blynk_Coeur

it is a color fading.

I know yours was … I have done similar with a virtual LED, using #HEX will be a bit more coding… I just don’t have any readily available.

[Blynk_Coeur]

@tecMaker

is there behind also a code??

this is my function
it is only for RED fading but it is quite easy to change other colors

int i = 0;
int R,G,B;
String color;

void setup()
{
.
.
.
.
  timer.setInterval(500, fade);
.
.
.
}

/******** FADE *************/
void fade() {
  R = R + 20; // speed for fade
  if (R > 255) {
    R = 1;
  }
// String(val, HEX) to convert DEC to HEX
  color = "#" + String(R, HEX) +String(G, HEX)+String(B, HEX); // string for color
  Blynk.setProperty(V11, "offBackColor", color);
}

/*********  slider for GREEN *************/
BLYNK_WRITE(V6) {
  R=0; //reset RED when slider value changing
  G = param.asInt();
}

/******** slider for BLUE ***********/
BLYNK_WRITE(V9) {
  R=0;  //reset RED when slider value changing
  B = param.asInt();
}

[Blynk_Coeur]

@tecMaker

Sketch in progress

indep color fading buttons and reverse fading [Video_00244] //declaration int IR = 0; int SR = 0; int SG = 0; int IG = 0; int SPD = 300; //speed int FadeTimerR; int FadeTimerG; String hexa; void setup() { //your setup here . . . . FadeTimerR = timer.setInterval(SPD, fadeR); timer.disable(FadeTimerR); // disable it on boot FadeTimerG = timer.setInterval(SPD, fadeG); timer.disable(FadeTimerG); // disable it on boot } //styled buton BLYNK_WRITE(V11) { if (param.asInt() == 1) { tim…

[wolph42]

he cool! wish I had noticed this before, I just build my own fader. I use a slide to fade out an OLED screen and thought it would be nice to have the slide fade with it as well as you’d move it. Works pretty well.

this is what I came up with:

    BLYNK_WRITE(OLED_PIN){
      u8g2.setContrast(param.asInt());
      oldOledOn = oledOn;
      oledOn = (bool) param.asInt(); //if value reaches 0 turn screen off.
      cVal = 255 + 25 - param.asInt(); //makes the slider fade out when lowering the contrast to a minimum setting of 1 to prevent it from going white entirely
      color = String("#")+String(cVal, HEX)+String(cVal, HEX)+String(cVal, HEX);
      Blynk.setProperty(OLED_PIN, "color", color); //change colors of the widgets used in 'nerd' section
      if(oledOn != oldOledOn) updateOLED();
}

OLED_PIN is connected to the slider.

[Blynk_Coeur]

@wolph42

Works pretty well

I’m glad this helped.