penguin86/OpenWeddingApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web feed

Browse Source
This commit is contained in:
Daniele Verducci
2026-01-31 18:47:10 +01:00
parent ee97b8faab
commit f27efaadd1
9 changed files with 163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web-feed/README.md Normal file
View File

@@ -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

6
web-feed/config-example.js Normal file
View File

@@ -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;

BIN
web-feed/fonts/font.ttf Normal file
View File

Binary file not shown.

21
web-feed/index.html Normal file
View File

@@ -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>

BIN
web-feed/placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 B

2
web-feed/scripts/jquery-3.6.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

81
web-feed/scripts/script.js Normal file
View File

@@ -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');
}

42
web-feed/style.css Normal file
View File

@@ -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%;
}

BIN
web-feed/user-placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB