Un Tableau de Bord numérique – v2 !

image principale Un Tableau de Bord numérique – v2 !

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.

Matériel :

Budget : Non défini

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

Etape 1 : Suivi des modifications...

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

Etape 2 : 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 3 : Préparez votre carte SD avec Raspbian Lite


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.

Etape 4 : 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 5 : Ajouter une interface graphique


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

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


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 8 : Régler le Raspberry Pi en mode “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.

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

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


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 10 : Appréhender le fonctionnement du Tableau de Bord

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 11 : Paramétrer le Tableau de Bord

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


Etape 22 : Module Mot du jour

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 !

Etape 23 : Module Lune_semaine

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



Etape 24 : Module Lune_jour

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



Etape 25 : Et si on sauvegardait notre travail ?

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.

Etape 26 : Deux boutons poussoirs... pour allumer / éteindre notre tableau de bord

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 !

Etape 27 : RPi3 : remplacer la carte micro-SD par un disque dur USB

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. 

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

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


Top ! Merci Chapao pour ce nouveau tuto !

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 !

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 !

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.

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.

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

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.

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…

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

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 !

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

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

salut a tous, j'ai déjà bien avancé sur ce dash, je suis parti avec un mini pc avec ubuntu 16.04 et un ecran tactile 22" HANS G. (x planet, meteo, heure et date , Rss, temp In et OUT , connexion , liens direct pour les courses drive, domoticz ) je voudrais avoir un module Ical, pour afficher les éventements, dates et heures début et fin, extraite du fichiers en ligne de google calendar ( basics.ics). si quelqu'un a déjà fait ce module ou un début je suis preneur, car je suis ultra débutant et j'ai du mal a mettre en place un parser ou autre chose plus simple

Hey, bravo pour ta réalisation, je la trouve très réussie et très lisible ! Bon, je vais aller voir le parser iCal dont tu parles : ça fait un moment que j'en cherche un qui ne soit pas une usine à gaz... mais en vain pour le moment => on se tient au courant. NB : les 0,7Mb/s sur ton afficheur, c'est un débit faible pour toi (et donc normal qu'il soit en rouge) ou c'est correct pour ton abonnement et tu aimerais une autre couleur ? => je pense ajouter le choix d'une vitesse d'abonnement dans le config.json pour répartir les couleurs en fonction (par ex. : abo à 2M, 8M, fibre...). NB2 : et c'est quoi les icônes mystères en bas à gauche de ton écran ? Bonne continuation à toi !

salut, je pense que le parser est surement "trop" complet pour l'usage. pour les 0.7mb, il y avait un souci de débit hier, mais j'ai bien configuré les couleurs en fonction de ma connexion. pour les icônes ce sont des raccourcis pour le tactile( moteur de recherche, domoticz et le caddie pour les courses au drive, mon dernier projet serait d'ajouter au centre un visiophone pour mon portail et pouvoir ouvrir le portail directement

Bonjour vincepsx, et bravo pour l'avancement de ton projet... car c'est quand même pas évident ! ;o) Pour un module iCal, j'en rêve aussi... mais, bien qu'ayant commencé le programme, je n'ai pas encore abouti sur qqc de vraiment opérationnel... => avis aux programmeurs qui passeraient par là, oui ! Et si le mien abouti... je te tiens au courant de suite ! Amicalement,

salut, pas de problème si tu as une solution pense a moi, je cherche de mon coté aussi, mais je suis vite limité par mon niveau pour créer ce module, En tous cas , un grand MERCI a toi, grâce au DASHBOARD j’ai découvert Linux, la création d’une page, domoticz…… tu as fait un super Tuto, même un pur novice peu arriver a un beau résultat assez facilement !

voici un aperçu de mon dash: http://hpics.li/32b2450 pour l'agenda, on peut voir des doublon au niveau des dates, je voudrais une fois la date puis tous les événements de cette dates. mais avec le parser "https://github.com/u01jmg3/ics-parser" je suis perdu pour la mise en forme.

Bonjour Vincent, Comment as tu ajouter un agenda sur ton Dashboard ? Merci David

Salut Un Grand MERCI pour ce Tuto très bien fait Seulement je cherche a modifier le fonctionnement diapo au lieu que les photos soient sur la carte SD je voudrais qu'elles soient sur une clef USB Mais après plusieurs essai impossible quelqu'un pourrait t il m'aider Merci d'avance

Et ben... j'ai pas encore réussi non plus ! ;o) Déjà, c'est pas simple parce qu'il faut monter la clé usb à la main, mais le vrai souci à priori, c'est que les images se trouvent alors à un endroit inaccessible pour une balise en HTML... en effet, le lien "src=" d'une telle balise ne peut pointer que vers le dossier défini comme base du site dans Apache (/var/www/html/) ou une URL externe via http:// => et donc, impossible d'aller dans un "/mnt/cle/" par exemple... Au pire, il faudrait alors copier les images de la clé usb vers un dossier situé derrière "html", ce qui est faisable en PHP, mais ça limite l'intérêt de la clé usb... Je continue à chercher... désolé de ne pas mieux répondre...

Merci pour ta réponse ca me donne plus de piste a explorer pour solutionner mon problème. J'ai essaye de monté ma clef a l'endroit ou tu as placé les images mais sans grand résultat . Je vais donc chercher du coté de Apache pour trouvé une solution pour avoir accès a ma clef Merci encore

A priori, la solution devrais venir du côté d'Apache où il faut définir un "Alias" vers le point de montage de la clé, mais je n'ai pas encore eu le temps de zieuter : http://30minparjour.la-bnbox.fr/blog/2009/11/23/ajouter-un-alias-a-apache/ et http://httpd.apache.org/docs/2.0/mod/mod_alias.html A suivre donc, on va y arriver ! ;o)

Bonjour Stophe, et merci pour ton commentaire ! Quant à ta question, j'espère que qq'un te répondra rapidement, et je m'y essaierai... si j'ai un peu de temps ! ;o) Bonne continuation à toi !

