Web feed

2026-01-31 18:47:10 +01:00
parent ee97b8faab
commit f27efaadd1
9 changed files with 163 additions and 0 deletions
@@ -0,0 +1,11 @@
+# Web feed
+
+This is a webpage that can be projected during the event and will show every photo shot by the guests and by the photo booth.
+
+## Install
+
+- Copy the current directory to the computer connected to the projectior
+- Copy config-example.js to config.js and edit it
+- Change BASEURL using the url of the webservices
+- Change TOKEN using a valid token picked from the user table in the db. You can add an user to be used only for the web feed, or use the one created for the photo booth. If you create a new user, you must create a token for it, any relatively secure string should do.
+- During the event, open the index.html file with a web browser on the projector's computer and put it in fullscreen with F11
@@ -0,0 +1,6 @@
+// Configuration
+
+const BASEURL = "https://mysite.com";
+const TOKEN = "";
+const LOW_RES_PROJECTOR = true; // Downloads thumb instead of full size image. For 480p projectors over GSM connections.
+const UPDATE_EVERY_SECONDS = 5;
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="it">
+	<head>
+		<meta charset="UTF-8" />
+		<title>OpenWedding live feed</title>
+		<link rel="stylesheet" href="style.css"/>
+		<script type="text/javascript" src="config.js"></script>
+		<script type="text/javascript" src="scripts/jquery-3.6.1.min.js"></script>
+		<script type="text/javascript" src="scripts/script.js"></script>
+	</head>
+	<body>
+		<div id="feed">
+			<div id="image">
+				<div id="userbadge">
+					<img class="avatar" src="user-placeholder.png" width="32" height="32"/>
+					<span class="name">Lorem ipsum dolor sit amet</span>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
@@ -0,0 +1,81 @@
+let lastImage = null;
+
+$(document).ready(function() {
+	poll();
+	setInterval(poll, UPDATE_EVERY_SECONDS * 1000);
+});
+
+function poll() {
+	// Polls last photos from gallery service
+	$.ajax({
+		url: `${BASEURL}/api/gallery_item/read.php`,
+		headers: {
+			"Authentication": TOKEN
+		},
+		crossDomain: true
+	}).then(function(data){
+		let image = data.records[0];
+		if (!lastImage || lastImage.id != image.id) {
+			lastImage = image;
+			preloadImage(urlFromImageObj(lastImage), function(event) {
+				const imgDiv = $("#feed #image");
+				let preloadedUrl = event.target.src;
+				imgDiv.animate(
+					{
+						opacity: 0.0
+					},
+					500,
+					"swing",
+					function() {
+						showImage(preloadedUrl);
+						imgDiv.animate(
+							{
+								opacity: 1.0
+							},
+							500,
+							"swing");
+						}
+				);
+			});
+		}
+	});
+}
+
+function urlFromImageObj(image) {
+	return LOW_RES_PROJECTOR ?
+		`${BASEURL}${image.imageThumbUrl}` :
+		`${BASEURL}${image.imageUrl}`;
+}
+
+/**
+ * Preloads the image and executes callback
+ * @param {string} url
+ * @param {function} callback
+ */
+function preloadImage(url, callback) {
+	var img=new Image();
+	img.src=url;
+	img.onload = callback;
+}
+
+/**
+ * Replaces image and user name in div.
+ * No animation is performed here.
+ * @param {image} image json object as returned by the gallery service
+ */
+function showImage(imageUrl) {
+	$("#feed #image").css("background-image", `url(${imageUrl})`);
+	if (urlFromImageObj(lastImage) != imageUrl) {
+		// Connection hiccup? Hide user badge
+		$('#userbadge').hide()
+		return;
+	}
+
+	// Show user badge
+	$('#userbadge').show()
+	$('#userbadge .name').text(`${lastImage.author.name} ${lastImage.author.surname}`);
+	if (lastImage.author.picture)
+		$('#userbadge .avatar').attr('src', `${BASEURL}/user-pictures/${lastImage.author.picture}`)
+	else
+		$('#userbadge .avatar').attr('src', 'user-placeholder.png');
+}
@@ -0,0 +1,42 @@
+@font-face {
+    font-family: main-serif-font;
+    src: url(fonts/font.ttf);
+}
+
+body {
+	margin: 0px;
+	padding: 0px;
+	background-color: black;
+	font-family: main-serif-font;
+}
+
+#feed #image {
+	width: 100vw;
+	height: 100vh;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-image: url('placeholder.png');
+}
+
+#feed #image #userbadge {
+	position: absolute;
+	bottom: 20px;
+	left: 20px;
+	padding: 10px;
+	border-radius: 30px;
+	background-color: #fd3a0479;
+	font-weight: bold;
+	display: flex;
+}
+
+#feed #image #userbadge .name {
+	align-self: center;
+	margin-left: 15px;
+	margin-right: 15px;
+	color: white;
+}
+
+#feed #image #userbadge .avatar {
+	border-radius: 50%;
+}