Xibo: gratis aan de slag met digital signage

Wil je graag eens experimenteren met digital signage, dan kan je terecht bij gratis oplossingen als Concerto en Xibo. Beide hebben wel hun verdiensten, maar Concerto is wat complexer, minder flexibel en meer gericht op grote publieke ruimten.

In deze workshop focussen we ons volledig op Xibo, dat al in 2006 beschikbaar werd onder een AGPLv3 openbron-licentie. Xibo bestaat uit twee componenten. Eerst is er het servergedeelte: een PHP/MySQL webapplicatie, die zowel onder Windows als Linux draait. Deze server fungeert als centrale beheermodule voor het netwerk van displays. Je voert hier niet alleen allerlei controletaken uit, je uploadt hier bijvoorbeeld ook je ontwerplay-outs en multimediale content.

De Xibo-client is software die weinig meer doet dan de juiste content op het geschikte moment op het aangesloten display tonen, op basis van wat de server opdraagt. De makers van Xibo raden voor een stabiele installatie de Windows-client aan, hoewel er ook een Linux- en Android-client bestaat. Die laatste is wel niet gratis. Server en client kunnen op hetzelfde fysieke toestel worden geïnstalleerd, maar dat is zeker geen vereiste. De server kan gerust ook een andere machine in het LAN of ergens op het internet zijn.

Aan de server worden geen al te zware eisen gesteld. Je hebt alvast een webserver nodig, waarvoor in principe zowel Apache als IIS kunnen dienen. Die laatste wordt echter niet actief uitgetest door de ontwikkelaars en kunnen we dus niet aanbevelen. Verder heb je nog PHP en een MySQL-database nodig. Xibo is wel nogal kieskeurig wat de PHP-ondersteuning betreft. Je hebt PHP 5.2.9 nodig, maar tegelijk durft PHP 5.3 of hoger wel eens in de clinch te gaan met bepaalde componenten van de Xibo-webservice.

Stap 1: Server installeren

Wij opteren alvast voor een eenvoudige XAMPP-server en installeren die op een toestel met Windows 7 32 bit en 4 GB RAM. Een voor de hand liggende downloadstek is www.apachefriends.org/en/xampp-windows.html, maar die valt eigenlijk buiten de boot omdat die standaard PHP 5.4.7 meestuurt. Gelukkig is er nog een oudere versie die Xibo wél lust: XAMPP 1.7.1. Die kun je downloaden via http://pcmagonline.net/link/xampp171  (34,8 MB). Start vervolgens de installatie.

Mogelijk volgt een waarschuwing in verband met UAC: installeer XAMPP niet in de map %Program Files%, maar laat bij voorkeur de standaardmap c:xampp geselecteerd. Een venster verder kun je al meteen aangeven dat je bepaalde onderdelen als een service wil geïnstalleerd zien, maar daar krijg je straks nog wel de gelegenheid toe. Met ‘Finish’ rond je de installatie af.

Stap 2: Server instellen

Je krijgt nu automatisch de gelegenheid het XAMPP Control Panel te openen. Toch niet? Start deze toepassing dan zelf op via het Windows-startmenu. Plaats een vinkje bij Svc, zowel bij Apache als bij MySQL. Je geeft in beide gevallen ook aan dat je die effectief als een service wil starten. Mocht je de server absoluut op een andere poort (dan 80) willen draaien: dat kan via een manuele ingreep in het configuratiebestand httpd.conf in de map xamppapacheconfighttpd.conf. Vervolgens druk je op de ‘Start’-knop naast beide services. Als alles goed is, verschijnt even later ‘Running’.

Stap 3: MySQL-beveiliging toevoegen

Op dit moment is de MySQL-database nog open en bloot, want er is geen wachtwoord om ze af te schermen. Dat moeten we dus eerst in orde brengen. Druk dus op de knop ‘Admin’ naast MySQL in de beheermodule van XAMPP. Het configuratiescherm van PHPMyAdmin verschijnt. Om een root-wachtwoord te kunnen instellen, klik je eerst rechtsboven op ‘Rechten’. Vervolgens klik je op het pictogram met ‘Wijzig rechten’, naast de root-gebruikber bij localhost. Scroll naar beneden en vul bij ‘Wijzig wachtwoord’ een stevig wachtwoord in (2x). Klik daarna op ‘Start’.

Stap 4: Xibo-server installeren