Apres beaucoup d'essai avec les alias j'ai décidé d'essayer de monté ma clef en auto dans le fichier /img et d'attribuer les droits 704 sur ma clef et hop ca marche en tous cas merci encore de ton aide ca ma permis d'apprendre des choses ; )

Super ! Cela dit, il reste des choses mystérieuses quant à ces images : dans le fichier php du module diaporama, il semble impossible d'utiliser la balise "img" avec un chemin ABSOLU vers les images !!! Seuls des liens RELATIFS fonctionnent... j'ai cherché sur internet et n'ai pas trouvé d'autres réponses que : utilisez des liens relatifs ! ;o) Dommage, ça limite un peu les possibilités de ce module du coup...

Bonjour, J'ai suivi le tutoriel original et avec un peut de travail a gauche et a droite, j'ai réussi à mettre en place le tableau de bord. J'ai découvert que tout dernièrement ce tutoriel. L'idée d'ajouter le mot du jours ma sembler une très bonne idée. J'ai récupérer les fichiers et tenter de mettre en marche le module sans réussir. Bien que celui-ci apparaisse dans ma page à l'endroit sélectionner, sont contenu présente le contenu du répertoire et nom pas le mot du jour. Comme je n'y arrive pas, je me demandais si vous auriez des pistes de solutions pour moi. Merci

Bonjour Danpel, Ca sent le souci de chemin vers le fichier "dictons.txt"... mais je ne vois pas trop où... Déjà, dans ton fichier "config.json", vérifie bien que tu aies, dans la partie "args" : "fichier": "dictons.txt" Ensuite, j'ai du coup modifié mon fichier "motdujour.php" pour tenter de vérifier que le fichier est bon et renvoyer un message d'erreur sinon => je viens de mettre le fichier "motdujour.zip" sur mon site avec les nouveaux fichiers, à récupérer via un "wget https://www.chapao.com/motdujour.zip" depuis ton RPi En espérant que cela t'aide à solutionner ton pb : chez moi, ça fonctionne sans souci avec ces fichiers. Bonnne chance !

