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

**URL:** <https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798>\
**Category:** Apps\
**Created:** [October 3, 2019, 10:05am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798 "2019-10-03T10:05:10Z")\
**Posts on this page:** 20\
**Page:** 9

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [December 29, 2019, 1:13pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/164 "2019-12-29T13:13:30Z")

</div>

Thanks @Satoer, based on your post I have now created this where I use http get’s from Homey create a list for me.

I have one question, why does single-line setting not show description, time and icon on one line and must I use a multi-line setting?

http://[ip adress]:1880/doorbird?source=[doorbird|synology]&ring=false&motion=true

 ![2019-12-29_14-07-17](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/2/a2a159aa23bc408f45f790c79a1656833ac5f3e9.png)  
(it is probably not a nice setup now, and everything can be programmed in one function, but thats for later).

 ![2019-12-29_14-05-08](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/7/67ae04aed5e3da91c88a76e633c7bc4b6cee7494.png)

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [December 29, 2019, 1:56pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/165 "2019-12-29T13:56:40Z")

</div>

Ah, found it, description is not showed in single-line. Solution is to put description text in the title.

Old function: Add bell movement to list  
`var WaarschuwingLijst=flow.get("FlowWaarschuwingLijst") || []; var TimeVar=global.get("GlobalTime") || ''; WaarschuwingLijst.push({"title":TimeVar ,"description":": Beweging","icon_name":"fa-video-camera"}); flow.set("FlowWaarschuwingLijst",WaarschuwingLijst); msg.payload = WaarschuwingLijst; return msg;`

New function: Add bell movement to list  
`var WaarschuwingLijst=flow.get("FlowWaarschuwingLijst") || []; var TimeVar=global.get("GlobalTime") || ''; WaarschuwingLijst.push({"title":TimeVar +": Beweging door: " +msg.payload.source,"icon_name":"fa-video-camera"}); flow.set("FlowWaarschuwingLijst",WaarschuwingLijst); msg.payload = WaarschuwingLijst; return msg;`

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 2:06pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/166 "2019-12-29T14:06:59Z")

</div>

This question maybe should be here… Posted in virtual device thread before…  
I have a Virtual Device Motion sensor that I cant get to work.  
I got this message from my Mosquitto server when the ESP reacts on motion:  
It comes into Mosqitto as 1 or 0  
I then use a function to let 1=true and 0=false and into boolean format.  
Then node-red publish into this.  
esp-lekrum/movement/yorn true  
But now its in string format.  
So when I do my flow in Homey it dont update the sensor, probaly because “true” is in string format??  
If I have read right here the text should be alarm\_motion as text in boolean format.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/1/e1478878cab37ffb4078c91f2d5e43939ddbf9ee.jpeg)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 29, 2019, 2:18pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/167 "2019-12-29T14:18:59Z")

</div>

I just use the title and description variable to add the first and second line. In my example I forgot to remove the “:” (I simplified it somewhat). In my usage the dashboard looks like this:

 ![Warnings](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/f/cf6b52f8bb9da580faa64d0113c3ca068e4213d4.png)  
(Waarschuwingen = Warnings in dutch)  
When I press “sluiten” (Close in dutch) the array gets cleared and the compete panel disappears using the “UI control” -node.  
If you look at the UI-list site:  

> **[node-red-node-ui-list](https://flows.nodered.org/node/node-red-node-ui-list)**
>
> Node-RED Dashboard UI widget node for simple list

There are interesting examples how to format the array to get all kind of interesting lists. I tried to add pictures from the door camera, but haven’t been successful yet. (images are behind a username / password url, and I haven’t found a way to make a “[http://user:password@ip-number](http://user:password@ip-number):port/snapshot.jpg” workable)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 29, 2019, 2:38pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/168 "2019-12-29T14:38:13Z")

</div>

I’m trying to understand what you are trying to accomplish.  
You want your motion sensor that spits out MQTT messages to set a virtual motion sensor in homey?

The sensor spits out 0 or 1  
Node red converts this to false or true in boolean  
Node red re-publisch this to MQTT.  
Homey receive this (where true-or false is converted to a string)  
Than try to set the virtual device alarm…

This seems to me a bit “over engineered”. In your earlier post you mentioned you created the sensor yourself using an Arduino… Why don’t you use the Homeyduino library to create a native Homey sensor? You don’t have to translate the incoming message, and homey becomes the centralised server instead of the node-red server. Also, homey will convert incoming sensor data automatically to MQTT using the Homey MQTT Hub app.

That being said, if you keep wanting to use MQTT to set a virtual sensor: I think you still can do it directly based on string data. Just create two flows. one for true, one for false.

 ![virtual-sensor](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/f/3fb74c06ae1cc7444f7d9af2059dceee4cf168db.png)  
(note: I just use some bogus info, and virtual sensor otherwise I had to create one)

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 2:48pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/169 "2019-12-29T14:48:46Z")

</div>

@Satoer you are brilliant !!  
Probaly spent 4 hours into this “problem” and you solved it in 5 minutes  
THANKS !!

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 3:05pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/170 "2019-12-29T15:05:53Z")

</div>

I tried your code above and could see the Bell and the text but no time och date as in your picture above

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 29, 2019, 3:11pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/171 "2019-12-29T15:11:16Z")

