Node Red: A widget based dashboard working with Homey trough MQTT

I have that with homeydash and full kiosk browser as well.
In fkb i have a page refresh every 10 minuts (otherwise buienradar is not refreshed) and regular the reload fails and dashboard stays empty.

I suspect it has to do with FKB.

You don’t have to refresh the whole page for using buien radar (or any other image that needs updating). Just use a timestamp node that triggers every minute (or 5 minutes or whatever). Connect that to a function node with this:

msg.payload = "https://api.buienradar.nl/image/1.0/RadarMapNL?w=720&h=600?"+Math.random();
return msg;

The “?”+Math.random(); makes the difference. Everything behind the ? gets ignored, but with the random number behind it, the browser thinks it’s a different image and reloads it.
Then connect this to a template node (the blue-green one) with this html:

<img src="{{msg.payload}}">

the {{msg.payload}} injects the new image and reloads the frame.

This is also working great with ip camera’s that support snapshots. just use:

msg.payload = "http://username:password@ipadress:port/snap.jpg?"+Math.random();
return msg;

(That’s how I use it)
Note: If you use this technique with a high refresh-rate, disable it (with some code) if you hide the panel. (otherwise it will refresh constantly in the background)

Also, I’ve simplified this to the bare minimum. But don’t forget you can use basic html to size the image to size.

3 Likes

This isn’t possible in the list-node? (I haven’t looked into this). If not, you can alway’s do it the dirty way by inserting some custom css. Just use a template node (the blue-green one) use the option:
“Added to site section>” and inject some custom CSS:

<style>
.fa-bell{
  color: white;
}
</style>

The template node is simple but really powerfull to create almost anything.

Thank you for the hint. This solves my issue.
I did use template type “Widget in group”. When selecting “Added to site <head> section”, the color did not change.

image
image

I have used the following for my buienradar widget:
I used the template node and used an iframe.
No need for triggering anything. You can use the history and the forecast parameter to select the timeframe that needs to be shown.

<IFRAME SRC="https://image.buienradar.nl/2.0/image/animation/RadarMapRainNL?height=170&width=165&margin-left=100&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=3&forecast=5&skip=1" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=100% HEIGHT=100%></IFRAME>

I tried your code. But it does not update the radar map. If I refresh the page on 12:00, the radar map shows a timelapse from 11:30 to 12:30. but if I keep the page open till 13:00, the radar map still shows a timelapse from 11:30 to 12:30. That’s why you need to use a timestamp trigger to inject a new image every couple of minutes. Otherwise you need to reload the complete dashboard if you want to see the current radar situation.

You are right. Because I was playing with the dashboard it was updating.

I would like to send some non device related information via MQTT from Homey to the node-red dashboard.
E.g. I’d like to send some sunrise related information as present in the app “Zonnestanden” of Marcel Timmermans or info of the variables i defined in the app “Better Logic” of Patrick Sannes.

I guess I will need to create a device for this. What kind of device and which app would I need to define such a device? Or is there a different solution possible?


You can just send whatever MQTT message directly from flows with the MQTT client. You can also attach tags to the value. No need to create virtual devices.

1 Like

Stupid me, off course. I did not check this. Thank you for this info. Thank you for all the help. It helped me a lot to get my dashboard up-and-running.

FYI: I removed the slider for changing the volume. I selected the option to only send a value after the slider was released, but sometimes when I moved the slider and released it, nothing was send until I touched something else in the dashboard. Did you encounter similar behavior?
Now I just created 2 buttons to increase and decrease the volume which is working well.

I have several devices flashed with Tasmota, want to control and show them on my dashboard.
In the flow in the picture I want to show some values liek Power (now), yesterday and Total.
Feels like I “over worked” this flow.
Here is the code:

