Files
espresso_frame/server/app/templates/_widget_dialog_whiteboard.html
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

76 lines
3.6 KiB
HTML

<h2 class="dialog-title">Whiteboard widget (alpha)</h2>
<section class="card">
<h2 class="card-title">Whiteboard source</h2>
<p class="sub">Renders a Nextcloud Whiteboard (or any Excalidraw
scene) fetched over WebDAV -- credentials set up in
<a href="/settings">Settings</a>.</p>
<div id="whiteboard-current-source">
{% if whiteboard_source %}
<p class="sub" style="margin-top: 10px;">
Currently showing <strong>{{ whiteboard_source.url }}</strong>
using <strong>{{ whiteboard_source.display_name }}</strong>'s
WebDAV account.
<button type="button" class="btn-inline secondary" id="whiteboard-source-clear">Clear</button>
</p>
{% else %}
<p class="sub" style="margin-top: 10px;">No whiteboard configured yet.</p>
{% endif %}
</div>
{% if viewer_has_webdav_creds %}
<form id="whiteboard-source-form" style="margin-top: 16px;">
<label><span id="whiteboard-source-form-label">{{ "Change to one of your own files" if whiteboard_source else "Use one of your own files" }}</span>
<input type="text" id="whiteboard-url-input"
placeholder="https://cloud.example.com/remote.php/dav/files/you/Boards/family.whiteboard"
value="{{ whiteboard_source.url if whiteboard_source and whiteboard_source.user_id == user.id else '' }}">
</label>
<p class="sub" style="margin-top: 4px;">The direct WebDAV URL
to the specific file -- in Nextcloud's Files app, this is
the file's path under
<code>remote.php/dav/files/&lt;your-username&gt;/</code>.
<button type="button" class="btn-inline secondary" id="whiteboard-browse-toggle">Browse...</button></p>
<div id="whiteboard-browser" style="display: none; margin-top: 8px; border: 1px solid var(--border-color, #ccc); border-radius: 6px; padding: 8px;">
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
<button type="button" class="btn-inline secondary" id="whiteboard-browse-up" disabled>Up</button>
<span class="sub" id="whiteboard-browse-current" style="word-break: break-all;"></span>
</div>
<ul id="whiteboard-browse-list" style="list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;"></ul>
<p class="sub" id="whiteboard-browse-error" style="display: none; color: var(--error-color, #c00);"></p>
</div>
<button type="submit">Save</button>
</form>
{% else %}
<p class="sub" style="margin-top: 10px;">Set up WebDAV credentials
in <a href="/settings">Settings</a> first to point this widget at
one of your own files.</p>
{% endif %}
</section>
<section class="card" style="margin-top: 20px;">
<h2 class="card-title">Settings</h2>
<form id="whiteboard-config-form">
<label>Render style
<select id="whiteboard_render_style">
<option value="classic" {% if not whiteboard_cfg or whiteboard_cfg.render_style == 'classic' %}selected{% endif %}>Classic (no frame)</option>
<option value="modern" {% if whiteboard_cfg and whiteboard_cfg.render_style == 'modern' %}selected{% endif %}>Modern (rounded-corner card, experimental)</option>
</select>
</label>
<button type="submit">Save</button>
</form>
</section>
{% include "_widget_border_fields.html" %}
{% include "_widget_button_fields.html" %}
<section class="card" style="margin-top: 20px;">
<h2 class="card-title">Preview</h2>
<p class="sub">How this widget currently renders.</p>
<img class="preview-img" id="whiteboard-preview" alt="Whiteboard preview">
<button type="button" class="secondary" id="whiteboard-preview-refresh">Refresh now</button>
</section>