ethiele/signage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 3.6 mit URL Zoom Funktion

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Erik Thiele
2026-04-27 13:03:45 +02:00
parent 4cd170c9df
commit 0fa3c00319
5 changed files with 162 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/admin.html
View File

@@ -177,11 +177,16 @@
</form>
<form action="/admin/add-url/priority" method="post" class="mb-3">
<div class="input-group">
<div class="mb-2">
<label class="form-label">URL</label>
<input type="url" name="url" class="form-control"
placeholder="https://example.com" required>
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
</div>
<div class="mb-2">
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
</div>
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
</form>
<!-- Playlist -->
@@ -199,9 +204,9 @@
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
{% elif file.type == "url" %}
data-bs-toggle="tooltip"
title="URL: {{ file.name }}"
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
{% endif %}>
{{ file.name }}
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
</span>
{% if file.type == "image" %}
@@ -326,11 +331,16 @@
</form>
<form action="/admin/add-url/{{ screen }}" method="post" class="mb-4">
<div class="input-group">
<div class="mb-2">
<label class="form-label">URL</label>
<input type="url" name="url" class="form-control"
placeholder="https://example.com" required>
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
</div>
<div class="mb-2">
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
</div>
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
</form>
<hr>
@@ -350,9 +360,9 @@
title="<img src='/media/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
{% elif file.type == "url" %}
data-bs-toggle="tooltip"
title="URL: {{ file.name }}"
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
{% endif %}>
{{ file.name }}
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
</span>
{% if file.type == "image" %}

28
templates/player.html
View File

@@ -22,8 +22,9 @@
background: black;
display: none;
position: fixed;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
@@ -122,10 +123,14 @@ function normalizeItem(item) {
if (typeof item === "string") {
const lower = item.toLowerCase();
if (lower.startsWith("http://") || lower.startsWith("https://")) {
return { kind: "url", url: item };
return { kind: "url", url: item, zoom: 1.0 };
}
return { kind: "file", name: item };
}
// Item is already an object (from backend) - ensure zoom is set
if (item.kind === "url" && !("zoom" in item)) {
item.zoom = 1.0;
}
return item;
}
@@ -198,10 +203,27 @@ function playNext() {
vid.pause();
vid.src = "";
iframe.src = "";
iframe.style.transform = "scale(1)"; // Reset zoom
if (item.kind === "url") {
iframe.style.display = "block";
iframe.src = item.url;
// Apply zoom factor with browser-like behavior
// Zoom < 1.0: mehr Inhalt sichtbar (wie Browser herauszoomen)
// Zoom > 1.0: weniger Inhalt sichtbar (wie Browser reinzoomen)
const zoom = item.zoom || 1.0;
if (zoom !== 1.0) {
// Adjust iframe size and scale to simulate real browser zoom
const scale = 1 / zoom; // Inverted for proper zoom behavior
iframe.style.width = `${100 * scale}vw`;
iframe.style.height = `${100 * scale}vh`;
iframe.style.transform = `translate(-50%, -50%) scale(${zoom})`;
} else {
iframe.style.width = `100vw`;
iframe.style.height = `100vh`;
iframe.style.transform = `translate(-50%, -50%)`;
}
setTimeout(playNext, interval);
return;
}