tfaour
b95d03f56a
Build and push server image / build-and-push (push) Successful in 34s
The card being dragged never moved -- it just faded in place while a static outline highlighted whatever was underneath the finger. Now the card tracks the pointer 1:1 (translate + a slight scale-up "lift"), gets a stronger shadow while airborne, and leaves its grid slot looking like an empty gap until dropped (transform doesn't remove it from layout flow, so the reserved space stays put -- no reflow needed until drop). pointer-events:none while dragging so elementFromPoint's drop-target hit-test sees through to the card underneath instead of hitting the translated one. Also: a short vibration tick when the touch hold-to-arm fires and another on a successful drop (Chrome/Android only, iOS Safari has no Vibration API -- harmless no-op there), and trimmed the arm delay from 350ms to 250ms now that there's actual feedback confirming the hold registered.
703 lines
26 KiB
HTML
703 lines
26 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block subtitle %}
|
||
<p class="sub">Point your frame's "Tools Server" field at this server's <code>host:port</code>.</p>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{% if cfg.immich_url %}
|
||
<div class="info-box">Immich: <code>{{ cfg.immich_url }}</code> (API key configured). Set via
|
||
<code>IMMICH_URL</code>/<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> -- see
|
||
<code>docker-compose.yml.example</code>.</div>
|
||
{% else %}
|
||
<div class="info-box warn">Immich isn't configured yet. Set <code>IMMICH_URL</code> and
|
||
<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> (copy
|
||
<code>docker-compose.yml.example</code>) and restart the server.</div>
|
||
{% endif %}
|
||
|
||
<div class="layout">
|
||
<div class="main-col">
|
||
<section class="card config-panel">
|
||
<h2 class="card-title">Settings</h2>
|
||
<form id="config-form">
|
||
<label>Album
|
||
<select id="album_id">
|
||
{% if cfg.album_id %}<option value="{{ cfg.album_id }}" selected>(current selection -- reload to rename)</option>{% endif %}
|
||
</select>
|
||
</label>
|
||
<label>Order
|
||
<select id="order">
|
||
<option value="sequential" {% if cfg.order == "sequential" %}selected{% endif %}>Sequential</option>
|
||
<option value="shuffle" {% if cfg.order == "shuffle" %}selected{% endif %}>Shuffle</option>
|
||
</select>
|
||
</label>
|
||
<label>Orientation
|
||
<select id="orientation">
|
||
<option value="landscape" {% if cfg.orientation == "landscape" %}selected{% endif %}>Landscape</option>
|
||
<option value="portrait" {% if cfg.orientation == "portrait" %}selected{% endif %}>Portrait</option>
|
||
<option value="landscape_flipped" {% if cfg.orientation == "landscape_flipped" %}selected{% endif %}>Landscape (flipped)</option>
|
||
<option value="portrait_flipped" {% if cfg.orientation == "portrait_flipped" %}selected{% endif %}>Portrait (flipped)</option>
|
||
</select>
|
||
</label>
|
||
<label>Refresh interval (minutes)
|
||
<input type="number" id="refresh_interval_minutes" min="1" max="1440"
|
||
value="{{ (cfg.refresh_interval_s // 60) or 60 }}" required>
|
||
</label>
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="smart_crop_faces" {% if cfg.smart_crop_faces %}checked{% endif %}>
|
||
<label for="smart_crop_faces">Center faces in crop</label>
|
||
</div>
|
||
<div class="checkbox-row">
|
||
<input type="checkbox" id="quiet_hours_enabled" {% if cfg.quiet_hours_enabled %}checked{% endif %}>
|
||
<label for="quiet_hours_enabled">Quiet hours (don't wake overnight)</label>
|
||
</div>
|
||
<label>Quiet hours start
|
||
<input type="time" id="quiet_hours_start" value="{{ cfg.quiet_hours_start }}">
|
||
</label>
|
||
<label>Quiet hours end
|
||
<input type="time" id="quiet_hours_end" value="{{ cfg.quiet_hours_end }}">
|
||
</label>
|
||
<label>Timezone
|
||
<select id="timezone">
|
||
{% for tz in timezones %}
|
||
<option value="{{ tz }}" {% if tz == cfg.timezone %}selected{% endif %}>{{ tz }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</label>
|
||
<p class="sub" style="margin-top: 8px;">Quiet hours times above are
|
||
interpreted in this timezone. The device may still wake once right
|
||
at the start of quiet hours -- it can't know ahead of time -- but
|
||
goes right back to sleep until they end.</p>
|
||
<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 cfg.queue_target_len == n %}selected{% endif %}>{{ n }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</label>
|
||
<button type="button" class="secondary" id="load-albums">Load Albums</button>
|
||
<button type="submit">Save</button>
|
||
</form>
|
||
<div id="result"></div>
|
||
</section>
|
||
|
||
<details class="card">
|
||
<summary class="card-title">Stats</summary>
|
||
<div id="stats-box"><p class="sub">Loading...</p></div>
|
||
</details>
|
||
</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>
|
||
|
||
<section class="card">
|
||
<h2 class="card-title">Device</h2>
|
||
<div id="device-status"><p class="sub">Loading...</p></div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2 class="card-title">Battery history</h2>
|
||
<div id="battery-chart-wrap"><p class="sub">Loading...</p></div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2 class="card-title">Firmware update</h2>
|
||
<p class="sub" id="firmware-available">
|
||
{% if cfg.firmware_available_version %}Uploaded: v{{ cfg.firmware_available_version }} -- the frame
|
||
updates itself on its next wake if it's running something else.{% else %}No firmware uploaded yet.{% endif %}
|
||
</p>
|
||
<input type="file" id="firmware-file" accept=".bin">
|
||
<button type="button" class="secondary" id="firmware-upload">Upload firmware</button>
|
||
</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>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
const resultEl = document.getElementById('result');
|
||
|
||
function showStatus(ok, message) {
|
||
resultEl.innerHTML = `<div class="status ${ok ? 'ok' : 'err'}">${message}</div>`;
|
||
}
|
||
|
||
async function saveConfig() {
|
||
const minutes = parseInt(document.getElementById('refresh_interval_minutes').value, 10) || 60;
|
||
const body = new URLSearchParams({
|
||
album_id: document.getElementById('album_id').value || '',
|
||
order: document.getElementById('order').value,
|
||
orientation: document.getElementById('orientation').value,
|
||
refresh_interval_s: String(minutes * 60),
|
||
smart_crop_faces: String(document.getElementById('smart_crop_faces').checked),
|
||
queue_target_len: document.getElementById('queue_target_len').value,
|
||
quiet_hours_enabled: String(document.getElementById('quiet_hours_enabled').checked),
|
||
quiet_hours_start: document.getElementById('quiet_hours_start').value || '22:00',
|
||
quiet_hours_end: document.getElementById('quiet_hours_end').value || '07:00',
|
||
timezone: document.getElementById('timezone').value || 'UTC',
|
||
});
|
||
const resp = await fetch('/api/config', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||
body,
|
||
});
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
}
|
||
|
||
document.getElementById('load-albums').addEventListener('click', async () => {
|
||
try {
|
||
await saveConfig();
|
||
|
||
const resp = await fetch('/api/albums');
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
const albums = await resp.json();
|
||
|
||
const select = document.getElementById('album_id');
|
||
select.innerHTML = '';
|
||
for (const a of albums) {
|
||
const opt = document.createElement('option');
|
||
opt.value = a.id;
|
||
opt.textContent = `${a.name} (${a.count})`;
|
||
select.appendChild(opt);
|
||
}
|
||
showStatus(true, `Loaded ${albums.length} album(s) -- pick one and click Save.`);
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
}
|
||
});
|
||
|
||
document.getElementById('config-form').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
await saveConfig();
|
||
showStatus(true, 'Saved.');
|
||
loadQueue();
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
}
|
||
});
|
||
|
||
let upcomingItems = [];
|
||
|
||
// Pointer Events (not the native HTML5 Drag-and-Drop API) so the same
|
||
// code drives mouse, touch, and pen -- native drag-and-drop is
|
||
// mouse-only by spec and never fires at all on phones/tablets.
|
||
//
|
||
// On touch specifically, a card only "arms" for dragging after a
|
||
// brief hold (DRAG_HOLD_MS) with the finger roughly stationary --
|
||
// .photo-card's touch-action stays "pan-y" (native scroll allowed)
|
||
// the whole time up to that point, so a normal touch-and-swipe to
|
||
// scroll the page still works even though it starts on a card. Once
|
||
// armed, touch-action switches to "none" for the rest of that touch
|
||
// so drag tracking gets every pointermove reliably. Mouse skips the
|
||
// hold entirely (no scroll-vs-drag ambiguity with a mouse).
|
||
let dragState = null; // { pointerId, fromIndex, toIndex, moved, armed, holdTimer }
|
||
const DRAG_START_THRESHOLD_PX = 6; // ignore tiny jitter once armed, before committing to a drag
|
||
const DRAG_HOLD_MS = 250;
|
||
const HOLD_CANCEL_THRESHOLD_PX = 10; // movement before the hold timer fires -> treat as a scroll, not a drag
|
||
|
||
function vibrate(ms) {
|
||
// Chrome/Android only -- iOS Safari has no Vibration API. Wrapped so
|
||
// it's a harmless no-op everywhere else rather than needing a
|
||
// feature check at every call site.
|
||
try { navigator.vibrate?.(ms); } catch (e) { /* ignore */ }
|
||
}
|
||
|
||
function clearDragOverStyling() {
|
||
document.querySelectorAll('.photo-card.drag-over').forEach((el) => el.classList.remove('drag-over'));
|
||
}
|
||
|
||
function endDrag(card) {
|
||
if (dragState && dragState.holdTimer) {
|
||
clearTimeout(dragState.holdTimer);
|
||
}
|
||
card.style.touchAction = '';
|
||
card.style.transform = '';
|
||
card.classList.remove('dragging', 'drag-armed');
|
||
clearDragOverStyling();
|
||
if (dragState && dragState.moved && dragState.toIndex !== undefined && dragState.toIndex !== dragState.fromIndex) {
|
||
vibrate(15);
|
||
moveItem(dragState.fromIndex, dragState.toIndex);
|
||
}
|
||
dragState = null;
|
||
}
|
||
|
||
function renderUpcoming(items) {
|
||
upcomingItems = items;
|
||
const grid = document.getElementById('upcoming-grid');
|
||
grid.innerHTML = '';
|
||
|
||
items.forEach((item, i) => {
|
||
const card = document.createElement('div');
|
||
card.className = 'photo-card';
|
||
card.dataset.index = String(i);
|
||
|
||
const img = document.createElement('img');
|
||
img.src = item.thumbnail_url;
|
||
img.alt = '';
|
||
card.appendChild(img);
|
||
|
||
const badge = document.createElement('span');
|
||
badge.className = 'badge';
|
||
badge.textContent = String(i + 1);
|
||
card.appendChild(badge);
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.type = 'button';
|
||
removeBtn.className = 'remove-btn';
|
||
removeBtn.title = 'Remove from rotation';
|
||
removeBtn.textContent = '×';
|
||
removeBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
removeAsset(item.id);
|
||
});
|
||
card.appendChild(removeBtn);
|
||
|
||
const nextBtn = document.createElement('button');
|
||
nextBtn.type = 'button';
|
||
nextBtn.className = 'show-next';
|
||
nextBtn.textContent = 'Show next';
|
||
nextBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
showNext(i);
|
||
});
|
||
card.appendChild(nextBtn);
|
||
|
||
card.addEventListener('pointerdown', (e) => {
|
||
if (e.target.closest('.show-next') || e.target.closest('.remove-btn')) {
|
||
return; // let the button's own click handler run, don't start a drag
|
||
}
|
||
if (e.pointerType === 'mouse' && e.button !== 0) {
|
||
return; // left button only
|
||
}
|
||
|
||
dragState = {
|
||
pointerId: e.pointerId, fromIndex: i, toIndex: undefined, moved: false,
|
||
armed: e.pointerType !== 'touch', startX: e.clientX, startY: e.clientY, holdTimer: null,
|
||
};
|
||
|
||
if (e.pointerType === 'touch') {
|
||
dragState.holdTimer = setTimeout(() => {
|
||
if (dragState && dragState.pointerId === e.pointerId && !dragState.armed) {
|
||
dragState.armed = true;
|
||
card.classList.add('drag-armed');
|
||
card.style.touchAction = 'none';
|
||
vibrate(10);
|
||
try { card.setPointerCapture(e.pointerId); } catch (err) { /* pointer may have already left */ }
|
||
}
|
||
}, DRAG_HOLD_MS);
|
||
} else {
|
||
card.setPointerCapture(e.pointerId);
|
||
}
|
||
});
|
||
|
||
card.addEventListener('pointermove', (e) => {
|
||
if (!dragState || dragState.pointerId !== e.pointerId) {
|
||
return;
|
||
}
|
||
|
||
if (!dragState.armed) {
|
||
// Still deciding whether this is a hold-to-drag or a scroll --
|
||
// moving this much before the hold timer fires means scroll;
|
||
// bail out and let the browser's native pan-y handle it.
|
||
const dx0 = e.clientX - dragState.startX;
|
||
const dy0 = e.clientY - dragState.startY;
|
||
if (Math.hypot(dx0, dy0) > HOLD_CANCEL_THRESHOLD_PX) {
|
||
clearTimeout(dragState.holdTimer);
|
||
dragState = null;
|
||
}
|
||
return;
|
||
}
|
||
|
||
const dx = e.clientX - dragState.startX;
|
||
const dy = e.clientY - dragState.startY;
|
||
|
||
if (!dragState.moved) {
|
||
if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX) {
|
||
return;
|
||
}
|
||
dragState.moved = true;
|
||
card.classList.remove('drag-armed');
|
||
card.classList.add('dragging');
|
||
}
|
||
|
||
// Follows the finger 1:1 -- the actual "pick it up and carry it"
|
||
// feedback that was missing before (the card used to just fade
|
||
// in place while a static outline highlighted the drop target).
|
||
card.style.transform = `translate(${dx}px, ${dy}px) scale(1.06)`;
|
||
|
||
const overCard = document.elementFromPoint(e.clientX, e.clientY)?.closest('.photo-card');
|
||
clearDragOverStyling();
|
||
if (overCard && overCard !== card) {
|
||
overCard.classList.add('drag-over');
|
||
dragState.toIndex = Number(overCard.dataset.index);
|
||
} else {
|
||
dragState.toIndex = undefined;
|
||
}
|
||
});
|
||
|
||
card.addEventListener('pointerup', (e) => {
|
||
if (dragState && dragState.pointerId === e.pointerId) {
|
||
endDrag(card);
|
||
}
|
||
});
|
||
card.addEventListener('pointercancel', (e) => {
|
||
if (dragState && dragState.pointerId === e.pointerId) {
|
||
endDrag(card);
|
||
}
|
||
});
|
||
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
function moveItem(fromIndex, toIndex) {
|
||
const items = upcomingItems.slice();
|
||
const [moved] = items.splice(fromIndex, 1);
|
||
items.splice(toIndex, 0, moved);
|
||
renderUpcoming(items);
|
||
persistOrder(items);
|
||
}
|
||
|
||
async function showNext(index) {
|
||
const assetId = upcomingItems[index].id;
|
||
try {
|
||
const resp = await fetch('/api/queue/promote', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ asset_id: assetId }),
|
||
});
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
}
|
||
loadQueue(); // always refetch the authoritative order rather than guessing locally
|
||
}
|
||
|
||
async function removeAsset(assetId) {
|
||
if (!confirm('Remove this photo from the rotation? It stays in Immich -- this frame just won\'t show it again.')) {
|
||
return;
|
||
}
|
||
try {
|
||
const resp = await fetch('/api/queue/remove', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ asset_id: assetId }),
|
||
});
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
}
|
||
loadQueue();
|
||
}
|
||
|
||
async function persistOrder(items) {
|
||
try {
|
||
const resp = await fetch('/api/queue/reorder', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ queue: items.map((item) => item.id) }),
|
||
});
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
loadQueue();
|
||
}
|
||
}
|
||
|
||
function formatDuration(seconds) {
|
||
const d = Math.floor(seconds / 86400);
|
||
const h = Math.floor((seconds % 86400) / 3600);
|
||
const m = Math.floor((seconds % 3600) / 60);
|
||
if (d > 0) return `${d}d ${h}h`;
|
||
if (h > 0) return `${h}h ${m}m`;
|
||
return `${m}m`;
|
||
}
|
||
|
||
function renderDeviceStatus(device) {
|
||
const el = document.getElementById('device-status');
|
||
el.innerHTML = '';
|
||
if (!device || !device.last_seen) {
|
||
el.innerHTML = '<p class="sub">The frame hasn\'t checked in yet.</p>';
|
||
return;
|
||
}
|
||
const now = Date.now() / 1000;
|
||
const rows = [];
|
||
const ago = formatDuration(Math.max(0, now - device.last_seen));
|
||
rows.push([`Last seen`, `${ago} ago`, device.overdue]);
|
||
if (device.firmware_version) {
|
||
let fw = `v${device.firmware_version}`;
|
||
if (device.firmware_available && device.firmware_available !== device.firmware_version) {
|
||
fw += ` (v${device.firmware_available} waiting)`;
|
||
}
|
||
rows.push(['Firmware', fw, false]);
|
||
}
|
||
if (device.battery) {
|
||
rows.push(['Battery', `${device.battery.percent}%`, false]);
|
||
}
|
||
if (device.on_battery_since) {
|
||
rows.push(['On battery for', formatDuration(now - device.on_battery_since), false]);
|
||
}
|
||
if (device.battery_estimate_s !== null && device.battery_estimate_s !== undefined) {
|
||
rows.push(['Est. remaining', `~${formatDuration(device.battery_estimate_s)}`, false]);
|
||
}
|
||
for (const [label, value, alert] of rows) {
|
||
const p = document.createElement('p');
|
||
p.className = 'sub';
|
||
if (alert) {
|
||
p.style.color = 'var(--danger-text)';
|
||
p.style.fontWeight = '600';
|
||
}
|
||
p.textContent = `${label}: ${value}`;
|
||
el.appendChild(p);
|
||
}
|
||
}
|
||
|
||
document.getElementById('firmware-upload').addEventListener('click', async () => {
|
||
const input = document.getElementById('firmware-file');
|
||
if (!input.files.length) {
|
||
showStatus(false, 'Pick a firmware .bin first.');
|
||
return;
|
||
}
|
||
const form = new FormData();
|
||
form.append('file', input.files[0]);
|
||
try {
|
||
const resp = await fetch('/api/firmware', { method: 'POST', body: form });
|
||
if (!resp.ok) {
|
||
throw new Error(await resp.text());
|
||
}
|
||
const result = await resp.json();
|
||
document.getElementById('firmware-available').textContent =
|
||
`Uploaded: v${result.version} -- the frame updates itself on its next wake if it's running something else.`;
|
||
showStatus(true, `Firmware v${result.version} uploaded (${result.size} bytes).`);
|
||
} catch (e) {
|
||
showStatus(false, e.message);
|
||
}
|
||
});
|
||
|
||
let lastDevice = null;
|
||
|
||
async function loadQueue() {
|
||
if (dragState) {
|
||
return; // don't yank the grid out from under an in-progress drag
|
||
}
|
||
const currentEl = document.getElementById('current-thumb');
|
||
try {
|
||
const resp = await fetch('/api/queue');
|
||
if (!resp.ok) {
|
||
currentEl.innerHTML = '<p class="sub">Not available yet -- configure Immich and an album first.</p>';
|
||
renderUpcoming([]);
|
||
return;
|
||
}
|
||
const data = await resp.json();
|
||
currentEl.innerHTML = '';
|
||
if (data.current) {
|
||
const wrap = document.createElement('div');
|
||
wrap.className = 'thumb-wrap';
|
||
|
||
const img = document.createElement('img');
|
||
img.className = 'thumb';
|
||
img.src = data.current.thumbnail_url;
|
||
img.alt = '';
|
||
wrap.appendChild(img);
|
||
|
||
const removeBtn = document.createElement('button');
|
||
removeBtn.type = 'button';
|
||
removeBtn.className = 'remove-btn';
|
||
removeBtn.title = 'Remove from rotation';
|
||
removeBtn.textContent = '×';
|
||
removeBtn.addEventListener('click', () => removeAsset(data.current.id));
|
||
wrap.appendChild(removeBtn);
|
||
|
||
currentEl.appendChild(wrap);
|
||
} else {
|
||
currentEl.innerHTML = '<p class="sub">Nothing displayed yet.</p>';
|
||
}
|
||
lastDevice = data.device;
|
||
renderDeviceStatus(data.device);
|
||
renderUpcoming(data.upcoming);
|
||
} catch (e) {
|
||
currentEl.innerHTML = '<p class="sub">Could not load.</p>';
|
||
}
|
||
}
|
||
|
||
// Reads resolved colors from CSS custom properties rather than
|
||
// hardcoding hex values, so the chart matches the current theme
|
||
// (light/dark) without needing its own separate palette.
|
||
function themeColor(name) {
|
||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||
}
|
||
|
||
let lastBatteryLog = null;
|
||
|
||
function drawBatteryChart(log) {
|
||
lastBatteryLog = log;
|
||
const wrap = document.getElementById('battery-chart-wrap');
|
||
if (!log || log.length < 2) {
|
||
wrap.innerHTML = '<p class="sub">Not enough data yet.</p>';
|
||
return;
|
||
}
|
||
wrap.innerHTML = '';
|
||
const width = wrap.clientWidth || 440;
|
||
const height = 180;
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
canvas.style.display = 'block';
|
||
canvas.style.border = `1px solid ${themeColor('--border')}`;
|
||
canvas.style.borderRadius = '8px';
|
||
wrap.appendChild(canvas);
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
const gridColor = themeColor('--border');
|
||
const mutedColor = themeColor('--text-muted');
|
||
const accentColor = themeColor('--accent');
|
||
|
||
const pad = { left: 28, right: 8, top: 10, bottom: 20 };
|
||
const plotW = width - pad.left - pad.right;
|
||
const plotH = height - pad.top - pad.bottom;
|
||
|
||
const times = log.map((p) => p[0]);
|
||
const minT = Math.min(...times);
|
||
const maxT = Math.max(...times);
|
||
const spanT = Math.max(1, maxT - minT);
|
||
|
||
const x = (t) => pad.left + ((t - minT) / spanT) * plotW;
|
||
const y = (pct) => pad.top + (1 - pct / 100) * plotH;
|
||
|
||
ctx.strokeStyle = gridColor;
|
||
ctx.fillStyle = mutedColor;
|
||
ctx.font = '10px system-ui, sans-serif';
|
||
ctx.lineWidth = 1;
|
||
ctx.textAlign = 'left';
|
||
[0, 25, 50, 75, 100].forEach((pct) => {
|
||
const yy = y(pct);
|
||
ctx.beginPath();
|
||
ctx.moveTo(pad.left, yy);
|
||
ctx.lineTo(width - pad.right, yy);
|
||
ctx.stroke();
|
||
ctx.fillText(String(pct), 2, yy + 3);
|
||
});
|
||
|
||
ctx.strokeStyle = accentColor;
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
log.forEach((p, i) => {
|
||
const px = x(p[0]);
|
||
const py = y(p[1]);
|
||
if (i === 0) ctx.moveTo(px, py);
|
||
else ctx.lineTo(px, py);
|
||
});
|
||
ctx.stroke();
|
||
|
||
const fmt = (t) => new Date(t * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||
ctx.fillStyle = mutedColor;
|
||
ctx.textAlign = 'left';
|
||
ctx.fillText(fmt(minT), pad.left, height - 4);
|
||
ctx.textAlign = 'right';
|
||
ctx.fillText(fmt(maxT), width - pad.right, height - 4);
|
||
}
|
||
|
||
async function loadBatteryLog() {
|
||
const wrap = document.getElementById('battery-chart-wrap');
|
||
try {
|
||
const resp = await fetch('/api/battery-log');
|
||
if (!resp.ok) {
|
||
wrap.innerHTML = '<p class="sub">Could not load.</p>';
|
||
return;
|
||
}
|
||
const data = await resp.json();
|
||
drawBatteryChart(data.log);
|
||
} catch (e) {
|
||
wrap.innerHTML = '<p class="sub">Could not load.</p>';
|
||
}
|
||
}
|
||
|
||
function renderStats(stats) {
|
||
const el = document.getElementById('stats-box');
|
||
el.innerHTML = '';
|
||
const now = Date.now() / 1000;
|
||
const rows = [
|
||
['Running since', stats.first_seen ? formatDuration(Math.max(0, now - stats.first_seen)) + ' ago' : 'never checked in'],
|
||
['Wake cycles', stats.device_wakes],
|
||
['Photos displayed', stats.photos_displayed],
|
||
['Photos removed from rotation', stats.photos_removed],
|
||
['Battery reports received', stats.battery_reports],
|
||
['Battery recharge cycles', stats.recharge_cycles],
|
||
['OTA updates applied', stats.ota_updates_applied],
|
||
['Settings saved', stats.config_saves],
|
||
];
|
||
for (const [label, value] of rows) {
|
||
const p = document.createElement('p');
|
||
p.className = 'sub';
|
||
p.textContent = `${label}: ${value}`;
|
||
el.appendChild(p);
|
||
}
|
||
}
|
||
|
||
async function loadStats() {
|
||
const el = document.getElementById('stats-box');
|
||
try {
|
||
const resp = await fetch('/api/stats');
|
||
if (!resp.ok) {
|
||
el.innerHTML = '<p class="sub">Could not load.</p>';
|
||
return;
|
||
}
|
||
renderStats(await resp.json());
|
||
} catch (e) {
|
||
el.innerHTML = '<p class="sub">Could not load.</p>';
|
||
}
|
||
}
|
||
|
||
loadQueue();
|
||
loadBatteryLog();
|
||
loadStats();
|
||
|
||
// Redraw the canvas chart (and the "Last seen" alert color) with the
|
||
// new theme's colors as soon as the toggle in the header is used --
|
||
// canvas pixels don't repaint themselves the way CSS does.
|
||
document.addEventListener('themechange', () => {
|
||
if (lastBatteryLog) {
|
||
drawBatteryChart(lastBatteryLog);
|
||
}
|
||
if (lastDevice) {
|
||
renderDeviceStatus(lastDevice);
|
||
}
|
||
});
|
||
|
||
// Fast tick: re-renders "Last seen"/"On battery for" etc. from the
|
||
// already-fetched device data every second, so they count up smoothly
|
||
// (1s ago, 5s ago, 1m ago...) without hitting the server that often.
|
||
setInterval(() => {
|
||
if (lastDevice) {
|
||
renderDeviceStatus(lastDevice);
|
||
}
|
||
}, 1000);
|
||
|
||
// Slow poll: picks up real changes (new photo displayed, queue edited
|
||
// from elsewhere, battery report, firmware version) without a manual
|
||
// refresh. Skipped mid-drag (see loadQueue above).
|
||
setInterval(loadQueue, 10000);
|
||
</script>
|
||
{% endblock %}
|