Editing the Mini Dashboard for a better look

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
User avatar
chromo23
Normal user
Posts: 823
Joined: 10 Sep 2020, 16:02
Location: germany

Editing the Mini Dashboard for a better look

#1 Post by chromo23 » 10 Sep 2020, 16:12

First of all i want to say thank you to this great piece of software!!!!!!!!!!!!!!

I spent hours do get a decent looking Dashboard.
The only way was to create a dashboard.esp.
Other names did not work. So i had to get rid of the node selector buttons and the drop down menu .
For people with more knowledge in this field, I’m sure it is easy to do this but for others this could be a starting point.

Here is how it looks:
Bildschirmfoto 2020-09-10 um 15.58.15.png
Bildschirmfoto 2020-09-10 um 15.58.15.png (50.89 KiB) Viewed 11268 times

And here is how i did it:

Code: Select all

<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {font-family:sans-serif; font-size:14pt; background-color: #2b2a2a; color: #fff}
.button {margin:4px; padding:14px 64px; color:#FFF; text-decoration:none; border-radius:14px}
.wide {display:none}
.button.link {display:none}
</STYLE>
<HTML>
<br><br>
<center>
<table class="center">
<tr><img src="Lamp[Relay#State].png">
<br><br>
<td><a class='button' href="dashboard.esp?cmd=event,toggle">On/Off</a>
</table>
</center>
<br><br>
<center>
<table class="center">
<tr><td><center>Temperature:[sensor#Temperature]°C</center></td>
</tr>
<tr><td><center>Humidity: [sensor#Humidity]%</center></td>
</tr>
</table>
</center>
</HTML>
ESP Easy Build: 20110 - Mega

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

Re: Editing the Mini Dashboard for a better look

#2 Post by TD-er » 10 Sep 2020, 22:33

Great start indeed.
I guess we should add a section to the documentation with more information about how to do this.
There is some on the wiki, but maybe that has become a bit dated.

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

Re: Editing the Mini Dashboard for a better look

#3 Post by chromo23 » 18 Sep 2020, 17:31

I found out, that toggle buttons are not a good idea when it is done via url.
One refresh of the site an the state changes. :roll:
So back to separate on and off buttons. :)
Bildschirmfoto 2020-09-18 um 17.22.20.png
Bildschirmfoto 2020-09-18 um 17.22.20.png (85.33 KiB) Viewed 11144 times
It´s maybe worth mentioning that the icons can´t be bigger than 6kb and must have a resolution around 100x100px or less. At least with the build i use.

User avatar
Ath
Normal user
Posts: 3480
Joined: 10 Jun 2018, 12:06
Location: NL

Re: Editing the Mini Dashboard for a better look

#4 Post by Ath » 18 Sep 2020, 18:34

chromo23 wrote: 18 Sep 2020, 17:31 It´s maybe worth mentioning that the icons can´t be bigger than 6kb and must have a resolution around 100x100px or less. At least with the build i use.
Then it might be useful to use .svg instead of bitmap (.ico/.png/.jpg/...) icons, so resolution and size won't give you these headaches.
/Ton (PayPal.me)

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

Re: Editing the Mini Dashboard for a better look

#5 Post by chromo23 » 19 Sep 2020, 13:38

thank you for the hint :)
and the dht22 became unavailable, again. always after around one day. :(
Bildschirmfoto 2020-09-19 um 13.37.15.png
Bildschirmfoto 2020-09-19 um 13.37.15.png (95.33 KiB) Viewed 11099 times

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

Re: Editing the Mini Dashboard for a better look

#6 Post by TD-er » 19 Sep 2020, 16:49

chromo23 wrote: 19 Sep 2020, 13:38 and the dht22 became unavailable, again. always after around one day. :(
And what do you need to do to make it work again?
Is saving the settings again enough to get it to work again, or do you need a power cycle?

What error does it give in the logs?

ezparce
Normal user
Posts: 12
Joined: 13 Jul 2020, 09:18

Re: Editing the Mini Dashboard for a better look

#7 Post by ezparce » 30 May 2021, 11:11

Hi,

May I know how to upload the HTML file to the ESPEasy and activate it?

Thks

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

Re: Editing the Mini Dashboard for a better look

#8 Post by TD-er » 30 May 2021, 11:20

Rename the HTML file to "dashboard.esp" and upload it to the file system
See: https://www.letscontrolit.com/wiki/inde ... _Dashboard

Post Reply

Who is online

Users browsing this forum: No registered users and 15 guests