Bonjour et merci de la réponse rapide. Ton nouveau module fait la même chose. Je reste sous l'impression que pour une raison ou une autre, apache n'a possiblement pas les droits de lecture. J'ai fait une copie du fichier dictons.txt dans chacun des répertoires : ressources, tdb314, modules, et dans motdujour. Je voulais valider que ce n'était pas un problème de positionnement du fichier et toujours la même chose. Merci

Bonsoir, Un grand merci pour la précision de ce tuto. Mon écran est en bonne voie. Je cherche a retirer le contour :) autour des modules. Je n'arrive pas à trouver s'il est annoncé dans les css ressources ou ailleurs ? Une piste ? Merci encore.

Je me réponds au cas où d'autres seraient dans le même cas. Après avoir supprimé les lignes évoquées plus indiquant comment faire le cadre, il faut bien penser à purger le cache du navigateur... :)

Bien vu Heimdaall ! Je viens de voir tes messages, et, en effet, le fait que les navigateurs gardent en mémoire certains éléments des sites webs visités pour en accélérer l'affichage nous joue parfois ce genre de tours : bravo d'y avoir pensé !

bonjour, avant tout merci de ce partage si bien détaillé.J'aurai voulu savoir s'il est possible de mettre une fonction temps au choix du démarrage.Si au bout de 5s jai pas choisi mon affichage il démarre automatiquement sur l'affichage graphique. J'espére etre assez clair.

Bonjour, Tou d'abord merci pour ces deux tuto V1 et V2. Apres des heures, j'ai réussi a avoir les modules planet, heures, météo et le monde qui s'affichent correctement. Mon soucis maintenant c'est de pouvoir tous réduire pour le mettre sur un écran de 7". (Je sais c'est petit mais plus discret dans le salon de ma femme car tous le monde sait, on n'a pas le dernier mot..) Donc pour "l'heure" pas de soucis c'est ok. Ca se complique pour le module terre et lune. J'arrive a réduire la taille du module, mais l'image de la terre qui est dedans reste toujours à la même taille. J'ai jouer avec les valeurs dans "xplanet_terre.css" mais rien y fait. Pourriez vous m'aiguiller

Bonjour à tous, J'ai essayé d'ajouter un module pour avoir le programme TV. Mais je bloque pour écrire la partie PHP Qui pourrait m'aider ? Merci David

Bravo pour ce tuto TRES bien fait ! En le suivant à la lettre, tout marche du premier coup. Par contre une question : quand on a modifié le config.json, comment faire prendre en compte les modifs, à part rebooter la RPi ???

En me basant sur le widget "motdujour", j'ai réalisé "fetedujour". Il est à disposition de tout le monde. PS ; j'avais oublié de dire sur mon message du 13/10/17 que je fais tourner le dashboard sur la dernière version de Raspian, la Stretch, sans aucune modif du tuto. Donc il est toujours valable. :-)

Bonjour, je viens de voir ce très bon tutoriel et je souhaiterais l'adapter pour mon système domotique. Récupérer des infos de ma box > Fait et OK Avoir un système de menu permettant d'avoir des pages avec différentes informations > des idées? Piloter ma box domotique pour qu'elle fasse des actions > des idées ? merci d'avance

bonjour très bon travail, je recherche un widget sur les heures des marées j ai trouver un widget mais je trouve qu il gâche le reste. si de ton coté tu as peut être déjà vu un bon widget ou même des pistes, des idées, ou tout autre chose je prends. de mon coté je recherche. merci et merci a ts.

bonjour, je vois que sur ton ton tuto tu ne visualise plus l état de ton NAS, j aimerai bien que tu ajoute ce module ou avoir des infos pour pouvoir l installer sur mon tableau de bord. je suis toujours en recherche pour d une visu des marées mais la aussi pas grand chose a ce mettre sous la dent. salutations

