GUI helper for ESPHome

/!\ WARNING: early POC / developpement stage !!!

What is it ?

Inspired from the flipper zero gui editor: https://ilin.pt/stuff/fui-editor/

This app permit to generate a local asset library that then can be used to compose gui screens for esphome.

Prerequisites

Before getting started, the app is intended to be used as a devcontainer. To use it, you will need to have the following installed on your machine:

• Docker
• Visual Studio Code

Running the app without the provided devcontainer

It's possible to run the have with a correct python + node.js dev environement but this won't be covered in this readme for now.

Base concepts/features:

• wysiwyg editor, to help designing gui/display pages
• generate declarative yaml for gui stuffs
• output exemple lambda to draw the stuff you see on the canvas, with correct ids and offsets
• realtime rendering of animations
• autogenerated ressources catalog (toolbox) from esphome's data folders for fonts, images and animations folders

Planned features:

• elements assets zip download for sharing with packaged config
• support display pages
• use wasm to run the lamda's cpp code, running esphome's display component, in the browser (working poc)

How to use

This app is intended to be used locally, as a companion to your esphome installation.

It uses devcontainers, so you have a ready to use dev environement to run the app.

See more about devcontainers here: //TODO: put link to DEVCONTAINER.md

Generate the assets

1) Edit the config/catalog.yaml

2) Run the assets build command

  python3 scripts/generateData.py

Run the webapp

You can now run the webapp and design display pages with your assets

  cd webapp
  npm run dev