Node Red - updating button label property changes colours

[877]

I am using the excellent node by @gab.lau with my node red/Blynk projects.

I have several of Pete Scargills BigTimers running, and thought it would be useful to have the styled buttons display the remaining time, rather than just “Off”.

The following flow works, but when the payload.time is sent to the “change property” node (set to Off label), the colour of the button gets changed to whatever the “On” colours are set to.

If I stop and play the Blynk project, the colours revert back to the green text on black background, until the next payload arrives.

The flow:
Change node (set msg.payload to msg.time)
Set property node (set to Styled Button Off Label) see bottom of post

Top buttons are ‘live’ working button, the bottom button is the one in question “Test button”:

The button changes colour after the payload is sent, and remains that colour from then on. The new colours always match the “On” colours. The payload does update every minute to match the BigTimer:

** I noticed that I am selecting ‘Style Button > Off label’, but when I deploy and go back into the node it’s set to ‘Button > Off label’. Changing this does not cause the node red Deploy button to go red, if I move the node and the deploy it does not take effect still.

May be something I am doing wrong!

PS - hopefully this catches @PeteKnight attention

[PeteKnight]

Maybe try swapping your Blynk Set Property for a Style Btn node?

Pete.

[877]

Oh dear I hadn’t noticed that node I didn’t even look as the settings were there in the set property node, I guess there was a past issue hence the separate node?

I’m glad it’s my error as I can carry on with my tinkering!

I don’t quite understand this:
If msg.topic is write-property this node will set the properties to node.

I’m setting msg.offlabel to msg.time but it’s not updating the widget.

[PeteKnight]

Hmmm, it does appear to be a bug - One for @gab.lau I think.

The problem is that when a styled button is in the OFF state and the offlabel property is updated then it seems to put the styled button into a “half on” state. The button seems to remain off, but the colours change to those defined for the ON state.

This is with both the Style Btn node and the Set Property node.

A workaround is to re-send the desired On/Off colours with the Style Btn widget like this:

msg.topic = "write-property"

msg.offlabel = msg.time

msg.onlabel ="ON"
msg.offlabel = msg.time

msg.onColor = "#ffffff" \\ White
msg.offColor = "#000000" \\  Black
msg.offBackColor ="#23C48E" \\ BLYNK_GREEN
msg.onBackColor = "#D3435C" \\ BLYNK=RED

return msg;

The problem with this is that the styled button briefly flashes to the ON colours when it’s updated.

Testing done with:
IOS app 2.26.0 (7)
Node-Red 0.20.5
node-red-contrib-blynk-ws 0.9.2

Pete.

[877]

Darn, I spent some time this morning and thought I had this sorted, and then just noticed a flicker same as Pete

Strangely it does not happen every time the minute changes. In fact it’s not happening anymore as I type this. I will carry on to test if the output is toggled…

This is the function code:

msg.topic = "write-property";

msg.onlabel ="On";
msg.offlabel = msg.time;

msg.onColor = "#ffffff";        // White
msg.onBackColor = "#D3435C";    // BLYNK=RED

msg.offColor = "#23C48E";       // BLYNK_GREEN
msg.offBackColor ="#23C48E";    // BLYNK_GREEN

return msg;

This is with the Button Style node, set to “By code”.

If I set the topic to “bycode” as mentioned by @gab.lau on his github here then the code does not update the widget. As the node is set to “By code” I thought that would be logical.

I added a write node so that when the timer gets to zero, the switch is dressed to on.

[877]

I spend a really boring 15mins checking the flickering and here are the results:

10hrs 09mins to 09hrs 53mins

**Minute changes:**
10 to 09 ok
09 to 08 ok
08 to 07 flickered and payload read by "read" node
07 too 06 ok
06 to 05 ok
05 to 04 ok
04 to 03 flickered but no payload sent by "read" node
03 to 02 flickered but no payload sent by "read" node
02 to 01 ok
01 to 00 ok
00 to 59 ok (hour change)
59 to 58 ok
58 to 57 flickered but no payload sent by "read" node
57 to 56 ok
56 to 55 flickered but no payload sent by "read" node 
55 to 54 flickered but no payload sent by "read" node 
54 to 53 ok

[gab.lau]

OK the “styled button” node works like this:
If within the message there is a topic with “write-property” then set only the properties (the “payload” is ignored).
If within the message there is a topic other than “write-property” then set the properties and write the payload.

