Archived Forum

Nice layout

 bit more playing

version 3

version 4

very nice layout .

Lots of bits added

Steve - Excellent layout!  

Did you use all of the out-of-the-box graphs & dials?  Or did you customize things?

Hi Jon

Most is out the box I have add 2 custom widgets that a based on jgauge out the box widget and edited with help from firefox7518 (https://openenergymonitor.org/emon/node/11619)

They are easy to add you copy the jgaugegrid and jgaugesolar to the (widget.zip) /var/www/emoncms/Modules/dashboard/widget

I also had to edit the /var/www/emoncms/Modules/dashboard/Views/js/designer.js (line 35)

'snap': function(pos) {return Math.round(pos/5)*5;}, (https://openenergymonitor.org/emon/node/10922)

This adds finer grid snap control

I also edit the /var/www/emoncms/Modules/vis/visualisations/realtime.php (line 97)

$.plot(graph,[{data: data, color: "#43b6ff", lines: { fill: true }}], (https://openenergymonitor.org/emon/node/9992)

This changes he realtime graphs colour from  yellow/brown colour to blue

Steve

Really nice Dashboard Steve. It deserves the description "Dashboard" :-)

Yes, awesome! Good work. 

Update 5.1

Add Real Time Stack

Add Solar New Custom Stack

Steve - I am attempting to create a similar, though much smaller, version of your dashboard.  I am curious about the purple numbers under the dials.  What do they represent and how is it calculated?  I am guessing it is a real time cost based on a kWh.  Same question for the purple numbers in the Real Time graphs.  Also would you mind posting a higher resolution dashboard?  I think the high compression wiped out the smaller numbers and letters.

Hi Jon

Sorry for the late reply i have attached a zip file with a larger image on the dashboard

The numbers under the dials are the costs or pay i am charge/make per kWh they are calculated with a virtual feed like follows

The  numbers on the real-time graphs are the costs or pay in real-time they are also calculated with a virtual feed like follows

You can then add the result to a feed value widget

If you need any more help just lrt me no :)

Steve

Update v 6.0

Add Led to show status of power import/export using Node-Red flow 

Add Node-Red flow for Nest Thermostat API

Add Nest widget for Ambient Temperature,Target Temperature & Humidity

Add Nest Real Time Graph for Ambient Temperature,Target Temperature & Humidity

To Do:

Need to find way to pass status string from Nest API to dashboard (Any Help Would Be Good ;-) )

Dashboard

Nest widget

Real-Time Temp

Node-Red Nest Flow

Node-Red LED Flow

Thanks for looking more to come :-s

Steve

Hi All

if anyone would like to see the dashboard up and running see link below

https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Steve

HI Steve

Cool thing with the NEST Thermostats. One thing. Looking at your dashbord externally you have some .img pointing to internal IP addresses like http://192.168.xx.xx/emoncms/Theme/basic/solar-energy-llight-bulb.png 

It's not showing up because of that.

I also used Node-Red recently for some of the things like 1wire Temp, light and humidity sensors. Node-Red has a node which connects direclty to OWFS :-)

Hi firefox,

Thanks for letting me know about the images. Should be fixed now  :)

Steve

Hi All

SSL fixed

Steve

Update v 6.1

Add emonTH Temperature and Humidity to get external Temperature and Humidity

Add feedvalue below Nest widget for external Temperature and Humidity

Add external Temperature and Humidity to Real Time Graph

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Steve

Update V 7.0 (Possibly Final Running Out of Ideas)

Add graphics to real time graphs

Add Water meter using pulse out from meter to pulse input on Emonth (With a lot of help from Glyn guide to follow as promised)

Add Dial for liters per day

Add bar graph for liters over time

Add zoom for Water cost over time

Add water graphics

Add feed value for total liters use

Add time & date widget

To Do:

Need to find way to pass status string from Nest API to dashboard

Possible things that I may add in the future

