Public Access
mangavalkandClaude Opus 5.5
a91d2550d7
A new page element runs Conway's Game of Life in an area (the whole display by default), one per page. Start: random dots, one pattern, or the icons whose names start with a text in turn or in random order. Edges: wrap around, dead, or a hidden margin where gliders fly out of view (leftovers that stay put in the margin are cleared, so a glider gun runs cleanly). It restarts when the board is still or repeats within 16 generations and/or after a number of generations, after a hold time (an empty board at once). logic/life holds the board and timing (tested), display/life_player runs the board of the shown page, ticked before each frame; frames are paced like scrolling text. The element reuses existing fields, so the page format stays the same. The Icons tab has a library of 17 LifeWiki patterns (checked with a simulation), and the built-in page "Game of Life" shuffles through the life_ icons. About 12 KB flash, 8 KB RAM. Version 2.17.0, tested on the display over OTA. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
186 lines
11 KiB
Markdown
186 lines
11 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 16 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) and the Game of Life page are normal
|
|
pages that can be changed; their 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`, ...), today or up to 7 days ahead (the weekdays of a forecast) |
|
|
| Home Assistant value | An entity or attribute (also a path into lists, e.g. `forecast.1.temperature`), 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. Optionally the percentage on top (e.g. 42%, rounded down, in the chosen font): its dots invert the bar, so it stays readable on the filled and the empty part; left out when it doesn't fit inside (Small needs a height of 7 with a frame) |
|
|
| Game of Life | [Conway's Game of Life](https://conwaylife.com/wiki/Conway%27s_Game_of_Life) in an area (the whole display by default), one per page. Start: random dots (density %), one pattern, or the patterns whose names start with a text (e.g. `life_`) in turn or in random order, in the middle or at a random place. Edges: wrap around, dead, or a hidden margin (the world is 16 dots larger on every side, so gliders fly out of view and disappear). Speed in generations per second. It restarts when it stops changing (still, or repeating within 16 generations) and/or after a number of generations, after running on for a few seconds (an empty board at once) |
|
|
|
|
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.
|
|
|
|
Each page can have its own refresh effect (e.g. Clock: sparkle, Weather: wipe), or use the
|
|
one from Settings. It is used when the page appears and for its own changes, like the
|
|
clock's minutes. A schedule block that switches instantly and rules still switch
|
|
instantly; "small changes only" and the effect time stay global settings. The ESP32 sends
|
|
it to the Nano without storing it in the Nano's EEPROM (`E` with flag 2), so switching
|
|
pages often doesn't wear the EEPROM.
|
|
|
|
|
|
|
|
## 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"). A rule
|
|
with "show at once in slow mode" ticked brings its page right away in
|
|
[slow mode](#settings), and the display works normally while that page is shown. 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.
|
|
|
|
**Game of Life patterns**: 17 famous patterns from [LifeWiki](https://conwaylife.com/wiki/)
|
|
(glider, the three spaceships, a copperhead turned to fly sideways, the Gosper glider gun,
|
|
pulsar, pentadecathlon, queen bee shuttle, figure eight, Kok's galaxy, beacon and the
|
|
methuselahs R-pentomino, acorn, diehard, thunderbird and pi-heptomino). Add adds one as
|
|
an icon named `life_...`, Add all adds the missing ones. A Game of Life element starts with
|
|
one of them, or goes through all icons whose names start with `life_`, also the ones you
|
|
draw yourself. The patterns live in the web page (RLE text), not in the firmware.
|
|
|
|
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, when it switches off); slow mode
|
|
(also a Home Assistant switch: the display only changes every 1-60 minutes, on the clock,
|
|
and is switched off in between, for less noise); 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; pages can choose their own effect); 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.
|