J'avoue qu'étant plutôt à la montagne, l'idée d'un calendrier des marées ne m'a même pas traversé l'esprit ! ;o) Aurais-tu un lien vers le widget dont tu parles pour que j'ai une rapide idée de ce que ça pourrait donner ? Quant à la surveillance de mon NAS... ben, je n'en ai en fait jamais eu... => que veux-tu dire par là ? Cordialement

bonjour, la montagne que c est beau l hiver. pour ma part je suis prés de la mer si prés que je vois les portes-conteneurs a l horizon. je pensais que tu avais fait une supervision de machine ou NAS. j'ai du faire erreur. site: http://www.voilesetvoiliers.com/ le widget se trouve plus bas a droit "votre horloge a marée. mais dans cette page il y a plus de chose intéressantes : http://maree.info/7/meteo# salutations

Ah au faite tu le sais déjà et on te l a surement dit mille fois, un grand merci pour tout le travail, le temps, la patience, que tu as mis dans ce tuto.

bonjour a tous dans ce projet je vois pour y afficher via NRF24L01 et Arduino  les température intérieure et extérieure j attends encore quelques pièces et je glane toute infos sur le sujet sur le net, si vous avez déjà fait cela je suis preneur.

je n ai pas mis de coté mon désire d y incorporer les heures de marée je suis toujours dessus. mais avec mes connaissances dans le domaine "Raspberry pi, Arduino, Codage", qui sont malheureusement bien trop limité, c est bien difficile.

salutations

Bonjour,

Merci pour le tuto, qui devrait r�pondre au besoin de mon p�re une fois que cela fonctionnera....

Mon niveau PHP et CSS est nul et c'est certainement pour cela que je n'arrive pas afficher les infos Le Monde!!!! Ma zone �cran associ� � ce module reste vide???

 J'ai pu changer le graphique M�t�o sans pb mais sur les infos impossible de comprendre pourquoi ca ne veut pas s'afficher??? Si je veux mettre BMF que dois je faire?

Cordialement.


Bonjour et surtout un grand merci pour ce tuto ! J'ai réussi à faire un truc sympa et à l'adapter un minimum selon mes besoins (et avec aucune connaissance de base en html, css, php, javascript et autre trucs du genre lol)
Par contre, impossible de faire fonctionner le module rss avec le monde (ou lequipe.fr idéalement :D ). Peux-tu me dire si ça fonctionne encore chez toi ? Si la réponse est oui, alors je suis dans la m*** parce que j'ai tout suivi à la lettre et recommencé plusieurs fois. Si la réponse est non, alors sais-tu d'où ça vient ? et peux-tu m'aider à corriger ?
Deuxième point : je voudrais créer un "bouton" qui me permette de passer sur une autre page du tableau de bord. L'idée est de faire plusieurs Tdb avec des liens entre eux, semblables à des pages et naviguer entre eux via écran tactile. J'ai créé un module .css pour faire un "bouton" où je veux (enfin une zone pour un module spécifique), mais dans le fichier .php je n'arrive pas à trouver le code qui va bien (j'imagine un lien hypertexte vers un 2nd TdB, qui pointe sur un autre dossier créé). J'espère être assez clair. Bref, quel code dois-je mettre dans le .php pour avoir un lien hypertexte ? Par exemple: bouton sur tdb1/ (avec l'heure+météo) qui m’envoie sur http://192.168.1.43/tdb2/ (avec diaporama)
Merci pour ton aide !
Cordialement,
Aurélien

Bonjour,

Au risque de paraitre un peu nulle..

Lorsque je lance la commande startx, il me dit que la commande est introuvable ...

Quelqu'un aurait une explication ?


Merci d'avance

Hello Sarah, As-tu essayé "sudo startx" ?

Bonjour !


Super Tuto merci pour tout c'est vraiment génial de découvrir les possibilités du RasPi comme ça !

Mon seul problème se trouve comme beaucoup sur le module RSS qui n'affiche rien #tristitude...

Si quelqu'un a une solution j'en serais très content !


Encore merci !

