ESPHome Web Server Dashboard

[veli]

The current web_server interface is ok for toggling things on and off and reading some sensors, but it’s not looking good nor is it very user friendly.

So I created a dashboard, which shows your device data and actions at your regular esphome-device.local:80 - only nicer. And it is a PWA, so each device can be installed on any smart device and accessed via dock or app shortcuts.

web_server dashboard

No extra components needed, just add in your YAML:

  web_server: 
    css_url: css.css  
    js_url: js.js

and it loads CSS and JS from an external server, so the ESP’s storage doesn’t suffer any.

Demo

installed like a native OS app

Has the same functionality you expect…

… with some extra like light color, etc.

---

Please Consider sponsoring me Sponsor @velijv on GitHub Sponsors · GitHub || PayPal.Me so I can finish it and provide it for all y’all, and add extra features, like an actual color picker, charts for sensor history, etc.

---

This will make your ESP device a fully featured app that works and looks nice. No Home Assistant needed for some devices. Even your mother can use it.

[TheRealFalseReality (Nicholas White)]

Really neat, I’m gonna try this out now. I’ve been working on something that I think could use this…

[Rudd-O]

Link? I cannot find it.

[TheRealFalseReality (Nicholas White)]

You enable web server in your esp yaml, then use the js and css options it looks like

[Rudd-O]

Where are these JS/CSS files?

[TheRealFalseReality (Nicholas White)]

Web server works with no options, but when I add the css_url: css.css js_url: js.js lines, I just get a white screen… no luck yet.

[TheRealFalseReality (Nicholas White)]

the author says they are pulled from another server. Lemme know if you get it to work!

[poudenes]

Somewhere we need the original files to host on a site or Lokal network location to let it work?
He is working on it then will release the files.

[TheRealFalseReality (Nicholas White)]

Ah ok! I’m excited to try it out.

[veli]

Better (automatic) layouts:

Light mode

• light shows actual cwww/rgb value as card color
• brightness go from 0 to 100% not 255(%)…
• change cwww value from slider
• change rgb from native picker

Android

iOS

More entity types

cover / number

fan / sensor

all types

lock

color has an RGB picker now

climate

switches

also light

oh and entity history charts

• for each sensor in the card
• as a background for anything that goes from 0 to 100 as a gradient

also nicer logger

• truncated links
• hover tooltips
• hover row highlights
• hidden TMI visible on hover

and for , more info in console:

also, dynamic app icons

---

I would love to know^* if my work is appreciated to start releasing
_{* getting 10 Github sponsors for even 1$ would prove it ^{to my wife who says i need to sleep more and be less nerd}}

[TheRealFalseReality (Nicholas White)]

I threw you a few bucks because I’m excited to see! Considering monthly if I were to use this on my devices for my clients.

[veli]

Thank you! I will definitely consider it, because it needs to be hosted (icons, and web app manifest, which can’t be uploaded to the esp…, the css/js as well, which can be self-hosted locally but not for clients). Monthly would cover server costs at least hopefully. I will PM you a beta version link for testing as soon as i update some errors features.

One major hurdle for client work - as they might not want to hack with chrome://flags - is that since esphome is not served over https, you need to manually add each “insecure” device as “secure” in browser to allow installing… also web service workers wont install from another domain, and i can’t add them to the esp, since it only allows one js file.

[Rudd-O]

We’d prefer selfhosting.

Either way the ESP can proxy the JS from another domain so it’s OK.

[TheRealFalseReality (Nicholas White)]

ok, gotcha. It would be nice to have a gorgeous web server natively!

[patricknitsch]

Hi,

it looks great! Is it still alive? If I add the code, I only get a blank page.

[TheRealFalseReality (Nicholas White)]

Same. Looking forward to seeing it

[patricknitsch]

@veli Can you give us an update?

[veli]

If it finds your device is a camera, it embeds the snapshot

This can be expanded to stream on click

OTA is a proper dialog now

As are confirmation actions

Push notifications for important stuffs

Which create an installed app badge when sent (red dot with number)

And I found a way to spam local network to find other ESPHome devices, even when they are password protected. So this is a nice list you can acces:

All still javascript only, no external components needed.

To-do: background still get data and alerts if app is closed.

Im unemployed, out of funds, and will open some basic parts of it. Considering the too much time and amount of work put into it i will make it a paid service / product.

[patricknitsch]

It looks really good. But it don’t work for me. I add the code für js and css. But it don’t show me the new page. It still shows me a blank page. Do I anything wrong?

[veli]

It’s not released yet, work in progress