some example: wrong example:

//prepare message for styled button node (this message update "state" of styled button and its properties)
var newMsg = { 
	payload: msg.payload,

	onlabel: "On",
	offlabel: msg.time,

	onColor: "#ffffff",        // White
	//onBackColor: "#000000",  //black

	offColor: "#23C48E",       // BLYNK_GREEN
	offBackColor: "#23C48E",   // BLYNK_GREEN 
};

//some logic base on input message to select right color
newMsg.onBackColor = "#23C48E";   // BLYNK_GREEN
if(msg.payload == 0) {
	newMsg.onBackColor = "#D3435C";  // BLYNK=RED
}

return newMsg;

//prepare message for styled button node (this message set only properties of styled button like set-property node)
var newMsg = { 
	payload: msg.payload,
	topic: "write-property",

	onlabel: "On",
	offlabel: msg.time,

	onColor: "#ffffff",        // White
	//onBackColor: "#000000",  //black

	offColor: "#23C48E",       // BLYNK_GREEN
	offBackColor: "#23C48E",   // BLYNK_GREEN 
};

//some logic base on input message to select right color
newMsg.onBackColor = "#23C48E";   // BLYNK_GREEN
if(msg.payload == 0) {
	newMsg.onBackColor = "#D3435C";  // BLYNK=RED
}

return newMsg;

[gab.lau]

Maybe in the next release of the library I could change the topic text from write-property to only-set-property.
so maybe it’s clearer? what do you think?

[877]

Hi there and thanks for the help! Yes that would be clearer

I did some testing with the original code, and it works as you said, but with topic “anythingelse” the offlabel value (e.g. time) is not updated on the widget

(Also I don’t see why the styled button has an output, as nothing comes out in debug for me).

However your examples don’t work for me, I’m sure it’s a simple formatting issue, as I’m learning json it escapes me for now

Thanks

[gab.lau]

I am really wrong!
Ignore the previous message, please.

if you pass the “write-property” topic it set only the properties, otherwise for any other topic it only writes the value.

to remedy the problem with a function node only:

//prepare message for set property of styled button node (this message update only properties)
var msgSetProp = { 
	payload: msg.payload, //IMPORTANT: this is ignored, but required :D
	topic: "write-property",

	onlabel: "On",
	offlabel: msg.time,

	onColor: "#ffffff",        // White
	onBackColor: "#D3435C";  // BLYNK=RED

	offColor: "#23C48E",       // BLYNK_GREEN
	offBackColor: "#23C48E",   // BLYNK_GREEN 
};

//prepare message for write to styled button node (this message update "state" of styled button)
var msgWriteValue = { 
	payload: msg.payload, //IMPORTANT: this is value write to node 
	topic: 'other' //IMPORTANT: this is ignored, but required :D
};


//send out two message to next node
return [ [ msgSetProp, msgWriteValue ] ];

Let me know
Gabriele

[877]

Ah thank you! I will test when I’m back home and report back

[877]

@gab.lau I have tested your code and it works well now
Just had to change the semicolon to a comma at onBackColor: “#D3435C”,

However the flickering still happens every so often, I have managed to capture it and upload a video here:

A freeze frame shows the cause of the flicker:

It ‘could’ be the way Big Timer sends it’s output maybe? I’ll see what I can find…

[gab.lau]

OK I did some testing (5 minutes) and I had no flicker.
maybe it could depend on the configuration inside the app?
However I do not find errors in sending commands to the blynk server
I attach some photos

Styled button configuration:

Node-red test flow:

