Oops, I made a screenshot of the wrong button. But yes, I use msg.icon as variable in the button. 
I did found 1 example for changing the icon, but not sure if that is the best way to do it:
This is also a bug in the code. You are comparing it with the string/character “2”. Not the number 2. Everything between quotes is text (in every program language I know of). So you need to remove the quotes. You also need to make sure you are receiving a integer (number) in the payload. If it’s a string (=text) than it needs to be converted to a integer (number). (But I don’t think this is necessary)
Well… I’ve just checked my nodes, and I do exactly the same. I use the same topics to set the light dim level and temperature. For the light I use a slider between 0 and 100.
But I use different devices. Mi-light and a Plugwise anna thermostat. Don’t think that makes a difference though.
Can you turn on and off lights trough MQTT / Node Red?
Those are the right topics.
You can check in the devices topic tree that the device is controllable via …/set. It will have a parameter $settable = true.
You need the payload value you publish to be ‘raw’ text not json and to adhere to the $format value that is also posted within the device hierarchy. From memory on Homey it is a dim value between 0 and 1.0 but I might have that wrong - I’ve been using another controller a lot recently.
Edit… I now see that Michel is using 0-100 so I guess I remembered it wrong.
$format = 0:100
Not really. As per MDN:
When comparing a number and a string, the string is converted to a number value. JavaScript attempts to convert the string numeric literal to a
Numbertype value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearestNumbertype value.
So it works as expected. I do agree that for the sake of code-clarity, it would be better to use a numerical value directly.
1 Like
I believe HomeyScript and HomeyDuino is using the 0-1 floating point DIM scale. (So Homey probably works internal also with the 0-1 scale). So that’s probably the confusion. The MQTT-hub probably just converts it.
Never knew that Javascript is that forgiving 
.
1 Like
Yeah you’re right, it’s not how it should be, but it works. Bu to be totally sure, I’ve changed the Function to:
var image;
image = "wi-wu-chancesnow"
msg.icon = image;
return msg;
And still, the icon doens’t change…
According to the documentation:
The Icon can be defined, as either a Material Design icon (e.g. ‘check’, ‘close’) or a Font Awesome icon (e.g. ‘fa-fire’) , or a Weather icon. You can use the full set of google material icons if you add ‘mi-’ to the icon name. e.g. ‘mi-videogame_asset’.
It doesn’t sound to me like it can be templated. Especially because the documentation explicitly states that:
The colours of the text and background may be set. They can also be set by a message property…
So text and background can be templated.
2 Likes
This is maybe usable as example for icon changing.
3 Likes
I have found the problem to be in the dimming. Homey acts on 0-100 and it works perfectly now.
Empty field and only fill in the icon name (without quotes and so on).
If i enter plain ‘light’ which is a standard icon in node red it still returns as a questionnark. Am i missing something?
Hi
I have installed and configured both the client and the Hub in Homey. I run the broker on a Raspberry PI. Communication works fine. I´ve tested the first two examples you posted. Here is the problem for me. The switch moves in the dashboard when I turn on and off the light from the Homey App but when i try to turn the light on/off in the dashboard it doesn´t work. I Don´t understand whats wrong. Really need your help, its driving crazy.
It’s hard to guess what’s wrong without seeing the code. Can you select the nodes you use, then press the hamburger icon (top right) => Export. And paste the generated JSON in a message (between code brackets).
You need to use the Font Awsome 4.7.0 icons
There is no fa-automobile… you need to use fa-car (Only the bold text) or fa-lightbulb-o for a light
I tested it, and it seems like you can’t inject an icon in a button node. There is a solution though. There is a simple but powerful template node (the blue ui one). And you can implement any html you want. You can also just put the html for a button inside it, and style (inject code) the way you want.
(There’s some padding around the button, I haven’t looked into how to removing this. Probably a simple css hack to remove this)
<script>
var value = "hello world";
this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})" style="padding: 0px 0px 0px 0px;!important"><i class="{{msg.payload}}"></i> Click me!</md-button>
Node-red JSON:
[{"id":"8c704093.fe2b6","type":"ui_button","z":"48744450.148de4","name":"","group":"bec4a4a3.5c9928","order":2,"width":0,"height":0,"passthru":false,"label":"Home icon","tooltip":"","color":"","bgcolor":"","icon":"","payload":"fa fa-home","payloadType":"str","topic":"","x":190,"y":200,"wires":[["6bce650f.f5e7b4"]]},{"id":"c15a05c5.d102a8","type":"ui_button","z":"48744450.148de4","name":"","group":"bec4a4a3.5c9928","order":1,"width":0,"height":0,"passthru":false,"label":"Trash icon","tooltip":"","color":"","bgcolor":"","icon":"","payload":"fa fa-trash","payloadType":"str","topic":"","x":190,"y":240,"wires":[["6bce650f.f5e7b4"]]},{"id":"6bce650f.f5e7b4","type":"ui_template","z":"48744450.148de4","group":"bec4a4a3.5c9928","name":"Template Button","order":3,"width":0,"height":0,"format":"<script>\nvar value = \"hello world\";\nthis.scope.action = function() { return value; }\n</script>\n\n<md-button ng-click=\"send({payload:action()})\" style=\"padding: 0px 0px 0px 0px;!important\"><i class=\"{{msg.payload}}\"></i> Click me!</md-button>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":220,"wires":[["a431ad14.0d423"]]},{"id":"a431ad14.0d423","type":"debug","z":"48744450.148de4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":710,"y":220,"wires":[]},{"id":"bec4a4a3.5c9928","type":"ui_group","z":"","name":"test","tab":"c63b7d19.a7f4f","disp":true,"width":"6","collapse":false},{"id":"c63b7d19.a7f4f","type":"ui_tab","z":"","name":"Homey Dashboard 2","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Example code for icon buttons:
https://www.w3schools.com/howto/howto_css_icon_buttons.asp
Also, check out the help-info of the node’s if you want to know how to receive and send info in / out a template node:
1 Like
I’ve used the msg.ui_control now to thange the icon of a button. With msg.ui_control you can change almost everything in the dashboard.
var color;
if(msg.payload <= 15){
// It is cold (lets make button blue and set icon)
color = "#1848DC"
msg.ui_control = {icon:"wi-wu-chancesnow", tooltip:"Het is koud"};
}
else if(msg.payload <= 21){
// It is normal (lets make button orange and set icon)
color = "#FF6813"
msg.ui_control = {icon:"wi-wu-cloudy", tooltip:"Lekker warm"};
}
else{
// It is hot (lets make button red and set icon)
color = "#ff1b13"
msg.ui_control = {icon:"wi-wu-mostlysunny", tooltip:"Het is heet"};
}
msg.background = color;
return [msg];
Here you’ll find more info: https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md
1 Like
Hi Morad.
Did you include a topic on the mqtt sender?
You would require to add the topic of the light tou wish to toggle. Use Mqtt explorer to see all communicated mqtt topics. Once you find the light,
Place /set at the end of the topic. So it will look like something like this:
Homie/homey/ganglicht1/onoff/set
That’s the base to make it work.
You can go the advanced route if you wish to be able to see the button move when you switch a button using homey’s app. Let me know if You need assistance.
Note that i also just learned all of this but i’m happy to assist whenever i can
