Un Tableau de Bord numérique – v2 !

Comme on a affaire à un gros projet, appelé à évoluer régulièrement, je vais lister ici les évolutions que j'y apporte, date par date :

[2017-01-11]
Ré-écriture du tutoriel 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 !

[2017-02-20]
- Ajout du module motdujour : pour afficher un "dicton" ou une "citation" chaque jour.
- Ajout du module lune_semaine : pour afficher les informations lunaires utiles aux jardiniers sur une semaine.
- Ajout du module lune_jour : idem sur un jour.
- Modification du module connexion : ajout d'un argument "abo_Mbs" dans le fichier "config.json" permettant de renseigner la vitesse de son abonnement, et de "noter" le débit testé en fonction de celui-ci.

[2021-02-02]
Je viens de re-tester ce tutoriel avec un RPi 2 sous la dernière version de Raspberry Pi OS (nouveau nom de Raspbian) Lite (à base de Debian Buster, du 11 janvier 2021) :
--> Tout est toujours opérationnel SAUF pour le navigateur Midori : il avait été choisi pour sa légèreté et sa simplicité, mais la dernière version (7) a beaucoup évolué et je n'ai pas réussi à la faire fonctionner en mode plein écran et sans barre de navigation de manière satisfaisante : je suis donc passé à Chromium-browser... malgré son poids, ça marche bien et au moins, on est aux standards actuels du web ! => j'ai corrigé mon tutoriel dans ce sens.
--> Autre petite "différence", le logiciel RPi-Clone a été totalement ré-écrit en 2020 et est passé en v2 : son fonctionnement ne change pas, mais cette nouvelle version n'a pas été traduite en français.

[2021-02-16]
- Ajout de deux boutons "on" et "off" : pour allumer et éteindre le tableau de bord directement et proprement, sans avoir besoin de clavier.

[2021-02-22]
- Ajout d'un disque dur USB externe : pour ne plus utiliser la carte SD et éviter tous déboires dus à sa fragilité !

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 !

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 !

NB : Désormais, la fondation Raspberry Pi propose son propre utilitaire nommé Raspberry Pi Imager, disponible en téléchargement sur leur site.

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 !

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 !

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 php

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.

[2021-02-02] :
La dernière version de Midori (v7) a beaucoup évolué et je n'arrive pas à la paramétrer correctement, je suis donc passé sous Chromium-browser qui, bien que lourd, fonctionne désormais très bien sous RPi :

sudo apt-get install chromium-browser

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”.

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.

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.

[2021-02-02] :
Si vous utilisez finalement Chromium-browser, cela devient :
# Lancement du tableau de bord numérique à l’ouverture d’Openbox
exec /usr/bin/chromium-browser --display=:0 --kiosk --incognito --window-position=0,0 http://localhost/tdb314/ &

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 ! ;)

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.

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.

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.

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.

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 !

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 !)

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 ?

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 !

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

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.

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

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

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 ? (20/02/2017 : mauvaise idée, ça rame aussi sur le RPi 3 ;o))

Fichier de programme motdujour.php :
Un petit module qui se veut très simple : on dispose d'un fichier texte contenant une ligne de données par jour, et on veut afficher la ligne du jour dans un cadre adéquat.

Je récupère donc le n° du jour actuel qui devient mon n° de ligne à lire / récupérer.
Attention : comme mon fichier contient la ligne pour le 29 février des années bissextiles, j'ajoute "1" si on n'est pas une année bissextile, à compter du 60ème jour (le 1er mars).

Puis je lis les lignes de mon fichier texte avec la fonction fgets() jusqu'à la ligne souhaitée.

De là, je dispose des données à afficher, que je mets en forme au besoin.
En particulier, j'ai choisi de pouvoir utiliser des "#" dans mon fichier texte, qui seront remplacés par des sauts de ligne.

Fichier de mise en page motdujour.css :
Rien de particulier si ce n'est l'utilisation de la pseudo classe :before pour insérer un guillemet "géant" avant mon dicton.
Bon, là, soyons honnête, j'ai une petite bizarrerie : je demande à utilisé le guillemet double 201C de la table ASCII, mais même en installant de nouvelles polices sous mon RPi, il s'obstine à m'afficher un guillemet sous la forme d'un double accent circonflexe placés verticalement... bon, rien de grave, au pire, il suffirait sans doute d'ajouter une police directement dans cette feuille css : à vous de voir !