Bizarre ce pb que vous semblez être plusieurs à rencontrer avec la lecture du flux RSS... c'est pourtant un module très simple puisqu'on ne fait que récupérer un fichier texte et le lire avec les codes associés à ce genre de données... je vais regarder cela de plus près... à mon retour de vacances ! ;)

Bonjour,

Je cherche une personne capable de m'aider pour ajouter des informations type : programmes TV.

Mais compétences en dev ne sont pas terrible du tout.

Merci

Bonne journée.

Salut à tous 

Pour avoir toutes les fonctions des modules et surtout RSS il faut suivre ce lien Installer un serveur web sur votre Raspberry (Apache + PHP + MySQL)

https://raspian-france.fr:installer-serveur-web-raspberry-lamp

suivre la procedure du tuto et mettre Apache et php du lien 

et magie tous fonctionne

Bonne soirée à tous

Romauba22

je me suis trompé de taille

Oui, c'était un peu grand ! ;)

Mais merci de ton partage : très seyant ce bleu que tu a utilisé comme fond, bravo !!!

Il faudrait que je complète ce tuto : depuis, j'ai ajouté deux boutons physiques : un rouge pour éteindre proprement le tableau de bord et un vert pour le rallumer sans avoir à débrancher - rebrancher le raspberry... mais c'est devenu tellement touffu que je n'ose plus y toucher ! ;)

Bonjour Chapao,
Super tuto.
J'en suis à l'étape 9 et lorsque je démarre un navigateur j'ai le message suivant:

Qu'en penses-tu ?


Pour ceux qui galèrent avec le module .RSS voilà la solution qui a fonctionné pour moi : 

1) sudo apt update && apt upgrade

2) sudo apt install php-pear php-fpm php-dev php-zip php-curl php-xmlrpc php-gd php-mysql php-mbstring php-xml libapache2-mod-php

3) sudo service apache2 restart

Bonjour,

Merci pour ce tuto, qui n'est pas compliqué a mettre en place,

Je suppose que depuis l'ecriture de l'article, il y a eu pas mal d'évolution? J'ai téléchargé le fichier hier (30/03/2020), et je n'arrive pas à faire fonctionner le module connexion.

La seule modification effectuée, c'est de mettre l'ip de ma freebox, du coup la pastille de droite est bien verte, par contre le câble réseau reste en orange, mais je ne comprends pas ce qui cloche.

Merci de votre aide

Hello,


J'ai trouvé d'ou venait le problème,

je n'ai pas une connexion à 8 Mb/s ADSL, mais une connexion fibre, donc un peu plus rapide,

Voici la partie modifiée dans le fichier connexion.php (partie en gras), j'ai mis une valeur plus grande:

// 3. La vitesse de l'abonnement
if(!empty($_GET['abo_Mbs'])) {
$abo = $_GET['abo_Mbs'];
} else {
$abo = 8;  //valeur par défaut de 8Mb/s
}

et a tout hasard j'ai modifié aussi dans le fichier config.json (partie en gras), j'ai remplacé le 8 par une valeur plus grande, et j'ai mis la meme valeur dans le fichier connexion:

{
"ip_box": "192.168.10.254",
"ip_internet": "google.com",
"abo_Mbs": 8
}

Bonjour,

A chaque fois que j'ajoute un module, il se retrouve tout en haut a gauche, il se superpose avec l'heure.

Ai-je oublié de modifier un fichier ?

je n'arrive pas a comprendre, si vous pouvez m'aider,


Merci d'avance,

Bonjour à tous,

Je suis intéressé par le module progtv qui a réussi à le mettre en place et surtout comment ?

Merci de votre aide.

Ces tutoriels devraient vous plaire

vignette Comment fabriquer son filament pour imprimante 3D
Comment fabriquer son filament pour imprimante 3D
vignette L’imprimante 3D pour 60€: EWaste
L’imprimante 3D pour 60€: EWaste
vignette Préparer un fichier pour une découpe et une gravure laser
Préparer un fichier pour une découpe et une gravure laser

Découvrez tous les tutoriels partagés sur Oui Are Makers

Powered by Oui Are Makers