Add live preview widget to plugin settings pages

[florianbachmann]

When tweaking plugin settings I found myself hitting "Update Now" and waiting for the e-ink display to refresh just to see if the result looks right. This adds a live preview widget that shows the result instantly — side by side with the
current display image — so you can iterate on settings without touching the hardware.

How it works

• New /preview endpoint generates the image in-memory and returns it as base64 — no temp files, no display update
• PreviewManager.js renders the preview widget, listens to form changes, and debounces requests
• Plugins with required fields (e.g. Countdown needs a date) get client-side validation with friendly hints like (select a date first) instead of a server round-trip
• On systems without Chromium, HTML-based plugins show (needs Chromium — works on Pi) instead of a broken image

Enabled for

Clock, Countdown, Comic, To-Do List, WPOTD, Year Progress — these are the ones I use or tested that don't require API keys or external endpoints. The preview endpoint is optional — plugins without it work exactly as before.

Adding preview to another plugin

If you want to enable preview for a different plugin, here's all it takes. Year Progress is the simplest example — just two changes:

1. Add the widget to settings.html:

<div id="preview-widget"></div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        PreviewManager.init('year_progress');
    });
</script>

2. If the plugin has required fields, pass them so the preview shows a hint instead of an error:

PreviewManager.init('countdown', {
    required: { date: 'select a date first' }
});

That's it — the /preview endpoint and PreviewManager.js handle the rest.

Screenshots

[florianbachmann]

if you like it, I can help prepare documentation as well :-)

[Copilot]

Pull request overview

Adds a live preview widget to plugin settings pages so users can see the rendered output immediately (without triggering an e-ink refresh), by introducing a new server preview endpoint and a client-side preview manager.

Changes:

• Add /preview POST endpoint to generate plugin images and return them as base64 data URLs.
• Add preview_manager.js to render a “Current vs Preview” widget and debounce preview requests on form changes.
• Enable the preview widget in selected plugins’ settings.html (Clock, Countdown, Comic, To-Do List, WPOTD, Year Progress).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/templates/plugin.html	Loads the new preview manager script on plugin settings pages.
src/static/scripts/preview_manager.js	Implements the preview widget UI, form change listeners, debounced /preview requests, and required-field hints.
src/blueprints/plugin.py	Adds /preview endpoint to generate PNG in-memory and return as base64 JSON.
src/plugins/year_progress/settings.html	Adds preview widget + init call for Year Progress.
src/plugins/wpotd/settings.html	Adds preview widget + init call for WPOTD.
src/plugins/todo_list/settings.html	Adds preview widget, required-field hinting, and refresh hooks for dynamic list edits.
src/plugins/countdown/settings.html	Adds preview widget + init call with required date field.
src/plugins/comic/settings.html	Adds preview widget + init call for Comic.
src/plugins/clock/settings.html	Adds preview widget + init call; triggers preview refresh on face selection changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[florianbachmann]

All Copilot review comments addressed :-)