Show us your Dashboard!

[leftymuller]

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

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

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

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

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

this is pretty obvious... power monitoring!

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!

[dynamicdave]

Here's a selection of some of my Dashboards.

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

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

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

The node management panel for my infrared sensors.

Home Energy monitor

And yes, yet another home security system.

[jbudd]

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!

[leftymuller]

hey dave.. very nice!

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

does the hamburger icon show the navigation menu?

[dynamicdave]

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

<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...

[leftymuller]

cool!

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

[hotNipi]

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.

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.

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.

[dynamicdave]

@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.

[leftymuller]

@hotNipi

There is small buttons to switch to the settings page.

Could you please share how to do that?

[hotNipi]

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

[{"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

With the ui_template node something like this

<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>

[leftymuller]

thanks for sharing!

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

[jodelkoenig]

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

[hazymat]

Tasmota / Shelly / Arduino monitoring station:

Lighting zones and lighting scene management:

Multiple multisensors applying to lighting zones:

Ability to delete individual InfluxDB readings:

Data logger:

Logitech Squeezebox instance control with album art:

[jbudd]

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.

[smcgann99]

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

SVG floorplan with clickable status icons

Mobile friendly master controls for all devices

Power usage by device etc

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

Intruder Alarms

Device Status

[dynamicdave]

@smcgann99

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.

[ajocius]

@smcgann99

Power usage by device etc

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

[smcgann99]

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 )

[smcgann99]

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
Various energy monitoring plugs also running Tasmota firmware.

[sfedo]

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!