</div>

In the example I removed the date to simplify it. Why don’t you try to fill the list with some test strings? See if that works. Just a button, a javascript node and a list node coupled. Push the button, add a item to the list in the javascript node. If this works, you can try to add the time. If that works, you can trigger it based on incoming MQTT messages.

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 3:49pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/172 "2019-12-29T15:49:32Z")

</div>

> [@Satoer](#):
>
> flow.set(‘FlowWaarschuwingLijst’,); return msg;

Got it working ! Rörelse = Movement  
Tried saving date as a GlobalVar and ut in the list with no luck.  
Gladly takes example code 🙂  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/f/1f2b4be19cb68fa5268007d6686965c761beb1c5.png)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 29, 2019, 3:58pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/173 "2019-12-29T15:58:51Z")

</div>

> [@Kalle\_Kronbeck](#):
>
> Gladly takes example code

Allright, here’s my complete code how I use the time and date.  
I ask the time every second, I ask the date every minute, Of course this is not the most neat way. Better would be if I update it every time 0:00 has passed. But I was lazy.

The date gets stored in a long and short global variable. The long version is translated to Dutch.

 ![Time-date](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/7/479263301c31128eb233fef3111673a8d9d5558d.png)

`[{"id":"6d893e59.a29df8","type":"simpletime","z":"467bd729.816768","name":"Tijd","x":370,"y":180,"wires":[["f9fe7148.313ae"]]},{"id":"8754676f.f9aee","type":"inject","z":"467bd729.816768","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":180,"wires":[["6d893e59.a29df8"]]},{"id":"f9fe7148.313ae","type":"moment","z":"467bd729.816768","name":"","topic":"","input":"payload","inputType":"msg","inTz":"Europe/Berlin","adjAmount":"1","adjType":"hours","adjDir":"add","format":"HH:mm:ss","locale":"POSIX","output":"","outputType":"msg","outTz":"Etc/UTC","x":580,"y":180,"wires":[["da083540.8844e","84913875.463f78"]]},{"id":"93e2a693.2a0238","type":"moment","z":"467bd729.816768","name":"","topic":"","input":"payload","inputType":"msg","inTz":"Europe/Berlin","adjAmount":"1","adjType":"hours","adjDir":"add","format":"dddd DD MMMM YYYY","locale":"POSIX","output":"","outputType":"msg","outTz":"Etc/UTC","x":580,"y":280,"wires":[["5fdf98a5.826ed"]]},{"id":"da083540.8844e","type":"function","z":"467bd729.816768","name":"Store Time in global variable","func":"var Time=global.get(\"GlobalTime\") || '';\nglobal.set(\"GlobalTime\",msg.payload);\n\nreturn msg;","outputs":1,"noerr":0,"x":880,"y":200,"wires":[[]]},{"id":"98e20c94.7576f8","type":"function","z":"467bd729.816768","name":"Store date in global variable","func":"var Datevar=global.get(\"GlobalDate\") || '';\nglobal.set(\"GlobalDate\",msg.payload);\n\nreturn msg;","outputs":1,"noerr":0,"x":1000,"y":280,"wires":[[]]},{"id":"5fdf98a5.826ed","type":"function","z":"467bd729.816768","name":"Translate","func":"var mapObj = {\n Monday:\"Maandag\",\n Tuesday:\"Dinsdag\",\n Wednesday:\"Woensdag\",\n Thursday:\"Donderdag\",\n Friday:\"Vrijdag\",\n Saturday:\"Zaterdag\",\n Sunday:\"Zondag\",\n January:\"januari\",\n February:\"februari\",\n March:\"maart\",\n April:\"april\",\n May:\"mei\",\n June:\"juni\",\n July:\"juli\",\n August:\"augustus\",\n September:\"september\",\n October:\"oktober\",\n November:\"november\",\n December:\"december\"\n};\nmsg.payload = msg.payload.replace(/Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday|January|February|March|April|May|June|July|August|September|October|November|December/gi, function(matched){\n return mapObj[matched];\n});\n\n\nreturn msg;","outputs":1,"noerr":0,"x":780,"y":280,"wires":[["98e20c94.7576f8"]]},{"id":"ba5e2310.957f78","type":"simpletime","z":"467bd729.816768","name":"Tijd","x":370,"y":280,"wires":[["93e2a693.2a0238","a79d6817.53c"]]},{"id":"8fa1d970.d4e3c8","type":"inject","z":"467bd729.816768","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":280,"wires":[["ba5e2310.957f78"]]},{"id":"aee33ba6.94d688","type":"function","z":"467bd729.816768","name":"Store date in global variable","func":"var Datevar=global.get(\"GlobalDateShort\") || '';\nglobal.set(\"GlobalDateShort\",msg.payload);\n\nreturn msg;","outputs":1,"noerr":0,"x":1000,"y":320,"wires":[[]]},{"id":"a79d6817.53c","type":"moment","z":"467bd729.816768","name":"","topic":"","input":"payload","inputType":"msg","inTz":"Europe/Berlin","adjAmount":"1","adjType":"hours","adjDir":"add","format":"DD-MM","locale":"POSIX","output":"","outputType":"msg","outTz":"Etc/UTC","x":580,"y":320,"wires":[["aee33ba6.94d688"]]},{"id":"7d507038.43d818","type":"ui_template","z":"467bd729.816768","group":"c4a9cc50.74ad","name":"Tijd / Datum","order":1,"width":"6","height":"2","format":"<p style=\"font-size:45px; text-align: center; font-weight: bold;\">{{msg.time}}</p> \n<p style=\"font-size:15px; text-align: center; font-weight: bold;\"><i style=\"color:#0094CE!important;\" class=\"fa fa-calendar\" aria-hidden=\"true\"></i>&nbsp;&nbsp;{{msg.date}}</p>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1210,"y":160,"wires":[[]]},{"id":"84913875.463f78","type":"function","z":"467bd729.816768","name":"Set icon color and temperature","func":"var Datevar=global.get(\"GlobalDate\") || '';\nmsg = {time:msg.payload, date:Datevar};\nreturn msg;","outputs":1,"noerr":0,"x":890,"y":160,"wires":[["7d507038.43d818"]]},{"id":"c4a9cc50.74ad","type":"ui_group","z":"","name":"Vandaag","tab":"f735aa47.f5cd18","order":2,"disp":true,"width":"6","collapse":false},{"id":"f735aa47.f5cd18","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]`

Use the global variable long or short date just like the time.

**[EDIT] “Set icon color and temperature” -name does not make sense… I copied it from another node and forgot to rename it**

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 5:16pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/174 "2019-12-29T17:16:18Z")

