OpenEnergyMonitor

Emoncms v3 Dashboard API

The main idea behind the dashboard API is that you can build a dashboard page using html tags with attributes used to control look and behaviour of different widgets.

These html tags are scanned by a javascript/jquery script which places the widgets specified in the locations on the page specifed by the html tags.

This provides a relatively straightforward way to script a dashboard page using the familiarity of html.

Create a dashboard

Once you have created and configured your feeds as desired, go to the main menu and click on 'Dashboard'. The dashboard page will be where your dashboard will be located, when you first startup it will just show the welcome message.

To edit the dashboard click on edit dashboard. This will unfold a text input area with the default welcome html text inside:

1) Creating a dial

Lets say we have a feed called power and we want to create a dial that shows the current value of the power feed.

Enter the following into the dashboard editor:

<h2>Power now</h2>

<div class="dial" feed="power" max="500" units="W" scale="1"></div>

Click save and you should see the following:
 

2) Widget containers

We can put a nice box surround to the widget using the widget container class.

<div class="widget-container-v" >
  <div class="title">Power now</div>
  <div class="dial" feed="power" max="500" units="W" scale="1"></div>
  <br/><br/>
</div>

and make 3 of them:

<div class="widget-container-v" >
  <div class="title">Power now</div>
  <div class="dial" feed="power" max="500" units="W" scale="1"></div>
  <br/><br/>
</div>

<div class="widget-container-v" >
  <div class="title">Power now</div>
  <div class="dial" feed="power" max="500" units="W" scale="1"></div>
  <br/><br/>
</div>

<div class="widget-container-v" >
  <div class="title">Power now</div>
  <div class="dial" feed="power" max="500" units="W" scale="1"></div>
  <br/><br/>
</div>

<span class="kwhd"></span>

<div class="dial" feed="power" max="7000" units="W" scale="1"></div>

<div id="house-graph" class="graph" feed="power"></div>