Tijd nu om Xibo zelf te installeren. Daarvoor download je bij voorkeur de recentste stabiele versie op xibo.org.uk/get-xibo. Op het moment van dit schrijven is dat nog 1.4.2, hoewel er ook al een preview van de volgende release (1.5.1) bestaat.

Pak het gedownloade zip-bestand uit en kopieer de inhoud van de map xibo-server-142 naar de (nog zelf te creëren) map c:xampphtdocsxibo. De server heeft echter ook nog een map nodig om alle (media-)bestanden te kunnen stockeren. De makers raden ten stelligste af hiervoor een submap binnen XAMPP te gebruiken. Wij opteerden voor c:xibobib.

Om Xibo effectief te installeren stem je vervolgens je browser af op http://localhost/xibo. De installer-module van Xibo komt in beeld. Als alles goed is, hoef je hier weinig meer te doen dan twee keer op ‘Next’ te klikken en via de knop ‘Create New’ aan te geven dat je een nieuwe database wilt aanmaken. Laat hier localhost staan bij ‘Host’, vul root in bij ‘Admin Username’ en het wachtwoord dat je eerder had opgegeven. Bij de naam van de database en de gebruiker kun je gerust xibo laten staan. Ook hiervoor voorzie je een wachtwoord. Een venster verder wordt je eveneens om een wachtwoord gevraagd voor de beheerder (xibo_admin). Twee schermen verder geef je aan waar Xibo zijn mediabestanden hoort op te slaan (in ons voorbeeld was dat c:xibobib) en je vult een willekeurige string als ‘Server Key’ in (bijvoorbeeld Xibo_PCMagazine). Druk nogmaals tweemaal op ‘Next’.

Stap 5: Xibo-client installeren en configureren

Voor onze testopstelling houden we het eenvoudig: we installeren de client op hetzelfde toestel. De bijhorende client vinden we op https://launchpad.net/xibo/1.4/1.4.2. Die is geschikt voor Windows 2000 tot 7 (Windows 8 wordt vooralsnog niet officieel ondersteund). Verder heb je nog nodig: .NET Framework 3.5, Internet Explorer 7, Flash Player 9, Windows Media Player 11 en – desgewenst – PowerPoint 2003 ; hogere versies kunnen telkens ook.