</div>

Stupid question  
How do you get both varibels to be printed ?  
Tested with this but didnt work  
WaarschuwingLijst.push({“title”: TimeVar, DateVar,“description”:": Rörelse Entre",“icon\_name”:“fa-bell”});

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 29, 2019, 5:23pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/175 "2019-12-29T17:23:35Z")

</div>

I do it like this:

```auto
var DateVar=global.get("GlobalDate") || '';
var TimeVar=global.get("GlobalTime") || '';
WaarschuwingLijst.push({"title":DateVar,"description":TimeVar+": Aangebeld","icon_name":"fa-bell"});
flow.set("FlowWaarschuwingLijst",WaarschuwingLijst);
msg.payload = WaarschuwingLijst;
return msg;

```

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [December 29, 2019, 7:06pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/176 "2019-12-29T19:06:01Z")

</div>

> [@Satoer](#):
>
> var DateVar=global.get(“GlobalDate”) || ‘’; var TimeVar=global.get(“GlobalTime”) || ‘’; WaarschuwingLijst.push({“title”:DateVar,“description”:TimeVar+“: Aangebeld”,“icon\_name”:“fa-bell”}); flow.set(“FlowWaarschuwingLijst”,WaarschuwingLijst); msg.payload = WaarschuwingLijst; return msg;

I am no programmer and a newbie with node-red 🙂  
But after some copy/paste among the latest answers I got it working and writing “the right” name and date.Now I have to adjust my sensor, its to sensitive right now  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/f/7f184702dbf64b90511d061d765947c73fada30b.png)

