tfaour
37bd657299
device.py's mode-keyed dispatch is replaced by a real compositor: load a frame's widgets, compute pixel rects via app/grid.py, render each through its widget module, and composite with render_panel. Physical NEXT/BACK buttons now execute each frame's assigned FrameButtonAction rows instead of one hardcoded per-mode action. api_frames.py, manage.py, and common.py's build_manage_content are repointed to read/write the frame's widget config rows instead of the old Frame columns, and every settings page (Photos/Calendar/ Whiteboard tabs) now pre-fills its form from the same widget config the write endpoints actually save to -- previously the read and write sides would have silently diverged. The old mode selector and photo-inlay checkbox are removed along with their now-inert wiring; arbitrary widget placement subsumes what the fixed inlay split did. Ships together with Phase 1 (per-type render/action modules) since splitting the read/write cutover across deploys would have left settings changes with no visible effect.
85 lines
3.6 KiB
HTML
85 lines
3.6 KiB
HTML
{% extends "app_base.html" %}
|
|
|
|
{% block title %}{{ frame.name or "Frame" }} · Photos{% endblock %}
|
|
{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
|
|
|
|
{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
|
|
{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="control-banner" class="control-banner" style="display: none;">
|
|
<span id="control-holder"></span>
|
|
<button type="button" id="take-control" class="btn-inline">Take control</button>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<div class="main-col">
|
|
<section class="card">
|
|
<h2 class="card-title">Album</h2>
|
|
<form id="photos-form">
|
|
<label>Album
|
|
<select id="album_id">
|
|
{% if photo_cfg and photo_cfg.album_id %}<option value="{{ photo_cfg.album_id }}" selected>(current selection -- Load Albums to change)</option>{% endif %}
|
|
</select>
|
|
</label>
|
|
<label>Upcoming photos to show
|
|
<select id="queue_target_len">
|
|
{% for n in [5, 10, 15, 20, 25, 30, 40, 50] %}
|
|
<option value="{{ n }}" {% if photo_cfg and photo_cfg.queue_target_len == n %}selected{% endif %}>{{ n }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label>Order
|
|
<select id="order">
|
|
<option value="sequential" {% if not photo_cfg or photo_cfg.order == "sequential" %}selected{% endif %}>Sequential</option>
|
|
<option value="shuffle" {% if photo_cfg and photo_cfg.order == "shuffle" %}selected{% endif %}>Shuffle</option>
|
|
</select>
|
|
</label>
|
|
<label>Display mode
|
|
<select id="display_mode">
|
|
{% for mode, label in display_mode_labels.items() %}
|
|
<option value="{{ mode }}" {% if photo_cfg and photo_cfg.display_mode == mode %}selected{% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<p class="sub" style="margin-top: 8px;">How a photo's aspect ratio
|
|
is reconciled with the panel's: <strong>Crop to fill</strong>
|
|
trims the excess; <strong>Crop to faces</strong> does the same
|
|
but shifts the crop to keep people on screen; <strong>Stretch to
|
|
fill</strong> fills the panel exactly without cropping (photos
|
|
not matching the panel's aspect ratio look stretched);
|
|
<strong>Shrink to fit</strong> shows the whole photo, letterboxed
|
|
if needed.</p>
|
|
<button type="button" class="secondary" id="load-albums">Load Albums</button>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="side-col">
|
|
<section class="card">
|
|
<h2 class="card-title">Now displaying</h2>
|
|
<div id="current-thumb"><p class="sub">Loading...</p></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Upcoming</h2>
|
|
<p class="sub">Drag a photo to reorder (on touch, hold briefly first so a
|
|
normal scroll still works), "Show next" to jump it to the front, or
|
|
the × to remove it from rotation entirely.</p>
|
|
<div id="upcoming-grid" class="photo-grid"></div>
|
|
</section>
|
|
|
|
<div id="result"></div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
|
|
<script src="/static/device_status_bar.js"></script>
|
|
<script src="/static/frame_header.js"></script>
|
|
<script src="/static/queue.js"></script>
|
|
<script src="/static/frame_photos.js"></script>
|
|
{% endblock %}
|