Xibo est une solution OPEN SOURCE (donc gratuite) d'affichage dynamique. L'affichage dynamique permet (entre autre) de présenter un ou plusieurs produits sur ce que l'on appelle "des afficheurs" (un écran d'ordinateur, une télévision, etc.). Un exemple d'affichage dynamique et très connu de tous serait les écrans que l'on voit dans les pharmacies avec des pubs pour des médicaments qui tournent, ou encore la météo, etc.
Xibo est une des seules solutions gratuites à ce jour mais est néanmoins très puissant! Il existe d'ailleurs une grande communauté active sur le net.
Pour ma part, j'ai installé une de ces solutions chez un client qui souhaitait avoir dessus:
- L'heure et la date du jour
- Un flux streaming de la télévision BFM TV
- La météo sur plusieurs jours
- Un flux RSS
- Un diaporama de ses réalisations
Le seul bémol à l'heure actuelle est qu'il n'existe pas de fonction qui permette de faire un diaporama. Pourtant c'est une fonction très importante pour faire de l'affichage dynamique. Peut être que la programmation d'une telle fonction doit être très difficile à mettre en place.
Vous l'aurez donc compris, il va falloir contourner le problème et proposer soit même une alternative. Pour moi, l'alternative est de créer une page Web en PHP qui indique où se trouve le dossier d'images, ainsi qu'une feuille de style CSS et quelques lignes de JAVASCRIPT + une librairie JQUERY.
N'ayez pas peur, il n'y a pas besoin d'être un grand développeur pour s'en sortir, j'ai trouvé un pack qu'il suffit de modifier suivant ses besoins. Cerise sur le gâteau je vous ai mâché tout le travail et il ne vous restera presque plus rien à modifier...
Alors voici notre objectif:
Je considère que vous avez déjà installé Xibo et qu'il est prêt à l'emploi. Si ce n'est pas le cas et que vous souhaitez un tuto concernant l'installation de Xibo ou plus encore, n'hésitez pas à m'en faire part dans la rubrique "Détente" du forum.
Bon, nous avons donc un Xibo fonctionnel et maintenant ce que nous souhaitons faire c'est un diaporama d'images présentes dans un dossier sur un serveur (par exemple).
De plus, il faut qu'à chaque ajout ou suppression d'image il n'y ai pas besoin de modifier le code (il suffira juste de redémarrer le client Xibo). La taille des images n'étant jamais la même et qu'elle varie selon les photos, il ne faut pas qu'elles dépassent du cadre ou soient tronquées.
Bon vous l'aurez compris ce n'est pas si simple que ça... Mais comme je vous ai dis, le travail est prémâché.
Environnement informatique:
Pour ce tuto je vous énumère ce qu'il est mis en place chez mon client:
- Un petit ordinateur avec "Xibo Client" connecté à une TV écran plat afin de lancer l'affichage dynamique.
- Un serveur Windows SBS 2011 qui servira de serveur XIBO.
- Wamp server installé sur le serveur Windows SBS 2011
- Xibo Server installé sur le serveur Windows SBS 2011
Le coin téléchargement:
Voici tout ce dont vous aurez besoin pour mettre en place Xibo:
- Wamp server : Rendez-vous sur la page des téléchargements et prenez la version qui correspond à votre système d'exploitation
- Xibo Server
- Xibo Client
- Notepad ++ : Logiciel nécessaire pour modifier les fichiers de config du diaporama. Vous pouvez utiliser un autre éditeur de texte si vous le souhaitez. Moi j'aime bien celui là.
Maintenant attaquons-nous au cœur du problème. Notre diaporama dynamique.
- Téléchargez le pack "Dynamic Image Slideshow"
Il y a dedans 3 dossiers et un fichier PHP
Dossier 1: images (Dossier dans lequel il y a un sous-dossier dans lequel seront présentes les images constituant le diaporama)
Dossier 2: scripts (Dossier dans lequel se trouvent les scripts de la bibliothèque JQUERY, nécessaires au diaporama)
Dossier 3: styles (Dossier dans lequel se trouve la feuille de style qui correspond à la forme qu'aura le diaporama)
Fichier PHP: index.php (Page Web qui se lancera dans Xibo pour envoyer le diaporama)
Toutes les modifs importantes ont déjà étés faites, il ne vous restera plus qu'à modifier ce qui est nécessaire pour votre propre environnement. - Dézippez le pack à l'endroit que vous voulez. Moi il est dans un sous-dossier sur le serveur.
- Ouvrez la feuille de style "dynamicslides.css" présente dans le dossier "styles" puis modifiez les codes suivants:
Mettez les bonnes tailles (width et height) par rapport à la région que vous allez créer dans Xibo (correspondant aux dimensions du diaporama) ainsi que la bonne couleur de fond (background-color)Code : Tout sélectionner
body { width: 816px; height: 600px; margin: auto; text-align: center; background-color: black; }
Mettez les bonnes tailles (width, height et line-height) par rapport à la région que vous allez créer dans Xibo. A savoir que "line-height" doit être égal à "height".Code : Tout sélectionner
.imstyle { /*background-color: green;*/ height: 860px; line-height: 860px; vertical-align: middle; display:inline-block; overflow: hidden; text-align: center; width: 100%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
Pour info: la ligne "background-color: green;" est commentée. Je la laisse car suivant l'environnement et les dimensions souhaitées du diaporama, il est parfois nécessaire de voir des couleurs pour les modifications. Il suffit de décommenter cette ligne en supprimant les caractères "/*" et "*/" (sans les guillemets "") pour la rendre active. - Vous pouvez enregistrer votre feuille de style.
- Maintenant il faut créer un "alias" dans Wamp server. Cela va nous permettre de pouvoir placer le dossier du diaporama ailleurs que dans le dossier (Site) Xibo.
Pour cela, rendez-vous dans le dossier d'installation de Wamp server (génarelement à la racine de C:) puis dans le dossier "alias":
Là, vous créez un nouveau document texte que vous appellerez comme vous voulez (moi je l'ai simplement appelé "slide.conf" (sans les guillemets "")).Code : Tout sélectionner
C:\wamp\alias
/!\Par défaut c'est un fichier .txt, il faut le renommer en .conf/!\
Dans ce document texte vous ajoutez le code suivant:
/slide/ = C'est l'alias qu'il faudra taper pour tomber dans le dossier de notre diaporama (attention ça respecte la casse donc évitez les majuscules)Code : Tout sélectionner
Alias /slide/ "E:/Partage/SERVEUR/TRANSFERT PHOTO/Rendus Slide Xibo/" <Directory "E:/Partage/SERVEUR/TRANSFERT PHOTO/Rendus Slide Xibo/"> Options Indexes FollowSymLinks MultiViews AllowOverride all Order Allow,Deny Allow from all </Directory>
"E:/Partage/SERVEUR/TRANSFERT PHOTO/Rendus Slide Xibo/"= C'est le chemin complet du dossier du diaporama (vous noterez que ce sont des slashs et non des anti-slashs, comme il est coutume d'indiquer pour un chemin réseau.) Attention à bien mettre les Guillemets "" cette fois ci.
<Directory "E:/Partage/SERVEUR/TRANSFERT PHOTO/Rendus Slide Xibo/"> = Même chose que précédemment
Le reste est à inscrire tel quel. - Voilà notre alias est créé. Cela veut dire que maintenant, en tapant dans une barre d'URL d'un navigateur:
Vous atterrirez dans votre diaporama. La page "index.php" se lancera toute seule et votre diaporama se lancera également.Code : Tout sélectionner
http://nom_du_serveur/slide/ - Dans Xibo, créez une région qui contiendra votre diapo. Dans notre cas la région fait 816px / 600px.
- Clic droit sur la région puis "Chronologie"
- Choisissez l'option "Webpage" pour indiquer que nous voulons afficher une page Web.
- Voici les cases à remplir:
Link = C'est l'alias que nous avons créé plus haut: http://nom_du_serveur/slide/
Duration = Le temps que le diaporama tournera sans se rafraichir. Dans notre cas je l'ai mis au maximum à 999999s
Décalage vers le haut = 0 (on ne veut pas être décalé)
Décalage vers la gauche = 0 (pareil que précédemment)
Scale Percentage = 100 (pour être à l'échelle 1)
Vous pouvez laisser la case "Background transparency" cochée ou décochée peu importe - Vous pouvez maintenant insérer les images que vous voulez voir dans votre diaporama à cet endroit:
X: = La lettre de lecteur dans lequel le dossier du diaporama a été dézippéCode : Tout sélectionner
X:Chemin_Dossier_Diaporama\images\slideshow
Chemin_Dossier_Diaporama = Le chemin exact où se situe le dossier dézippé du diaporama
Voilà, il ne vous reste plus qu'à lancer le client Xibo sur l'ordinateur cible (qui se trouve sur le même réseau) et le diaporama se lancera.
NOTA: il faut attendre quelques secondes voire minutes avant de voir toutes les images si vous en avez beaucoup.
NOTA2: Xibo utilise normalement IE7 pour afficher les pages web et cela peut poser des problèmes de visualisation. Pour contourner ce problème et faire en sorte que Xibo utilise la version 8, 9 ou 10 de IE (présente sur l'ordinateur client) voici comment procéder:
- Sur l'ordinateur client cliquez sur démarrer --> Executer (ou dans la barre de recherche de Vista, Seven ou 8) --> tapez "regedit" --> Rendez-vous à
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION - Dans le volet de droite clic droit --> Nouveau --> Valeur DWORD --> Nommez-la "XiboClient.exe" (sans les guillemets "") --> Dans "Données de valeur" mettre le code correspondant au navigateur présent sur l'ordinateur client.
Pour info:
Code pour IE8 = 0x1F40 (en héxadécimal) = 8000 (en décimal)
Code pour IE9 = 0x2328 (en héxadécimal) = 9000 (en décimal)
Code pour IE10 = 0x02710 (en héxadécimal) = 10000 (en décimal)