Autre fichier dictons.txt :
Un "bête" fichier texte avec 366 lignes : une par jour (sans oublier celle du 29 février des années bissextiles !).
L'utilisation d'un "#" permettra de scinder ces lignes en plusieurs lignes sur l'afficheur.
J'ai récupéré tous ces dictons et proverbes via une multitude de sources : almanachs, sites internet, livres...

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "28800", qui correspond à 8h, afin d'être sûr d'avoir le bon dicton quand je me lève à 8 heures ;o). Bon, en fait, personnellement, je coupe mon afficheur toutes les nuits, et je n'ai donc pas de souci de rafraichissement, mais au cas où...
- et je spécifie quel fichier texte utiliser, qui est placé par défaut dans le répertoire du module.

Pour aller plus loin... :
J'avais pensé appeler ce module "dicton", mais j'ai finalement choisi quelque chose de plus ouvert, car après tout, on pourrait créer un fichier de citations, de blagues, des saints du jour ou tout autre idée qui vous passerait par la tête : n'hésitez pas à me communiquer vos propres fichiers texte si vous souhaitez les partager au plus grand nombre !

Fichier de programme lune_semaine.php :
Il s'agit d'afficher les informations lunaires utiles aux jardiniers pour une semaine.

Les informations de base (sens de la lune et type de jour) son enregistrées dans un fichier csv que j'ai créé de toute pièce à partir de données récupérées sur des livres que je possède.

Le programme php récupère le fichier csv en une fois dans un tableau, puis se place sur le premier enregistrement utile en fonction du n° de jour actuel avant de lire les 6 suivants pour compléter la semaine.

J'ai choisi 7 jours, afin d'afficher ces informations en regard de la météo, elle aussi affichée sur 7 jours (cf. Photo 2).

Fichier de mise en page lune_semaine.css :
Rien de particulier si ce n'est que j'affiche les données sous forme de balises li qui sont ensuite remplacées par l'image adéquat via leur background.

Autre fichier cal_lunaire.csv :
Un fichier créé de toute pièce dans un tableur puis exporté au format csv.

NB : certains jours sont favorables à un type de légumes jusqu'à une certaine heure puis à un autre type de légume ensuite => j'ai considéré que ces jours étaient du type de légume avec le plus grand nombre d'heure concernés.

NB2 : de même, certains calendriers lunaires préconisent de ne pas travailler lorsque la lune est aux points clés de son ellipse (apogée et périgée), ou en fonction de positions particulières des planètes : n'allons pas chercher la petite bête, je me suis limité aux nœuds lunaires = les jours où la trajectoire de la lune coupe le plan de l'orbite de la Terre autour du soleil !

Intégration dans config.json :
Pour cette intégration :
- je règle l'actualisation sur "28800", juste histoire d'être sûr de changer de jour avant mon lever, mais de toute façon, j’éteins mon afficheur chaque nuit.
- et je spécifie quel fichier utiliser pour les infos du calendrier lunaire proprement dit... afin que vous puissiez utiliser le votre au besoin !

Pour aller plus loin... :
Pas d'idée particulière...

Fichier de programme lune_jour.php :
Bon, là, je me suis fait plaisir : comme j'ai de la place à côté de l'affichage de la phase de la lune, je me suis dit que je pourrais y glisser les infos associées pour ma femme jardinière, en détaillant du coup un peu les choses !

Donc... et bien le programme php est quasi identique à celui du module précédent, si ce n'est qu'on ne récupère que les information du jour actuel, et qu'on remplace les simples données brutes du calendrier par des textes un peu plus explicites !

Fichier de mise en page lune_jour.css :
Quasi la même chose que le module précédent.

Autre fichier cal_lunaire.csv :
Idem que le module précédent.

Intégration dans config.json :
Idem que le module précédent !

Pour aller plus loin... :
J'ai hésiter à placer dans le répertoire Ressources le fichier csv et les images de ce module... puisque ce sont les mêmes éléments que pour le module lune_semaine, mais bon, on peut vouloir n'afficher que l'un ou l'autre, et je ne suis donc pas allé plus loin sur cette piste pour le moment... quitte à avoir du coup pas mal de fichiers en doublon...

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 ! 😉

[2021-02-02]
Le logiciel RPi-clone a été totalement ré-écrit en 2020 et est désormais en v2.
Cela ne change rien quant à sa façon de l'installer et de l'utiliser, par contre, la version traduite en français n'existe pas à ma connaissance.