---

<div class="post-metadata">

**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\
**Post date:** [December 30, 2019, 12:52pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/177 "2019-12-30T12:52:29Z")

</div>

Hello @Satoer

I tried to create the javascript button with the code to delete the list of generated messages.

But, I have not been able to do it. I attached an image of what I have done to see if you can tell me what I am doing wrong.

Thank you very much in advance.

Greetings!

 ![button](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/f/cfcf05312d6bc7c4bf45b0106b661d3f2d0a794d.jpeg) ![function](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/8/088f77cadbb6cf0ab3ddb0e7a76e38266190bfa4.jpeg)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 30, 2019, 1:18pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/178 "2019-12-30T13:18:26Z")

</div>

I don’t think there’s something wrong. The list is empty. The list node is just not updated with the new data. If you add an item, the list probably will start fresh with only the new item you added.

Just couple the “reset list” javascript node to the List node. And change the code in the javascript node to:

```auto
flow.set('FlowWaarschuwingLijst',[]);
msg.payload=[];
return msg;

```

Then it will show an empty list.

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [December 30, 2019, 4:51pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/179 "2019-12-30T16:51:02Z")

</div>

It would be nice to reverse sort the list, so that new items are on top of the list and to auto delete all older records except for the last 10 added lines.

Anyone has some code examples for this?

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [December 30, 2019, 5:17pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/180 "2019-12-30T17:17:22Z")

</div>

Instead of using “push()” you can use “unshift()” to add the item on top of the list.

> **[JavaScript "Add to Array" Functions (push vs unshift vs others) -...](https://www.hostingadvice.com/how-to/javascript-add-to-array/)**
>
> There are several methods for adding new elements to a JavaScript array. If you instead want to remove elements from an array in JavaScript, we’ve got an article for that too. Feel free to click the links below to jump ahead to the explanation of...

It’s all just basic javascript. There are several options to remove items from an array.

> **[JavaScript: Remove Element from an Array - HostingAdvice.com](https://www.hostingadvice.com/how-to/javascript-remove-element-array/)**
>
> Removing elements from a JavaScript array is a common programming paradigm that developers often run into. As with a lot of things JavaScript, this isn’t as simple as it probably should be. There are actually several ways to remove one or more...

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [December 31, 2019, 2:07pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/181 "2019-12-31T14:07:39Z")

</div>

Thanks @Satoer

I changed it to this, I chnage pull to unshift and added an additional line to limit the array to maximum of 10 lines using splice.

> [@Satoer](#):
>
> ```auto
> WaarschuwingLijst.unshift({"title":DateVar,"description":TimeVar+": Aangebeld","icon_name":"fa-bell"});
> WaarschuwingLijst.splice(10)
> 
> ```

---

<div class="post-metadata">

**Author:** ![Odd\_Magne\_Nylund](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/odd_magne_nylund/32/19419_2.png) [@Odd\_Magne\_Nylund](https://community.homey.app/u/Odd_Magne_Nylund)\
**Post date:** [January 1, 2020, 6:35pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/183 "2020-01-01T18:35:16Z")

</div>

Hello. I have bean trying to make an dashbord. Got some things in the dashboard now. But i dont understand how to place feks things (gauges , switches ) on the side or in a corner of the dascboard. Everyting i make come in the middel of the dashbord.

---

<div class="post-metadata">

**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\
**Post date:** [January 1, 2020, 6:43pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/184 "2020-01-01T18:43:40Z")

</div>

If you edit the dashboard you can add more “rows”  
Where the red cross is in the picture you will see Layout when you move your mouse over.  
There you you add more things  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/e/9e7a34d5bc04bc1d240375370fc0246c172ce9aa.png)

[Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=8)

[Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=10)