# Show us your Dashboard!

**URL:** <https://discourse.nodered.org/t/show-us-your-dashboard/47965>\
**Category:** Dashboard\
**Created:** [3 July 2021 08:29 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965 "2021-07-03T08:29:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [3 July 2021 08:29 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/1 "2021-07-03T08:29:51Z")

</div>

Hey Peoples,  
Id like to see what people have done with their dashboards!

I'll start... feel free to show us your craft!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd414c4b4c0f5ab94bac90ad4cb0b41d6efd5835.jpeg)

This page sits on 3 raspberry pi's in 3 dwellings on this property.  
Its pretty self explainatory!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e23edbd2df40aae6c82d4d9ae1a259ad513f69e.png)

this is for control and status of the bore pump and flow into 2 x 3000 litre tanks

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8e7043d8367b856cfc48337cdd16271c3e5b1d0.png)

this page is for control and status of raspberry pi's, internet and NAS drives as well as monitoring of ESP's

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b79d338c3b326fc85627f581b9d6e047020e17b.png)

this is pretty obvious... power monitoring!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/898587a3d55954bb6e985098f58041ca27cfb7f5.png)

this is for adding users that have access to open the gate  
so when we get known visitors they can open the gate which in turn plays a sound file on the all the sip phones around the property.

What do you guys think? would like to see what you have done!

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [3 July 2021 18:02 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/2 "2021-07-03T18:02:37Z")

</div>

Here's a selection of some of my Dashboards.

First one - a Home Surveillance System designed by myself, @krambriw and @zenofmud

 ![Screen Shot 07-04-21 at 08.25 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20969bd4a2fccd6d575126a0549a56829d90bf1b.jpeg)

My train spotting dashboard for UK trains at Princes Risborough - North Signal Box

 ![Screen Shot 07-03-21 at 06.21 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/cc566aefcdd8579b43ca969d13e6e48fae9f95d5.jpeg)

My plane spotting dashboard - not many aircraft around at the moment - I wonder why??

 ![Screen Shot 07-03-21 at 07.38 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c0fa5c17062e6442e2c43fa9a24804a50643fef1.jpeg)

The node management panel for my infrared sensors.

 ![Screen Shot 07-03-21 at 06.22 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/714ad924aecb7923e2c1c0256f7bc6ae612f8951.jpeg)  
 ![Screen Shot 07-03-21 at 06.23 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c495e19e27bf86efe17220b33868326eebb1f2c5.jpeg)  
Home Energy monitor  
 ![Screen Shot 07-03-21 at 07.00 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5b568b81b87ab0c7808c1eff74deb5141e4f51b1.jpeg)  
And yes, yet another home security system.  
 ![Screen Shot 07-03-21 at 06.19 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7970984a592272d2ef95b64ab621f51d9833a5d.jpeg)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [3 July 2021 21:21 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/3 "2021-07-03T21:21:19Z")

</div>

Hi DynamicDave, I used your online train spotting tutorial only yesterday - just couldn't convince NetworkRail to send me data without copying your setup.  
Thanks!

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [4 July 2021 02:48 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/4 "2021-07-04T02:48:43Z")

</div>

hey dave.. very nice!

Interested how you put the date and time in the title?

does the hamburger icon show the navigation menu?

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [4 July 2021 06:26 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/5 "2021-07-04T06:26:07Z")

</div>

Very easy, just put this code in a template node.

```auto
<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadClock();
    }else setTimeout(loadClock, 500)
});

function loadClock(){
    $('#clock').remove();
    var toolbar = $('.md-toolbar-tools');
    
    var div = $('<div/>');
    var p = $('<p/ id="clock">');
    
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div);

    function displayTitle(lh) {
        p.text(lh); 
    }
    
    function upTime() {
        var d = new Date();
        p.text(d.toLocaleString());
    }

    if(document.clockInterval){ 
            clearInterval(document.clockInterval);
            document.clockInterval = null;
    }
        
    document.clockInterval = setInterval(upTime,1000);
}

</script>

```

And added it to site head section...  
 ![Screen Shot 07-04-21 at 07.24 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e710efa00dec8660706ff4349286c34c226a4c4.jpeg)

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [4 July 2021 07:15 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/6 "2021-07-04T07:15:35Z")

</div>

cool!

Im wondering if there is a way with ui control to hide and show the sidebar dynamically, without having a title bar?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 July 2021 07:27 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/7 "2021-07-04T07:27:11Z")

</div>

Here's my home automation dashboard. The automation does not do much, just calculates schedules for some high-consuming devices based on electricity prices and switching them accordingly. And controlling some lights and exhaust ventilator. And of course it alerts on failures and happy events like "sauna is ready" via telegram.  
The dashboard has buttons to control every item also manually. I use them rarely but still needed.