[{"id":"9c0def53.04a568","type":"bigtimer","z":"41cf10df.6ea04","outtopic":"","outpayload1":"","outpayload2":"","name":"Big Timer","lat":"","lon":"","starttime":"1200","endtime":"1230","startoff":0,"endoff":0,"offs":0,"outtext1":"","outtext2":"","timeout":1440,"sun":true,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"jan":true,"feb":true,"mar":true,"apr":true,"may":true,"jun":true,"jul":true,"aug":true,"sep":true,"oct":true,"nov":true,"dec":true,"day1":0,"month1":0,"day2":0,"month2":0,"day3":0,"month3":0,"day4":0,"month4":0,"day5":0,"month5":0,"d1":0,"w1":0,"d2":0,"w2":0,"d3":0,"w3":0,"d4":0,"w4":0,"d5":0,"w5":0,"suspend":false,"random":false,"repeat":true,"atstart":true,"odd":false,"even":false,"x":318,"y":98.5,"wires":[[],["6d8474d7.284714","2523dd29.834112"],[]]},{"id":"eae97779.ece798","type":"inject","z":"41cf10df.6ea04","name":"","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":93,"y":70,"wires":[["9c0def53.04a568"]]},{"id":"8d563456.43d698","type":"inject","z":"41cf10df.6ea04","name":"","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":95,"y":111,"wires":[["9c0def53.04a568"]]},{"id":"c8f3687b.793d2","type":"inject","z":"41cf10df.6ea04","name":"","topic":"","payload":"auto","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":95,"y":155,"wires":[["9c0def53.04a568"]]},{"id":"ad97e93e.a0a308","type":"inject","z":"41cf10df.6ea04","name":"","topic":"","payload":"manual","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":95,"y":198,"wires":[["9c0def53.04a568"]]},{"id":"eb55e4da.fa69e8","type":"blynk-ws-style-btn","z":"41cf10df.6ea04","name":"","pin":"1","prop":"1","onlabel":"ON","offlabel":"OFF","oncolor":"#000000","onbackcolor":"#ffffff","offcolor":"#ffffff","offbackcolor":"#000000","client":"8ccac811.88c0f8","x":690,"y":94,"wires":[[]]},{"id":"6d8474d7.284714","type":"function","z":"41cf10df.6ea04","name":"func","func":"//prepare message for set property of styled button node (this message update only properties)\nvar msgSetProp = { \n\tpayload: msg.payload, //IMPORTANT: this is ignored, but required :D\n\ttopic: \"write-property\",\n\n\tonlabel: \"On\",\n\tofflabel: msg.time,\n\n\tonColor: \"#ffffff\",        // White\n\tonBackColor: \"#D3435C\",  // BLYNK=RED\n\n\toffColor: \"#23C48E\",       // BLYNK_GREEN\n\toffBackColor: \"##212226\",   // BLYNK_GREEN \n};\n\n//prepare message for write to styled button node (this message update \"state\" of styled button)\nvar msgWriteValue = { \n\tpayload: msg.payload, //IMPORTANT: this is value write to node \n\ttopic: 'other' //IMPORTANT: this is ignored, but required :D\n};\n\n\n//send out two message to next node\nreturn [ [ msgSetProp, msgWriteValue ] ];","outputs":1,"noerr":0,"x":480,"y":97,"wires":[["eb55e4da.fa69e8","2523dd29.834112"]]},{"id":"2523dd29.834112","type":"debug","z":"41cf10df.6ea04","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":582,"y":168,"wires":[]},{"id":"8ccac811.88c0f8","type":"blynk-ws-client","z":"","name":"blynk cloud server","path":"wss://blynk-cloud.com/websockets","key":"*******","dbg_all":false,"dbg_read":false,"dbg_write":false,"dbg_notify":false,"dbg_mail":false,"dbg_prop":false,"dbg_sync":false,"dbg_bridge":false,"dbg_low":false,"dbg_pins":"","multi_cmd":true,"proxy_type":"no","proxy_url":"","enabled":true}]

[877]

iOS app 2.26.0 (7)
Node-Red 0.20.5
node-red-contrib-blynk-ws 0.9.2

Project settings (using Ras Pi 3 for more virtual pins):

Styled button widget settings:

@PeteKnight if you have time could you confirm my findings please?

UPDATE - noticed a small error in the function, should be
"offBackColor: “#23C48E”, // BLYNK_GREEN "
which was causing an error, I will test again…

UPDATE 2
It is still flickering for me same as before, not sure what to check from here…

[877]

A little update, I realised I have a few devices running Blynk so tried it out on them:

iOS
iPhone 8 running 2.26.0 (7) installed via TestFlight - flickers
iPad mini 3 running 2.26.0 (9) installed via App Store - flickers

Android
Huawei Y6 running 2.27.5 - no flickering

I checked all three at the same time - wife helped

So maybe it’s an issue with the iOS app?

[Eugene]

Thanks for the report.
A 2.26.1(0) build with a fix should become available for testing in TestFlight soon.

[877]

Thanks for the quick fix! I had a notification but it’s not showing in Test Flight yet, guess it takes Apple a while to approve…

PS thanks @gab.lau for all your help too