Personnellement, j'éteins mon Tableau de Bord tous les soirs, et je le rallume le matin.
Le souci, c'est que pour faire les choses proprement, je suis donc obligé de prendre un clavier ou de disposer d'une session ssh pour passer la commande d'extinction du RPi... et le matin, je dois débrancher / rebrancher l'alimentation pour forcer son redémarrage : pas super pratique !

Et c'est ainsi que je suis parti à la recherche de solutions sur internet, pour finalement retenir les deux suivantes :

Allumer le Tableau de bord via un bouton poussoir :

Si vous regardez attentivement votre RPi, vous devriez y trouver deux petits plots marqués "run" : en fait, il suffit de faire contact entre ces deux "pins" pour faire un "reset" du RPi...
Bon, à proscrire lorsque le RPi est en route, à moins d'être complètement bloqué ! 😉

Par contre, si le RPi est arrêté, cela permet de le faire démarrer sans avoir besoin de toucher à son alimentation : juste ce qu'il nous faut !

Il suffit donc de raccorder un bouton poussoir sur ces bornes "run", si possible par l'intermédiaire de petits picots mâles puis de fils Dupont, histoire que cela soit facilement démontable : on a notre bouton poussoir d'allumage !

NB : selon la version de votre RPi, les plots "run" ne sont pas au même endroit, par exemple :
- sur le RPi-2 ils sont juste au dessus de la fiche "display",
- sur le RPi-3 ils sont à côté des dernières broches du GPIO.

Eteindre le Tableau de bord via un bouton poussoir :

Un peu plus compliqué, car rien n'est prévu d'origine pour faire cela : il va donc falloir passer par les broches du port GPIO et faire comprendre au RPi que lorsque le bouton poussoir est fermé, cela signifie que l'on désire qu'il s'arrête.

On trouve beaucoup de solutions passant par un script bash ou python à lancer, mais j'ai dernièrement trouvé une solution beaucoup plus simple qui passe juste par une modification du fichier config.txt de la partition "boot" du RPi.

Il suffit donc d'ouvrir le fichier /boot/config.txt de votre RPi, puis d'ajouter la ligne suivante dans la section [all] du fichier :
dtoverlay=gpio-shutdown,gpio_pin=26,active_low=1,gpio_pull=up

Cela règle la demande d'extinction du RPi sur la broche GPIO26 (qui est la broche n° 37 du port GPIO, l'avant dernière broche sur la rangée intérieure du GPIO : regardez bien le schéma joint dans les photos pour ne pas vous tromper !)

Le fait de mettre cette broche à la masse (GND) demandera donc au RPi de s'éteindre : il suffit donc de raccorder un second bouton poussoir entre la broche GPIO26 et une broche GND : perso, j'ai pris la broche n°39, qui est juste à côté.

NB : bien sûr, vous pourriez choisir d'autres broches du GPIO, j'ai choisi celles-ci parce qu'elles sont côte à côte et tout au bout du port GPIO, inutilisées chez moi.

NB2 : normalement, pas besoin de mettre une résistance en série avec le bouton, puisque l'on demande d'activer la résistance de pull-up interne de la broche du GPIO, mais si vous préférez passer par une résistance externe, une de 220 ohms devrait très bien aller.

Et voilà, mon Tableau de Bord est maintenant complètement autonome !
J'ai choisi un bouton vert pour le démarrage et un rouge pour l'arrêt, que j'ai fixés sur le bord du cadre en bois de mon écran, mais à vous de choisir la mise en œuvre qui vous convient le mieux !

Par défaut, les Raspberry Pi n'ont pas de disque dur et fonctionnent via une carte micro-SD... c'est peu cher et ça prend peu de place, mais ce genre de supports supportent mal les opérations d'écritures à répétition et peuvent se corrompre petit à petit jusqu'à devenir inutilisables.

Sur les premières versions de RPi, il existaient des parades pour minimiser ces opérations d'écritures, comme de réduire le nombre de fichiers de log générés par le système, ou encore de déplacer certaines informations de la carte micro-SD vers la mémoire vive.

Puis il fut possible de mettre la partition /root sur une clé USB ou un disque dur externe, mais la partition /boot devait encore être placé sur la carte micro-SD...

