Public Access
mangavalkandClaude Opus 5.5
839e86e8f1
Stored as icons at boot from the firmware's bitmaps (cut to 80 x 19), so they can be edited; the firmware copies stay the fallback. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
166 lines
9.0 KiB
Markdown
166 lines
9.0 KiB
Markdown
# Web UI
|
|
|
|
[← Back to the README](../README.md)
|
|
|
|
Open `http://<ESP32 IP>/` (e.g. <http://10.1.1.198/>) in a browser. At the top is a live
|
|
view of the display: it shows what the dots show right now, updated every 1.5 s. Each tab
|
|
has its own address, e.g. `http://10.1.1.198/#schedule`; `#pages/<page name>` opens a page
|
|
in the editor.
|
|
|
|
The screenshots are made with `python tools/make_webui_screenshots.py` (Edge or Chrome in
|
|
headless mode).
|
|
|
|
## Show
|
|
|
|
Choose what the display shows during the day: a dynamic page (e.g. the built-in Clock:
|
|
Pikachu with the time) or any bitmap (not the [icons](#icons)), and what is left on the dots when the display
|
|
switches off. With a [schedule](#schedule), a page chosen here (or with the Home Assistant
|
|
"Mode" dropdown) is shown until the next block starts; "Back to schedule" ends it earlier.
|
|
Bitmaps that pages or rules use are in their own subsection.
|
|
|
|
|
|
|
|
## Pages
|
|
|
|
Dynamic pages: a background per time of day, a bitmap or an [icon](#icons) (e.g. Pikachu
|
|
from 00:00, yawning Pikachu from 17:00) with up to 8 elements on top. The preview is drawn by the ESP32, so it
|
|
is exactly what the display shows; drag the elements on it, or select one and use the
|
|
arrow keys. The Clock page (Pikachu, the default) is a normal page that can be changed;
|
|
its Reset button brings back the original. See the [pictures of the pages](pages.md).
|
|
|
|
| Element | Options |
|
|
|---------|---------|
|
|
| Clock | `08:05`, `8:05`, optionally with seconds |
|
|
| Date | 7 formats, Dutch or English (`do 15 okt`, `15 oktober`, `donderdag`, ...) |
|
|
| Home Assistant value | An entity or attribute, text before and after. Shown as a number (multiplier, decimals, auto unit `1257 W` → `1.3 kW`, without minus sign), a duration (`2h 21m`, `2:21:00`, `2:21`, `2 uur`), a time from an HA timestamp (`23:07`, `do 23:07`, `15-10 23:07`, `over 34 min`) or with own texts per state (`printing=Bezig, standby=Klaar`) |
|
|
| Text | Up to 32 characters |
|
|
| Countdown | To a date and time: smart (`12 dagen`, `5 uur`, `34 min`, `0:45`), days, `12d 04:05`, with seconds; a text when it has passed |
|
|
| Stopwatch | `4:05`, `0:04`, `0:04:05`; started in the [Stopwatch](#stopwatch) tab or Home Assistant |
|
|
| Image | An icon (or a bitmap) at a position, fixed or chosen by a Home Assistant state (`weer ` + `cloudy` = the icon `weer cloudy`, `weer default` when there is none) |
|
|
| Progress bar | Filled from the left by a Home Assistant number: value x multiplier / "full at" (a percentage: full at 100). Width, height, with or without a frame |
|
|
|
|
Every element has a position, alignment, font and overlay (on top, box that clears the
|
|
dots behind it, inverted). Entity ids can contain `{plex_user}`, replaced by the Plex user
|
|
of the Home Assistant tab (e.g. `sensor.{plex_user}_state`). Texts can scroll in a window at a chosen speed (0.05-30 dots per second, e.g. 0.25 = one dot every 4 s) and can contain
|
|
the degree sign. Fonts: Small (3x5), Normal (5x7), Large (5x7 doubled), Full height (19 dot
|
|
digits), and your own: upload a TTF/OTF, choose the height in dots, the browser converts
|
|
it.
|
|
|
|
|
|
|
|
## Schedule
|
|
|
|
What is shown when, every day: blocks from a start time until the next block, each with up
|
|
to 6 pages or bitmaps that rotate (each for its own time, 5 s to 1 hour), switching with
|
|
the refresh effect or instantly.
|
|
|
|
Rules bring a page to the front from a Home Assistant state (an entity or attribute, `=`,
|
|
`is not`, `above`, `below`): they show it while the state is true, add it to the rotation
|
|
while it is true, or show it for a while when it becomes true. Each rule is read at its own
|
|
interval (2-600 s) and can be limited to some of the blocks. The first rule that shows a
|
|
page wins. A rule can leave a page chosen by hand alone (untick "also over a page chosen by
|
|
hand"): it then waits until that pick ends (the next block or "Back to schedule"). The display schedule ([Settings](#settings)) still decides when the display is on.
|
|
|
|
|
|
|
|
## Stopwatch
|
|
|
|
Start, stop and reset the stopwatch that pages can show (also in Home Assistant).
|
|
|
|
|
|
|
|
## Bitmaps
|
|
|
|
All bitmaps with a preview: show one as the page, send it live, open it in the editor,
|
|
export or delete it. The built-in one (Nintendo) can't be
|
|
deleted, nor can a bitmap that a page, the schedule or a rule uses. "Make icon" turns a
|
|
bitmap that is only part of pages into an [icon](#icons).
|
|
|
|
|
|
|
|
## Icons
|
|
|
|
Small images (1 x 1 up to 84 x 19 dots, each its own size) for dynamic pages: an Image
|
|
element, or a background (drawn at the top left). Icons are never shown on their own, so
|
|
they are not in the page lists (Show, Schedule, rules, Home Assistant "Mode"). Each icon
|
|
shows its size and the pages that use it. The editor: draw dots, change the size (the dots
|
|
stay at the top left), crop to the dots, clear, invert, load an image (scaled to the icon
|
|
size), show it on the display. "Make bitmap" turns an icon into a full screen bitmap. The two Pikachus of the Clock page are built into the
|
|
firmware: they are stored as icons at boot and can be edited, the firmware keeps the
|
|
originals.
|
|
|
|
Firmware 2.10.0 made icons of all uploaded bitmaps that only pages used (backgrounds and
|
|
images, not shown by the schedule, a rule, the chosen page or the off image), once, after
|
|
the new firmware was marked as good. They keep their names and land on the same dots, so
|
|
the pages didn't change.
|
|
|
|
|
|
|
|
## Draw / Live
|
|
|
|
Draw on an 84 x 19 canvas (click or drag), or load an image: it is converted in the
|
|
browser (threshold, invert, dithering, fit / fill / stretch). "Show on display now" sends
|
|
it to the display right away (*live mode*); with "live while drawing" every change appears
|
|
on the dots. Save it as a bitmap with a name, or as an icon (only the area with dots).
|
|
|
|
|
|
|
|
## Settings
|
|
|
|
The display schedule (on/off, when the display is on, the late-evening quarter-hour mode,
|
|
when it switches off); the "No WiFi" screen; the flip time, the pause after each pulse,
|
|
pulses per dot and the refresh effect (instant, sparkle, wipe, rain, from the middle out,
|
|
diagonal, spiral, flip all then reveal, push, random; optionally only for small changes
|
|
like the clock's minutes); how often every dot is flipped again ("Dot refresh", default
|
|
2 min) and how often the whole image is sent again ("Image resync", default 10 min; 0
|
|
switches either off); test patterns; the status LED.
|
|
|
|
|
|
|
|
## Home Assistant
|
|
|
|
MQTT: on/off, broker, port, user, password (changing these restarts the ESP32; an empty
|
|
broker uses `secrets.h`). The URL and long-lived access token for the values on dynamic
|
|
pages and the rules (REST API, plain http; empty URL: `http://<broker>:8123`). The Plex
|
|
user for `{plex_user}` in entity ids. See [Home Assistant](home-assistant.md).
|
|
|
|
|
|
|
|
## System
|
|
|
|
Firmware status, uptime, WiFi, storage; restart; start the [recovery app](recovery.md).
|
|
**Loop:** how busy the ESP32 is: `loop()` passes per second and the average and longest
|
|
pass over the last 10 s (and the longest since boot; a Home Assistant request can take a
|
|
few seconds). `loop()` never sleeps, so a CPU percentage would always say 100 %.
|
|
**Frame check:** how many checks of the Nano's image matched, differed or got no answer,
|
|
how often the image was repaired, Nano restarts and `ERR` replies (with the last one).
|
|
**Memory:** free heap now and the lowest since boot.
|
|
|
|
**Backup:** export everything (settings, the schedule and rules, your bitmaps, icons,
|
|
pages and fonts; the MQTT password and HA token only when ticked) to one JSON file, and
|
|
import a file: choose which items and which parts of the settings. Imported items are
|
|
added (a taken name gets a number) unless you give them an existing name. Pages, bitmaps
|
|
and icons also have their own Export button, e.g. to share one page (with the bitmaps,
|
|
icons and fonts it uses).
|
|
|
|
|
|
|
|
## Good to know
|
|
|
|
**Live mode** shows the image at once, also at night or before the time is known. It
|
|
ends with "Back to normal", or 30 minutes after the last image. The Home Assistant Power
|
|
switch still wins: when it is off, nothing is shown.
|
|
|
|
**Bitmaps, icons, pages and fonts** are stored on the ESP32 (LittleFS, 320 KB; up to 200
|
|
bitmaps, 200 icons, 50 pages, 20 fonts). Pages, bitmaps and icons share their names. They need
|
|
the new flash layout from the [one-time installation](recovery.md#one-time-installation-usb);
|
|
before that, only the built-in ones are available.
|
|
|
|
**Moving pages** (scrolling text, seconds, a running stopwatch) send a frame whenever the
|
|
content moves, without the refresh effect (`D1`, needs the Nano firmware from version
|
|
2.5.0), and only the dots that changed, not faster than the Nano can flip them: with 3
|
|
pulses and a 300 µs gap a 1-dot scroll step of a line of text takes about 0.1-0.2 s.
|
|
|
|
**Settings** are stored in the ESP32's NVS. The defaults are the original behaviour. There
|
|
is no login: anyone on your WiFi can use the page, as with OTA.
|