Public Access
133 lines
6.5 KiB
Markdown
133 lines
6.5 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, 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
|
||
|
|
like the clock's minutes); 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`). See
|
||
|
|
[Home Assistant](home-assistant.md).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## System
|
||
|
|
|
||
|
|
Firmware status, uptime, WiFi, storage; restart; start the [recovery app](recovery.md).
|
||
|
|
|
||
|
|
**Backup:** export everything (settings, the schedule and rules, your bitmaps, 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 and bitmaps also
|
||
|
|
have their own Export button, e.g. to share one page (with the bitmaps 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, pages and fonts** are stored on the ESP32 (LittleFS, 320 KB, room for well over
|
||
|
|
a thousand bitmaps, 50 pages, 20 fonts). Pages and bitmaps 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.
|