Et enfin, depuis leur version 3, les RPi acceptent de démarrer directement via un support USB, sans utiliser de carte micro-SD : c'est la solution que je vous propose de mettre en place dans ce chapitre.

Choisir le disque dur USB :
Personnellement, j'ai choisis :
- un disque dur SSD 2,5'' de 120Go pour moins de 20€,
- et un boîtier externe USB2 (seuls les RPi 4 ont un port USB3) à moins de 8€.
NB : ce boîtier est en aluminium (pour favoriser une éventuelle dissipation thermique naturelle... même si un disque SSD est censé peu chauffer) et dispose d'un prise permettant de le raccorder à une source d'alimentation externe, au cas où le port USB du RPi ne soit pas suffisant pour alimenter le disque dur...

Préparer le disque dur USB :
Après montage du disque dans son boîtier, j'ai choisis de le formater et de le partitionner manuellement afin de faciliter la suite des opérations.

Pour cela, j'ai utilisé GParted depuis un PC sous Linux. Mais on peut utiliser un autre logiciel, ou une version "live" de GParted, qui peut alors être exécutée depuis Windows ou MacOS.

J'ai créé 3 partitions comme suit :
- Partition 1 = 256 Mo, en FAT32, qui sera donc sur sda1, et contiendra /boot
- Partition 2 = 16 Go, en ext4, qui sera donc sur sda2, et contiendra /root
- Partition 3 = le reste du disque dur, en ext4 et qui sera sur sda3, me permettant de stocker des données partagées, hors Raspi OS, par exemple sous /home/pi/médias

Attention ! : afin de respecter la façon dont Raspi OS gère ses cartes micro-SD, pour la partition 1, j'ai réglé la zone "Free space preceding" de GParted à 4MiB ; puis, pour toutes les partitions, j'ai à chaque fois choisis un multiple de 4MiB.

Voilà, maintenant, on peut brancher le disque dur au RPi3 et vérifier que les partitions sont bien vues en sda1, 2 et 3 en lançant la commande :
cat /proc /partitions

Préparer le RPi3 pour autoriser le démarrage en USB :
Pour cela, il suffit d'ajouter program_usb_boot_mode=1 à la fin du fichier /boot/config.txt.

Vous pouvez faire cela simplement via la ligne de commande suivante :
echo program_usb_boot_mode=1 | sudo tee -a /boot/config.txt

Il faut redémarrer le RPi pour prendre en compte cette modification :
sudo reboot

Puis vérifier que tout à bien fonctionné via la ligne de commande suivante :
vcgencmd otp_dump | grep 17

Ce qui doit retourner :
17:3020000a

Cloner le contenu de la carte micro-SD vers le disque dur USB :
Puisque nous avons installé le logiciel rpi-clone, il suffit de s'en servir via la commande :
sudo rpi-clone sda

On arrête alors le RPi :
sudo shutdown -h now

Redémarrer le RPi sur le disque dur USB :
On enlève la carte micro-SD du RPi et on le redémarre... et c'est tout, désormais, notre RPi démarre et n'utilise que le disque dur USB pour fonctionner !

ATTENTION ! : Suite à cette nouvelle façon de fonctionner, le clonage pour sauvegarder notre RPi évolue légèrement :

1) Plus besoin de lecteur de carte SD externe : il suffit d'utiliser le slot micro-SD du RPi !

2) Pour faire une première sauvegarde de notre RPi en ne sauvegardant que les deux premières partitions (la 3ème étant beaucoup trop grande, à moins que vous n'ayez une grosse carte SD), il faut taper :
sudo rpi-clone mmcblk0 -f2

3) Et pour faire les synchronisations ultérieures sans avoir à repartir de zéro à chaque fois, il faut lui spécifier de ne synchroniser que la partition /boot (la partition /root étant systématiquement prise en compte par rpi-clone), via la commande :
sudo rpi-clone mmcblk0 -m /boot

NB : autre solution = démonter votre partition sda3 avant de lancer rpi-clone, et du coup, vous pouvez oublier l'option -m /boot. 

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 !

Module mot du jour Fait le 20/02/2017
Un module capable d'afficher un "mot du jour" pioché dans un fichier txt : dicton, citation, saint du jour, etc...

Module calendrier lunaire
Un module capable d'afficher les informations lunaires utiles au jardinier (pour ma dame ;)) : jours favorables à tel type de légumes, nœuds lunaires où il ne vaut mieux rien faire, lune ascendante ou descendante, etc...

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é !