Voorbeeldcode per wijziging4 voorbeelden
Wijziging 1
Wellness Live 01 stuurt het 50-inchscherm aan
JSON
{
"id": "wellness-live-01",
"name": "Wellness Live 01",
"location": "Wellnessruimte",
"sizeInches": 50,
"orientation": "landscape",
"language": "nl",
"refreshSeconds": 60,
"scheduleDuration": 45,
"prioritizeLive": true,
"active": true
}
Wat doet dit?Een algemeen profiel gaf niet aan welk fysiek toestel of welke ruimte werd bediend. Dit profiel legt de zichtbare naam, locatie, schermgrootte, liggende stand en standaardtaal voor één uniek screen-id vast. Ook de normale speelduur van het dagprogramma, het verversingsinterval en de livevoorrang horen bij precies dit toestel. Daardoor kan later een tweede scherm een eigen profiel krijgen zonder Wellness Live 01 te veranderen.
Resultaat in de appGasten in de Wellnessruimte zien een stabiel, professioneel ingesteld programma dat specifiek voor het 50-inchscherm is beheerd.
Wijziging 2
Dagprogramma en rubriekslides vormen één gastenafspeellijst
JavaScript / JSON
function playlistItems() {
return [{
kind: 'schedule',
duration: Number(screenProfile().scheduleDuration) || 45
}].concat(screenSlides().map(function (slide) {
return {
kind: 'slide',
duration: Number(slide.duration) || 20,
slide: slide
};
}));
}
{
"channels": {
"schedule": true,
"events": true,
"beauty": true,
"practical": false,
"brand": true
},
"slide": {
"category": "events",
"mediaUrl": "/opgietplanner/schermmedia.php?id=slide-voorbeeld",
"isImage": true,
"isVideo": false
}
}
Wat doet dit?Een ongestructureerde verzameling media zou het scherm druk en onvoorspelbaar maken. playlistItems plaatst daarom eerst altijd het dagprogramma en voegt vervolgens alleen de door de server geselecteerde slides toe. De kanaalconfiguratie onderscheidt Dagprogramma, Events & rituelen, Beauty & verzorging, Praktische informatie en Sfeer & merkverhaal. Per slide bepalen isImage en isVideo hoe de media wordt weergegeven, terwijl duration de zichtbare tijd begrenst.
Resultaat in de appHet scherm wisselt het programma af met relevante foto's en video's, maar behoudt een rustige volgorde en duidelijke inhoud per rubriek.
Wijziging 3
Nieuwe inhoud wordt automatisch opgehaald en als toestelstatus gemeld
JavaScript
var url = new URL(scheduleEndpoint, location.origin);
url.searchParams.set('_screen_refresh', String(Date.now()));
url.searchParams.set('_screen_width', String(
window.screen && window.screen.width ? window.screen.width : window.innerWidth
));
url.searchParams.set('_screen_height', String(
window.screen && window.screen.height ? window.screen.height : window.innerHeight
));
fetch(url.toString(), { cache: 'no-store' })
.then(function (response) {
if (!response.ok) throw new Error('schedule ' + response.status);
return response.json();
})
.then(function (next) {
if (!validSchedule(next)) throw new Error('stale schedule');
data = next;
window.SCREEN_SCHEDULE = next;
render();
updateClock();
});
Wat doet dit?Een televisiescherm blijft vaak de hele dag openstaan; zonder automatische controle kan het oude sessies of verouderde slides blijven tonen. Het werkelijke schermscript bouwt daarom rechtstreeks een URL vanaf scheduleEndpoint. De parameter _screen_refresh voorkomt dat een tussenliggende cache dezelfde aanvraag hergebruikt, terwijl _screen_width en _screen_height de echte toestelafmetingen meesturen. fetch vraagt de gegevens met cache: no-store op, controleert het antwoord en vervangt daarna de actieve planning via data = next. render() tekent onmiddellijk de nieuwe scherminhoud en updateClock() werkt de tijdsstatus bij.
Resultaat in de appGasten zien zonder handmatige tussenkomst actuele planning en media, terwijl het beheerplatform kan aangeven of het scherm online is en welk formaat het werkelijk doorgeeft.
Wijziging 4
Livevoorrang onderbreekt slides vanaf tien minuten voor de start
JavaScript
function shouldPrioritizeSchedule() {
if (!screenProfile().prioritizeLive || !currentState) return false;
if (currentState.active) return true;
if (currentState.tomorrow || !currentState.featured) return false;
var minutes = minutesUntil(currentState.featured);
return minutes > 0 && minutes <= 10;
}
function playPlaylistItem() {
var items = playlistItems();
if (!items.length) return;
if (playlistIndex >= items.length) playlistIndex = 0;
if (shouldPrioritizeSchedule()) playlistIndex = 0;
var item = items[playlistIndex];
if (item.kind === 'slide') showManagedSlide(item.slide, item.duration);
else showScheduleItem();
schedulePlaylistAdvance(shouldPrioritizeSchedule() ? 10 : item.duration);
}
Wat doet dit?Sfeer- of informatieslides zijn nuttig zolang er geen dringend programmamoment is. shouldPrioritizeSchedule controleert daarom eerst of een sessie momenteel actief is. Zo niet, dan berekent de functie hoeveel minuten resteren tot de uitgelichte sessie van vandaag. Bij tien minuten of minder zet playPlaylistItem de index terug op 0, waar het verplichte dagprogramma staat, en controleert de speler om de tien seconden opnieuw.
Resultaat in de appEen live of bijna startende sessie verdwijnt nooit achter een gewone slide: gasten krijgen op tijd het relevante uur, de ruimte en de actuele sessiestatus te zien.