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

Thanks for the help. That is somewhat the same that I have made, but the problem is that also the “input” arrays are sorted although I dont sort them in the code.

then copy the input array to a new array perhaps, and use that one for sorting.

I have done that also, like presented in the example code. But it will still sort the input array also.

you need to use push (for existing array’s):

m_out[0]=3;
m_out[1]=2;
m_out[2]=4;
m_out[3]=5;
m_out[4]=1;
m_out[5]=7;

m_out_sorted.push(...m_out);
m_out_sorted = m_out_sorted.sort((a,b) => a-b);

See:

1 Like

I am no programmer, but would love to have this working. Have spent quite a few hours to get it up and working - but how to get the layout and buttons working as I want seems to be out of my grasp. To be honest I do not want to learn to be good at this - just want to make it work and fulfill my basic demands to help my wifey to easily use our Homey.

So:
Would it be possible to get your full code for your tab (to import to my own Node-RED) - so I can change to my values and connection and learn from what you have done as I go? It is more or less exacly how I want my layout to be and I ask politely and respect your choice if not to. But it would help me a lot! :wink: Thank you and have a great evening/day! :slight_smile:

1 Like

@Satoer Thank you for this manual. I have never ever did anything with programming but I still manage to come up with some kind of a dashboard.


Still need to add some weather items

2 Likes

@Joost_van_Liempt I would also like to have the traffic map on my dashboard. Can you please share the code you have used?

Hi Paul

Can i ask how you cast the dashboard to the google home. I have a https call which shows the dashboard on my computer but does not cast to my google.
@Paul_Grevink

Thanks
Ron

Hell Ron,

Thanks for your message. It is a while ago, I have created this flow https://homey.app/f/aLrorp that does the job. To test it on Homey, i used a virtual button to trigger casting the URL of the dashboard to the nesthub. Later I also created a routine in Google Home that will sent the dashboard to the hub. I hope this helps, otherwise let me know.

Best regards,

Paul

Hi, I had that flow as well, which works for homeydash but not for nodered. it needs to be https . Could yo u share me the routine how to do this on google home. From there I should be able to figure out :wink:
thanks

