Custom WebUI

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Custom WebUI

#1 Post by bonti69 » 08 Apr 2021, 12:56

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 "
Screenshot_2021-04-08 ESP_Easy_WemosD1R2.png
Screenshot_2021-04-08 ESP_Easy_WemosD1R2.png (52.67 KiB) Viewed 17442 times
Thank you

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#2 Post by TD-er » 08 Apr 2021, 13:15

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#3 Post by bonti69 » 08 Apr 2021, 13:34

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...
Screenshot_2021-04-08 ESP_Easy_WemosD1R2 .png
Screenshot_2021-04-08 ESP_Easy_WemosD1R2 .png (185.37 KiB) Viewed 17434 times
A simple dashboard is mandatory, see tasmota way:
Screenshot_2021-04-04 PSF A85 - Main Menu.png
Screenshot_2021-04-04 PSF A85 - Main Menu.png (31.28 KiB) Viewed 17434 times
Another issue for me is to replace those index numbers in log with time&date...
Screenshot_2021-04-08 konke LK3 firmware - Console.png
Screenshot_2021-04-08 konke LK3 firmware - Console.png (58.65 KiB) Viewed 17434 times
Thank you, let's focus on minidashboard...

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#4 Post by TD-er » 08 Apr 2021, 13:38

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.

Micha_he
Normal user
Posts: 369
Joined: 07 Feb 2018, 19:14
Location: Helmstedt, Germany

Re: Custom WebUI

#5 Post by Micha_he » 08 Apr 2021, 13:49

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.

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#6 Post by bonti69 » 08 Apr 2021, 13:59

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
custom.png
custom.png (14.89 KiB) Viewed 17422 times

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#7 Post by TD-er » 08 Apr 2021, 14:07

You must name it "esp.css"
Then it will load that file every time you need the CSS, so it is active immediately.

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#8 Post by bonti69 » 08 Apr 2021, 14:15

So, copied text from wiki,
custom text.png
custom text.png (46.92 KiB) Viewed 17410 times
Create new text decument, renamed esp.css and upload to device
Then, something happen't, like this:
dashboard.png
dashboard.png (53.45 KiB) Viewed 17410 times

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#9 Post by TD-er » 08 Apr 2021, 14:35

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#10 Post by bonti69 » 08 Apr 2021, 14:53

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#11 Post by bonti69 » 08 Apr 2021, 14:58

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)
Last edited by bonti69 on 08 Apr 2021, 15:00, edited 1 time in total.

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#12 Post by TD-er » 08 Apr 2021, 14:59

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.

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#13 Post by bonti69 » 08 Apr 2021, 15:13

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:
dashboardesp.png
dashboardesp.png (32.92 KiB) Viewed 17381 times

Just not looking very good...
Last edited by bonti69 on 08 Apr 2021, 22:21, edited 1 time in total.

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#14 Post by TD-er » 08 Apr 2021, 16:08

Sorry I don't.
Maybe others have an example from where you can continue?
Maybe someone also posted one before here on the forum?

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#15 Post by bonti69 » 08 Apr 2021, 19:07

One step forward

Upload two png files :
icon0.png
icon0.png (18.97 KiB) Viewed 17361 times
icon1.png
icon1.png (15.75 KiB) Viewed 17361 times
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
devices.png
devices.png (38.95 KiB) Viewed 17361 times
After those three files beeing uploaded,in Tools/File browser ,click on the dashboard.esp ,a new page is open like that:



dashboard red green.png
dashboard red green.png (48.39 KiB) Viewed 17361 times
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:
lightbulb1.png
lightbulb1.png (20.75 KiB) Viewed 17360 times
lightbulb0.png
lightbulb0.png (20.77 KiB) Viewed 17360 times
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:
green.png
green.png (49.77 KiB) Viewed 17340 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#16 Post by bonti69 » 08 Apr 2021, 23:12

Maybe this buttons
icon1.png
icon1.png (25.36 KiB) Viewed 17338 times
icon0.png
icon0.png (25.09 KiB) Viewed 17338 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#17 Post by bonti69 » 08 Apr 2021, 23:40

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

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#18 Post by TD-er » 08 Apr 2021, 23:59

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.

ingoiot
Normal user
Posts: 83
Joined: 15 Aug 2019, 22:09

Re: Custom WebUI

#19 Post by ingoiot » 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>

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#20 Post by bonti69 » 09 Apr 2021, 01:11

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 .
Screenshot_2021-04-09 Screenshot.png
Screenshot_2021-04-09 Screenshot.png (4.86 KiB) Viewed 17324 times
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>
.................................................
Screenshot_2021-04-09 Screenshot2.png
Screenshot_2021-04-09 Screenshot2.png (5.28 KiB) Viewed 17322 times
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>
.......................................................
Screenshot_2021-04-09 Screenshot3.png
Screenshot_2021-04-09 Screenshot3.png (6.35 KiB) Viewed 17321 times

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#21 Post by TD-er » 09 Apr 2021, 08:08

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:

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>
Edit:
Hmm apparently the syntax highlighting has been removed in recent phpBB forum updates... but the code-tag still works :)

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#22 Post by bonti69 » 09 Apr 2021, 11:12

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

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
onoff.png (32.66 KiB) Viewed 17266 times
devices2.png
devices2.png (74.76 KiB) Viewed 17268 times
icon1.png
icon1.png (7.43 KiB) Viewed 17268 times
icon0.png
icon0.png (7.62 KiB) Viewed 17268 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#23 Post by bonti69 » 09 Apr 2021, 12:39

