Raspberry - Tableau de bord numérique

dashboard


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 du serveur web

apache-php


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

crayon


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

  • index-html
  • ls-index-html-origine
  • index-script-stylesheet
  • ls-index-script-stylesheet


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

  • on-off
  • relai


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

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

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

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

  • bouton-petit
  • bouton-petit-survol


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

  • bouton-temperature
  • index-bouton-temperature


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

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

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


script-bouton-temperature

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');   
?>



stylesheet-bouton-temperature

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

  • horloge
  • horloge


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

  • meteo
  • meteo-parametre
  • meteo-parametre-code


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 

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

  • tableau-numerique-final
  • tableau-bord-final


Il faudra tester les widgets choisis, car tous les widgets ne sont pas forcements compatibles avec WindowsLinux 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