Un Tableau de Bord numérique – v2 !

Medium tdb314 img1

Difficulté:

Comment créer un afficheur polyvalent autour d’un vieux moniteur, mais sous la dernière version de Raspbian Jessie et avec un Raspberry Pi 2 ou 3.

L’objet de ce tutoriel est le même que celui-ci, mais en s’appuyant cette fois sur un Raspberry Pi 2 B ou un Pi 3 tournant sous Raspbian Jessie, et en partant de zéro.

Pour rappel, il s’agit de créer une sorte de “borne multimédia”, capable d’afficher un peu tout ce que l’on veut.
Le principe est assez simple dans la théorie : on crée un page web et on l’affiche… facile à dire, non ? 😉

Dans la réalité, on trouve plein d’informations sur le sujet sur le web, mais les tutoriels trouvés sont souvent bien compliqués pour ne pas dire obscures, il faut souvent se taper les 172 commentaires associés pour arriver à quelque chose qui “marchotte” et, ceux s’appuyant sur un Raspberry Pi, utilisent tous un Raspberry d’ancienne génération (version B) et un OS qu’il devient difficile de trouver : Raspbian Wheezy.
J’essaie donc ici de présenter le plus clairement possible le paramétrage de la toute dernière version de Raspbian (Jessie, de novembre 2016), en m’appuyant sur un Raspberry 2 B ou 3.

Du coup, ça donne un tutoriel aux nombreuses étapes avant d’arriver à afficher quoi que ce soit, et peut-être que je parais un peu “lourd” à écrire systématiquement chaque commande, même les plus “simples”, mais j’espère ainsi rendre accessible ce tutoriel au plus grand nombre, et je viens de répéter chaque étape “pour de vrai”, sur une nouvelle carte SD pour m’assurer que tout fonctionne réellement : c’est OK en date du 11 janvier 2017 😉 !

Bon, et bien, si l’aventure vous tente malgré toutes ces mises en garde, remontez vos manches, et au travail !

NB : Pour des raisons techniques, je n'arrive plus à lier des fichiers aux étapes de mes tutoriels, j'ai donc hébergé l'archive contenant tous les fichiers de ce tuto sur mon site, et je vous explique comment le récupérer à l'étape 8.

NB 170111 : Je viens de ré-écrire ce tuto en entier en faisant les manipulations associées au fur et à mesure, "pour de vrai", avec un RPi 3 ET avec un RPi 2 et c'est tout OK pour moi, ça m'a même permis de corriger / optimiser pas mal de petits bouts de code...
Désolé pour la période où ce tuto était un peu tout sens dessus dessous !
Et espérons que les choses restent bien à leur place désormais, car je ne suis pas sûr d'avoir à nouveau le courage de devoir tout recommencer le cas échéant au regard du temps passé...

Matériel

Budget:

100 €

Il vous faut :

  • Un Raspberry Pi 2 B (40€ sur internet) : Disponible ici
  • Une carte micro-SD d’au moins 4Go en classe 10 : Disponible ici
  • Un moniteur informatique ayant une interface DVI ou HDMI (écran plat 19 pouces DVI acheté 20€ d’occasion)
  • Une alimentation 5V 2A (2€ sur un vide grenier) : Disponible ici
  • Un câble HDMI vers DVI (7€ sur Amazon) : Disponible ici
  • Un câble Ethernet ou une carte WiFi (câble Ethernet de récupération, connecté à ma LiveBox) : Disponible ici
  • Eventuellement, un mini clavier / pavé tactile sans fil : Disponible ici
  • Eventuellement, de quoi fixer le moniteur au mur (quelques chutes de bois pour ma part)

  • Le RPi2 peut être avantageusement remplacé par un RPi3

Etape 1 : L'aspect physique des choses

Je commence par ce point avant de rentrer dans les nombreuses étapes "informatiques", mais ce fut en fait la dernière étape réalisée : comment intégrer ce projet à la maison de la façon la plus logique et harmonieuse possible ?

L'emplacement :

Je voulais que mon afficheur soit facilement visible, mais aussi que sont branchement ne nécessite pas des kilomètres de câbles !

