# Web UI [← Back to the README](../README.md) Open `http:///` (e.g. ) 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/` 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. ![Show](../Pictures/web-ui/show.png) ## 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`) | | 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 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. ![Pages and the page editor](../Pictures/web-ui/pages.png) ## 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. ![Schedule](../Pictures/web-ui/schedule.png) ## Stopwatch Start, stop and reset the stopwatch that pages can show (also in Home Assistant). ![Stopwatch](../Pictures/web-ui/stopwatch.png) ## 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. ![Bitmaps](../Pictures/web-ui/bitmaps.png) ## 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. ![Draw / Live](../Pictures/web-ui/draw.png) ## 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. ![Settings](../Pictures/web-ui/settings.png) ## 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://:8123`). The Plex user for `{plex_user}` in entity ids. See [Home Assistant](home-assistant.md). ![Home Assistant](../Pictures/web-ui/home-assistant.png) ## 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, 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). ![System](../Pictures/web-ui/system.png) ## 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.