Custom WebUI
Moderators: grovkillen, Stuntteam, TD-er
Custom WebUI
Hello folks
Started to play with ESP Easy few days ago. Great project, but I want to mention few things I don't like...
1.WebUi lack of a simple toggle button to command a relay (output gpio).Or two buttons ON and OFF,optional.Very frustrating,only by written command. Search web customization, but My device not have "Custom CSS" option (latest release build), I don't know why...Better idea to have a dashboard with input values and output buttons for driving relays or pwm (like tasmota have)
2.Twisted my mind to define a switch as an input device (normal,pushbutton) or as an output ( relay or pwm).They are under "Switch input - Switch" option. Should be an different option, some "output-switch", less confusing...
3.Refresh rate of values on device page is depending of at least one device with "Data Acquisition" defined. Suppose I have a switch input defined,data acquisition set to 1 sec, the result weblog is flooded with "
3168727 : Debug : EVENT: switch#State=0 Processing time:30 milliSeconds " Thank you
Started to play with ESP Easy few days ago. Great project, but I want to mention few things I don't like...
1.WebUi lack of a simple toggle button to command a relay (output gpio).Or two buttons ON and OFF,optional.Very frustrating,only by written command. Search web customization, but My device not have "Custom CSS" option (latest release build), I don't know why...Better idea to have a dashboard with input values and output buttons for driving relays or pwm (like tasmota have)
2.Twisted my mind to define a switch as an input device (normal,pushbutton) or as an output ( relay or pwm).They are under "Switch input - Switch" option. Should be an different option, some "output-switch", less confusing...
3.Refresh rate of values on device page is depending of at least one device with "Data Acquisition" defined. Suppose I have a switch input defined,data acquisition set to 1 sec, the result weblog is flooded with "
3168727 : Debug : EVENT: switch#State=0 Processing time:30 milliSeconds " Thank you
Re: Custom WebUI
Custom dashboard, something like this you mean?
https://www.letscontrolit.com/wiki/inde ... _Dashboard
About the page refresh, I do agree.
It gets even worse if you only have tasks defined which do not have an interval option, like MQTT import.
I will add a global parameter to tune the refresh rate of that page.
The switch stuff is a known issue, and we plan on split the switch plugin into several separate plugins to make it much more intuitive.
Right now you can control the GPIO output state via rules: https://espeasy.readthedocs.io/en/lates ... ernal-gpio
You don't mention it, but if you plan on using switches and relais via Domoticz, please have a look here: https://espeasy.readthedocs.io/en/lates ... light=gpio
That's a known working way to get it to work with Domoticz.
It also describes how to setup a switch task as a relay (output).
https://www.letscontrolit.com/wiki/inde ... _Dashboard
About the page refresh, I do agree.
It gets even worse if you only have tasks defined which do not have an interval option, like MQTT import.
I will add a global parameter to tune the refresh rate of that page.
The switch stuff is a known issue, and we plan on split the switch plugin into several separate plugins to make it much more intuitive.
Right now you can control the GPIO output state via rules: https://espeasy.readthedocs.io/en/lates ... ernal-gpio
You don't mention it, but if you plan on using switches and relais via Domoticz, please have a look here: https://espeasy.readthedocs.io/en/lates ... light=gpio
That's a known working way to get it to work with Domoticz.
It also describes how to setup a switch task as a relay (output).
Re: Custom WebUI
Yes ,I read the Mini Dashboard, "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)."
How to add "dashboard.esp" ?
Cannot enable "custom css" also.on my device... A simple dashboard is mandatory, see tasmota way: Another issue for me is to replace those index numbers in log with time&date... Thank you, let's focus on minidashboard...
How to add "dashboard.esp" ?
Cannot enable "custom css" also.on my device... A simple dashboard is mandatory, see tasmota way: Another issue for me is to replace those index numbers in log with time&date... Thank you, let's focus on minidashboard...
Re: Custom WebUI
You can upload the custom CSS and dashboard file to the file system (if there's enough room, which may be an issue on 1M units)
For a custom CSS, you should rename it to esp.css before uploading to the ESP.
For a custom CSS, you should rename it to esp.css before uploading to the ESP.
Re: Custom WebUI
Here the test's with a custom dashboard.esp (uploaded to the filesystem) isn't work, too.
Has someone a simple example ? I need a simple button to fire a event when I pressed him.
Has someone a simple example ? I need a simple button to fire a event when I pressed him.
Re: Custom WebUI
I have copy the text,renamed "custom.css" and uploaded to device. Device is 4M . But I have not the button "enable css" on tools/advanced
Re: Custom WebUI
You must name it "esp.css"
Then it will load that file every time you need the CSS, so it is active immediately.
Then it will load that file every time you need the CSS, so it is active immediately.
Re: Custom WebUI
So, copied text from wiki,
Then, something happen't, like this:
Create new text decument, renamed esp.css and upload to deviceThen, something happen't, like this:
Re: Custom WebUI
What you copied was HTML code, not CSS.
If you need to style the ESPEasy UI, you should make a custom CSS file and name it "esp.css"
What you posted was text for the dashboard.esp file
If you need to style the ESPEasy UI, you should make a custom CSS file and name it "esp.css"
What you posted was text for the dashboard.esp file
Re: Custom WebUI
Custom CSS file from here :https://www.letscontrolit.com/wiki/inde ... tomization
Then renamed to esp.css
* {
font-family: verdana,sans-serif;
font-size: 13px;
}
h1 {
color: black;
font-size: 16pt;
}
h1::after {
content: " (Powersocket Livingroom)"; /* Give your Device an additional selfexplaing name after the topmost headline */
}
h6 {
color: black;
font-size: 10pt;
text-align: center;
}
.button-menu {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
color: #ffffff;
padding: 3px 10px 3px 10px;
border: solid #1f628d 1px;
text-decoration: none;
margin:0px 2px;
}
.button-menu:hover {
background: #8fd4ff;
background-image: -webkit-linear-gradient(top, #8fd4ff, #3498db);
background-image: -moz-linear-gradient(top, #8fd4ff, #3498db);
background-image: -ms-linear-gradient(top, #8fd4ff, #3498db);
background-image: -o-linear-gradient(top, #8fd4ff, #3498db);
background-image: linear-gradient(to bottom, #8fd4ff, #3498db);
text-decoration: none;
margin:0px 2px;
}
.button-link {
border: 1px solid;
border-radius: 5px;
background:ButtonFace;
color:ButtonText;
border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
padding: 5px 15px;
text-decoration: none;
}
.button-link:hover {
background-color:Highlight;
color:HighlightText;
}
.button-link:active {
border-color:ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}
th {
background-color: #369;
color: #ffffff;
padding: 10px;
}
td {
padding: 7px;
}
table {
color: black;
border-collapse:collapse;
}
.div_l {
float: left;
}
.div_r {
background-color: #080;
border-radius: 7px;
color: white;
float: right;
margin: 2px;
padding: 1px 10px;
}
.div_br {
clear: both;
}
Then renamed to esp.css
* {
font-family: verdana,sans-serif;
font-size: 13px;
}
h1 {
color: black;
font-size: 16pt;
}
h1::after {
content: " (Powersocket Livingroom)"; /* Give your Device an additional selfexplaing name after the topmost headline */
}
h6 {
color: black;
font-size: 10pt;
text-align: center;
}
.button-menu {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
color: #ffffff;
padding: 3px 10px 3px 10px;
border: solid #1f628d 1px;
text-decoration: none;
margin:0px 2px;
}
.button-menu:hover {
background: #8fd4ff;
background-image: -webkit-linear-gradient(top, #8fd4ff, #3498db);
background-image: -moz-linear-gradient(top, #8fd4ff, #3498db);
background-image: -ms-linear-gradient(top, #8fd4ff, #3498db);
background-image: -o-linear-gradient(top, #8fd4ff, #3498db);
background-image: linear-gradient(to bottom, #8fd4ff, #3498db);
text-decoration: none;
margin:0px 2px;
}
.button-link {
border: 1px solid;
border-radius: 5px;
background:ButtonFace;
color:ButtonText;
border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
padding: 5px 15px;
text-decoration: none;
}
.button-link:hover {
background-color:Highlight;
color:HighlightText;
}
.button-link:active {
border-color:ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}
th {
background-color: #369;
color: #ffffff;
padding: 10px;
}
td {
padding: 7px;
}
table {
color: black;
border-collapse:collapse;
}
.div_l {
float: left;
}
.div_r {
background-color: #080;
border-radius: 7px;
color: white;
float: right;
margin: 2px;
padding: 1px 10px;
}
.div_br {
clear: both;
}
Re: Custom WebUI
Then copy/paste this from here https://www.letscontrolit.com/wiki/inde ... tomization :
<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>
renamed text document dashboard.esp
Is that correct? Then modify text gpio,device name etc accordingly...(actually before upload)
<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>
renamed text document dashboard.esp
Is that correct? Then modify text gpio,device name etc accordingly...(actually before upload)
Last edited by bonti69 on 08 Apr 2021, 15:00, edited 1 time in total.
Re: Custom WebUI
That part is indeed CSS information, but I wonder if you realize what both files entail.
dashboard.esp is a file which should be used to fetch as an URL.
For example http://my_ESPEasy_IP/dashboard.esp
The esp.css is a global (!!!) custom CSS option, which you can use to customize the entire ESPEasy web UI, not just the dashboard part.
The dashboard.esp file is actually something like an html file, which can also contain its own CSS in the <style> ... </style> tags and that will override the global CSS.
You can also link to another css file which you may store on the ESP.
TL;DR
- dashboard.esp should contain a HTML page as you showed in your custom text.png in a previous post.
- esp.css can be used to override all (!!) CSS styling of all ESPEasy web UI pages.
dashboard.esp is a file which should be used to fetch as an URL.
For example http://my_ESPEasy_IP/dashboard.esp
The esp.css is a global (!!!) custom CSS option, which you can use to customize the entire ESPEasy web UI, not just the dashboard part.
The dashboard.esp file is actually something like an html file, which can also contain its own CSS in the <style> ... </style> tags and that will override the global CSS.
You can also link to another css file which you may store on the ESP.
TL;DR
- dashboard.esp should contain a HTML page as you showed in your custom text.png in a previous post.
- esp.css can be used to override all (!!) CSS styling of all ESPEasy web UI pages.
Re: Custom WebUI
Sorry, I don't have the skill to manage that...
At the moment I need a step by step solution...some monkey method
Do you have a dashboard.esp and/or esp.css file ready to upload ? Where to start from?
So, I don't need css file. It's ok the default
Uploading dashboard.esp , access ip/dashboard.esp and bingo:
Just not looking very good...
At the moment I need a step by step solution...some monkey method
Do you have a dashboard.esp and/or esp.css file ready to upload ? Where to start from?
So, I don't need css file. It's ok the default
Uploading dashboard.esp , access ip/dashboard.esp and bingo:
Just not looking very good...
Last edited by bonti69 on 08 Apr 2021, 22:21, edited 1 time in total.
Re: Custom WebUI
Sorry I don't.
Maybe others have an example from where you can continue?
Maybe someone also posted one before here on the forum?
Maybe others have an example from where you can continue?
Maybe someone also posted one before here on the forum?
Re: Custom WebUI
One step forward
Upload two png files : They are named : icon0.png and icon1.png
Then copy this text into a file new.txt ,which you can edit with notepad, and which will be the file "dashboard.esp " , also uploaded to esp device :
.............................................
<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="icon[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,0">Off</a>
</HTML>
.............................................
[sck_gpio14#State] it's the state of a device,"Switch input - Switch" type (funny name for an output) on gpio14, name=sck_gpio14, value=state After those three files beeing uploaded,in Tools/File browser ,click on the dashboard.esp ,a new page is open like that:
It's a simple software switch to command gpio14 on/off ,the icons change to green when off ,red when on.
When it's also a mechanical switch commanding gpio14, the dashboard.esp does not follow the real state of gpio14, the web page is dormant, needs some kind of refresh or something more sophisticated...
Just a small beginning...coming soon
For a light bulb: edit of course " icon[sck_gpio14#State].png" to "lightbulb[sck_gpio14#State].png "
.......................................
<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="lightbulb[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,0">Off</a>
</HTML>
...............................................
Dashboard with red/green icon and one TOGGLE button :
.................................................
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:14pt;}
.button {margin:4px; padding:4px 32px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:4px}
</STYLE>
<HTML>
<br><br>
<table>
<tr><td>Light<td><img src="icon[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=GPIOtoggle,14">TOGGLE</a>
</HTML>
...............................................................
Something like that:
Upload two png files : They are named : icon0.png and icon1.png
Then copy this text into a file new.txt ,which you can edit with notepad, and which will be the file "dashboard.esp " , also uploaded to esp device :
.............................................
<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="icon[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,0">Off</a>
</HTML>
.............................................
[sck_gpio14#State] it's the state of a device,"Switch input - Switch" type (funny name for an output) on gpio14, name=sck_gpio14, value=state After those three files beeing uploaded,in Tools/File browser ,click on the dashboard.esp ,a new page is open like that:
It's a simple software switch to command gpio14 on/off ,the icons change to green when off ,red when on.
When it's also a mechanical switch commanding gpio14, the dashboard.esp does not follow the real state of gpio14, the web page is dormant, needs some kind of refresh or something more sophisticated...
Just a small beginning...coming soon
For a light bulb: edit of course " icon[sck_gpio14#State].png" to "lightbulb[sck_gpio14#State].png "
.......................................
<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="lightbulb[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,14,0">Off</a>
</HTML>
...............................................
Dashboard with red/green icon and one TOGGLE button :
.................................................
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:14pt;}
.button {margin:4px; padding:4px 32px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:4px}
</STYLE>
<HTML>
<br><br>
<table>
<tr><td>Light<td><img src="icon[sck_gpio14#State].png">
<td><a class='button link' href="dashboard.esp?cmd=GPIOtoggle,14">TOGGLE</a>
</HTML>
...............................................................
Something like that:
Re: Custom WebUI
Next step
How to display some task#value on that mini dashboard.One shot or with automatic refresh in browser.Should be a lot easier than fetching data from another device via UDP , see this: viewtopic.php?t=3877. Needs some Html programmers,entry level...
Same wish here: viewtopic.php?t=8065
How to display some task#value on that mini dashboard.One shot or with automatic refresh in browser.Should be a lot easier than fetching data from another device via UDP , see this: viewtopic.php?t=3877. Needs some Html programmers,entry level...
Same wish here: viewtopic.php?t=8065
Re: Custom WebUI
Please also have a look at the JavaScript used in the "Devices" tab of the current web UI.
That may help you a lot I guess.
That may help you a lot I guess.
Re: Custom WebUI
maybe somnething like this helps:
Code: Select all
<head>
<script onload="setInterval()">
setInterval (async function() {
response = await fetch("/json?view=sensorupdate");
myJson = await response.json();
tempVar = myJson.Sensors[1].TaskValues[0].Value;
document.getElementById("tempId").innerHTML = tempVar;
},1000);
</script>
Re: Custom WebUI
Create a file survey.esp starting from a text file survey.txt, using notepad as editor.
......................................................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td>Relay</td>
<td>[switch#state]</td>
</tr>
<tr>
<td>Temperature</td>
<td>[bme280#temp]</td>
</tr>
</tbody>
</table>
<p>Needs improvement</p>
......................................................
Upload survey.esp and open . some colours...................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Relay</span></td>
<td style="text-align: center;">[switch#state]</td>
</tr>
<tr>
<td><span style="color: #0000ff;">Temperature</span></td>
<td style="text-align: center;">19</td>
</tr>
</tbody>
</table>
................................................. with refresh button........................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Relay</span></td>
<td style="text-align: center;">[switch#state]</td>
</tr>
<tr>
<td><span style="color: #0000ff;">Temperature</span></td>
<td style="text-align: center;">19</td>
</tr>
</tbody>
</table>
<form action="">
<button type="submit">Refresh</button>
</form>
<p>Needs improvement</p>
.......................................................
......................................................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td>Relay</td>
<td>[switch#state]</td>
</tr>
<tr>
<td>Temperature</td>
<td>[bme280#temp]</td>
</tr>
</tbody>
</table>
<p>Needs improvement</p>
......................................................
Upload survey.esp and open . some colours...................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Relay</span></td>
<td style="text-align: center;">[switch#state]</td>
</tr>
<tr>
<td><span style="color: #0000ff;">Temperature</span></td>
<td style="text-align: center;">19</td>
</tr>
</tbody>
</table>
................................................. with refresh button........................
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Relay</span></td>
<td style="text-align: center;">[switch#state]</td>
</tr>
<tr>
<td><span style="color: #0000ff;">Temperature</span></td>
<td style="text-align: center;">19</td>
</tr>
</tbody>
</table>
<form action="">
<button type="submit">Refresh</button>
</form>
<p>Needs improvement</p>
.......................................................
Re: Custom WebUI
One more tip for posts here.
If you have some code stuff, you can place them inside [ code ] and [ / code ] tages (without the spaces, or else it would be parsed by the forum software)
The begin tag also supports a hint for syntax highlighting like "html" or "css" like this: [ code = html ] (without the spaces)
You then get something like this:
Edit:
Hmm apparently the syntax highlighting has been removed in recent phpBB forum updates... but the code-tag still works
If you have some code stuff, you can place them inside [ code ] and [ / code ] tages (without the spaces, or else it would be parsed by the forum software)
The begin tag also supports a hint for syntax highlighting like "html" or "css" like this: [ code = html ] (without the spaces)
You then get something like this:
Code: Select all
<table>
<tbody>
<tr>
<td><strong>Device</strong></td>
<td><strong>Value</strong></td>
</tr>
<tr>
<td>Relay</td>
<td>[switch#state]</td>
</tr>
<tr>
<td>Temperature</td>
<td>[bme280#temp]</td>
</tr>
</tbody>
</table>
<p>Needs improvement</p>
Hmm apparently the syntax highlighting has been removed in recent phpBB forum updates... but the code-tag still works
Re: Custom WebUI
Enhanced minidashboard with control on/off of a relay connected to gpio5 and monitoring state of switch input digitalinput#custom2 and temperature sensor Temp1#ds1fast
with refresh
with refresh
Code: Select all
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:14pt;}
.button {margin:4px; padding:4px 32px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:4px}
</STYLE>
<HTML>
<br><br>
<h1><strong>[[[ L I G H T ]]]</strong></h1>
<p><img src="icon[output0#out0].png"></p>
<table>
<tr>
<td><a class='button link' href="dashboard.esp?cmd=gpio,5,1">On</a>
<td><a class='button link' href="dashboard.esp?cmd=gpio,5,0">Off</a>
</tr>
<table>
<tr>
<td><strong> Device </strong></td>
<td><strong> Value </strong></td>
[ code ]
</tr>
<tr>
<td><span style="color: #ff0000;">Digital input </span></td>
<td style="text-align: center;">[digitalinput#custom2]</td>
</tr>
<tr>
<td><span style="color: #0000ff;">Bedroom</span></td>
<td style="text-align: center;">[Temp1#ds1fast]</td>
</tr>
</tbody>
</table>
<form action="">
<button type="submit">Refresh</button>
</form>
</HTML>
[/ code]
[attachment=3]icon0.png[/attachment][attachment=2]icon1.png[/attachment]
[attachment=1]devices2.png[/attachment][attachment=0]onoff.png[/attachment]
- Attachments
-
- onoff.png (32.66 KiB) Viewed 17673 times
-
- devices2.png (74.76 KiB) Viewed 17675 times
-
- icon1.png (7.43 KiB) Viewed 17675 times
-
- icon0.png (7.62 KiB) Viewed 17675 times
Re: Custom WebUI
Yes, could be a solution but it's over my head...maybe you could do it from one real sensor,let's say "sensorone" with value "tempone" refresh 1sec...after that I'll try to expand myselfingoiot wrote: ↑09 Apr 2021, 00:15 maybe somnething like this helps:
Code: Select all
<head> <script onload="setInterval()"> setInterval (async function() { response = await fetch("/json?view=sensorupdate"); myJson = await response.json(); tempVar = myJson.Sensors[1].TaskValues[0].Value; document.getElementById("tempId").innerHTML = tempVar; },1000); </script>
Last edited by bonti69 on 09 Apr 2021, 16:36, edited 1 time in total.
Re: Custom WebUI
Working solution
How to make a small dashboard- step by step
Starting from an ESPEasy device with two ouputs,RELAY [output0#out0]on gpio5 and SWITCH [out1#custom4] on gpio15, one temperature sensor [Temp1#ds1fast] and one digital input [digitalinput#custom2], does not matter the gpio number. Note that [switch#state] is user defined,as they were defined when added in "Device " tab.Yours will be different ,so you need to replace in dashboard.txt before upload...be careful
This way looks mine: We need 4 small icons ,have to be uploaded in Tools/File browser: You can choose another icons from internet,as you wish, just keep the names ,in order to match with html script, size aprox. 150x150 pixels.Observe the correspondence "lightbulb[out1#custom4].png" where "out1#custom4" could be 0 or 1, so the page will load lightbulb1.png or lightbulb0.png !
With notepad,copy the code below, copy/ paste in dashboard.txt,edit [device name#value] with yours , then rename the file dashboard.esp.
After that,upload the dashboard.esp to espeasy device via Tools/File.
Click on dashboard.esp will open a page like that: Voila, we have a customized dashboard to control the outputs and read the inputs.
The code:
In code, you can edit LIGHT and RELAY as you wish, "Digital input","Bedroom" as well...just take care at [output0#out0],[out1#custom4] [digitalinput#custom2] [Temp1#ds1fast] to match with the [devicename#devicevalue] and of course modify the gpio of output command (href="dashboard.esp?cmd=gpio,15,0")
Well, on Tasmota when you create an output automatically a toggle buton is created,or a slider for pwm, and sensors readings are on main page after they are defined...State of the art would be on espeasy a "dashboard creator" ,a page where you can choose what you want to see in Minidashboard, by tick on/off accordingly...
https://www.youtube.com/watch?v=4FG-106Opxg
How to make a small dashboard- step by step
Starting from an ESPEasy device with two ouputs,RELAY [output0#out0]on gpio5 and SWITCH [out1#custom4] on gpio15, one temperature sensor [Temp1#ds1fast] and one digital input [digitalinput#custom2], does not matter the gpio number. Note that [switch#state] is user defined,as they were defined when added in "Device " tab.Yours will be different ,so you need to replace in dashboard.txt before upload...be careful
This way looks mine: We need 4 small icons ,have to be uploaded in Tools/File browser: You can choose another icons from internet,as you wish, just keep the names ,in order to match with html script, size aprox. 150x150 pixels.Observe the correspondence "lightbulb[out1#custom4].png" where "out1#custom4" could be 0 or 1, so the page will load lightbulb1.png or lightbulb0.png !
With notepad,copy the code below, copy/ paste in dashboard.txt,edit [device name#value] with yours , then rename the file dashboard.esp.
After that,upload the dashboard.esp to espeasy device via Tools/File.
Click on dashboard.esp will open a page like that: Voila, we have a customized dashboard to control the outputs and read the inputs.
The code:
Code: Select all
<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>
<table style=" margin-left:30px;">
<tbody>
<tr>
<td>
<h2><strong>RELAY</strong></h2>
</td>
<td><img src="icon[output0#out0].png" /></td>
<td><a class='button link' href="dashboard.esp?cmd=gpio,5,1">On</a></td>
<td><a class='button link' href="dashboard.esp?cmd=gpio,5,0">Off</a></td>
</tr>
<tr>
<td>
<h2><strong>LIGHT</strong></h2>
</td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="lightbulb[out1#custom4].png" /></td>
<td><a class='button link' href="dashboard.esp?cmd=gpio,15,1">On</a></td>
<td><a class='button link' href="dashboard.esp?cmd=gpio,15,0">Off</a></td>
</tr>
</tbody>
</table>
<br>
<table style=" margin-left:100px;">
<tbody>
<tr>
<td><strong> Device </strong></td>
<td style="text-align: center;"><strong> Value </strong></td>
</tr>
<tr>
<td>Digital input</td>
<td style="text-align: center;"><span style="color: #0000ff;">[digitalinput#custom2]</span></td>
</tr>
<tr>
<td>Bedroom</td>
<td style="text-align: center;"><span style="color: #ff0000;">[Temp1#ds1fast]</span></td>
</tr>
</tbody>
</table>
<form action="">
<button type="submit">Refresh</button>
</form>
Well, on Tasmota when you create an output automatically a toggle buton is created,or a slider for pwm, and sensors readings are on main page after they are defined...State of the art would be on espeasy a "dashboard creator" ,a page where you can choose what you want to see in Minidashboard, by tick on/off accordingly...
https://www.youtube.com/watch?v=4FG-106Opxg
Last edited by bonti69 on 09 Apr 2021, 23:53, edited 1 time in total.
Re: Custom WebUI
I noticed a few things during my test with a custom dashboard:
The device values like [task#value] are only replaced in the html/css-code, if the website has the extension '.esp'. If I renamed it to *.html it didn't work.
The <style>-tag must enclosed with a <head>-tag, to work with android-webview browsers. As long as the <head>-tag is missing, the source code of the *.esp-page is displayed.
Some more tests on the weekend...
The device values like [task#value] are only replaced in the html/css-code, if the website has the extension '.esp'. If I renamed it to *.html it didn't work.
The <style>-tag must enclosed with a <head>-tag, to work with android-webview browsers. As long as the <head>-tag is missing, the source code of the *.esp-page is displayed.
Some more tests on the weekend...
Re: Custom WebUI
Next step is to implement some mechanism to update the icons status if the outputs changes state, driven by another command. Autorefresh is not a good idea,consuming resources...wasting network traffic etc. Some push mechanism? Maybe not worthing, use mqtt instead...
Re: Custom WebUI
Not sure how you can implement a MQTT client to run in the browser.
Anyhow you must think of what you want to display. (state as known on the ESP or a derived state read from MQTT)
I guess polling using JavaScript, like how it is done on the Devices tab in the web UI is still the simplest to do.
You can also query a smaller subset as described here: https://espeasy.readthedocs.io/en/lates ... =json#json
Nice to see you getting enthusiastic and really learning new stuff
Anyhow you must think of what you want to display. (state as known on the ESP or a derived state read from MQTT)
I guess polling using JavaScript, like how it is done on the Devices tab in the web UI is still the simplest to do.
You can also query a smaller subset as described here: https://espeasy.readthedocs.io/en/lates ... =json#json
Nice to see you getting enthusiastic and really learning new stuff
Re: Custom WebUI
I meant using ONLY mqtt via subscription/publish. Making a large dashboard,with lot of icons,requests and top of all ,periodically refreshing, will burden the device and makes process unreliable. After all, because of limited resources ,was implemented mqtt.The problem for me is limited knowledge on mqtt,html edit or javascript.I had a look on source of "device" page, interesting and very useful,with a little effort from a good programmer,can be upgraded to a mix of setting page and dashboard.Maybe in the future,sometime...I have an automation device,made in poland,and they have the option to edit the dashboard, the stuff you want to see for monitoring.
Keep on Walking
In Input page, you can tick on/off [show label], meaning that input will show in status page. The status page can be also customized by drag&drop so you can arrange the icons at your desire:
Learning together, one from eachother...I hope in the future release the main page of ESP Easy will be the DASHBOARD, a little enhanced "Device" page.One last request: Make somehow possible to move up/down the device in 12 list row, maybe by changing Task number, or drag&drop. Or some option to copy/paste task.Then delete and reorder.Keep on Walking
Re: Custom WebUI
First of all split "Switch input - Switch" in "Switch input" and "Switch output", then add a new column, "Toggle" -like Tasmota -, where will be the button with hover command on/off and if "output switch"=pwm, a slider for pwm ratio...
Fast & furious, minimal derange,one weekend job...
Fast & furious, minimal derange,one weekend job...
Last edited by bonti69 on 09 Apr 2021, 22:05, edited 4 times in total.
Re: Custom WebUI
RpiEasy (ESPEasy for the Raspberry Pi) has those buttons (actually to "run" a task) next to the "Edit" buttons.
I think those are quite plugin specific for what is desired. Some could use a 'toggle' button, some a "run task" and maybe some other plugins could use a "reset" or "clear" or whatever function button.
Since -for the switch plugin- the state is being changed/toggled, maybe the state-value could be made clickable?
I think those are quite plugin specific for what is desired. Some could use a 'toggle' button, some a "run task" and maybe some other plugins could use a "reset" or "clear" or whatever function button.
Since -for the switch plugin- the state is being changed/toggled, maybe the state-value could be made clickable?
Re: Custom WebUI
"Run task" it's a welcome feature, on every row,on every task. Toggle (or ON OFF two buttons) hover button to change output state will be available only when Device: "output switch-relay" is selected. If "output switch-pwm" is selected,then will be a slider to adjust ratio. On other devices the cell will be blank...a few lines of code
Imagine that majority of users who choose an alternative firmware for esp, are not mqtt and html guru, just ordinary hobbyist wanted to turn a light on/off or a load. It's so rewarding after flashing to click-clack the relay. Actually, how fast relays engage/disengage it's a very good aproximation of how network cope , some primitive measure of "ping", only brain,mouse,ears,eyes...
Let's make Tasmota tremble!...again
Imagine that majority of users who choose an alternative firmware for esp, are not mqtt and html guru, just ordinary hobbyist wanted to turn a light on/off or a load. It's so rewarding after flashing to click-clack the relay. Actually, how fast relays engage/disengage it's a very good aproximation of how network cope , some primitive measure of "ping", only brain,mouse,ears,eyes...
Let's make Tasmota tremble!...again
Re: Custom WebUI
One simple code for dashboard.esp without any icon.png
Modify [sck_gpio14#State] and gpio number from href="dashboard.esp?cmd=gpio,14,1">ON< according to your device !
Looks like this:
Code: Select all
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:16pt;}
.button {margin: 1px; padding:8px 16px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:8px}
</STYLE>
<HTML>
<p><br /><br /></p>
<div>
<div>
<table>
<tbody>
<tr style="height: 50px;">
<td style=" width: 100px;">
<p><strong>L i g h t </strong></p>
</td>
<td style="text-align: center; width: 70px; " bgcolor="red"><span style="color: #ffffff;"><strong>[sck_gpio14#State]</strong></span></td><td style="width: 15px;"> </td>
<td style="text-align: center;"><a class="button link" href="dashboard.esp?cmd=gpio,14,1">ON</a></td>
<td style="text-align: center;"><a class="button link" href="dashboard.esp?cmd=gpio,14,0">OFF</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</HTML>
Looks like this:
Re: Custom WebUI
Simple toggle
Code: Select all
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:16pt;}
.button {margin: 1px; padding:8px 16px; background-color:#07D; color:#FFF; text-decoration:none; border-radius:8px}
</STYLE>
<HTML>
<p><br /><br /></p>
<div>
<div>
<table>
<tbody>
<tr style="height: 50px;">
<td style=" width: 100px;">
<p><strong>L i g h t </strong></p>
</td>
<td style="text-align: center; width: 70px; " bgcolor="red"><span style="color: #ffffff;"><strong>[sck_gpio14#State]</strong></span></td><td style="width: 15px;"> </td>
<td style="text-align: center;"><a class="button link" href="dashboard.esp?cmd=GPIOtoggle,14">TOGGLE</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</HTML>
Re: Custom WebUI
Here's my last (test-)example webgui.esp. Round buttons's with color and state-text change, without external icons:
Code: Select all
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {width:80px; height:80px;border-radius:50%;display: inline-flex;cursor:pointer;color:white;font-size:50%;font-weight:bold;align-items:center;justify-content:center;}
a {text-decoration: none;color:white;}
table {vertical-align:middle;font-size:300%;font-weight:bold;}
.c0 {background-color:red;}
.c1 {background-color:green;}
</style>
</head>
<html>
<br><br>
<table width='100%'>
<tr>
<td>SW017</td>
<td class="center" width='1%'><div class="circle c[Relais#Status]"><a href="webgui.esp?cmd=event,schalten">[Relais#Status#O]</a></div></td>
</tr>
</table>
</html>
Re: Custom WebUI
Nice...
Be more precise: href="webgui.esp?cmd=event,schalten" and [Relais#Status#O].
I assume you have a Task named "Relais" value "status"
Scripture of "event"? [Relais#Status#O] meaning state On, Off?
Tried with gpio5 [output0#State] and gpio14 [sck_gpio14#State] with toggle command: <a href="webgui.esp?cmd=GPIOtoggle,5">
..........................
webgui page seems to be slow, 2-3 sec untill changes 0 or 1 in the circle,but command is executed instantly
Hover mouse is over entire circle ,but command is taken only when click on 0 or 1 precisely,very frustrating, expecting to hear the click... small improvement
Be more precise: href="webgui.esp?cmd=event,schalten" and [Relais#Status#O].
I assume you have a Task named "Relais" value "status"
Scripture of "event"? [Relais#Status#O] meaning state On, Off?
Tried with gpio5 [output0#State] and gpio14 [sck_gpio14#State] with toggle command: <a href="webgui.esp?cmd=GPIOtoggle,5">
Code: Select all
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {width:80px; height:80px;border-radius:50%;display: inline-flex;cursor:pointer;color:white;font-size:50%;font-weight:bold;align-items:center;justify-content:center;}
a {text-decoration: none;color:white;}
table {vertical-align:middle;font-size:300%;font-weight:bold;}
.c0 {background-color:red;}
.c1 {background-color:green;}
</style>
</head>
<html>
<br><br>
<table width='30%'>
<tr>
<td>G P I O 5</td>
<td class="center" width='1%'><div class="circle c[output0#State]"><a href="webgui.esp?cmd=GPIOtoggle,5">[output0#State]</a></div></td>
</tr>
<tr>
<td>G P I O 14</td>
<td class="center" width='1%'><div class="circle c[sck_gpio14#State]"><a href="webgui.esp?cmd=GPIOtoggle,14">[sck_gpio14#State]</a></div></td>
</tr>
</table>
</html>
webgui page seems to be slow, 2-3 sec untill changes 0 or 1 in the circle,but command is executed instantly
Hover mouse is over entire circle ,but command is taken only when click on 0 or 1 precisely,very frustrating, expecting to hear the click... small improvement
Re: Custom WebUI
Code: Select all
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {width:120px; height:60px;border-radius:50%;display: inline-flex;cursor:pointer;color:white;font-size:90%;font-weight:bold;align-items:center;justify-content:center;}
a {text-decoration: none;color:white;}
table {vertical-align:middle;font-size:220%;font-weight:bold;}
.c0 {background-color:red;}
.c1 {background-color:green;}
</style>
</head>
<html>
<br><br>
<table width='50%'>
<tr>
<td>G P I O 5</td>
<td class="center" width='50%'><div class="circle c[output0#State]"><a class="circle link" href="webgui.esp?cmd=GPIOtoggle,5">[output0#State]</a></div></td>
</tr>
<tr>
<td>G P I O 14</td>
<td class="center" width='1%'><div class="circle c[sck_gpio14#State]"><a class="circle link" href="webgui.esp?cmd=GPIOtoggle,14">[sck_gpio14#State]</a></div></td>
</tr>
</table>
</html>
Last edited by bonti69 on 12 Apr 2021, 21:23, edited 2 times in total.
Re: Custom WebUI
I also made a custom dashboard and i am quite happy with it.
Have a look:
viewtopic.php?f=4&t=7946&p=46851#p46851
Have a look:
viewtopic.php?f=4&t=7946&p=46851#p46851
Re: Custom WebUI
Oh, God, I didn't know...searched the wiki,throw me to the https://www.letscontrolit.com/wiki/inde ... _Dashboard. I have no skills in HTML edit,php,javascript, I just wanted to click/clack the relay...Like I already said, on tasmota,when you assign an output, aka relay 1,2...8, you instantly get the TOGGLE button 1,2...8 and the "status" in the main menu, sort of dashboard. Moreover, if you push the physical button on the device, the dashboard reacts instantly and update the status...or when you drive the unit via mqtt...missing feature of our dashboard . So, until the programmers core-team of ESPEASY will decide to implement somehow,sometimes,summertime this long-time feature-request, just sit & lockdown.And go back to the '80 s...https://www.youtube.com/watch?v=8ZvJ6JCiTCM
Re: Custom WebUI
As much as i would like to see it implemented too i am really happy with what a few people have achieved here with limited time and resources!!
I think the focus simply doesn’t lie on a proper gui-control since most people using a server for that.
Even if you have limited skills you can help the developers to achive their goals by considering a monetary support.
I think the focus simply doesn’t lie on a proper gui-control since most people using a server for that.
Even if you have limited skills you can help the developers to achive their goals by considering a monetary support.
Re: Custom WebUI
Here's my actual version. Use DIV's instead of a table, format works if I use space instead of tabs, entire DIV is clickable, not only the text inside:
I've the delay too, at least sometimes.
Also, the resulting webpage has a additinal '</body></html>' tag at the end !?
Code: Select all
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.divTable{display: table;width: 100%;font-size:300%;font-weight:bold;}
.divTableRow {display: table-row;}
.divTableBody {display: table-row-group;}
.divTableCell {display: table-cell;padding: 5px;}
.divTableLastCell {display: table-cell;padding: 5px;width: 1%;}
.circle {width:80px; height:80px;border-radius:50%;display: inline-flex;cursor:pointer;color:white;font-size:50%;font-weight:bold;align-items:center;justify-content:center;}
.c0 {background-color:red;}
.c1 {background-color:green;}
</style>
</head>
<html>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
SW017
</div>
<div class="divTableLastCell">
<div class="circle c[Relais#Status]" onclick="window.location='webgui.esp?cmd=event,schalten';">
[Relais#Status#O]
</div>
</div>
</div>
</div>
</div>
</html>
Also, the resulting webpage has a additinal '</body></html>' tag at the end !?
Who is online
Users browsing this forum: No registered users and 105 guests