The Routine is pretty simple. I have linked Homey to Google Home. The Routine is (sorry for Dutch language as my Google Apps do have Dutch as preferred language.
Wanneer
Ik zeg “Show Dashboard”

Dan doet de Assistent het volgende
Choose:
X Instellingen aanpassen voor lampen, stekkers en meer
Open the cog and select the Virtual button mentioned in the flow (my previous post)
Inschakelen

Save the Routine.

That is all. Google Assistant will switch the virtual button, which will broadcast the dashboard to the nest hub…

P.S. Some time ago, Routines were located in the Google Home app. but is not available today for unknow reason.
I was able to start Routines by going to the Google Assistant and give the command: “Open Routine Settings”.

Dankjewel. Ik denk dat er dan iets niet goed is met mijn dashboard. Ik doe exact hetzelfde.

I will continue to check my dashboard

Thanks
Ron

Hello Ron,

Is the Homey Chromecast App working correctly? I experienced quite some issues and have scheduled a restart of this App every 6 hours. Can you cast other content with the same flow to the nesthub, like YouTube?

Best regards,

Paul

Hi Paul,

I have not tried that yet but I did fix the casting of the Node red dashboard to the google home Hub.

I am using the bigssh node on Node-red to call a command on the PI4 host.

On the host I have installed CATT (cast all the things) and by calling CATT -d device cast_site http://192.1.1.6:1880/ui it shows the dashboard on the google home hub.

CATT is a great tool, by running catt scan is shows all your chomecast devices.

It can also do youtube, etc.

maybe try that.

Hi All,

I have embedded Spotify to my dashboard, however i can’t scale down the album picture. Now i only see a quarter of the picture. I have use this code in a template node.

<div img height="25%" width="25%" align="center">
<IMG ng-src="{{msg.payload.item.album.images[1].url}}"></IMG>
</div>

i tried different percentage in the above code as well as using different units e.g. px or pt. Nothing seems to scale down the image.

Can somebody put me in the right direction?

Edit: i Solved it to the following code and adjusting the value below stated as XXX

<div img height="25%" width="25%" align="center">
<IMG ng-src="{{msg.payload.item.album.images[1].url}}" width="XXX"></IMG>
</div>

Maybe it has already been covered in this topic but could not find it.

I have successfully created a dashboard with Node-red.

But have a problem with the sliders. These work well if I run the dashboard on an Android or an iOS with an Ipad Air 2.

But my old Ipad Air 1 with iOS 12.4.9 that I would like to use for the dashboard does not work well with the sliders.

For example, as soon as I want to dim a lamp with the slider, it immediately goes back to 0 and gives the message NaN.

Tried with various browsers, Safari, Chrome, Dolphin. But these all do the same.

can someone help me with this?

Peter

Hello all,

Hopefully someone can help me with the following two challenges.
1: I have a number of shutters that I control with homey via a shelly. Now I would like to get it on the dashboard as well. But in such a way that if they are operated via the homey app, the status on the dashboard also changes. Does anyone have the solution for this?
2: Unfortunately, there is no app for the intergas gateway to connect it to homey. But is it possible to get this working on the dashboard? So adjust the temperature and read it at that time?

Thanks for the help.

Here is my flow with up and down buttons. It wil update when you change the state in Homey:

[{"id":"efa5750e.7ca688","type":"ui_text","z":"84a66321.9ba59","group":"696f3e0a.ae514","order":26,"width":8,"height":2,"name":"","label":"<b>Hobbykamer</b>","format":"","layout":"col-center","x":220,"y":1300,"wires":[]},{"id":"822ce412.d37bf8","type":"ui_button","z":"84a66321.9ba59","name":"up hk","group":"696f3e0a.ae514","order":29,"width":2,"height":2,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-circle-up fa-2x","payload":"up","payloadType":"str","topic":"homie/homey-xxxxxxxxxxxxxxxxxxxxxx/windowcoverings/home/Rolluik/windowcoverings_state/set","x":190,"y":1400,"wires":[["6619edc8.06d044"]]},{"id":"89b0069.f9703f8","type":"ui_button","z":"84a66321.9ba59","name":"down hk","group":"696f3e0a.ae514","order":38,"width":2,"height":2,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-circle-down fa-2x","payload":"down","payloadType":"str","topic":"homie/homey-xxxxxxxxxxxxxxxxxxxx/windowcoverings/home/Rolluik/windowcoverings_state/set","x":200,"y":1480,"wires":[["6619edc8.06d044"]]},{"id":"a24c9852.542648","type":"ui_button","z":"84a66321.9ba59","name":"Stop hk","group":"696f3e0a.ae514","order":35,"width":2,"height":2,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop-circle fa-2x","payload":"idle","payloadType":"str","topic":"homie/homey-xxxxxxxxxxxxxxxxxxxxx/windowcoverings/home/Rolluik/windowcoverings_state/set","x":200,"y":1440,"wires":[["6619edc8.06d044"]]},{"id":"8824fc46.5e3d7","type":"ui_template","z":"84a66321.9ba59","group":"696f3e0a.ae514","name":"Rolluik hobbykamer","order":30,"width":6,"height":6,"format":"    <div class=\"rollade__container\">\n        <svg class=\"rollade__fenster\" id=\"hobbykamer\" width=\"100%\" height=\"100%\" viewBox=\"0 0 170 188\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n            <g transform=\"matrix(1,0,0,1,-15.909,-45.6212)\">\n                <g transform=\"matrix(0.989904,0,0,0.992491,4.03539,0.837446)\">\n                    <path d=\"M180.329,56.389C180.329,51.839 176.626,48.145 172.064,48.145L23.291,48.145C18.729,48.145 15.025,51.839 15.025,56.389L15.025,222.454C15.025,227.004 18.729,230.698 23.291,230.698L172.064,230.698C176.626,230.698 180.329,227.004 180.329,222.454L180.329,56.389Z\" />\n                </g>\n                <g transform=\"matrix(1,0,0,1.38253,3.04599,-37.9811)\">\n                    <path d=\"M97.589,64.432L97.589,191.286\" />\n                </g>\n                <g transform=\"matrix(1,0,0,1,2.84135,56.1777)\">\n                    <path d=\"M18.74,83.189L177.463,84.189\" />\n                </g>\n            </g>\n        </svg>\n        <svg class=\"rollade__rollade\" style=\"top: calc((-1) * {{msg.payload}}%);\" width=\"100%\" height=\"100%\" viewBox=\"0 0 181 190\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n            <g transform=\"matrix(1.35281,0,0,1.35281,-45.3041,-102.109)\">\n                <path class=\"bg\" d=\"M167.134,82.161C167.134,78.473 164.14,75.479 160.452,75.479L40.171,75.479C36.483,75.479 33.489,78.473 33.489,82.161L33.489,208.93C33.489,212.618 36.483,215.612 40.171,215.612L160.452,215.612C164.14,215.612 167.134,212.618 167.134,208.93L167.134,82.161Z\"/>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,-9)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,1)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,11)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,21)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,31)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,41)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,51)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,61)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,71)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,81)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,91)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,101)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n                <g transform=\"matrix(1.69574,0,0,1,18.3547,111)\">\n                    <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n                </g>\n            </g>\n        </svg>\n    </div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":770,"y":1340,"wires":[[]]},{"id":"d8b2650.b923698","type":"mqtt in","z":"84a66321.9ba59","name":"Rolluik Hobbykamer","topic":"homie/homey-5d14b942367eb80ccf0c77c3/rolluik-hk/windowcoverings-state","qos":"2","datatype":"auto","broker":"9a1fe5ba.fab5a8","x":210,"y":1340,"wires":[["eacaca6f.123328"]]},{"id":"6619edc8.06d044","type":"mqtt out","z":"84a66321.9ba59","name":"Hobbykamer","topic":"homie/homey-5d14b942367eb80ccf0c77c3/rolluik-hk/windowcoverings-state/set","qos":"","retain":"","broker":"9a1fe5ba.fab5a8","x":490,"y":1400,"wires":[]},{"id":"eacaca6f.123328","type":"change","z":"84a66321.9ba59","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"idle","fromt":"str","to":"30","tot":"num"},{"t":"change","p":"payload","pt":"msg","from":"up","fromt":"str","to":"100","tot":"num"},{"t":"change","p":"payload","pt":"msg","from":"down","fromt":"str","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":1340,"wires":[["8824fc46.5e3d7"]]},{"id":"696f3e0a.ae514","type":"ui_group","z":"","name":"Rolluiken_Mobile","tab":"3e1be46a.679abc","order":1,"disp":false,"width":16,"collapse":false},{"id":"9a1fe5ba.fab5a8","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"3e1be46a.679abc","type":"ui_tab","z":"","name":"Rolluiken_Mobile","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

imageimage

They work fine on my old iPad 2 (not the Air 2). Only they are half the size as they should be. Some kind of safari render incompatibility or something. Functional they are working fine. Try to output only on release of the slider:
afbeelding

Sure, just feed the MQTT data to the slider:


( My topic: homie/homey-topic/gordijn-voor/windowcoverings-set )