Code Monkey home page Code Monkey logo

esphome-webserver's Introduction

esphome-webserver

A Lit Element web component htm webserver for esphome devices.

Features

  • 30 sec heartbeat showing node connection is active
  • Built with Lit Element web components
  • completely standalone - no other external dependancies 9K compressed
  • Light and Dark themes
  • Primary theme - currently light blue - can be overridden
  • Embedded ESP home logo svg
  • Entities are discovered and display
  • No css fetch - index page fetches one js file

dark scheme desktop:

web_server-v2

Light scheme on mobile:

image

Near future:

  • Support for compressed files in flash for Standalone no internet nodes
  • Add Climate
  • Add Select drop list
  • Add Number editing
  • Potentially use an optional card layout instead of a table

Example entry for config.yaml:

# Example config.yaml

web_server:
  port: 80
  css_url: ""
  js_url: https://esphome.io/_static/v2/www.js
  version: 2

development

git clone https://github.com/esphome/esphome-webserver.git
pnpm install

npm run start Starts a dev server on http://localhost:3000

proxy

Events from a real device can be proxied for developement. Update this line in vite.config.ts to point to your real device

const proxy_target = "http://nodemcu.local";

The json api will POST to the real device and the events are proxied

build

npm run build The build files are copied to static/v2 usually for deployment to https://esphome.io/static/v2 or your /local/www homeassistant folder

If you customise, you can deploy to your local homeassistant /local/www/_static/v2 and use:

web_server:
  port: 80
  version: 2
  js_url: http://homeassistant.local:8123/local/_static/v2/www.js

serve

npm run server Starts a production test server on http://localhost:5001 Events and the json api are proxied.

esphome-webserver's People

Contributors

wilberforce avatar robomagus avatar jesserockz avatar dd32 avatar grahambrown11 avatar anatoly-savchenkov avatar alexyao2015 avatar grillp avatar nagyrobi avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.