The server now records exactly what was last sent to the device on
every device-facing render (/frame/image, /frame/advance, /frame/back,
and the global hold actions), persisted as Frame.last_displayed_image/
_at and served back via GET /api/frames/{id}/now-displaying. The
header thumbnail is split into that frozen "now displaying" snapshot
and the existing live "up next" re-render, with an arrow between them
-- so editing a layout shows the change immediately on the right while
the left stays exactly what's actually on the panel until the device's
next real wake.
26 lines
1.7 KiB
HTML
26 lines
1.7 KiB
HTML
<span class="frame-name-view" id="frame-name-view">
|
|
<span id="frame-name-text">{{ frame.name or ("Frame " ~ frame.id) }}</span>
|
|
<button type="button" class="frame-name-pencil" id="frame-name-pencil" title="Rename frame" aria-label="Rename frame">✎</button>
|
|
</span>
|
|
<span class="frame-name-edit" id="frame-name-edit-row" style="display: none;">
|
|
<input type="text" id="frame-name-input" maxlength="64" value="{{ frame.name }}">
|
|
<button type="button" class="btn-inline" id="frame-name-save">Save</button>
|
|
<button type="button" class="btn-inline secondary" id="frame-name-cancel">Cancel</button>
|
|
</span>
|
|
<span class="frame-preview-pair">
|
|
<img id="frame-preview-now-thumb" class="frame-preview-thumb frame-preview-thumb-empty" alt="What the frame is currently displaying" title="Now displaying">
|
|
<span class="frame-preview-arrow" aria-hidden="true">→</span>
|
|
<img id="frame-preview-thumb" class="frame-preview-thumb" alt="Live preview of what the frame will show next" title="Up next -- live preview, updates as you edit the layout -- click to enlarge">
|
|
</span>
|
|
|
|
<dialog id="frame-preview-now-dialog" class="frame-preview-dialog">
|
|
<button type="button" id="frame-preview-now-dialog-close" class="icon-btn" aria-label="Close" title="Close">×</button>
|
|
<img id="frame-preview-now-dialog-img" alt="What the frame is currently displaying">
|
|
</dialog>
|
|
|
|
<dialog id="frame-preview-dialog" class="frame-preview-dialog">
|
|
<button type="button" id="frame-preview-dialog-close" class="icon-btn" aria-label="Close" title="Close">×</button>
|
|
<img id="frame-preview-dialog-img" alt="Live preview of what the frame will show next" title="Click to refresh">
|
|
</dialog>
|
|
|