ingoiot 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>
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 myself
Last edited by bonti69 on 09 Apr 2021, 16:36, edited 1 time in total.

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#24 Post by bonti69 » 09 Apr 2021, 14:52

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:
devices2.png
devices2.png (74.76 KiB) Viewed 17250 times
We need 4 small icons ,have to be uploaded in Tools/File browser:
lightbulb1.png
lightbulb1.png (6.72 KiB) Viewed 17250 times
lightbulb0.png
lightbulb0.png (7 KiB) Viewed 17250 times
icon1.png
icon1.png (7.22 KiB) Viewed 17250 times
icon0.png
icon0.png (7.4 KiB) Viewed 17250 times
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:
onoff.png
onoff.png (51.51 KiB) Viewed 17249 times
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> 
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
Last edited by bonti69 on 09 Apr 2021, 23:53, edited 1 time in total.

Micha_he
Normal user
Posts: 369
Joined: 07 Feb 2018, 19:14
Location: Helmstedt, Germany

Re: Custom WebUI

#25 Post by Micha_he » 09 Apr 2021, 15:52

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#26 Post by bonti69 » 09 Apr 2021, 18:09

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

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#27 Post by TD-er » 09 Apr 2021, 18:45

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#28 Post by bonti69 » 09 Apr 2021, 21:09

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.
Screenshot_2021-04-09 LK3 VPanel.png
Screenshot_2021-04-09 LK3 VPanel.png (113.3 KiB) Viewed 17212 times
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:
Screenshot_2021-04-09 LK3 VPanel2.png
Screenshot_2021-04-09 LK3 VPanel2.png (78.07 KiB) Viewed 17213 times
Screenshot_2021-04-09 LK3 VPanel3.png
Screenshot_2021-04-09 LK3 VPanel3.png (87.77 KiB) Viewed 17213 times
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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#29 Post by bonti69 » 09 Apr 2021, 21:25

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...
proposal.png
proposal.png (75.81 KiB) Viewed 17206 times
Last edited by bonti69 on 09 Apr 2021, 22:05, edited 4 times in total.

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: Custom WebUI

#30 Post by TD-er » 09 Apr 2021, 21:53

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?

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#31 Post by bonti69 » 09 Apr 2021, 22:24

"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 ;)
tasmota.png
tasmota.png (33.75 KiB) Viewed 17197 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#32 Post by bonti69 » 11 Apr 2021, 11:42

One simple code for dashboard.esp without any icon.png

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;">&nbsp;</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>
Modify [sck_gpio14#State] and gpio number from href="dashboard.esp?cmd=gpio,14,1">ON< according to your device !
Looks like this:
on off simple.png
on off simple.png (6.8 KiB) Viewed 17139 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#33 Post by bonti69 » 11 Apr 2021, 11:58

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;">&nbsp;</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>
toggle.png
toggle.png (6.45 KiB) Viewed 17138 times

Micha_he
Normal user
Posts: 369
Joined: 07 Feb 2018, 19:14
Location: Helmstedt, Germany

Re: Custom WebUI

#34 Post by Micha_he » 11 Apr 2021, 17:42

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>
sw017_webgui.jpg
sw017_webgui.jpg (35.75 KiB) Viewed 17094 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#35 Post by bonti69 » 12 Apr 2021, 19:43

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

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...
circles.png
circles.png (12.61 KiB) Viewed 17050 times
small improvement
circles2.png
circles2.png (13.99 KiB) Viewed 17047 times

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#36 Post by bonti69 » 12 Apr 2021, 21:12

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>
Looks better, mouse pointer on ellipse, command send instantly , but 2-3 sec until the change the state and the colour, don't know why...
circles3.png
circles3.png (11.49 KiB) Viewed 17037 times
Last edited by bonti69 on 12 Apr 2021, 21:23, edited 2 times in total.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Custom WebUI

#37 Post by chromo23 » 12 Apr 2021, 21:21

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

bonti69
Normal user
Posts: 119
Joined: 08 Apr 2021, 12:16

Re: Custom WebUI

#38 Post by bonti69 » 12 Apr 2021, 21:46

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

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: Custom WebUI

#39 Post by chromo23 » 13 Apr 2021, 10:46

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

Micha_he
Normal user
Posts: 369
Joined: 07 Feb 2018, 19:14
Location: Helmstedt, Germany

Re: Custom WebUI

#40 Post by Micha_he » 13 Apr 2021, 12:29

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:

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>
I've the delay too, at least sometimes.
Also, the resulting webpage has a additinal '</body></html>' tag at the end !?

Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 21 guests