There is quite of CSS tweaks and some custom components.

 ![dashboard-main](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fa78199712176ef87517292aeabc6d15d5bac20f.png)

I don't use top-bar nor the side menu. All the cards are in same size and overall sizes are set in the manner that whole layout arranges into two columns for tablet and single column for phone screen. There is small buttons to switch to the settings page.

 ![dashboard-settings](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbaf909c6509586a192b1b507d35c614f915710c.png)

In this page it is possible to change the rules for schedule calculations, also there is more information about electricity prices so I can view them with and without the taxes added. This page is designed to view in landscape orientation in mobile.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [4 July 2021 07:32 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/8 "2021-07-04T07:32:58Z")

</div>

> [@leftymuller](#):
>
> Im wondering if there is a way with ui control to hide and show the sidebar dynamically, without having a title bar?

There probably is - but I've not explored that.  
I'm sure someone on the Forum will jump-in and offer some suggestions.

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [4 July 2021 07:37 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/9 "2021-07-04T07:37:27Z")

</div>

> [@hotNipi](#):
>
> There is small buttons to switch to the settings page.

Could you please share how to do that? 😃

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 July 2021 07:40 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/10 "2021-07-04T07:40:39Z")

</div>

Sure. It takes to use ui\_control node and with button you feed correctly formatted message with the desired tab name.

```auto
[{"id":"50a81417.0b544c","type":"ui_button","z":"d4742c80.85e4a","name":"settings","group":"c2e13c65.53e8c","order":6,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"fa-cogs","payload":"{\"tab\":\"SETTINGS\"}","payloadType":"json","topic":"","x":690,"y":1320,"wires":[["f72955c3.330ac8"]]},{"id":"f72955c3.330ac8","type":"ui_ui_control","z":"d4742c80.85e4a","name":"settings","x":830,"y":1320,"wires":[[]]},{"id":"c2e13c65.53e8c","type":"ui_group","name":"PÕRANDAKÜTTE BOILER","tab":"ebfa154c.2df0b8","order":8,"disp":false,"width":"9","collapse":false},{"id":"ebfa154c.2df0b8","type":"ui_tab","name":"MAIN","icon":"dashboard","order":1}]

```

There is no legal way to have only the side menu. If you hide top-bar the legal ways to move between tabs will be create dedicated buttons or enable swipe between tabs.

I do answer to your next question in this post to not hijack the thread. It should be held in topic "show the dashboard" and not fall deeply into "how to this or that".  
Please create new thread for deep technical questions. You can link posts from this topic as the reference.

> [@leftymuller](#):
>
> is there anyway you know of to hide and show the side menu with ui control?

No, the ui\_control node does not have anything to drive side menu. What you can probably do is to listen mousemove on some root container and add/remove visibility for side menu according to moue position.

Quick example as proof of concept with zero guarantees it would work fully.

Site settings like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be333590e15c2f06a550304bfeecb21e225ce61f.png)

With the ui\_template node something like this

```auto
<script>
$("md-content").mousemove(function( event ) {
    if($("md-sidenav").hasClass("md-locked-open") && event.pageX > 200){
        $("md-sidenav").removeClass("md-locked-open")
        return
    }else{
        if(event.pageX < 20){
            $("md-sidenav").addClass("md-locked-open")
        }
    }
})
</script>

```

---

<div class="post-metadata">

**Author:** ![leftymuller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leftymuller/32/102326_2.png) [@leftymuller](https://discourse.nodered.org/u/leftymuller)\
**Post date:** [4 July 2021 08:41 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/11 "2021-07-04T08:41:34Z")

</div>

thanks for sharing!

is there anyway you know of to hide and show the side menu with ui control?

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 July 2021 09:16 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/12 "2021-07-04T09:16:14Z")

</div>

Thanks for sharing. Plenty of new ideas 🙂

I utilise the dashboard exclusively from mobile devices. Hence I need to be carefull with what to put on it AND how small it could/should be. Oh yes, I am getting older ... the bigger, the better 😃

 ![Bildschirmfoto 2021-07-04 um 11.14.04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/4660eb9bfd0cf5a539ce9b33357cce6836e5e410.png)

 ![Bildschirmfoto 2021-07-04 um 11.08.15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/247aab36e483e2e7b2b8cbc61cd9fb1ed8c609b7.png)

 ![Bildschirmfoto 2021-07-04 um 11.09.27](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f6de6ec4dfca2176b1c928e8fb2db9cd8097d69.png)

 ![Bildschirmfoto 2021-07-04 um 11.11.58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5fa5b4675bf14fac381ae886918df796a45e14da.png)

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [4 July 2021 23:06 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/13 "2021-07-04T23:06:52Z")

</div>

Tasmota / Shelly / Arduino monitoring station:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a1957ebafae746c6a6a63fa0d40c175ce6238f4.png)

