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, 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 bitmap per time of day (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. Built-in pages can be copied, not changed. 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 | A bitmap at a position, fixed or chosen by a Home Assistant state (`weer ` + `cloudy` = the bitmap `weer cloudy`) |
Every element has a position, alignment, font and overlay (on top, box that clears the
dots behind it, inverted). Texts can scroll in a window at a chosen speed 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. 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 ones (Nintendo, Pikachu, Pikachu yawning) can't be
deleted, nor can a bitmap that a page, the schedule or a rule uses.
## 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.
## 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
