ESPHome Web Server Dashboard

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

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 :pray: Consider sponsoring me Sponsor @velijv on GitHub Sponsors · GitHub || paypal.me/velijohan 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.


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

11 Likes

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

Link? I cannot find it.

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

Where are these JS/CSS files?

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.

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

1 Like

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.

3 Likes

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

1 Like

Better (automatic) layouts:

Light mode :nauseated_face:

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

:art: Android

:art: iOS


More entity types :innocent:

cover / number

fan / sensor

all types

lock

color has an RGB picker now

climate

switches

also light :weary:

oh and entity history charts :cake:

  • 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 :nerd_face:, more info in console:

also, dynamic app icons


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

Buy Me a Cofffee Github Sponsor

4 Likes

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.

1 Like

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

1 Like

We’d prefer selfhosting.

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

2 Likes

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

Hi,

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

1 Like

Same. Looking forward to seeing it

@veli Can you give us an update?

1 Like

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

This can be expanded to stream on click
stream

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.

2 Likes

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?

It’s not released yet, work in progress

1 Like