Lighting zones and lighting scene management:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58bb8dd673dac36d2b5b938f8a1f7d5bf391292d.png)

Multiple multisensors applying to lighting zones:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65088a2cf92c8a03cefb20c1f84c989f3a2aa2d3.png)

Ability to delete individual InfluxDB readings:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b7ba9377bf3513af938cfc8966b262ab14c85c9.png)

Data logger:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/01e61ff0a76ce55be583a11a0bef12a350171d8d.png)

Logitech Squeezebox instance control with album art:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cab1bfc3f692dbb6379d72a1f68ed8f754eddb4a.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 July 2021 23:39 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/14 "2021-07-04T23:39:53Z")

</div>

I wasn't going to, but nobody has posted a light theme dashboard.

This is a switch to turn my coffee machine on/off, LEDs for power on/heater on, a countdown timer till it goes off again.

I don't need all the charts, just exploring what data I can acquire about a 50 year old espresso machine.  
The chart data comes from Mariadb.

 ![Untitled 5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16e0f5ca75449b5702be28e65c81549016620c05.jpeg)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 July 2021 00:39 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/15 "2021-07-05T00:39:07Z")

</div>

I’m quite new to NR and all things IOT, but having fun embracing my inner maker and taking over everything in the house 😉

This mostly thanks to users and info found on this forum -

Designed for a wall mounted tablet

Overview - Facial recognition to log in users

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f3e06922aeecc5a9b5c48921d7c8bd9909a4cc7c.jpeg)

SVG floorplan with clickable status icons

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41db9f73b20c9243445d52f5e685254631ab5f41.png)

Mobile friendly master controls for all devices

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8ea6b58face865aa3316fcc1b1912e2f9a10e4cb.jpeg)

Power usage by device etc

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3e99e304db820a05e68dbb7e6649c9e99447b339.png)

CCTV viewer interfaced with DVR (also pops up on alarms etc)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/26e693d90f0c4b2c19b65fd4a04c6b555e4d446f.jpeg)

Intruder Alarms

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/6/e64d85d5a8b571130dd4d33541d7020b9ab77a5c.jpeg)

Device Status

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/56d4973b6031deef82fbab3ff54fce7d9bad0113.png)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [5 July 2021 07:09 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/16 "2021-07-05T07:09:13Z")

</div>

> [@Sean-McG](#):
>
> I’m quite new to NR and all things IOT, but having fun embracing my inner maker and taking over everything in the house

Wooooo - that is impressive, especially as you said you're "quite new to NR".  
Are the dashboards for a property in the UK as I spotted you mentioned a summer house?

I might crib some of your ideas (if you don't mind??) to encourage my IoT students in building creative dashboards for their projects.

---

<div class="post-metadata">

**Author:** ![ajocius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ajocius/32/19024_2.png) [@ajocius](https://discourse.nodered.org/u/ajocius)\
**Post date:** [5 July 2021 07:58 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/17 "2021-07-05T07:58:50Z")

</div>

> [@Sean-McG](#):
>
> Power usage by device etc

Hi, what device's do you use to monitor power usage?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 July 2021 11:28 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/18 "2021-07-05T11:28:28Z")

</div>

Yes I live in Leeds - Summerhouse was built as a Covid project - Hot tub and bar, so I don't need to leave home now !

Feel free to use anything you want, as I said its mostly based upon other peoples work or I would never have got so far with it. (Thanks to those who will recognise their parts )

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 July 2021 11:42 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/19 "2021-07-05T11:42:55Z")

</div>

There are a few actually -

I have an AMS Tsl257-lf Sensor Light-voltage Converter taped to my electricity meter which counts the pluses, connected to wemos D1 mini.  
A few PZEM-004T also connected to wemos D1 minis. [PZEM-0xx power monitor - Tasmota](https://tasmota.github.io/docs/PZEM-0XX/)  
Various energy monitoring plugs also running Tasmota firmware.

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [5 July 2021 12:47 UTC](https://discourse.nodered.org/t/show-us-your-dashboard/47965/20 "2021-07-05T12:47:57Z")

</div>

Hey hotNipi how did you achieve this pushed in or denten in look for your widgets? Can you give me a hint? Really love it!

[Next page](https://discourse.nodered.org/t/show-us-your-dashboard/47965.md?page=2)