Rebuild the editor as a Vue app: sidebar, pages side by side, tile settings in a drawer (0.2.74)
The page is now web/ (Vue 3 + Vite + TypeScript), built into screen_manager/app/static with hashed file names; server.py serves index.html as built and /assets/. The Python API, the data and the firmware are unchanged. Your screens sit in a sidebar, the pages of a screen stand next to each other at the screen's own shape, the library sits on the right, and a tile's settings slide in as a drawer while the mockup stays in view. New screen, Firmware & USB, Alerts, Override YAML and Settings are pages of their own. Fonts moved to web/src/assets; the tests read the source through tests/editor_sources.py. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Max Gramser
+1
-1
@@ -68,7 +68,7 @@ the sidebar panel; here, open Home Assistant yourself.
|
||||
|
||||
## Using it
|
||||
|
||||
From here it works like the app: **Settings → New screen** installs a screen, you pair it
|
||||
From here it works like the app: **New screen** installs a screen, you pair it
|
||||
under **Settings → Devices & services** in Home Assistant, and then choose the tiles. See the
|
||||
[installation guide](EASY_SETUP.md).
|
||||
|
||||
|
||||
+5
-5
@@ -4,7 +4,7 @@ A new screen, from USB to everyday use
|
||||
|
||||
With **ESP Screen Manager**, you choose your tiles in Home Assistant. You search by
|
||||
name, device, room, or entity ID, arrange them in the order you want, and click
|
||||
**Save & send to screen**. After that, the status stays automatically up to date.
|
||||
**Save & send**. After that, the status stays automatically up to date.
|
||||
You don't need to **reflash** for different tiles.
|
||||
|
||||
This works with Home Assistant OS on a 64-bit Raspberry Pi or an amd64 machine,
|
||||
@@ -77,7 +77,7 @@ within reach at all. Then put the firmware on the screen from your own computer:
|
||||
|
||||
The file holds your Wi-Fi password and the screen's keys: keep it to yourself. Pairing works
|
||||
as in chapter 3, and every later update goes over Wi-Fi, so the cable is only needed once.
|
||||
For an existing profile, the same file is under **Settings → Firmware & USB**: choose the
|
||||
For an existing profile, the same file is under **Firmware & USB** (in the sidebar): choose the
|
||||
profile and **Download · flash from your own computer**, then **Build & download**.
|
||||
|
||||
**CYD:** calibration appears on first boot. Calmly tap the visible crosshair
|
||||
@@ -146,7 +146,7 @@ Adding without a chosen slot fills the first free slot. Fixed slots and empty
|
||||
slots work on the screen from firmware 0.2.26 on; older firmware shifts the
|
||||
tiles up to the first free slot, and the editor notes that below the preview.
|
||||
The preview shows the layout, not live sensor values.
|
||||
Click **Save & send to screen** to send your changes.
|
||||
Click **Save & send** to send your changes.
|
||||
|
||||
- Light, switch, input_boolean, and fan: tap to turn on/off.
|
||||
- Long press a light: brightness, rainbow color, and white temperature, as far as
|
||||
@@ -189,7 +189,7 @@ as soon as the screen comes back. The app must keep running for current tile dat
|
||||
| --- | --- | --- |
|
||||
| Different entities, names, or order | Save in ESP Screens | Wi-Fi, keys, calibration |
|
||||
| New management page/app version | App store → ESP Screen Manager → Update | All layouts in `/data/screens.json` |
|
||||
| New screen feature/card | The **Update** button on the screen, or **Update automatically every night** under Settings (manually: Settings → Firmware & USB → Wi-Fi / OTA) | Own YAML, keys, and CYD calibration; the app resends tiles |
|
||||
| New screen feature/card | The **Update** button on the screen, or **Update automatically every night** under Settings (manually: Firmware & USB → Wi-Fi / OTA) | Own YAML, keys, and CYD calibration; the app resends tiles |
|
||||
|
||||
The device's own YAML references the firmware packages on `main`. On a new build,
|
||||
ESPHome fetches the latest published package and component code. So you don't
|
||||
@@ -264,7 +264,7 @@ HA mechanisms used: [Ingress](https://developers.home-assistant.io/docs/apps/pre
|
||||
Update ESP Screen Manager to 0.1.2 and install the new firmware once
|
||||
via your **existing** ESPHome device → Install → Wirelessly. Keep your own YAML
|
||||
with Wi-Fi and keys. Then open the screen in ESP Screen Manager and expand
|
||||
**Screen settings**. After adjusting, click **Save & send to screen**.
|
||||
**Screen settings**. After adjusting, click **Save & send**.
|
||||
After this, changes to these settings don't need a new firmware flash.
|
||||
|
||||
| Setting | Options | Default |
|
||||
|
||||
+13
-1
@@ -20,6 +20,9 @@
|
||||
|
||||
1. Update the source profiles and shared components. Run
|
||||
`python3 tools/generate_packages.py`; never edit `packages/*.yaml` directly.
|
||||
The editor is the Vue app in `web/`: after a change under `web/src`, run
|
||||
`cd web && npm ci && npm run build` and commit `screen_manager/app/static` with it
|
||||
(that folder is the build output; never edit it by hand).
|
||||
2. Run all Python tests with aiohttp installed, all `tests/*.cpp`, the
|
||||
generator with `--check`, and compile both Easy Setup profiles. Do that
|
||||
sequentially: profiles with the same `DEVICE_NAME` share one build folder, and a
|
||||
@@ -53,6 +56,15 @@ python3 -m venv .venv-portal
|
||||
.venv-portal/bin/python -m unittest discover -s tests
|
||||
```
|
||||
|
||||
For the editor (`web/`, Vue 3 + Vite + TypeScript): `cd web && npm ci`, then `npm run dev` serves
|
||||
http://localhost:5173 with hot reload and proxies `/api` to a server on 127.0.0.1:8099 (SCREEN_DEV or a demo
|
||||
home). `npm run check` type-checks, `npm run build` writes the page into `screen_manager/app/static`
|
||||
(clearing `assets/` first). Vite names every file after a hash of its content, which is what keeps a browser
|
||||
from combining an old script with a new page; `server.py` serves `index.html` as built and `/assets/`.
|
||||
Everything the page asks for is a relative URL (`api/...`, `./assets/...`), so it works under Home
|
||||
Assistant's ingress path as well as on a bare localhost. The Python tests read the source through
|
||||
`tests/editor_sources.py`.
|
||||
|
||||
A temporary development server supports `SCREEN_DEV=1`, `HA_API` (ending in
|
||||
`/api`), `HA_TOKEN_FILE`, and `SCREEN_DATA`. It only binds on localhost. Never put a
|
||||
token in source code, URLs, or Git. Production uses Supervisor and only accepts
|
||||
@@ -171,7 +183,7 @@ An old editor that omits `icon` keeps the stored choice.
|
||||
|
||||
`tile_icons.py` is the single source list. `tools/generate_icons.py` writes the glyphs
|
||||
as a YAML anchor into the three MDI fonts of both board profiles and builds
|
||||
`static/tile-icons.woff` for the editor (with left bearing equal to xMin, otherwise
|
||||
`web/src/assets/tile-icons.woff` for the editor (with left bearing equal to xMin, otherwise
|
||||
icons sit off-center in the browser); run `generate_packages.py` afterward.
|
||||
The `MDI_GLYPH_*` substitutions are retired: `TILEn_ICON` in manual
|
||||
profiles must come from the set. No changed preferences or keys.
|
||||
|
||||
Reference in New Issue
Block a user