[{“id”:“95796233.1783d”,“type”:“mqtt in”,“z”:“bfb07215.1ae28”,“name”:“”,“topic”:“stat/varmare/#”,“qos”:“0”,“datatype”:“auto”,“broker”:“fbf559eb.beb7d8”,“x”:150,“y”:80,“wires”:[[“c79da010.f9067”]]},{“id”:“ce47f93a.0f4508”,“type”:“comment”,“z”:“bfb07215.1ae28”,“name”:“Subscribe to all messages”,“info”:“This is just to subscribe to all messages \ncoming from ESPurna. You can turn this off\nonce you are completed the setup.\n\nHere I put the same topic ID as what I entered\non the UI and # at the end.”,“x”:150,“y”:40,“wires”:},{“id”:“c79da010.f9067”,“type”:“switch”,“z”:“bfb07215.1ae28”,“name”:“JSON format?”,“property”:“$substring(msg.payload, 0, 1)="{"”,“propertyType”:“jsonata”,“rules”:[{“t”:“true”},{“t”:“false”}],“checkall”:“true”,“outputs”:2,“x”:340,“y”:80,“wires”:[[“55d1675.791d398”],]},{“id”:“e605fff2.b12c”,“type”:“mqtt in”,“z”:“bfb07215.1ae28”,“name”:“”,“topic”:“tele/varmare/#”,“qos”:“0”,“datatype”:“auto”,“broker”:“fbf559eb.beb7d8”,“x”:150,“y”:140,“wires”:[[“c79da010.f9067”]]},{“id”:“31541bf4.598944”,“type”:“ui_gauge”,“z”:“bfb07215.1ae28”,“name”:“”,“group”:“39c6cd85.b32382”,“order”:8,“width”:0,“height”:0,“gtype”:“gage”,“title”:“Värmare”,“label”:“Watt”,“format”:“{{value}}”,“min”:0,“max”:“100”,“colors”:[“#00b500”,“#e6e600”,“#ca3838”],“seg1”:“”,“seg2”:“”,“x”:980,“y”:140,“wires”:},{“id”:“e9c17c3f.f68b”,“type”:“change”,“z”:“bfb07215.1ae28”,“name”:“”,“rules”:[{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“payload.ENERGY.Power”,“tot”:“msg”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:780,“y”:140,“wires”:[[“31541bf4.598944”]]},{“id”:“55d1675.791d398”,“type”:“json”,“z”:“bfb07215.1ae28”,“name”:“”,“property”:“payload”,“action”:“”,“pretty”:false,“x”:530,“y”:80,“wires”:[[“4cc4183d.fc6218”,“eb3df82.387ea08”,“e9c17c3f.f68b”]]},{“id”:“4e960f71.fad07”,“type”:“ui_text”,“z”:“bfb07215.1ae28”,“group”:“39c6cd85.b32382”,“order”:9,“width”:0,“height”:0,“name”:“”,“label”:“Förbrukning igår”,“format”:“{{value}}”,“layout”:“row-left”,“x”:1000,“y”:60,“wires”:},{“id”:“ddaa72d0.245ef”,“type”:“ui_text”,“z”:“bfb07215.1ae28”,“group”:“39c6cd85.b32382”,“order”:10,“width”:0,“height”:0,“name”:“”,“label”:“Förbrukning Total”,“format”:“{{value}}”,“layout”:“row-left”,“x”:1010,“y”:100,“wires”:},{“id”:“4cc4183d.fc6218”,“type”:“change”,“z”:“bfb07215.1ae28”,“name”:“”,“rules”:[{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“payload.ENERGY.Yesterday”,“tot”:“msg”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:780,“y”:60,“wires”:[[“4e960f71.fad07”]]},{“id”:“eb3df82.387ea08”,“type”:“change”,“z”:“bfb07215.1ae28”,“name”:“”,“rules”:[{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“payload.ENERGY.Total”,“tot”:“msg”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:780,“y”:100,“wires”:[[“ddaa72d0.245ef”]]},{“id”:“fbf559eb.beb7d8”,“type”:“mqtt-broker”,“z”:“”,“name”:“Mosquitto MQTT Server”,“broker”:“192.168.1.12”,“port”:“1883”,“clientid”:“node-red”,“usetls”:false,“compatmode”:true,“keepalive”:“60”,“cleansession”:true,“birthTopic”:“”,“birthQos”:“0”,“birthPayload”:“”,“closeTopic”:“”,“closeQos”:“0”,“closePayload”:“”,“willTopic”:“”,“willQos”:“0”,“willPayload”:“”},{“id”:“39c6cd85.b32382”,“type”:“ui_group”,“z”:“”,“name”:“Davis Värmare”,“tab”:“a57bfb16.9f9578”,“order”:3,“disp”:true,“width”:“6”,“collapse”:false},{“id”:“a57bfb16.9f9578”,“type”:“ui_tab”,“z”:“”,“name”:“Tasmota”,“icon”:“dashboard”}]

Can it be done easier and nicer ?

Hi @Satoer

I was trying to put username and password to secure mqtt.

Do you use security for mqtt access?

I have read several tutorials, but in Synology which is where I have mqtt running, they don’t work for me.

Thanks in advance.

No I don’t have the MQTT behind a password (also running on Synology) The network isn’t accessible from outside the network (internet) So I don’t really care.
I believe you need to use SSH to adjust configuration files manually to do that. But I haven’t look into that.

@Kalle_Kronbeck: I don’t know exactly what you are trying to achieve. (the pasted code is formatted, so it can’t be used). And I dont have Tasmota devices. But if it is working, it’s working right?. I don’t think you need be that driven to optimize the nodes / code unless it’s activated every couple of seconds.

@Satoer Yes. You have to configure over SSH to access the configuration files, but. I will continue investigating how to configure the mqtt password file.

Thank you!!!. We continue !!!

Back to Alarmlist.
I want all my motionsensor to send to the same list.
Tried but didnt get it to work, it always was only the last motion that was sent to Alarmlist.
Can someone please post flow with code so I can see how its done ?

Edited 2020-01-10
Seems like my problem is that the list only show one message.
Next message just replace the older one.
This is how the function look.

var lista=flow.get(“Larmlista”) || ;
var DateVar=global.get(“GlobalDate”) || ‘’;
var TimeVar=global.get(“GlobalTime”) || ‘’;
lista.unshift({“title”:DateVar,“description”:TimeVar+": Rörelse Kök",“icon_name”:“fa-bell”});
lista.splice(10)
msg.payload = lista;
return msg;

1 Like

During the Christmas break I did some work on the node-red dashboard.
As many of you I did like the Homey-Dash but found it limited.
In the past I had a OpenHAB dash but found it very maintaining and also not always very workable.
Now installed Node-red and everyone in the family is very happy with it.

Done: Dashboard - most of the lights - weather forecast based on Buienradar
To be done: Update Buienradar as mentioned above (not noticed before but very good feedback) - alarm panel - sensor and camera - solar panels output instead of Gas chart.
Wishes - although NOS (news) is listed the direct links to the articles do not work yet.

3 Likes

Nice. I would add some padding in the text boxes like “weer vandaag” to keep the text a bit from the border. With the blue / green template node you can add extra css rules. Those weather boxes with icons, are these all separate nodes?

How did you program the “back” button? I did not want the hamburger menu for the different pages, so I rely on swiping to go to the next page. But I rather have a button to go to a page directly. Have not found out how to do that. (or does it just goes to the main [ip-number]/ui url page ?)

image missing a ‘r’ ?

If I say yes that would imply that we have a liquor cabinet :rofl:
But yes you are right. Will correct the typo and thanks for notifying

1 Like

This has been done with a template node connected to the ui-control
Every tab has a number, which can be found in the url.
Depending on this number you will have to send the payload 0, 1, 2 etc.

image

1 Like