Raspberry - Tableau de bord numérique
Nous voulons via une page web et depuis une tablette fixée au mur
- Avoir la possibilité d'allumer/éteindre une (ou des) lampe(s) 220v (ou autre petit électromenager)
- Afficher une horloge
- Afficher la météo
- Afficher la température d'une piéce (ou de plusieurs)
- etc ...
Nous avons besoins d'un Raspberry sur lequel nous installons un serveur Web
Installation de WiringPi
Source: http://wiringpi.com/
WiringPi est une bibliothèque d'accès au GPIO pour les dispositifs SoC BCM2835, BCM2836 et BCM2837 utilisés dans tous les Raspberry Pi
Dans un terminal, saisir les commandes ci-dessous pour installer la librairie wiringpi (11/2021):
- cd /tmp # Se déplacer dans /tmp
- wget https://project-downloads.drogon.net/wiringpi-latest.deb # Télécharger wiringpi-last
- sudo dpkg -i wiringpi-latest.deb # Installation de wiringpi-lastest
Verifier l'installation avec les commandes:
- gpio -v
- gpio readall
Préparation du serveur Web
Le serveur Web a besoins du fichier index.xxxx (.html, .php, .cgi, .xhtml, .hmt)
Un fichier index.html est créé lors de l'installation du serveur Web
Nous renommons le fichier index.html en index.html.origine
Puis nous supprimons le fichier index.html
- sudo cp /var/www/html/index.html /var/www/html/index.html.origine
- sudo rm /var/www/html/index.html
Nous allons créer 3 nouveaux fichiers dans le dossier /var/www/html
- index.php # Page de principale
- script.php # Page d'execution des scripts
- stylesheet.css # Page pour la mise en forme de la page index.php
Etape n°01 - boutons pour piloter une lampe
Nous allons créer un (des) bouton(s) pour allumer/éteindre une (des) lampes(s)
Nous utiliserons une led pour nos essais connectée au GPIO26 - Pin37
Si vous utilisez un élément en 220v (lampe) penser à isoler cet élément du Raspberry en le connectant via un relais (voir schéma ci-contre)
Dans le navigateur, on saisie l’adresse IP du Raspberry
Le navigateur recherche et affiche le fichier index.php avec les boutons ON/OFF
Le fichier index.php définie la fonction «executer» des boutons et affiche la mise en forme définie dans le fichier stylesheet.css et lorsque l’on clique sur un bouton le fichier script.php est exécuté
Le fichier script.php définie la fonction «executer» et ré-affiche le fichier index.php après chaque exécution de la fonction «executer»
fichier index.php
Modification du fichier index.php
Avec l'éditeur de votre choix modifier le fichier index.php avec le code ci-desssous
<!-- Version 01 -->
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contrôle GPIO</title> <!-- titre onglet -->
<link rel="stylesheet" type="text/css" href="stylesheet.css" /link> <!-- mise en page - stylesheet.css -->
</head>
<body>
<form action="script.php" method="post"> <!-- execution du script.php -->
<input type="submit" name="executer" value="ON" class="button" id="ON"> <!-- bouton on -->
<br/>
<input type="submit" name="executer" value="OFF" class="button" id="OFF"> <!-- bouton off -->
</form>
</body>
</html>
fichier script.php
Modification du fichier script.php
Avec l'éditeur de votre choix modifier le fichier script.php avec le code ci-desssous
<!-- Version 01 -->
<!-- GPIO026 pin37 -->
<!-- BCM gpio -g (petit G) -->
<!-- BOARD gpio -1 (- le chiffre 1) -->
<?php
//system("gpio -g mode 26 out"); // pin37 gpio26 en out en BCM
system("gpio -1 mode 37 out"); // pin37 gpio26 en out en BOARD
if($_POST['executer'] == 'ON') // executer "ON"
{
//system("gpio -g write 26 1"); // pin37 gpio26 on en BCM
system("gpio -1 write 37 1"); // pin37 gpio26 on en BOARD
}
else
{
//system("gpio -g write 26 0"); // pin37 gpio26 off en BCM
system("gpio -1 write 37 0"); // pin37 gpio26 on en BOARD
}
header('Location: index.php');
?>
Si vous utilsez la numérotation BOARD du Raspberry, vous devez utiliser les lignes ci-dessous
- system("gpio -1 mode 37 out"); // pin37 = GPIO26
- system("gpio -1 write 37 1");
- system("gpio -1 write 37 0");
Si vous utilsez la numérotation BCM du Raspberry, vous devez utiliser les lignes ci-dessous
- system("gpio -g mode 26 out"); // pin37 = GPIO26
- system("gpio -g write 26 1");
- system("gpio -g write 26 0");
fichier stylesheet.css
Modification du fichier stylesheet.css
Avec l'éditeur de votre choix modifier le fichier stylesheet.css avec le code ci-desssous
/* Version 01 */
html, body
{
margin: 0;
}
.button /* Mise en forme des boutons */
{
border: none; /* Pas de bordure */
color: white; /* Couleur du texte des boutons */
text-align: center; /* Alignement du texte */
font-size: 10em; /* Taille du texte */
padding: 25px 25px; /* Espacement intérieur */
cursor: pointer; /* Forme du curseur de la souris */
width: 100%; /* Largeur des boutons */
height: 50vh; /* Hauteur des boutons */
}
#ON /* Mise en forme du bouton ON */
{
background-color: green;
}
#OFF /* Mise en forme du bouton OFF */
{
background-color: red;
}
Etape n°02 - Modifier les boutons
Pour modifier la taille des boutons ON/OFF il suffit de modifier le fichier stylesheet.css
Nous changons le texte ON et OFF par Allumer et Eteindre dans les trois fichiers index.php, script.php et stylesheet.css
Dans le fichier css, nous modifions la classe .button
Le code css
html, body
{
margin: 0;
}
.button /* mise en forme des boutons */
{
border: 3px solid; /* épaisseur de la bordure */
border-radius: 50px; /* angle arrondi */
border-color: black; /* couleur de la bordure */
color: white; /* largeur du texte */
text-align: center; /* alignement du texte */
text-justify: auto; /* ajustement automatique du texte */
font-size: 2em; /* taille du texte */
padding: 25px 25px; /* ecart de remplissage */
cursor: pointer; /* forme du curseur de la souris */
width: 8em; /* largeur des boutons */
height: 4em; /* hauteur des boutons */
}
#Allumer /* mise en forme du bouton "Allumer" */
{
background-color: green;
}
#Eteindre /* mise en forme du bouton "Eteindre" */
{
background-color: red;
}
Autre modification du code ccs
Ajouter à la fin du fichier stylesheet.css, le code ci-dessous pour modifier l'apparence des boutons lors du survol de la souris
{
color: green;
background-color: white;
}
#Eteindre:hover /* survol du bouton "Eteindre" */
{
color: red;
background-color: white;
}
Etape n°03 - Ajout sonde de température DS18B20
Nous ajoutons une sonde de température DS18B20 sur les broches suivantes:
- Vcc 3,3v - Pin1
- Gnd Ground - Pin9
- Data GPIO4 - Pin7
Voir Raspberry - Sonde de température DS18B20
Le code - Fichier index.php
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Led & Température</title> <!-- titre onglet -->
<link rel="stylesheet" type="text/css" href="stylesheet.css" /link> <!-- mise en page - stylesheet.css -->
<meta http-equiv="refresh" content="10" /> <!-- refresh automatique en seconde-->
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<!-- Température -->
<br><center>
<?php
// Lecture du fichier w1_slave
$file1 = "/sys/bus/w1/devices/28-xxxxxxxxxxxxxx/w1_slave"; // Mettre le 28-xxxxxxx de votre sonde
$lines1 = file($file1);
$temp1 = explode('=', $lines1[1]);
$temp1 = number_format($temp1[1]/1000,2, '.', '');
?>
<table class=table width=50%> <!-- Création du tableau -->
<tr class=table-ligne1> <!-- 1ere ligne -->
<td colspan=2><br>Ma maison<br><br></td> <!-- 1ere colonne -->
</tr>
<tr class=table-ligne2> <!-- 2eme ligne -->
<td width=50%><br>Temp. Salon<br><br></td> <!-- 1ere colonne -->
<td width=50%><?php echo $temp1;echo " °C" ?> </td> <!-- 2ème colonne -->
</tr>
</table>
</center></span>
<!-- Fin température -->
<!-- Les boutons -->
<center> <!-- <center> centrer les boutons -->
<br><br> <!-- <br> saut de ligne avant les boutons -->
<form action="script.php" method="post"> <!-- execution du script.php -->
<input type="submit" name="executer" value="Allumer" class="button" id="Allumer"> <!-- bouton Allumer -->
<br><br><br> <!-- <br> saut de ligne entre les boutons -->
<input type="submit" name="executer" value="Eteindre" class="button" id="Eteindre"> <!-- bouton Eteindre -->
</form>
</center> <!-- </center> Fin de balise -->
<!-- Fin bouton -->
</body>
</html>
Le code - Fichier script.php
<!-- Version 04 -->
<!-- GPIO026 pin37 -->
<!-- BCM gpio -g (petit G) -->
<!-- BOARD gpio -1 (- le chiffre 1) -->
<?php
//system("gpio -g mode 26 out"); // pin37 gpio26 en out en BCM
system("gpio -1 mode 37 out"); // pin37 gpio26 en out en BOARD
if($_POST['executer'] == 'Allumer') // executer "Allumer"
{
//system("gpio -g write 26 1"); // pin37 gpio26 on en BCM
system("gpio -1 write 37 1"); // pin37 gpio26 on en BOARD
}
else
{
//system("gpio -g write 26 0"); // pin37 gpio26 off en BCM
system("gpio -1 write 37 0"); // pin37 gpio26 on en BOARD
}
header('Location: index.php');
?>
Le code - Fichier stylesheet.css
/* Version 04 */
html, body
{
margin: 0;
}
.button /* mise en forme des boutons */
{
border: 3px solid; /* épaisseur de la bordure */
border-radius: 50px; /* angle arrondi */
border-color: black; /* couleur de la bordure */
color: white; /* couleur du texte */
text-align: center; /* alignement du texte */
text-justify: auto; /* ajustement automatique du texte */
font-size: 2em; /* taille du texte */
padding: 25px 25px; /* ecart de remplissage */
cursor: pointer; /* forme du curseur de la souris */
width: 8em; /* largeur des boutons */
height: 4em; /* hauteur des boutons */
}
#Allumer /* mise en forme du bouton "Allumer" */
{
background-color: green;
}
#Eteindre /* mise en forme du bouton "Eteindre" */
{
background-color: red;
}
#Allumer:hover /* survol du bouton "Eteindre" */
{
color: green;
background-color: white;
}
#Eteindre:hover /* survol du bouton "Eteindre" */
{
color: red;
background-color: white;
}
.table
{
border-collapse:collapse; /*N'affiche pas la bordure*/
border: 1px solid; /*Epaisseur de la bordure*/
border-color: black; /*Couleur de la bordure - border-color est indissociable de border*/
}
.table-ligne1
{
font-size : 20px; /*Taille du texte*/
font-style: italic; /*italic ou normal*/
font-weight: bold; /*Gras*/
color : black; /*Couleur du texte*/
text-align : center; /*Alignement du texte*/
background-color : #81F781; /*Couleur du font*/
}
.table-ligne2
{
font-size : 15px;
color : black;
text-align : center;
background-color : #A9F5E1;
}
Etape n°04 - Ajout de l'Horloge
ATTENTION:
Le site https://www.zeitverschiebung.net ne repond plus. Il vous faudra utiliser un autre site
Faire une recherche "widget horloge" sur Internet
Nous ajoutons une horloge.
Vous trouverez des widgets "horloge" sur internet.
Faire une recherche sur "widget horloge gratuit pour page web"
J'ai utilisé le premier site proposé, à vous de choisir dans la liste des choix celui qui vous convient le mieux et de l'intégrer sur votre page Web
Les fichiers script.php et stylesheet.css ne changent pas
Seul le fichier index.php est à modifier.
Sur le site du widget "horloge", vous devez configurer
- la forme de l'horloge
- la taille
- les couleurs
- la ville
- etc...
Puis générer le code ...
Une fois votre choix terminé, vous faites un copier/coller du code proposé du site vers votre page web
J'ai inséré le code du widget de l'horloge dans la page index.php
Le code
<table class=table width=50%> <!-- Création du tableau -->
<tr class=table-ligne1> <!-- 1ere ligne -->
<td>Ma maison</td> <!-- 1ere colonne -->
<td width=50%>
<!-- Horloge -->
<!- ATTENTION: Le site https://www.zeitverschiebung.net ne repond plus -->
<!- -->
<div style="text-align:center;padding:1em 0;">
<a style="text-decoration:none;" href="https://www.zeitverschiebung.net/fr/city/3012742">
<span style="color:gray;"></span><br /></a>
<iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=medium&timezone=Europe%2FParis" width="100%" height="115" frameborder="0" seamless>
</iframe>
</div>
<!-- Fin Horloge -->
</td>
</tr>
<tr class=table-ligne2> <!-- 2eme ligne -->
<td width=50%><br>Température Salon<br><br></td> <!-- 1ere colonne -->
<td width=50% class=table-temp><?php echo $temp1;echo " °C" ?> </td> <!-- 2ème colonne -->
</tr>
</table>
PS: ne faite pas un copier/coller du code ci-dessus, car il correspond à ma ville
Etape n°05 - Ajout de la météo
Sur le même principe que celui du widget "horloge", nous ajoutons un widget "météo"
Vous trouverez des widgets "météo" sur internet.
Faire une recherche sur "widget météo gratuit pour page web"
J'ai utilisé le premier site proposé, à vous de choisir dans la liste des choix celui qui vous convient le mieux et de l'intégrer sur votre page Web
Les fichiers script.php et stylesheet.css ne changent pas
Seul le fichier index.php est à modifier
Sur le site du widget "météo", vous devez configurer
- le modèle
- la taille et les couleurs
- la région / la ville
- etc...
Une fois votre choix terminé, vous faites un copier/coller du code proposé du site vers votre page web
J'ai inséré le code du widget de la météo à la fin du fichier index.php
Le code
<!-- Meteo -->
<br>
<center>
<script charset='UTF-8' src='http://www.meteofrance.com/mf3-rpc-portlet/rest/vignettepartenaire/691000/type/VILLE_FRANCE/size/PORTRAIT_VIGNETTE' type='text/javascript'></script>
</center>
<!-- Fin meteo -->
PS: ne faite pas un copier/coller du code ci-dessus, car il correspond à ma ville
Etape n°06 - Version finale
Il faudra tester les widgets choisis, car tous les widgets ne sont pas forcements compatibles avec Windows, Linux et Android et l'affichage peut-etre différent d'un navigateur à un autre Internet Explorer, Edge, FireFox, Chrome, etc ...
N'hesitez pas à tester plusieurs widgets
Voici le tableau de bord numérique dans sa version finale