Start het gedownloade msi-bestand op, druk driemaal op ‘Next’ en op ‘Install’ en ‘Finish’. Meer is er niet aan, maar er is wel nog een initiële configuratie nodig. Vanuit het startmenu start je nu de module Xibo Client Options op. Op het tabblad ‘General’ vul je de juiste server-URL in (in ons geval: http://localhost/xibo) evenals de bijhorende ‘Server Key’. De overige instellingen kun je ongemoeid laten. Sla de wijzigingen op. Over naar het tabblad ‘Register’. Geef je client een duidelijke naam mee en klik op ‘Register’. Je verneemt hier dat de aanvraag nog moet worden goedgekeurd. Bevestig met ‘Save’ en sluit de module af. 

Stap 6: Server configureren

Om die goedkeuring te kunnen verlenen moeten we ons dus als beheerder aanmelden bij de Xibo-server. Dat kan op de server zelf, maar net zo goed ook via een webbrowser op een ander netwerktoestel. Surf naar http:///xibo/index.php en meld je aan met het xibo_admin-ID.

In de beheermodule van Xibo open je nu eerst het onderdeel ‘Displays’. Je merkt hier de client op die net om een registratie heeft verzocht. Klik hier op ‘Edit’. Scroll naar beneden, vul ‘Yes’ in bij ‘License Display’ en bevestig met ‘Save’. Over weer naar de client: die start je op vanuit het Windows startmenu. Het Xibo-logo verschijnt, even later gevolgd door wat in de ‘default layer’ aan serverkant is voorzien. Dat kun je helemaal aanpassen. De player afsluiten doe je met Alt+F4.

Stap 7: Lay-out ontwerpen

We hebben hier jammer genoeg niet de ruimte om alle onderdelen van Xibo te bespreken. Zo hebben we het niet over het gebruikersbeheer dat je toelaat verschillende beheerrechten te verlenen aan diverse gebruikersgroepen. We tonen je wel hoe je een eigen lay-out ontwerpt. Meld je aan bij de Xibo-beheermodule en klik achtereenvolgens op ‘Dashboard’ en ‘Layouts’. Momenteel zijn die beperkt tot de standaard lay-out. Klik hier op ‘Add Layout’ en vul de gevraagde gegevens in: naam, beschrijving, tags en sjabloon. Bij die laatste kun je uit een aantal formaten kiezen, zoals ‘Full Screen 16:9’ en ‘Portrait 3:4’.  Bevestig je keuze met ‘Save’. Je kunt meteen beginnen met het ontwerp; desnoods selecteer je de nieuwe lay-out en klik je op ‘Design’.

Stap 8: Achtergrond(plaatjes) toevoegen

Je ziet nu in eerste instantie een leeg gebied. Die kun je alvast voorzien van een gepaste achtergrond. Klik linksboven op ‘Background’ en stel de gewenste kleur in. Een afbeelding kan ook, maar die moet je in dit stadium wel nog toevoegen. Klik op ‘Add Image’ en spoor een geschikt plaatje op (bmp, gif, jpg of png; maximum 64 MB). Of je laat je inspireren door een vijftigtal ontwerpen op xibo.org.uk/layouts. Geef je afbeelding een naam mee en bepaal hoelang die afbeelding moet duren (in seconden). Klik vervolgens op ‘Save’.

Stap 9: Regio-indeling en content bepalen

Je merkt dat je standaard maar één gebied binnen je lay-out ter beschikking hebt. Het is wellicht handiger om twee of drie regio’s te kunnen opvullen, elk met eigen content. Verwijder eerst de huidige regio: klik erop met de rechtermuisknop en kies ‘Delete’. Vanuit hetzelfde contextmenu kies je vervolgens ‘Add Region’. Versleep de regio (van 50 bij 50 pixels) tot die de gewenste afmetingen en locatie binnen je lay-out heeft. Op dezelfde manier voeg je nu eventueel nog andere regio’s toe. 

Een regio zonder content heeft natuurlijk weinig zin. Dat los je als volgt op. Rechtsklik op de gewenste regio en kies ‘Timeline’. De tijdlijn is nog leeg, maar links zie je al heel wat contenttypes opgelijst: een tellertje, embedded html, datasets, flash, afbeelding, PowerPoint, tekst, ticker (rss-feed), microblog (tweets), video en webpagina. Bij wijze van (eenvoudig) voorbeeld kiezen we hier voor ‘Text’. Vul de gewenste tekst in, geef die wat vorm en geef aan in welke richting en hoe snel de tekst eventueel moet scrollen, hoelang die te zien moet zijn en of die zich aan het regioformaat moet aanpassen. Druk op ‘Save’: het item wordt aan de tijdlijn toegevoegd.

Stap 10: Geavanceerde content

Een van de interessantste contenttypes is embedded html. Dat laat je namelijk toe allerlei HTML-code toe te voegen en zo uiteenlopende online widgets (gadgets) in Xibo op te halen. Daaar hoort bijvoorbeeld ook code uit Google Drive bij of andere online opslagservices. Handig, want dan hoeven medebeheerders (met beperkte rechten) dat item maar online aan te passen in plaats van met de Xibo-interface aan de slag te moeten. We houden het hier opnieuw eenvoudig: een buienradar. Die vind je bijvoorbeeld op rss.weeronline.nl/index.php?module=overview&page=gadget. Even googelen zet je ook snel op het spoor van andere gadgets. Klik je hier bijvoorbeeld op ‘Buienradar’, dan verschijnt er een stukje HTML-code: het volstaat dat in het venster van het embedded html-type van Xibo te plakken. Sla je wijzigingen op en sluit het venster af.

Stap 11: Lay-out plannen

De bedoeling is natuurlijk dat je je ontwerp ook op je client(s) te zien krijgt. Dat kan door die lay-out in te plannen. Open daarvoor de rubriek ‘Schedule’. Aan de linkerkant krijgt nu een miniatuurkalender te zien, met daaronder een overzicht van de (groepen) displays. Plaats een vinkje bij de display(s) waarvoor je een of meer lay-outs wilt inplannen en klik op de dag waarop je die actief wil. Geef een begin- en eindtijd op en selecteer de gewenste lay-out uit het uitrolmenu. Je kunt overigens op elk moment weer wijzigingen aanbrengen door op de naam van de ingeplande lay-out te klikken. Vanuit ditzelfde venster is het ook mogelijk om de lay-out weer weg te halen. In dit laatste geval moet je bovendien aangeven of je die wel degelijk weg wilt uit alle displays die je in het linkerpaneel had geselecteerd. Het resultaat kun je vervolgens in de Xibo player bekijken.