La disposition du rez-de-chaussée de ma maison s'articulant autour d'un seul grand espace "cuisine / salle à manger / salon" ouvert, adossé à un petit local faisant office de "buanderie / local technique", j'ai pu placer l'écran de mon afficheur dans la cuisine, le rendant visible aussi du "salon / salle à manger", tout en déportant le RPi lui-même dans le local technique, permettant un raccordement direct à mon réseau informatique (étant sur un RPi 2, je n'avais pas de WiFi intégré), puis, dans un second temps, à mon compteur électrique, le tout sur une prise électrique dédiée.

Le "design" :

Un simple bras pivotant au format VESA aurait très bien pu convenir, mais pour éviter de trop faire chambre d'hôtel, ou, pire, chambre d'hôpital, j'ai finalement désossé mon vieil écran pour en intégrer la dalle LCD dans un cadre en bois fait maison, à partir de 4 planchettes de pin de 18mm d'épaisseur et 7cm de largeur. Du coup, l'ensemble se "fond" presque dans le mur en lambris qui l'accueil.

Bien sûr, l'emplacement comme le design sont des éléments qu'il vous appartient de vous approprier en fonction de vos propres contraintes... et de votre propre imagination => n'hésitez pas à partager vos réalisations pour multiplier les idées !

Etape 2 : Préparez votre carte SD avec Raspbian Lite

Medium tdb314 etcher

Temps requis : 10 à 15 min

Choisir une carte SD :

Choisissez une carte SD de 4Go minimum, préférez les grandes marques (attention aux contre façons sur le net...) et si possible en Classe 10.

Formater votre carte SD :

Par sécurité, vous pouvez formater proprement votre carte SD avec l'outil de l'Association SD disponible sur leur site internet.

Récupérer l'image Raspbian :

Récupérez la dernière version Lite de Raspbian sur le site la Fondation RaspberryPi.

Copier l'image sur votre carte SD :

Un utilitaire super simple et multi-plateformes vous facilitera grandement la tâche, il s'agit de Etcher, à récupérer sur le site etcher.io.

Lancez le programme et suivez les 3 étapes graphiques pour disposer d'une carte SD Raspbian toute neuve !

Etape 3 : Installer et paramétrer Raspbian

Temps requis : 15 min

Premier démarrage :

Insérez votre carte SD dans leRaspberry Pi, connectez votre écran / clavier / souris, puis enfin l’alimentation : Raspbian démarre pour la première fois !

Une fois le processus terminé, connectez-vous au RPi :
->nom d’utilisateur = pi
-> mot de passe initial = raspberry
NB : par défaut, la disposition du clavier est en anglais => le “a” est à la place du “q” français !

NB2 : un premier démarrage avec écran est malheureusement obligatoire, afin d'activer le serveur SSH. Ensuite, j'ai tout fait à distance, via SSH, en ayant pris soin de récupérer l'adresse IP du RPi avec la commande ifconfig

Configuration de base de Raspbian :

Lancez l’utilitaire de configuration de Raspbian :
sudo raspi-config

J’ai utilisé les menus suivants :
ATTENTION ! : si vous commencez par mettre à jour cet outil (à partir de la version 20161206), certains menus ont changé de place ! => je vous laisse faire la correspondance si besoin.

1 Expand Filsystem : pour utiliser tout l’espace de la carte SD

2 Change User Password : pour modifier le mot depasse de l’utilisateur “pi” => vivement conseillé, sans oublier que le clavier est encore réglé en “Qwerty” pour le moment !

3 Boot Options
B2 ConsoleAutologin : tant qu’à faire, on choisit tout de suite de démarrer le Raspberry en se connectant automatiquement avec l’utilisateur “pi”. Mais, attention, ne pas choisir de démarrer en mode graphique… puisqu’aucune interface associée n’est encore présente !

5 Internationalisation Options
I1Change Locale : choisir fr_FR.UTF-8 UTF-8 (en utilisant la barre d’espace), puis choisir cette valeur comme réglage par défaut et attendre que le changement soit pris en compte.
I2 Change Timezone : choisir Europe puis Paris (tapez “P” pour y aller rapidement)pour avoir le bon fuseau horaire.
I3 Change KeyboardLayout : si besoin, choisissez et réglez les paramètres de votre clavier => pour moi, c’est Generic 105-key (Intl)PC (clavier PC de base), English (UK) (enQwerty : choisir “Other” pour accéder aux autres claviers type Azerty etc.), RightAlt (AltGr) (avec une toucheAltGr à la place de la touche Alt de droite et no ComposeKey (pas de touche Windows).
I4 Change Wi-Fi Country : si vous utilisez un RPi 3, modifiez ce paramètre sur France.

7 Advanced Options
A2 Hostname : pour changer le nom du Raspberry => j’ai mis “TdB314” par ex.
A3 Memory Split : pour allouer de la mémoire au processeur graphique => comme on est en version “Lite”, sans interface graphique par défaut, cette valeur est réglée à “0” => je l’ai mise à “128” puisque nous allons en avoir besoin pour notre gestionnaire de fenêtres.
 A4 SSH : activez l’accès en ssh en sélectionnant “Enable”
A0 Update : ça ne coûte rien de voir si raspi-config peut-être mis à jour !

On redémarre le Raspberry Pi : sudo reboot
NB : et on vérifie que l’on est automatiquement connecté en “pi” au passage.

Mise à jour de Raspbian :

Et on le met à jour avec les commandes :
sudo apt-get update (mise à jour de la liste des dépôts utilisés par Raspbian)
sudo apt-get upgrade (mise à jour des paquets utilisés par Raspbian, en appuyant sur “o” si besoin)
sudo apt-get dist-upgrade (mise à jour de la distribution Raspbian)

Réglage d'une adresse IP fixe :

Enfin, pour pouvoir plus facilement accéder à mon afficheur, je lui ai attribué une adresse IP fixe en modifiant le fichier /etc/dhcpcd.conf :

sudo nano /etc/dhcpcd.conf

Et en ajoutant, à la fin du fichier, les lignes suivantes :

interface eth0
static ip_address=192.168.1.XX/24
static routers=192.168.1.1
static domain_name_servers=192.168.1.1

NB :
– remplacez “XX” par l’adresse que vous voulez
– remplacez ces adresses par celles de votre box : pour Free par ex., ce sera 192.168.0.XX
– le “/24” permet de régler le masque de sous-réseau
– et tapez bien “routers”et non “routeurs” comme je l'ai d'abord fait ;) !!!

Enregistrez le fichier en tapant Ctrl + O et Entrée
Puis quittez en tapant Ctrl + X
Et n’oubliez pas de redémarrer pour prendre en compte les modifications : sudo reboot

NB2 :
Si vous disposez d'un RPi 3, vous pourrez préférer définir une adresse IP fixe via la carte WiFi, pour se faire, il vous faut d'abord régler la connexion WiFi en modifiant le fichier /etc/wpa_supplicant/wpa_supplicant.conf :

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

Et en ajoutant, à la fin du fichier, les lignes suivantes :

network={
ssid="votre_nom_de_wifi"
psk="votre_mot_de_passe_wifi"
}

Pour enregistrer et quitter :

Ctrl + O

Entrée

Ctrl + X

Puis vous définirez une adresse IP fixe comme précédemment, mais sur l'interface wlan0 :

sudo nano /etc/dhcpcd.conf

Ajout des lignes :

interface wlan0
static ip_address=192.168.1.XX/24
static routers=192.168.1.1
static domain_name_servers=192.168.1.1

Se connecter en SSH :

Vous pouvez donc maintenant contrôler votre Raspberry Pi via SSH en tapant, depuis un terminal :

ssh pi@192.168.1.XX

NB: 
– Répondez yes au message d’avertissement qui apparaît la première fois.
– Si vous avez un messaged’erreur lié aux clés ssh, ré-initialisez les en tapant : ssh-keygen -R 192.168.1.XX

Nous voilà avec une version “de base” de Raspbian configurée et à jour, reste à y ajouter une interface graphique pour afficher nos informations !

Etape 4 : Ajouter une interface graphique

Medium tdb314 openbox

Temps requis : < 15 min

Installer un serveur X :

A ce stade, nous avons un Linux des années 70... en mode "ligne de commandes" uniquement ! commençons par ajouter le serveur X, qui exécutera les directives d'affichages de base :

sudo apt-get install xserver-xorg

Cela installe bien le pilote vidéo nécessaire au RPi (xserver-xorg-video-fbturbo), mais pas de quoi gérer la souris et le clavier (enfin, si, mais que pour du matériel Synaptics). Il faut donc aussi installer le paquet :

sudo apt-get install xserver-xorg-input-evdev

Installer un gestionnaire de fenêtres :

Le serveur X ne sachant pas afficher de fenêtres, il faut lui adjoindre un gestionnaire de fenêtre (et non un gestionnaire de bureau, beaucoup plus complet… et gros) :

sudo apt-get install openbox

Installer un lanceur :

Et enfin, un lanceur nous permettra de démarrer l’interface graphique :

sudo apt-get install xinit

Premier test ! :

A ce stade, si vous tapez startx, vous devez arriver… sur une belle page toute noire, avec un curseur de souris au milieu => bravo, vous avez réussi !
Pour revenir à la ligne de commande, faites un clic droit puis choisissez le menu “Exit” puis le bouton “Quitter” (utilisez la touche “Tab” pour passer d’un bouton à l’autre).

Pas mal, mais il nous faut encore quelques logiciels pour compléter tout ça !

Etape 5 : Ajouter les logiciels nécessaires à l’afficheur numérique

Temps requis : 10 min

Un serveur web :

Pour mettre à disposition la page web que sera notre afficheur, auquel nous ajoutons de quoi interpréter le langage php :

sudo apt-get install apache2 php5

Pour vérifier que cela marche, ouvrez un navigateur internet sur un ordinateur du réseau et tapez dans la barre d’adresse : 192.168.1.XX
Une page présentant la configuration d’Apache doit s’afficher !

Un navigateur internet :

Pour afficher la page web générée par Apache :

sudo apt-get install midori

J'ai d'abord choisi Midori parce qu'au début de la version Jessie de Raspbian, Chromium était vraiment compliqué à installer correctement. Depuis, le problème est résolu et vous pouvez donc préférer Chromium (qui a même été optimisé pour le RPi), mais Midori reste très léger et fonctionne bien : je l'ai donc conservé !
Pour voir si ça marche, une fois l’interface graphique démarrée via “startx”, vous pouvez faire un clic droit et choisir le menu “Web browser” pour lancer Midori. Pour l’arrêter, tapez Alt + F4.

Bien, nous avons un Raspberry opérationnel, avec une interface graphique la plus légère possible, un serveur web pour générer la page de notre afficheur et un navigateur web pour l’afficher, reste encore à régler un peu tous ces éléments pour obtenir vraiment un “afficheur numérique”.

Etape 6 : Créer un contenant pour la page de notre afficheur

Medium tdb314 midori index

Temps requis : < 5 min

Créer un endroit où placer les données qui constitueront notre afficheur :

Pour cela, il suffit d’ajouter un dossier dans le répertoire qu’Apache réserve aux pages web : “/var/www/html/”.
Pour ma part, je l’ai appelé “tdb314”, mais c’est à vous de voir ! :
mkdir /var/www/html/tdb314 

Et là, catastrophe, on n’a pas le droit de faire cela en tant que “pi”… et pas question de tout faire en “root” !

Modifions donc un peu les accès à ce répertoire, en sachant qu’Apache utilise un groupe nommé “www-data” pour la gestion de ses données :

  • Commençons donc par attribuer ce groupe à l’utilisateur “pi” :
    sudo usermod -aG www-data pi
    NB : l’option “-aG” permet d’affecter un utilisateur à plusieurs groupes, sans changer son appartenance antérieure à d’autres groupes.
    NB2 : attention, il faut redémarrer le Raspberry pour que cette modification soit prise en compte ! :
    sudo reboot

  • Puis bien attribuer le dossier “/var/www/” au groupe et à l’utilisateur “www-data” : 
    sudo chown -R www-data:www-data /var/www

  • Et enfin, ajouter les droits d’écriture de ce dossier au groupe “www-data” :
    sudo chmod -R g+w /var/www
    NB : l’option “-R” permet d’appliquer les changements de façon récursive à tout ce qui se trouve dans le dossier modifié 

Voilà, cette fois, on peut créer notre répertoire :
mkdir /var/www/html/tdb314

Et tant qu’on y est, on va créer une première page web “bidon”, histoire d’avoir quelque chose à afficher ! :
nano /var/www/html/tdb314/index.html

Puis saisissez n’importe quel texte, c’est juste pour avoir autre chose qu’une pageblanche => par ex. : Un espace libre pour afficher ce que vous voulez !
NB : évitez simplement les caractères accentués et spéciaux.

Voilà, reste à faire en sorte d’afficher ce contenu automatiquement au lancement du Raspberry.

Etape 7 : Régler le Raspberry Pi en mode “kiosk”

Medium tdb314 kiosk

Temps requis : < 5 min

Pour le moment, nous avons un nano-ordinateur, avec tout plein de fonctionnalités (trop !) : le but de cette étape va être de les limiter pour ne plus avoir qu’une sorte de “borne multimédia” comme on peut en trouver dans les aéroports ou les musées, ce que les anglo-saxons appellent un “kiosk”.

Démarrer automatiquement l’interface graphique :

A ce stade, notre Raspberry se connecte déjà tout seul en mode console, avec l’utilisateur “pi” ; mais nous voulons aussi automatiser le lancement de notre interface graphique.
Il existe plusieurs solutions pour se faire… et c’est pas simple de s’y retrouver sur internet… des façons “sales”, d’autres nécessitant l’installation de plein de paquets… bref, au final, j’ai choisi et testé avec succès celle qui consiste à modifier le fichier “.profile” de l’utilisateur “pi” :
nano .profile

En ajoutant, à la fin du fichier, la ligne suivante:
[[ $(tty) == '/dev/tty1' ]] && startx

Enfin… en fait, comme parfois j’aimerais quand même bien rester en mode console (maintenance par ex.), j’ai ajouté une condition demandant à l’utilisateur s’il veut lancer l’afficheur ou rester en mode console, en remplaçant la ligne ci dessus par celles-ci :
if [[ -t 0 && $(tty) =~ /dev/tty ]] && ! pgrep -u $USER startx &> /dev/null;then
   echo "Voulez-vous démarrer le Tableau de Bord numérique ? [O|n]"
   read -n 1 start_x
   if [[ $start_x == "n" ]];then
      echo "Le Tableau de Bord ne sera pas lancé."
   else
      startx
   fi
fi

Du coup, si j’appuie sur “n”, je reste en mode console ; et si j’appuie sur n’importe quelle autre touche, je lance mon Tableau de Bord !


Ouvrir automatiquement l'afficheur :

Il s’agit donc de lancer automatiquement Midori, en lui demandant d’être en “plein écran” et d’afficher la page web qui nous sert d’afficheur.

Pour cela, il suffit de modifier le fichier dédié au démarrage d’Openbox :

- Soit vous modifiez directement le fichier commun à tous les utilisateurs : /etc/xdg/openbox/autostart

- Soit, plus raisonnablement, vous en créez un pour l’utilisateur “pi”, dans son répertoire personnel :
Si le répertoire “~/.config/openbox/” n’existe pas, il faut le créer :
mkdir ~/.config/openbox
Puis y ajouter notrefichier “autostart” :
nano ~/.config/openbox/autostart

Et vous ajoutez dans ce fichier :
# Lancement du tableau de bord numérique à l’ouverture d’Openbox
exec /usr/bin/midori -e Fullscreen -a http://localhost/tdb314/ &

NB :
– n’oubliez pas d’enregistrer (Ctrl+O et Entrée) et de quitter (Ctrl+X) votre fichier
– l’option “-e Fullscreen” permet de lancer Midori en mode “plein écran”
– l’option “-a http://mon.url” permet de spécifier une page web à charger à l’ouverture de Midori
– le “&” final permet de ne pas rester bloquer sur cette ligne, au cas où vous voudriez ajouter d’autres commandes à exécuter ensuite.

Désactiver toute mise en veille :

Bon, on est pas mal, mais par défaut, notre écran va se mettre en veille aubout d’une dizaine de minutes…
Cela est dû au “DPMS” : Display Power Management System.
Mais, petite bizarrerie, il y a de fortes chances que l’outil de gestion associé ne soit pas installé !
Pour vérifier cela, tapez juste xset en mode console => si vous avez un message d’erreur, c’est bien le cas !

On installe donc l’utilitaire via la commande :
sudo apt-get install x11-xserver-utils

Et il faut maintenant lui dire de désactiver le “DPMS” ainsi que toute mise en veille.
Cela se fait encore dans le fichier“autostart” d’Openbox :
nano ~/.config/openbox/autostart
Où il faut ajouter les lignes suivantes, avant le lancement de Midori :
# Désactivation de toute mise en veille
xset -dpms
xset s off

Masquer le curseur de la souris :

Rien d’obligatoire, mais c’est vrai que ce n’est pas chouette d’avoir toujours la flèche de la souris sur un afficheur…
Pour l’enlever, il suffit d’installer un petit utilitaire nommé “unclutter” via la commande :
sudo apt-get install unclutter

Et c’est tout, il se lance automatiquement.

Bon, ben là, c’est parfait… enfin, il ne reste plus qu’à créer du contenu à afficher, mais la (longue !) partie de paramétrage est terminée, bravo si vous êtes parvenu jusqu’ici sans encombre ! ;)