I’m looking into buying a powervault.  (http://www.powervault.co.uk/) Not sure how well this will interface with Emoncms, but we may find out ;-)

I may look into creating smaller dashboards for each utility type e.g. power, gas & water

I’m happy the do a guide for the Nest API interface if there is an interest, please let me know.

If anyone has any suggestions on anything that they would like to see added or changed, feedback is welcome. (Good or Bad)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

Dashboard V 7.0

Water Meter Dashboard

There are some really nice touches on your dashboard!

If you want some ideas, you can take a look at my Dashboard @ http://vpn.linemanhut.co.uk:8080/emoncms/dashboard/view&id=1

On my todo list is...

• Create a water widget that overlays the liters used over a picture of a water drop.
• Ditto for the gas but use a flame picture.
• Overlay text on the grid meter like yourself to indicate Import & Export.
• LED's to indicate to the mrs when to switch on the washing machine/dishwasher/tumble drier.
• 7 & 30 day usage
• Tidy up the raw text info into something more pleasant on the eyes.
• Add your nest widget, once you have written a guide :)

 If you were to install a storage type of system, my recommendation would be to install a CT on the storage unit and make use of the positive and negative values, IE one will be storing energy and the other would be using energy from the battery instead of the grid. IMHO save your money for the time being as if you looked at the potential money saved per full charge/discharge, times that by the maximum amount of cycles on the batteries, I doubt you'd save money.

Kind Regards

Dave

Update V7.1

Small update to Nest widget

Add Heating Status as text e.g. off or heating

Add Small LED (With some help from code on M0n0wall Dashboard)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

Nest widget

Node Red Flow

HTML

<html>
<body>
<style>
body {
    font-family:Impact;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    color:#3333cc;
}
</style>

 <p id="Nest"></p>

 <script>
 
 var myVar = setInterval(myTimer, 1000);
 function myTimer() {
     var txtFile = new XMLHttpRequest();
     txtFile.open("GET", "/stat", true);
     txtFile.send();
     txtFile.onreadystatechange = function() {
        if (txtFile.readyState == 4 && txtFile.status == 200)     
          if (txtFile.responseText != "")
             document.getElementById("Nest").innerHTML = txtFile.responseText;
     }
 }
 
</script>
</body>

</html>

Hi All

Node-Red SSL fixed

Add Heating Status as text e.g. off or heating (Now display) 

Steve

Very nice work, bookmarked the page so I can do something similar once my system is calibrated.

Paul

Update V7.2

Add System Up Time widget

Add time and date widget getting info from local system

Remove third party time and date (Stopped work after SSL installed)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

System Up Time widget

Time and date widget 

Update v 7.3

Add System Information to dashboard

Add System Up Time widget

Add Emonpi Memory Usage bar

Add Emonpi CPU Usage bar

Add Emonpi CPU Temp

Other small changes to dashboard layout (Cosmetic)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

System Information

System Information Node Red Flow

System Up Time Node Red Flow

Steve - just wanted to say "Thank you!" for the widgets, snap changes, code for graph colors, and virtual feed calcs!  I got most of it installed.  I am still trying to understand how an emonPi Update (and its git pull) might update the designer.js and the realtime.php files and any wipe out any changes I make.  Thanks again!  Jon

Hi just added a Water Meter Setup Guide for anyone needing help setting this up

https://openenergymonitor.org/emon/node/12537

Steve

Hi jon

Glad to help i am going to be adding some Guide for setting some of the things in this post up with more details just done the first one here

Water Meter Guide 

https://openenergymonitor.org/emon/node/12537

Steve

Hello,

Can I export my dashboard in a web page, including widgets ? how can I do?

Thank you

Gerardo

Hi Gerardo

I'm not sure what you are trying to do. Are you asking how to backup your dashboard and settings?

Steve

I want to make a copy of a dashboard on my personal site, without going through emocms.

Hi Gerardo

I can’t think of any way to do this you maybe better ask in the Questions and support part of the forum for help with this I do know that you can add individual graphs to your site using Visualization once you have created your Visualization just copy the code that I have highlighted in the image in to the html code on your site 

Example Code from my site

<iframe style="width:580px; height:400px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://smitt1979.i234.me/emoncms/vis/bargraph?feedid=19&colour=edc240&interval=86400&dp=1&scale=1&delta=0&mode=0&embed=1"></iframe>

Sorry I can’t be more help

Steve

Update v 7.4

Added custom waterzoom graph (Shows Liters not kWh)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

WaterZoom

​

Update v 7.5

Added custom Network graph

Added MySQL Status LED 

Added Nest Online Status LED

Other small changes to dashboard layout (Cosmetic)

Live dashboard https://smitt1979.i234.me/emoncms/dashboard/view&id=13

Thanks for looking,

Steve

MySQL Status LED

Nest Status LED

Is this the MYSQL running for your emonCMS? Because when the MYSQL server is down, there is also now EmonCMS running :-) So in other words you will never something different than a green LED :-) If it is a different MYSQL then of course it's working.

Andi