Files
tfaour e331f5e5a1
Build and push server image / test (push) Successful in 43s
Build and push server image / build-and-push (push) Successful in 3m51s
Build and push server image / deploy (push) Failing after 1m57s
Roll out "modern" HTML/CSS render style to every widget except photos
Extends weather's experimental Chromium+Jinja2 render style to battery,
text, tasks, static image, whiteboard, and calendar (all four view
modes -- agenda/today_tomorrow/week/month), and gives the photos widget
its own genuinely independent palette + dithering strength.

Photos: Frame.photo_palette_rgb/photo_dither_strength (mirroring the
existing palette_rgb/dither_strength), with a second "Photos
configuration" card in Advanced Configuration. widgets/photos.py's
render() quantizes itself against these before returning -- no
render_panel changes needed, since photos is the only widget that
genuinely needs a different reference palette and can carry that
itself, the same way modern-style widgets already self-dither via
ordered_dither.

Battery/text/tasks/static image/whiteboard: same render_style pattern
weather established (render_style column, html_render.py build
function, Jinja2 template, dialog toggle). Static image/whiteboard get
their first-ever visual chrome (a rounded-corner shadowed card,
shared framed_image.html.jinja) since classic draws them with zero
frame at all. Fixed the same "preview endpoint bypasses render_style"
bug weather originally shipped with, for tasks/static/whiteboard/
calendar's preview endpoints.

Calendar: own module (app/calendar_html_render.py, mirroring
calendar_render.py's separation from the simpler widgets) covering all
four view modes, not just agenda -- reuses calendar_render's own
private helpers so event colors/times/weather/month-grid math match
classic exactly. Found and fixed two real cross-day layout bugs along
the way: a per-day header height that varied based on whether that
specific day had a weather entry (misaligning where every other day's
event rows started across the week/month grid), and regular-weight
small text being fragile under Bayer ordered dithering (out-of-month
day numbers degraded into unrecognizable speckle) -- fixed by using
bold everywhere and de-emphasizing via size instead of weight/gray,
since gray text has the same dithering fragility this project's PIL
renderers already avoid for exactly this reason.

Migrations 32-38 (Frame's two new columns, then one render_style column
per widget config table). 452 tests passing, including new dispatch/
migration coverage per widget type and a dedicated photos test proving
photo_palette_rgb produces genuinely independent quantization from the
frame's main palette_rgb.
2026-07-31 03:52:19 +00:00

66 lines
2.4 KiB
JavaScript

// Static image widget dialog: upload, display-mode setting, and the
// rendered preview. Not a page-load script -- frame_layout.js fetches
// this widget's dialog HTML fragment, injects it into the shared
// <dialog>, points window.FRAME_API at this specific widget
// (/api/frames/{id}/widgets/{widget_id}), then calls initStaticDialog().
function loadStaticPreview() {
document.getElementById('static-preview').src = `${window.FRAME_API}/preview/static?_=${Date.now()}`;
}
function initStaticDialog() {
document.getElementById('static-upload').addEventListener('click', async () => {
const input = document.getElementById('static-file');
if (!input.files.length) {
showStatus(false, 'Pick a file first.');
return;
}
const form = new FormData();
form.append('file', input.files[0]);
try {
const resp = await fetch(`${window.FRAME_API}/static-upload`, { method: 'POST', body: form });
if (!resp.ok) throw new Error(await apiError(resp));
const result = await resp.json();
const currentFileEl = document.getElementById('static-current-file');
currentFileEl.textContent = 'Currently showing: ';
const nameEl = document.createElement('strong');
nameEl.textContent = result.filename;
currentFileEl.appendChild(nameEl);
input.value = '';
showStatus(true, 'Uploaded.');
loadStaticPreview();
} catch (e) {
showStatus(false, e.message);
}
});
document.getElementById('static-config-form').addEventListener('submit', async (e) => {
e.preventDefault();
const body = new URLSearchParams({
display_mode: document.getElementById('display_mode').value,
static_render_style: document.getElementById('static_render_style').value,
});
try {
const resp = await fetch(`${window.FRAME_API}/config`, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body,
});
if (!resp.ok) throw new Error(await apiError(resp));
showStatus(true, 'Saved.');
loadStaticPreview();
} catch (e) {
showStatus(false, e.message);
}
});
document.getElementById('static-preview-refresh').addEventListener('click', loadStaticPreview);
loadStaticPreview();
initBorderFields();
initButtonActionFields();
}
function closeStaticDialog() {
// Nothing to tear down -- no poll interval, unlike the photos dialog.
}