@@ -46,5 +48,7 @@
$date.value = "";
$toggleShrink.checked = true;
$toggleShrink.value = "true";}
+
+ PreviewManager.init('wpotd');
});
-
\ No newline at end of file
+
diff --git a/src/plugins/year_progress/settings.html b/src/plugins/year_progress/settings.html
new file mode 100644
index 000000000..7a51dd2cf
--- /dev/null
+++ b/src/plugins/year_progress/settings.html
@@ -0,0 +1,7 @@
+
+
+
diff --git a/src/static/scripts/preview_manager.js b/src/static/scripts/preview_manager.js
new file mode 100644
index 000000000..f7c79d231
--- /dev/null
+++ b/src/static/scripts/preview_manager.js
@@ -0,0 +1,167 @@
+/**
+ * Live Preview Manager for InkyPi Plugin Settings
+ *
+ * Generates a live preview image when plugin settings change,
+ * without pushing to the physical display.
+ *
+ * Usage in a plugin's settings.html:
+ *
+ *
+ *
+ *
+ *
+ *
+ * The widget auto-renders into #preview-widget and listens to all
+ * form inputs for changes. Call PreviewManager.refresh() after
+ * dynamically adding form elements (e.g. new list items).
+ */
+const PreviewManager = (() => {
+ let timeout = null;
+ let pluginId = null;
+ let requiredFields = {};
+
+ function render(containerId) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+
+ container.innerHTML = `
+
`;
+ }
+
+ function checkRequired() {
+ const form = document.querySelector('form');
+ if (!form) return null;
+ for (const [field, label] of Object.entries(requiredFields)) {
+ if (field.endsWith('[]')) {
+ const elements = form.querySelectorAll(`[name="${field}"]`);
+ const hasValue = Array.from(elements).some(el => el.value.trim());
+ if (!hasValue) return label;
+ } else {
+ const el = form.querySelector(`[name="${field}"]`);
+ if (!el || !el.value.trim()) return label;
+ }
+ }
+ return null;
+ }
+
+ function generate() {
+ clearTimeout(timeout);
+ timeout = setTimeout(async () => {
+ const statusEl = document.getElementById('preview-status');
+ const previewImg = document.getElementById('preview-image');
+ if (!statusEl || !previewImg) return;
+
+ const missingLabel = checkRequired();
+ if (missingLabel) {
+ previewImg.style.display = 'none';
+ statusEl.textContent = `(${missingLabel})`;
+ return;
+ }
+
+ statusEl.textContent = '(loading...)';
+
+ const form = document.querySelector('form');
+ if (!form) return;
+
+ const formData = new FormData(form);
+ formData.append('plugin_id', pluginId);
+
+ try {
+ const response = await fetch('/preview', {
+ method: 'POST',
+ body: formData
+ });
+
+ const result = await response.json();
+ if (result.success) {
+ previewImg.src = result.image;
+ previewImg.style.display = 'block';
+ statusEl.textContent = '';
+ } else {
+ previewImg.style.display = 'none';
+ const err = result.error || '';
+ if (err.includes('Chromium') || err.includes('NoneType')) {
+ statusEl.textContent = '(needs Chromium — works on Pi)';
+ } else if (err.includes('required')) {
+ // Missing required field — show friendly hint
+ const field = err.match(/(\w+) is required/i);
+ statusEl.textContent = field ? `(no ${field[1].toLowerCase()} set yet)` : '(fill in required fields)';
+ } else {
+ // Show the actual error (strip "An error occurred: " prefix)
+ const msg = err.replace(/^An error occurred:\s*/i, '');
+ statusEl.textContent = msg ? `(${msg})` : '(preview unavailable)';
+ }
+ console.error('Preview error:', err);
+ }
+ } catch (err) {
+ previewImg.style.display = 'none';
+ statusEl.textContent = '(preview unavailable)';
+ console.error('Preview error:', err);
+ }
+ }, 500);
+ }
+
+ function listenToForm() {
+ document.querySelectorAll('form select, form input, form textarea').forEach(el => {
+ if (el.dataset.previewBound) return;
+ el.addEventListener('change', generate);
+ el.addEventListener('input', generate);
+ el.dataset.previewBound = '1';
+ });
+ }
+
+ return {
+ /**
+ * Initialize preview for a plugin.
+ * @param {string} id - The plugin_id (e.g. 'clock', 'countdown')
+ * @param {Object} [options] - Configuration options
+ * @param {Object} [options.required] - Map of field names to hint messages for client-side validation
+ * @param {string} [options.containerId='preview-widget'] - ID of the container element
+ */
+ init(id, options = {}) {
+ pluginId = id;
+ requiredFields = options.required || {};
+ render(options.containerId || 'preview-widget');
+ listenToForm();
+ generate();
+ },
+
+ /** Trigger a preview refresh (call after dynamically adding form elements) */
+ refresh() {
+ listenToForm();
+ generate();
+ },
+
+ /** Refresh the "current" image (call after a successful Update Now) */
+ refreshCurrent() {
+ const img = document.getElementById('preview-current');
+ if (img) img.src = '/static/images/current_image.png?' + Date.now();
+ }
+ };
+})();
diff --git a/src/templates/plugin.html b/src/templates/plugin.html
index 9285f0920..01dbcf34b 100644
--- a/src/templates/plugin.html
+++ b/src/templates/plugin.html
@@ -17,6 +17,7 @@
+