The image is generated by the same Pillow renderer used by the server. It contains sample data, not readings from a real home.
The header prioritizes the bold date, saint and time. The small percentage on the first line is the Nook battery (87% in this demo).
Weather conditions use vector-drawn monochrome symbols. The waste section omits its heading, uses relative dates and draws a material icon to the right (two icons for two recognized materials).
The Energy section has five columns: home battery, solar today, grid import today, home consumption today and XPENG. HEAT WATER, CHANGE and REFRESH are framed and centered within their rows.
Coordinates in the reference 600 × 800 PNG, scaled by the client to the displayed image:
| Button | X | Y | Action |
|---|---|---|---|
| HEAT WATER | 416–576 | 474–532 | Confirm domestic hot water heating |
| CHANGE | 438–576 | 569–603 | Enable or disable Holiday Mode |
| REFRESH | 438–576 | 738–770 | Read current HA data and generate a new PNG |
These coordinates are part of the server/client interface. Moving the image buttons requires updating the client too. Other taps open the menu; touch is unavailable while the device is in standby.
Regenerate the mockup from the repository root:
python3 tests/test_server.pyButtons fill black immediately on touch. The server image keeps HEAT WATER black while the force-heating switch is on. The other two buttons return to their outlined appearance when the fresh image arrives.
In 0.4.1 the saint line is slightly larger, Holiday Mode columns are centered, and the hot water button has a compact 160 × 58 frame. Install client 0.4.1 with this layout so its touch feedback uses the matching coordinates.