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

Styled Button (custom colours/intensity)


#1

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?


#2

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…


#3

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

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

#4

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


#5

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.


#6

OK, actual testing is always better then guesswork :stuck_out_tongue:… 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");

image image

Just not in the API.


#7

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


#8

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


#9

Thanks guys for your answers, but I did not heard something, I until now, did not tried or knew. :joy:
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 :thinking:
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.


#10

like that ?
Video_00243


#11

Nice, is there behind also a code?? :pray: :joy:


#12

Thought you didn’t want a coded solution? :stuck_out_tongue_winking_eye: … 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?


#13

challenge accepted :muscle:


#14

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.


#15

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


#16

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


#17

06-021404
this is my function
it is only for RED fading but it is quite easy to change other colors :wink:

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();
}

#18

@tecMaker


#19

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.


#20

I’m glad this helped.
:slight_smile: