Mini Dashboard
Experimental !
Although most users will use a full blown Home Automation controller like Domoticz or OpenHAB to control their habitat, it is certainly feasible to control your ESP Easy directly. Using features like rules, globalsync, sendto and sendtohttp, you are able to create a network of ESP Easy nodes to control lots of stuff without a fancy Home Automation controller present. ESP Easy will act as a mini controller.
A new feature has been added (github development as of Aug 8th,2017) to quickly and easily navigate through your list of ESP Easy nodes and view sensor values or even control locally attached devices. We will use SPIFFS to add custom web pages so each ESP Easy device can have it's own dedicated mini dashboard, along with unit navigation controls. Or an entire custom page when needed. Beware that the pages are currently processes in RAM as an entire page so keep things small if you start to upload new web pages (preferred <2kb).
The ESP Easy framework adds the "/dashboard.esp" link handler automatically, and this will show the unit nagivation controls as well as a simple overview of active task values. You can upload a customized "dashboard.esp" HTML file if you want to change the page content (but keep the navigation buttons). Or you can create a page like "customdemo.esp" to fully customize the page content.
Navigation between ESP Easy nodes is based on the ESP Node list and it's dropdown control will automatically display active nodes. But you need to have the UDP protocol set to a certain non-zero port number in Advanced settings.
Navigating through the list of ESP Easy nodes can look like this:
Browsing to http://192.168.0.118/dashboard.esp
Selecting the dropdown control and selecting unit nr 8
Clicking the Off button
Selecting the dropdown control and selecting unit nr 4
We can also use the < and > buttons to cycle through all active nodes.
So what's an *.esp page?
Well it's just plain HTML but ESP Easy will parse these filetypes and substitute task values like we're used to when we configure LCD displays. It will also handle the "cmd=xxx" querystring so you can add buttons to control GPIO pins or start events within the rule engine.
A sample web page for a light control switch:
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:14pt;}
.button {margin:4px; padding:4px 16px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:4px}
</STYLE>
<HTML>
<br><br>
<table>
<tr><td>Light<td><img src="Lamp[Switch#State].png">
<td><a class='button link' href="dashboard.esp?cmd=gpio,12,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,12,0">Off</a>
</HTML>
Notice that it's just plain HTML with the exception of [Switch#State]. That expression might be familiar if you have been using an LCD display or the rules engine.
A sample web page for a level control node:
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:16pt;}
.button {margin:4px; padding:4px 16px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:4px}
</STYLE>
<HTML>
<br><br>
<table>
<tr><td>Set Level<td align='center'>[demo#getLevel]
<td><a class='button link' href="dashboarddemo.esp?cmd=event,valueup">Up</a>
<td><a class='button link' href="dashboarddemo.esp?cmd=event,valuedown">Down</a>
</HTML>
In this case we used [demo#getLevel], where "getLevel" is not a task value but a special command that's supported by the Level Control plugin to retrieve the current threshold value. And you may have noticed that we're sending events to the rule engine when a button is clicked, so we do need some rule logic for this to work:
on valuedown do
if [Demo#getLevel]>7
config,task,demo,setlevel,[Demo#getLevel]-1
endif
endon
on valueup do
if [Demo#getLevel]<23
config,task,demo,setlevel,[Demo#getLevel]+1
endif
endon
Happy experimenting!
