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

Installation du serveur web

Nous installons le serveur Web Apache et le module php

Mise à jour de Raspbian

sudo apt-get update && sudo apt-get upgrade -y

Installation du serveur Web

sudo apt-get install apache2
sudo apt-get install php libapache2-mod-php

Droits en ecriture sur le serveur Web

Il faut donner les droits en ecriture à l'utilisateur pi sur les dossiers du serveur Web /var/www/html

sudo chown -R pi:www-data /var/www/html/
sudo chmod -R 770 /var/www/html/

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

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contrôle GPIO</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /link> 
</head>
<body>
<form action="script.php" method="post"> 
<input type="submit" name="executer" value="ON" class="button" id="ON"> 
<br/>
<input type="submit" name="executer" value="OFF" class="button" id="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

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

/* Version 02 */
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

#Allumer:hover /* survol du bouton "Eteindre" */
{
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> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /link> 
<meta http-equiv="refresh" content="10" /> 
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>

<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%> 
<tr class=table-ligne1> 
<td colspan=2><br>Ma maison<br><br></td> 
</tr>
<tr class=table-ligne2> 
<td width=50%><br>Temp. Salon<br><br></td> 
<td width=50%><?php echo $temp1;echo " °C" ?> </td> 
</tr>
</table>
</center></span>


<center> 
<br><br> 
<form action="script.php" method="post"> 
<input type="submit" name="executer" value="Allumer" class="button" id="Allumer"> 
<br><br><br> 
<input type="submit" name="executer" value="Eteindre" class="button" id="Eteindre"> 
</form>
</center> 

</body>
</html>

Puisque la température change continuellement, il faut recharger la page index.php afin d'afficher la température à l'instant T

J'ai ajouter au debut du code la ligne <meta http-equiv="refresh" content="10" /> pour rafraichier la page index.php toutes les 10 secondes

Le code - Fichier script.php

<?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%> 
<tr class=table-ligne1> 
<td>Ma maison</td> 
<td width=50%>

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

</td>
</tr>
<tr class=table-ligne2> 
<td width=50%><br>Température Salon<br><br></td> 
<td width=50% class=table-temp><?php echo $temp1;echo " °C" ?> </td> 
</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...

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 la météo à la fin du fichier index.php

Le code

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

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