Etape 8 : Créer la structure générale de notre afficheur

Medium tdb314 1er affichage

Temps requis : < 5 min

Mise en place de la structure de base : 

Pour simplifier ce tutoriel, je vous propose déjà de récupérer l'ensemble des fichiers de l'afficheur, ainsi que sa structure sur mon site (car je ne peux joindre de fichier à ce tutoriel... petit souci technique apparemment), puis de le mettre au bon endroit de votre RPi pour avoir rapidement quelque chose d'opérationnel !

Télécharger le fichier tdb314.tar.gz directement depuis votre RPi avec la commande :
wget https://www.chapao.com/tdb314.tar.gz

Décompressez cette archive :
tar -xzvf tdb314.tar.gz

Supprimez l'ancien répertoire tdb314 des étapes précédentes :
rm -R /var/www/html/tdb314/

Déplacez les fichiers du Tableau de Bord au bon endroit :
mv tdb314 /var/www/html/

Et redémarrer :
sudo reboot

Voilà, vous devriez désormais avoir un "bel" afficheur numérique 😉 !
(NB : vous pouvez aussi voir le résultat depuis n'importe quel poste de votre réseau via un navigateur et en saisissant l'adresse : 192.168.1.XX/tdb314/ (sans vous tromper d'adresse IP).
Quand je dis "bel", j'exagère un peu puisque l'affichage est sans doute inadapté à votre écran, et les informations affichées sont pour le moment bien pauvres : l'heure et la date, c'est tout... => allons un peu plus loin !

Pour aller plus vite... :

Si vous voulez rapidement afficher tous les modules décrits ci-après, sachez qu'ils sont tous déjà présents dans le fichier archive que vous venez de récupérer : il vous suffit de remplacer le fichier "config.json" par "config_complet.json" pour voir ce que cela donne !

Placez-vous dans le bon répertoire :
cd /var/www/html/tdb314/

Et écrasez "config.json" par sa version complète :
cp config_complet.json config.json

Bon, maintenant, il vous faut quand même installer le programme Xplanet si vous voulez un Tableau de Bord complètement opérationnel : rendez-vous à l'étape "Mise en place de Xplanet" ci-après.

Etape 9 : Appréhender le fonctionnement du Tableau de Bord

Medium tdb314 structure

Comprendre l'organisation du Tableau de Bord :

Je vous ai joint une image de cette structure, pour bien comprendre comment tout cela s'articule :

-> l'ensemble du Tableau de bord se trouve dans le répertoire /var/www/html/tdb314/

A la racine de ce répertoire, on trouve :

-> deux fichiers :
--> la page d'accueil index.php
--> et le fichier json gérant sa configuration config.json
(en fait, on trouve un 3ème fichier config_complet.json qui contient la configuration type en activant tous les modules actuellement disponible de l'afficheur numérique, pour exemple).

-> et deux répertoires :
--> modules qui contient tous les modules à afficher.
--> ressources qui contient toutes les données générales à l'afficheur ou commun à plusieurs modules

Par défaut chaque module est constitué d'un répertoire nom_du_module qui contient au moins deux fichiers :
-> nom_du_module.php qui gère le code du module
-> nom_du_module.css qui gère les particularités d'affichage du module.

Quant aux ressources générales, elles contiennent par défaut la feuille de style css générale de l'affichuer, une feuille de style permettant de gérer les petits soucis d'affichage liés au différents navigateurs internet, les images communes à tout l'afficheur (dont son fond d'écran) et les fonctions javascript générales de l'afficheur.

Etape 10 : Paramétrer le Tableau de Bord

Medium tdb314 json base

Commençons à "jouer" avec l'affichage de notre Tableau de Bord :

Paramètres généraux :

Comme indiqué dans l'étape précédente, tous ces paramètres se trouvent donc dans le seul fichier config.json => ouvrons-le pour le modifier avec la commande :
nano /var/www/html/tdb314/config.json

Pour modifier le titre du Tableau de bord, modifiez :
"title": "Votre_Nom_de_Tableau_de_Bord",

Pour modifier la taille d'affichage de votre Tableau de Bord, modifiez :
"width": "LARGEURpx",
"height": "HAUTEURpx",

Pour modifier l'image de fond de votre Tableau de Bord, deux solutions :

-> soit vous remplacez le fichier :
/var/www/html/tdb314/ressources/fond.jpg
par votre propre image au même format et de même nom,

-> soit vous ajoutez une nouvelle image dans ce répertoire :
/var/www/html/tdb314/ressources/nouveau_fond.png
et vous modifiez en conséquence la ligne du config.json :
"fond": "nouveau_fond.png",

Pour enregistrer les modifications et quitter :
Ctrl + O
Entrée
Ctrl+X

Paramètres généraux d'un module :

Pour le moment, on n'a que le module "horloge" de présent, et ses paramètres sont modifiables dans le même fichier config.json.
Une fois ce fichier ouvert en modification comme précédemment, vous pouvez donc modifier des éléments que l'on retrouvera dans tous les modules :

Son nom :
"name": "horloge",
Attention, ce nom doit être exactement celui du répertoire contenant les fichiers du module !!!

Sa taille :
"width": "500px",
"height": "200px",
Notez que ces deux informations ne sont pas obligatoires : si l'une et/ou l'autre n'est pas présente, le programme ira chercher les informations associées du fichier "nom_du_module.css" ou gérera la taille de façon automatique. Par exemple, pour le cas du module "horloge", par défaut, seule la largeur est définie, mais pas la hauteur qui est gérée automatiquement en fonction de la taille des polices de caractères définie dans ses arguments.

Son positionnement :
"top": "10px",
"left": "10px",
Là encore, ces informations ne sont pas obligatoires, ou on peut n'en définir qu'une sur deux.

Sa fréquence de rafraichissement :
"update": 1,
Cette valeur est exprimée en secondes et est obligatoire, elle vaut donc :
-> 0 pour "aucun rafraichissement",
-> 1 pour "toutes les secondes",
-> 60 pour "toutes les minutes",
-> 3600 pour "toutes les heures",
-> etc...
ATTENTION ! : Si ce paramètre est le dernier du module, il NE FAUT PAS mettre de virgule à la fin de la ligne !

Paramètres spécifiques d'un module :

Chaque module peut accepter, en plus des paramètres généraux décrits ci-dessus, des paramètres spécifiques, appelés arguments.

Ils sont alors à ajouter, avec une virgule, derrière les arguments généraux du module, sous la forme :
"args":
{
   "nom_argument_1": "valeur_argument_1",
   "nom_argument_2": "valeur_argument_2"
}

Notez que chaque ligne d'argument se termine par une virgule, SAUF la dernière !

Si la valeur d'un argument est une valeur numérique, il ne faut pas l'entourer de guillemets.

Par exemple, dans le cas du module "horloge", deux arguments sont disponibles :
-> "taille_heure" qui permet de définir la taille des caractères utilisés pour afficher l'heure,
-> "taille_date" qui fait de même pour la date.

Etape 11 : Ajouter un module au Tableau de Bord

L'ajout d'un module se fait en deux temps :

1. Ajout des fichiers du module :

Vous devez commencer par créer le répertoire qui va contenir ces fichiers, dans le répertoire "/var/www/html/tdb314/modules" :
mkdir /var/www/html/tdb314/modules/nom_du_module

Puis y copier au moins les deux fichiers de base de tout module :
-> nom_du_module.php : le code du module... et là, pas de recette miracle : il faut bien définir ce que vous souhaitez faire, puis parvenir à vos fins avec les langages php et javascript !
-> nom_du_fichier.css : la feuille de style permettant de gérer les aspects de mise en page spécifiques au module.

A celà peuvent s'ajouter tous les fichiers dont vous pouviez avoir spécifiquement besoin pour votre module.
Cependant, si vous avez besoin d'un élément qui sert aussi à un autre module, préférez alors le placer dans le dossier "ressources".

Enfin, notez bien que tous ces éléments obligatoires doivent porter exactement le même nom nom_du_module !

2. Prise en compte du module à l'affichage :

Il vous reste ensuite à déclarer votre module au niveau du fichier de configuration du Tableau de Bord.

Ouvrez le fichier "config.json" :
nano /var/www/html/tdb314/config.json

Ajoutez-y les paramètres généraux du module avec les lignes :
{
   "name": "nom_du_module",
   "width": "Npx",
   "height":"Npx",
   "top": "Npx",
   "left": "Npx",
   "update": N
}

ATTENTION ! :
- si vous ajoutez ce module après un autre module, n'oubliez pas de mettre une virgule entre les deux modules !
- si un module suit votre module, là encore, n'oubliez pas d'ajouter une virgule entre les deux !

Et les éventuels arguments facultatifs avec les lignes :
"args":
{
   "argument_1": "valeur_argument_1",
   "argument_2": "valeur_argument_2"
}

ATTENTION ! :
Là encore, noter qu'une virgule sépare chaque ligne d'argument, mais qu'il n'en faut pas derrière la dernière !

NB :
Notez que l'ordre d'apparition de vos modules dans le fichier "config.json" a son importance : il permet de gérer "l'empilement" des modules via la propriété css z-index : le premier module aura un z-index de 1, puis le senond un z-index de 2, etc...
Si deux modules se superposent, c'est donc le module de z-index le plus haut qui sera au dessus de l'autre.
Mais vous pouvez forcer une valeur de z-index spécifique en ajoutant une ligne "z-index": N, dans les paramètres de votre fichier "config.json".

Vous avez peut-être constaté que le fichier que je vous fournis, "tdb314.tar.gz", contient en fait déjà plusieurs modules, mais sans leur prise en compte pour affichage, si ce n'est pour celui nommé "horloge"...
Vous pouvez donc déjà vous entraîner à modifier le fichier "config.json" pour essayer de les faire apparaître et les dimensionner / placer comme vous le souhaitez !
Et pour vous aider, tout est préparé dans le fichier "config_complet.json" dont vous pouvez vous inspirer, ou que vous pouvez carrément placer à la place de "config.json" !

Cela dit, certains modules ne fonctionneront quand même pas, car ils ont besoin d'un peu plus de travail (c'est le cas de ceux utilisant xPlanet, un programme à part entière qu'il faut installer / paramétrer par exemple) et il peut être intéressant de voir un peu plus dans le détail comment chaque module fonctionne, ce que je vous propose pour les étapes suivante.

Etape 12 : Module Horloge

Fichier de programme horloge.php :
Le premier bloc de code permet de récupérer les arguments propres au module horloge, en utilisant la variable prédéfinie $_GET du langage php.
Pour rappel, tous les modules n'ont pas forcément d'argument.

Ensuite, on définit le format des date / heure au format français via la fonction setlocale()

Et enfin, on a le code principal qui ne fait que récupérer l'heure / date système via la fonction strftime() et mettre ces données en forme.

Fichier de mise en page horloge.css :
La seule particularité de ce fichier est la mise en place d'une police de caractères spécifique, nommée "horloge" et utilisant le fichier "horloge.ttf" via les lignes suivantes :
@font-face {
   font-family: 'horloge';
   src: url('horloge.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

On y trouve aussi le paramétrage de l'effet "vitré" qui encadre chacune de mes modules et que j'ai mis beaucoup de temps à trouver en mixant de nombreux modèles trouvés sur le net :
- une bordure pleine de 1px, blanche mais semi-transparente :
border: 1px solid rgba(0,0,0,0.5);
- des arrondis différents aux angles hauts et bas :
border-radius: 12px 12px 3px 3px;
- et des effets d'ombres intérieures :
box-shadow:
   0px 2px 6px rgba(0, 0, 0, 0.5),
   inset 0 1px rgba(255, 255, 255, 0.3),
   inset 0 10px rgba(255, 255, 255, 0.2),
   inset 0 10px 20px rgba(255, 255, 255, 0.25),
   inset 0 -15px 30px rgba(0, 0, 0, 0.3);

Autre fichier horloge.ttf :
Ce fichier, qui ne fait pas partie des fichiers "minimaux" de tout module, contient la police de caractère spécifiquement utilisée pour afficher les données de notre horloge dans un style "panneau d'aéroport".

Intégration dans config.json :
Pour cette intégration :
- je n'ai pas utilisé le paramètre "height"
- j'ai ajouté les 2 arguments "taille_heure" et "taille_date" pour pouvoir gérer la taille d'affichage de ces données
- et j'ai bien sûr réglé le paramètre de rafraichissmeent "update" sur 1 pour une actualisation toutes les secondes !

Pour aller plus loin... :
Ne pas oublier que, comme le RPi ne dispose pas de module RTC par défaut, il récupère l'heure et la date sur un serveur de temps... qui n'est accessible qu'une fois la connexion internet opérationnelle => si le RPi n'est pas connecté au net, les données affichées de l'horloge seront fausses !
Une piste d'amélioration pourrait donc être d'ajouter un module RTC au RPi !

Etape 13 : Module Météo

Fichier de programme meteo.php :
Ce fichier est en fait un fichier tiers : récupéré sur un des nombreux sites de météo proposant l'intégration d'un "widget" de leur site sur le votre :
- on a généralement accès à quelques paramètres modifiables comme la ville pour laquelle on souhaite avoir les prévisions, le format du widget, parfois les icônes de temps à utiliser ou diverses couleurs, etc.
- puis le site génère quelques lignes de code php
- qu'il vous suffit de copier / coller dans votre fichier meteo.php !

La vraie difficulté est de trouver un site proposant un design qui vous plaise... et sans trop de mouchards !

Pour ma part, j'utilise le site http://www.tameteo.com/widget/, mais je sais qu'il contient apparemment 2 mouchards...
Mais bien d'autres sites existent :
http://www.meteocity.com/widget/
http://www.my-meteo.fr/meteo+webmaster.html
http://www.meteorama.fr/widget/
http://www.widget-meteo.com/
https://www.meteomedia.com/widget-meteo

Fichier de mise en page meteo.css :
Rien de particulier, je définis juste une taille un peu plus petite que celle fournis par le code tiers et demande que ce qui dépasse ne soit pas visible avec le paramètre overflow: hidden; pour masquer certains éléments dont je n'ai pas besoin.

Autre fichier :
Aucun autre fichier.

Intégration dans config.json :
Pour cette intégration :
- j'ai réglé l'actualisation sur 3600, soit toutes les heures.

Pour aller plus loin... :
L'un des soucis de ce module, c'est qu'on ne gère pas finement sa taille... mais la magie du css vous permet d'attribuer une échelle à vos modules, en utilisant la propriété transform: scale(); dans votre fichier "meteo.css".
Bien sûr, si vous grossissez trop votre module, cela se ressentira sur la qualité des images associées, mais en restant raisonnable, ça marche très bien. (merci Tauxin pour ta question ayant permis de trouver cette solution !)

Etape 14 : Module Rss

Fichier de programme rss.php :
Le code de ce fichier commence par récupérer les deux arguments propres à ce module :
- url qui contient l'adresse du site où lire le flux rss,
  (par défaut : http://www.lemonde.fr/rss/une.xml : le site de la une du journal Le Monde)
- nb_items qui indique le nombre d'éléments du flux à récupérer,
  (par défaut : 3.)

Ensuite, le programme divise automatiquement l'espace attribué au module en fonction du nombre d'items à afficher.

Puis il gère l'affichage d'un logo en regard de ces items : par défaut, le logo des liens rss, mais qui peut-être remplacé par celui du site où est lu le flux rss en ajoutant une image png de 70 x 70 pixels ayant pour nom le nom de domaine de ce site (voir ci-dessous "Autre fichier").

Enfin, il récupère chacun des items du flux rss et en scinde le contenu via la fonction php @simplexml_load_file() pour afficher : d'abord son titre, sous forme d'un lien permettant d'accèder à l'article complet sur le net, puis le contenu de l'item, dans les limites de la place disponible.

Fichier de mise en page rss.css :
Aucune particularité dans ce fichier, je souligne juste chaque item d'une bordure inférieure pointillée blanche pour une meilleure lisibilité.

Autre fichier rss.png :
Ce fichier contient le "logo" du module rss :
- par défaut, c'est une icône comme celle que l'on trouve sur les liens rss,
- mais elle peut-être remplacée par le logo du site sur lequel vous récupérez votre lien rss,
- pour cela, il suffit d'ajouter ici une image dont le nom soit identique au nom de domaine du site sur lequel vous allez lire le flux rss (sans le "www" et sans son extension ".com" par ex.), au format png.
- par défaut, cette image sera affichée à une taille de 70 x 70 pixels.

Par exemple, dans le cas du fichier que je fournis, je vais lire le lien rss de la une du journal "Le Monde", et j'ai donc ajouté une image du logo du site, nommée "lemonde.png", de même nom que le site www.lemonde.fr.

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "300", soit toutes les 5 minutes.

Pour aller plus loin... :
A noter que ce module devient vide si le lien internet est rompu... il pourrait être sympa de prévoir un test de connexion en amont de son affichage pour ne pas écraser un éventuel contenu par du "blanc" si la liaison internet est tombé entre temps... Petit test qui pourrait d'ailleurs servir à d'autres modules aussi !

Etape 15 : Module Diaporama

Fichier de programme diaporama.php :
Le code php commence par faire appel à un code JavaScript (voir "Autre fichier" ci-dessous) qui permettra de gérer le diaporama lui-même.

Ensuite, il récupère deux arguments du module :
- dossier qui permet de définir le répertoire où sont stockées les images du diaporama,
(par défaut, dans le répertoire img du répertoire du module)
-delai qui gère le temps d'affichage des diapo, en millisecondes
(par défaut, 5000 soit 5 secondes)

Le programme permet de gérer les images de type gif, jpg, jpeg, JPG, png via sa variable $types => à compléter selon vos besoins éventuels.

Il récupère alors tous les fichiers ayant une de ces extensions sous forme d'un tableau de noms via la fonction php glob() sans oublier le paramètre GLOB_BRACE qui permet de gérer les extensions multiples de recherche.
Ce tableau peut être trié pour un affichage selon l'ordre naturel (10 avant 2) en dé-commentant la ligne "usort()".

Puis on affiche la première image en nommant sa balise <img> "diaporama" et on ajoute une division vide de même taille qui sert à gérer l'effet "glossy" du module, qui, sinon, se trouve caché derrière l'image.

On ajoute enfin, s'il y a plus d'une image !, les autres images sous la forme d'une liste non ordonnée que l'on rend invisible via la commande css display: none et on lance le script JavaScript qui va gérer l'affichage des images de cette liste selon le délai passé en argument du module.

Fichier de mise en page diaporama.css :
Rien de particulier dans ce fichier, si ce n'est de bien faire attention que la division vide gérant l'effet "glossy" soit bien de la même taille que le module, ce que l'on fait en spécifiant ses paramètres css "width" et "height" à "100%". 

Autre fichier diaporama.js :
On trouve beaucoup d'exemple de code JavaScript permettant de créer des diaporama... fait il sont tous remplis d'effets, certes plus beau les uns que les autres, mais qui mette vite notre RPi sur les genoux !!!

Du coup, j'ai fini par réussir à créer mon propre petit code ultra-léger qui tourne même sous un RPi de première génération, en m'appuyant sur la correction d'un exercice proposé sur le site d'une école... que je n'arrive malheureusement pas à retrouver pour l'en remercier...

Ce code récupère la liste invisible que l'on a créée en php : c'est sa liste d'images du diaporama.
Puis il modifie l'image de la balise "<img>" de la page html en respectant le délai qui lui est fourni en paramètre, via une fonction "next()" qui lui permet à chaque fois de passer à l'image suivante.

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "0", puisque c'est le code JavaScript intégré au diaporama qui gère la fréquence d'affichage de ses images.

Pour aller plus loin... :
Rien de particulier... ou alors, essayer d'ajouter un petit effet, maintenant que cet afficheur s'appuie sur un RPi 3 beaucoup plus puissant que les premières générations ?

Etape 16 : Modules Xplanet : mise en place de Xplanet

Si vous activez l'affichage du module "xplanet_terre" via le fichier "config.json", vous aurez bien une belle image de la Terre qui apparaitra, MAIS, ce sera juste une image sans grand intérêt... Car en fait, l'idée de ce module est d'afficher une image de la Terre qui soit le reflet "actuel" de notre planète, et surtout qui présente l'ombre de la nuit en fonction de l'heure qu'il est.

Mais pour arriver à ce résultat, ce module s'appuie sur un programme lui-même inspiré de Xearth : un "vieux" programme qui permettait d'afficher un rendu de notre planète comme fond d'écran de la fenêtre principale d'un serveur X-window  : Xplanet, dont le site est visible ici !

Il faut donc commencer par installer et paramétrer ce soft.

Installer Xplanet :
Ce programme étant dans les paquets de Debian (sur lequel s'appuie Raspbian), il suffit, depuis un terminal de saisir :
sudo apt-get install xplanet

Paramétrer Xplanet :
Il suffit de renseigner un unique fichier de configuration nommé xplanet.conf.
Cela est fait par défaut dans le fichier joint à l'archive de ce Tableau de Bord et permet de gérer une vue de la Terre et une autre de la Lune.
Vous pouvez vous amuser à regarder  ce qu'il contient en l'ouvrant (il se trouve dans "/var/www/html/tdb314/ressources/xplanet/") : une foule de règlages possibles, dont la liste est détaillée sur cette page internet.

Dans notre cas, on y précise principalement où trouver les "maps" qui vont servir à générer une image de la Terre de jour, de nuit, de ses nuages et de la Lune, mais il n'y a rien à faire.

Faire fonctionner Xplanet :
Xplanet est en fait un générateur d'images qui fournit l'image d'un corps céleste à un instant donné et depuis une position dans l'espace donnée.
Il se lance via une commande du style xplanet -option1 -option2 etc...
Ces options sont très nombreuses et détaillées sur cette page internet.

Dans notre cas, nous créons un script xplanet.sh qui va :
- lancer Xplanet
- puis demander de fournir une image de la Terre toutes les 2 minutes, en observant un site placé à 35° de latitude et 10° de longitude, et qui fasse 500 x 500 pixels
- et une image de la Lune toutes les 10 minutes, qui fasse 150 x 150 pixels.

Ce script est tout prêt et se trouve dans  "/var/www/html/tdb314/ressources/xplanet/", mais il reste à le lancer au démarrage de notre RPi.

Pour cela :
- copiez le script “xplanet.sh” dans le répertoire “/etc/init.d/” :
sudo cp /var/www/html/tdb314/ressources/xplanet/xplanet.sh /etc/init.d/xplanet.sh
- et demandez son lancement à chaque démarrage avec la commande :
sudo update-rc.d xplanet.sh defaults

Voilà !, après redémarrage du RPi, Xplanet va créer automatiquement une image de la Terre et une de la Lune aux fréquences spécifiées : images qu'il va nous suffir d'afficher avec les modules "xplanet-terre" et "xplanet_lune".

Pour aller plus loin... :

Je vous fournis un autre petit script xplanet_earth.sh qui permet de charger une nouvelle "map" de la terre à fournir à Xplanet, qui présente une image de la Terre en fonction des saisons... bon, les changements ne sont pas flagrants, mais on voit bien qu'il y a plus de vert en hiver qu'en été !
Pour le mettre en route, il faut juste ajouter son lancement tous les 1er du mois à 9h, dans le démon "cron" :
sudo crontab -e
0 9 1 * * /var/www/html/tdb314/ressources/xplanet/xplanet_earth.sh

Et enfin un dernier script xplanet_clouds.sh qui est censé récupéré une carte des nuages toutes les 4 heures pour même avoir une idée du temps qu'il fait sur notre bonne vieille Terre... mais il semble que la version gratuite de ses cartes ne soient plus disponibles...
Pour le mettre en route, il faut ajouter son lancement toutes les 4 heures, dans le démon "cron" :
sudo crontab -e
0 */4 * * * /var/www/html/tdb314/ressources/xplanet/xplanet_cloud.sh

Etape 17 : Module Xplanet_earth

Maintenant que le logiciel "Xplanet" est installé et paramétré, on peu gérer l'affichage correcte des images générées dans le module "xplanet_earth".

Fichier de programme xplanet_earth.php :
Une seule ligne dans ce code php : pour créer la balise "<img />" dans laquelle afficher l'image de la Terre fournie par Xplanet, MAIS sans oublier d'ajouter un code temporel derrière son nom !

Sinon, le nom du fichier image étant toujours le même, le navigateur ne forcera pas le rafraichissement de l'image à chaque actualisation du module et on restera sur une image fixe...

Fichier de mise en page xplanet_earth.css :
L'image générée par Xplanet fait 500 pixels de côté, mais la Terre n'occupe en fait qu'une zone de 450 pixels de côté : je crée donc des marges négatives de 25 pixels pour n'avoir que la Terre.

Et une astuce pour pouvoir approcher le module suivant (de la Lune) sans problèmes de superposition : je crée des angles arrondis autour de mon module... de telle sorte qu'en fait elle devienne un rond grâce à un "border-radius" de 225 pixels !

Autre fichier :
Aucun.

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "120", soit toutes les 2 minutes, comme le délai de génération des images par Xplanet.

Pour aller plus loin... :
Il m'arrive d'avoir un "bug" : parfois, le Tableau de Bord demande d'afficher l'image de la Terre alors qu'elle est en cours de génération... du coup, elle apparait tronquée, incomplète => voir comment empêcher que cela n'arrive.

Etape 18 : Module Xplanet_lune

Fichier de programme xplanet_lune.php :
Comme pour la Terre, une seule ligne dans ce code php : pour créer la balise "<img />" dans laquelle afficher l'image de la Lune fournie par Xplanet, TOUJOURS sans oublier d'ajouter un code temporel derrière son nom !

Sinon, le nom du fichier image étant toujours le même, le navigateur ne forcera pas le rafraichissement de l'image à chaque actualisation du module et on restera sur une image fixe...

Fichier de mise en page xplanet_lune.css :
L'image générée par Xplanet fait 150 pixels de côté, mais la Lune n'occupe en fait qu'une zone de 134 pixels de côté : je crée donc des marges négatives de 8 pixels pour n'avoir que la Lune.

Et une astuce pour pouvoir approcher ce module du précédent (de la Terre) sans problèmes de superposition : je crée des angles arrondis autour de mon module... de telle sorte qu'en fait elle devienne un rond grâce à un "border-radius" de 67 pixels !

Autre fichier :
Aucun.

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "60", soit toutes les 10 minutes, comme le délai de génération des images par Xplanet.

Pour aller plus loin... :
Même bug que la Terre à corriger...

Etape 19 : Module Connexion

Fichier de programme connexion.php :
L'idée de base est de télécharger un fichier d'une taille donnée, de mesurer le temps pris par ce téléchargement puis d'en déduire la vitesse de ma connexion internet, dans le sens descendant (je ne mesure pas le sens montant qui est bien plus faible et ne m'intéresse pas vraiment).

Pour plus de précision, je fais en fait 3 téléchargements successifs, en faisant varier la taille du fichier téléchargé.

Au départ, je récupérais un fichier déposé sur mon propre site internet, mais j'ai découvert que l'opérateur Free mettait à disposition des internautes le site http://test-debit.free.fr/ qui contient divers fichiers de taille prédéfinie (de 512Ko à... 1Go !), sous la forme "taille.rnd" (donc, 512.rnd pour un fichier de 512Ko).

En partant d'un script trouvé sur le site http://test.haydont.net, j'ai donc créé une première fonction testbw(taille_fichier) pour faire cela, en lui fournissant la taille du fichier que je veux télécharger :
- je mets en mémoire le temps en millisecondes via la fonction php microtime(),
- je récupère le fichier associé à la taille fournie via un file_get_contents() sur le site de Free,
- j'enregistre le temps en millisecondes une fois le téléchargement terminé
- je soustrait les deux valeurs pour avoir la durée du téléchargement,
- je divise la taille du fichier par cette durée pour avoir la vitesse de connexion en Ko/s
- je multiplie le résultat par 8 et le divise par 1000 pour obtenir des Mb/s, l'unité de mon abonnement internet.

Une seconde fonction speedtest() permet de :
- gérer le triple appel à la fonction précédente
- en spécifiant une taille de fichier (plus cette taille est grande, plus le résultat est précis... mais long !)
- puis en choisissant le meilleur résultat
- me permettant d'attribuer une "note" à celui-ci, en fonction de mon abonnement internet :
--> j'ai une connexion de 8Mb/s,
--> si le résultat est > 4Mb/s, je suis "haut",
--> s'il est entre 2 et 4, je suis "moyen",
--> et s'il est < 2, je suis bas

Enfin, le code php du module me permet d'agencer tout cela, en prenant déjà en compte la connexion interne à ma box internet, puis à internet, avant de lancer le test de mon débit de connexion.

Pour cela, le module comprends deux arguments spécifiques :
- ip_box qui contient l'adresse IP de ma box internet
(par défaut "192.168.1.1")
-ip_internet qui contient une adresse IP sur internet
(par défaut "www.google.com")

Donc :
- j'essaie d'ouvrir le port 80 de ma box pendant 3 secondes avec la fonction @fsockopen()
- si je n'y arrive pas, pas la peine d'aller plus loin, je renvois que "rien ne marche" !
- sinon, je fais la même chose sur internet,
- si je n'y arrive pas, je signale juste que ma connexion internet est "down",
- sinon, je fais le test de connexion et je renvois que "tout est bon" et le débit actuel de ma connexion !

Fichier de mise en page connexion.css :
J'ai voulu faire quelque chose de plutôt graphique, le fichier css contient donc plusieurs choses !

En fonction de la qualification de la vitesse de connexion (haut, moyen, bas), il gère la couleur de fond de la zone affichant le débit (vert, orange, rouge).

De même, selon que la connexion internet est "up" ou "down", le fichier css indique d'afficher une image de câble dont l'embout est "vert" ou "rouge".

Enfin, selon que l'on arrive à se connecter à la box, il gère l'affichage d'une sorte de "led" verte ou rouge.

Autres fichiers :
Différents fichiers image permettent d'avoir un module très graphique :
- box_down.png pour une connexion à la box ratée,
- box_up.png pour une connexion à la box réussie,
- internet_down.png pour une connexion à internet pas possible ,
- internet_up.png pour une connexion à internet OK,

Intégration dans config.json :
Pour cette intégration :
- j'ai réglé l'actualisation sur 60, soit toutes les minutes.

Pour aller plus loin... :
C'est ce module qui pourrait nous fournir un "flag" indiquant que internet est "up" ou "down" que l'on puisse utiliser depuis les autres modules pour activer ou non leur rafraichissement... ? A voir...

Etape 20 : Module Neige

Fichier de programme neige.php :
Le code ne contient qu'un petit programme Javascript affichant des caractères "*" de différentes taille et modifiant leur position de façon pseudo aléatoire vers le bas.

A noter que j'avais commencé par gérer les variables principales du programme (nombre de flocons, vitesse de descente et taille des flocons) via le fichier "config.json", mais je me suis aperçu que ce genre de petit programme consommait pas mal de ressources sur le RPi, et j'ai du coup préféré les figer dans le programme lui-même (20 flocons, 15 secondes de descente et taille "1").

Fichier de mise en page neige.css :
Rien de particulier si ce n'est que la taille de la division contenant chaque flocon est figée à 1 x 1 pixel... puisque cette propriété sera modifiée en direct par le code JavaScript.

Enfin, le "z-index" est forcé à 99999 via ce fichier, afin d'être sûr que ce module soit au dessus de tous les autres.

Autre fichier :
Aucun.

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "0", puisque c'est mon code JavaScript qui s'occupe de tout.
- et je ne spécifie ni taille ni position, puisque là encore c'est le code JavaScript qui gère tout cela.

Pour aller plus loin... :
On trouve de très beaux exemples de flocons simulant la tombée de la neige en JavaScript sur le net, mais ils consomment pas mal de ressources... cela dit, maintenant que cette afficheur utilise un RPi 2 voire 3, il pourrait être intéressant de peaufiner un peu ce module ?

Etape 21 : Et si on sauvegardait notre travail ?

Medium tdb314 rpiclone

Si vous avez tenu le coup jusque là, d'abord, un grand BRAVO, car c'est un gros travail que ce projet !

Ensuite, souvenons-nous qu'un RPi, “ça peut planter” (souvent suite à une coupure électrique…) et sa carte SD lâcher…

Du coup, pensez à sauvegarder votre travail, et pour cela, la meilleure solution que j’ai trouvée à ce jour s’appelle “RPi-Clone” : c’est un petit utilitaire qui permet de cloner la carte SD de votre projet, MAIS AUSSI de synchroniser le clone et son original par la suite, par exemple suite à l’ajout d’un module à notre tableau de bord numérique, sans avoir à tout re-cloner ; et tout cela… directement depuis notre Raspberry Pi !

Sauvegarder avec RPi-Clone :

  1. Installer RPi-Clone… en français SVP 😉 :
    Depuis un terminal :
    git clone https://github.com/idem2lyon/rpi-clone.git
    cd rpi-clone
    sudo cp rpi-clone /usr/local/sbin/
    NB :
    - le script d’origine (en anglais) se trouve ici : https://github.com/billw2/rpi-clone
    - il vous faudra peut-être installer "git" via la commande sudo apt-get install git.
  2. Définir où se trouve la carte SD où créer le clone :
    Il vous faut donc bien sûr une seconde carte SD, à brancher via un lecteur USB sur votre Raspberry Pi.
    Puis, pour savoir où elle se trouve, tapez dans un terminal :
    cat /proc/partitions
    Chez moi, elle apparaît comme “sde”
  3. Lancer RPi-clone :
    Depuis l’invite de commande :
    sudo rpi-clone sde
    Remplacez “sde” par l’emplacement de VOTRE carte SD bien sûr !
    Rpi-clone vous pose quelques questions et vous permet de nommer votre clone… ce qui s’avère bien utile pour gérer les cartes SD !
    Et soyez patient : il faut une 15aine de minutes pour cloner ma carte de 8Go sur mon RPi B+.
    Pour faire une synchronisation ultérieure, il suffit de ressaisir la même commande : rpi-clone va détecter qu’un clonage a déjà été effectué et va vous proposer de ne faire qu’une synchronisation.
    Si vous voulez forcer un clonage “à zéro”, il vous suffit d’ajouter “-f” à la fin de votre commande :
    sudo rpi-clone sde -f

Petite précaution tout de même ! : quand vous lancer le clonage ou la synchronisation, faites-le avec le moins de programme actifs… pensez donc à quitter votre “Tableau de bord numérique” via “Alt + F4” par exemple !

Et voilà, si votre projet se met à fonctionner bizarrement ou à ne plus vouloir démarrer, il vous suffit de remplacer la carte SD de votre Raspberry Pi par votre clone et c’est reparti pour un tour !

NB : et commencez alors par refaire un clone de votre clone ! 😉

Etape 22 : Envie d'aller encore plus loin ???

Medium tdb314 plusloin

De nouveaux modules ?

Bien sûr, l'idée de ce projet est d'être modulaire et donc de pouvoir "facilement" évoluer via l'adjonction de "modules".

Pour ma part, je travaille déjà sur un :

Module ical
Un module capable de récupérer mes calendriers partagés sur iCloud au format .ics créés depuis mon Mac et d'en extraire les rendez-vous pour la semaine en cours.
Il existe déjà des "parsers" ical sur le net, mais tous beaucoup trop énorme et complet ! => je tente donc de recréer mon mini-parser, mais j'avoue que je "rame" un peu avec ce format Apple !

Et puis il y a certaines idées / propositions qui apparaissent dans les commentaires ou les messages que je reçois comme un

Module progtv
Un module capable d'afficher les programme TV de la journée en cours.

Des pistes d'évolution :

Plus généralement, j'aimerais faire évoluer ce projet pour le rendre encore plus simple à utiliser / paramétrer.

En particulier, j'aimerais commencer par créer une page "configuration" qui puisse afficher graphiquement les paramètres de chaque module tels qu'on les trouve dans le fichier "config.json" ; et via lequel on puisse modifier ces valeurs directement depuis l'afficheur, sans avoir à passer par la ligne de commande.

Mais, bon, soyons honnête : je ne suis pas programmeur et peine donc à avancer sans y passer tout mon temps ! Mais je ne désespère pas et je commence déjà par bien cerner ce qu'il faut faire.

Et de votre côté !?

Ma foi, si VOUS avez des idées, des exemples de modules que vous avez réalisés ou des témoignages de vos propres expériences que vous souhaitez partager, les commentaires spnt à votre disposition... et vous pouvez même créer votre propre tutoriel associé !

greda1

07 juil. 2016 à 10:40

Bonsoir,

Encore un excellent tuto de ta part bravo. Mais cela me semble moins facile que la version V1.

Amicalement.

Greda

Ipxav

07 juil. 2016 à 10:41

Top ! Merci Chapao pour ce nouveau tuto !

Chapao

07 juil. 2016 à 10:41

Je suis surtout allé plus dans les détails dans le tuto, mais, non, ça n'est pas plus compliqué : les étapes générales restent bien les mêmes.

Tauxin

07 juil. 2016 à 10:42

Vraiment un très bon tutoriel, précis et clair. Pour vous dire, c'est première la fois que je commente un tutoriel.. Merci !

Chapao

07 juil. 2016 à 10:42

Et bien je vous remercie d'être l'objet de votre premier commentaire, wouah !


Comme je le dis dans l'introduction, j'ai en effet essayé d'être vraiment le plus clair et le plus complet possible pour ce projet qui, s'il s'énonce en quelques mots, demande de passer par de nombreuses étapes pas toujours évidentes !


En contrepartie, ça donne un tutoriel long et pouvant être rebutant… il faut tenir bon pour arriver jusqu'au bout, j'en suis conscient…


Et d'autres modules sont toujours en cours de préparation…


Bonne continuation à vous donc !

Tauxin

07 juil. 2016 à 10:42

Tout l'honneur est pour moi !


Pour ma part je n'ai pas eu à me plaindre sur la longueur, c'est rapide et vraiment très facile à lire, justement j'en redemande encore !


Bon courage pour la suite.

greda1

07 juil. 2016 à 10:45

Bonsoir,

Me voici de retour au secours !!!

J'ai quelques problèmes pour cette nouvelle version qui sont les suivants :

– Impossible de dézipper le fichier :TdB314.zip J'utilise la commande suivante : unzip TdB314.zip /var/www/html/TdB314 et j'ai le message pi@TdB314:~ $ sudo apt-get install zip unzip

Lecture des listes de paquets… Fait

Construction de l'arbre des dépendances

Lecture des informations d'état… Fait

unzip est déjà la plus récente version disponible.

Le paquet suivant a été installé automatiquement et n'est plus nécessaire :

pypy-upstream-doc

Veuillez utiliser « apt-get autoremove » pour le supprimer.

Les NOUVEAUX paquets suivants seront installés :

zip

0 mis à jour, 1 nouvellement installés, 0 à enlever et 0 non mis à jour.

Il est nécessaire de prendre 326 ko dans les archives.

Après cette opération, 513 ko d'espace disque supplémentaires seront utilisés.

Souhaitez-vous continuer ? [O/n]

ATTENTION : les paquets suivants n'ont pas été authentifiés.

zip

Faut-il installer ces paquets sans vérification ? [o/N] o

Réception de : 1 http://mirrordirector.raspbian.org/raspbian/ jessie/main zip armhf 3.0-8 [326 kB]

326 ko réceptionnés en 1s (165 ko/s)

Sélection du paquet zip précédemment désélectionné.

(Lecture de la base de données… 126843 fichiers et répertoires déjà installés.)

Préparation du dépaquetage de …/archives/zip_3.0-8_armhf.deb …

Dépaquetage de zip (3.0-8) …

Traitement des actions différées (« triggers ») pour man-db (2.7.0.2-5) …

Paramétrage de zip (3.0-8) …

pi@TdB314:~ $ dir

Desktop Downloads Pictures python_games Templates

Documents Music Public TdB314.zip Videos

pi@TdB314:~ $ clear

pi@TdB314:~ $ dir

Desktop Downloads Pictures python_games Templates

Documents Music Public TdB314.zip Videos

pi@TdB314:~ $ unzip TdB314.zip

Archive: TdB314.zip

End-of-central-directory signature not found. Either this file is not

a zipfile, or it constitutes one disk of a multi-part archive. In the

latter case the central directory and zipfile comment will be found on

the last disk(s) of this archive.

unzip: cannot find zipfile directory in one of TdB314.zip or

TdB314.zip.zip, and cannot find TdB314.zip.ZIP, period.

Pour le mode plein écran et ouverture automatique du navigateur Web : Rien ne se passe malgré l'ajout dans “autostart” pour l'utilisateur pi:

nano ~/.config/openbox/autostart

exec /usr/bin/midori -e Fullscreen -a http://localhost/TdB314/ &


Je m'arrache les cheveux 🙁

Merci de votre aide.

Chapao

07 juil. 2016 à 10:45

Enorme ce message d'erreur de unzip, mais j'ai l'impression qu'on mélange un peu tout là…


A priori, ton premier souci est que “unzip” n'est pas installé => perso, ma réponse est simple => dézippe le fichier depuis un “vrai” ordinateur puis “pousse” les fichiers dézippés via sftp ou même une clé usb, ce sera beaucoup plus simple !


Ensuite, pour le plein écran du navigateur, tu as bien suivi les procédures d'installation de openbox et de midori bien sûr ?

“rien ne se passe”, ça veut dire quoi ??? => est-ce que openbox se lance ? Si oui, est-ce que Midori se lance ? Si oui, est-il en plein écran et qu'affiche-t-il ? …il me faut un peu plus de détail pour pouvoir t'être utile…

jfk93

16 juil. 2016 à 15:00

Bonjour,
Où sont les liens pour télécharger les sources ?
Merci.

LDT

31 juil. 2016 à 17:42

Bonjour,

Je débute tout juste dans le domaine du RPi alors certaines de mes questions vont sûrement être un peu évidente mais pourriez-vous m'aider ?

Q1 : je suis bloqué à l'Etape 10, je n'arrive pas à télécharger les fichiers joints. Est-ce que le lien ne serait pas brisé ?

Q2 : quelles sont les commandes pour déziper mais surtout copier / coller le contenu du zip au bon endroit ?
Est-ce que toute cette étape de dézippage / collage peut être réalisée sur un PC Windows sur lequel on lirait la carte SD du RPi ?

Q3 : connaitriez-vous un utilitaire permettant de cloner la carte SD depuis un PC Windows ? J'ai essayé le clonage depuis le RPi directement mais le processus s'est figer en plein milieu et j'ai du reformater la carte puis recommencer le tuto du début.

En tout cas merci beaucoup pour ce tuto qui touche à tous ces domaines ! Très formateur !

Lusitanos67

17 août 2016 à 10:43

Ou sont les nouveaux liens pour télécharger le projet ? merci

LDT

05 déc. 2016 à 22:07

Merci beaucoup pour la mise-à-jour des liens !!!


Oh ça buzz

+ de 1 000 vues pour Un Tableau de Bord numérique – v2 !


S'inscrire:


  • Vues: 2854
  • J'aime: 16