first commit
This commit is contained in:
Adrian Zürcher
211
frame.html
Normal file
211
frame.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Photo Frame</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body, html { margin: 0; background: black; height: 100%; overflow: hidden; }
|
||||
#viewer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
}
|
||||
.fade-out { opacity: 0; }
|
||||
.fade-in { opacity: 1; }
|
||||
.hide-mouse { cursor: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex items-center justify-center hide-mouse">
|
||||
|
||||
<img id="viewer" src="" class="fade-out">
|
||||
|
||||
<div id="ui" class="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-black/70 backdrop-blur-md text-white px-6 py-3 rounded-2xl border border-white/10 opacity-0 transition-opacity duration-300 hover:opacity-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs uppercase font-bold text-gray-400">Interval:</span>
|
||||
<input type="number" id="speed" value="5" min="1"
|
||||
class="bg-white/10 border border-white/20 rounded px-2 py-1 w-14 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
|
||||
<span class="text-xs text-gray-400">s</span>
|
||||
</div>
|
||||
|
||||
<div class="h-4 w-[1px] bg-white/20"></div>
|
||||
|
||||
<button id="shuffleBtn" onclick="toggleShuffle()" class="text-xs uppercase font-bold text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
|
||||
Shuffle: <span id="shuffleStatus">OFF</span>
|
||||
</button>
|
||||
|
||||
<button onclick="toggleFullScreen()" class="text-sm hover:text-blue-400 transition-colors">Full Screen</button>
|
||||
<a href="/" class="text-sm bg-blue-600 hover:bg-blue-500 px-4 py-1.5 rounded-lg transition-colors">Back</a>
|
||||
</div>
|
||||
|
||||
<div id="qr-container" class="fixed top-6 right-6 p-3 bg-white rounded-xl shadow-2xl opacity-0 transition-opacity duration-300">
|
||||
<div id="qrcode"></div>
|
||||
<p class="text-black text-[10px] font-bold text-center mt-2 uppercase tracking-tighter">Scan to Upload</p>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||||
|
||||
<script>
|
||||
let images = [];
|
||||
let playlist = [];
|
||||
let index = 0;
|
||||
let timer;
|
||||
let isShuffle = true;
|
||||
|
||||
const viewer = document.getElementById('viewer');
|
||||
const speedInput = document.getElementById('speed');
|
||||
const shuffleStatus = document.getElementById('shuffleStatus');
|
||||
|
||||
// Fisher-Yates Shuffle Algorithm
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
}
|
||||
|
||||
function rebuildPlaylist() {
|
||||
if (images.length === 0) return;
|
||||
playlist = [...images];
|
||||
if (isShuffle) {
|
||||
shuffleArray(playlist);
|
||||
}
|
||||
index = 0;
|
||||
}
|
||||
|
||||
async function checkSchedule() {
|
||||
try {
|
||||
const res = await fetch('/api/get-schedule');
|
||||
const schedule = await res.json();
|
||||
|
||||
const now = new Date();
|
||||
const day = now.toLocaleDateString('en-US', { weekday: 'long' });
|
||||
// Format current time as HH:MM
|
||||
const currentTime = now.getHours().toString().padStart(2, '0') + ":" +
|
||||
now.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
const isActive = schedule[day + "_active"];
|
||||
const start = schedule[day + "_start"];
|
||||
const end = schedule[day + "_end"];
|
||||
|
||||
// Check if we should be "OFF"
|
||||
if (isActive && (currentTime < start || currentTime > end)) {
|
||||
viewer.classList.add('hidden'); // Hide image
|
||||
document.body.style.backgroundColor = "black";
|
||||
return false; // Tells the slideshow to skip this turn
|
||||
} else {
|
||||
viewer.classList.remove('hidden');
|
||||
return true; // Everything is fine
|
||||
}
|
||||
} catch (err) {
|
||||
return true; // If API fails, show photos anyway
|
||||
}
|
||||
}
|
||||
|
||||
function toggleShuffle() {
|
||||
isShuffle = !isShuffle;
|
||||
shuffleStatus.textContent = isShuffle ? "ON" : "OFF";
|
||||
shuffleStatus.parentElement.classList.toggle('text-blue-400', isShuffle);
|
||||
rebuildPlaylist();
|
||||
}
|
||||
|
||||
async function loadImages() {
|
||||
try {
|
||||
const res = await fetch('/api/images');
|
||||
const newList = await res.json();
|
||||
|
||||
if (JSON.stringify(images) !== JSON.stringify(newList)) {
|
||||
images = newList;
|
||||
rebuildPlaylist();
|
||||
if (images.length > 0 && !timer) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch image list:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function showNext() {
|
||||
if (playlist.length === 0) return;
|
||||
|
||||
const isRunning = await checkSchedule();
|
||||
if (!isRunning) return;
|
||||
|
||||
viewer.classList.replace('fade-in', 'fade-out');
|
||||
|
||||
setTimeout(() => {
|
||||
viewer.src = "/uploads/" + playlist[index];
|
||||
|
||||
index++;
|
||||
if (index >= playlist.length) {
|
||||
rebuildPlaylist();
|
||||
}
|
||||
|
||||
viewer.onload = () => {
|
||||
viewer.classList.replace('fade-out', 'fade-in');
|
||||
};
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function start() {
|
||||
clearInterval(timer);
|
||||
showNext();
|
||||
const ms = Math.max(speedInput.value, 1) * 1000;
|
||||
timer = setInterval(showNext, ms);
|
||||
}
|
||||
|
||||
// WebSocket Logic
|
||||
const socket = new WebSocket("ws://" + window.location.host + "/ws");
|
||||
socket.onmessage = (event) => {
|
||||
if (event.data === "refresh") {
|
||||
loadImages();
|
||||
}
|
||||
};
|
||||
|
||||
// UI Helpers
|
||||
function toggleFullScreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
let mouseTimer;
|
||||
document.addEventListener('mousemove', () => {
|
||||
document.body.classList.remove('hide-mouse');
|
||||
document.getElementById('ui').classList.add('opacity-100');
|
||||
document.getElementById('qr-container').classList.add('opacity-100');
|
||||
|
||||
clearTimeout(mouseTimer);
|
||||
mouseTimer = setTimeout(() => {
|
||||
document.body.classList.add('hide-mouse');
|
||||
document.getElementById('ui').classList.remove('opacity-100');
|
||||
document.getElementById('qr-container').classList.remove('opacity-100');
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
async function setupQRCode() {
|
||||
try {
|
||||
const res = await fetch('/api/info');
|
||||
const data = await res.json();
|
||||
const uploadUrl = `http://${data.ip}:${data.port}/`;
|
||||
new QRCode(document.getElementById("qrcode"), {
|
||||
text: uploadUrl,
|
||||
width: 128,
|
||||
height: 128
|
||||
});
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
speedInput.addEventListener('change', start);
|
||||
|
||||
// Initial setup
|
||||
setupQRCode();
|
||||
loadImages();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user