Tutoriel exploitation d'une sonde DHT21 dans un site web

On aura besoin d'une sonde DHT11, 22 ou 21 :

Image non disponible Image non disponible Image non disponible

Le branchement

Image non disponible Il faut ajouter une résistance de 4.7K Ohms entre la pin VCC et DATA,
le VCC au 3.3v du Raspberry,
GND au GND du Raspberry,
la pin DATA au GPIO 4 du Raspberry

Image non disponible

Installation de python et différents modules nécessaires

Pour utiliser les sonde DHT je vais utiliser le langage python, on va installé ces différents logiciels :

sudo apt-get install build-essential python-dev python-openssl python-mysqldb python-setuptools git -y

Une fois installé, on s'assure d'être dans le dossier pi du Raspberry

cd /home/pi/

Puis on télécharge le dossier de la librairie pour lire ces sondes et on s'y déplace :

git clone https://github.com/adafruit/Adafruit_Python_DHT.git && cd Adafruit_Python_DHT

On installe la librairie :

sudo python setup.py install

Une fois installé, on se déplace dans le dossier examples :

cd examples

Test de la sonde

On se déplace dans le dossier examples :

cd /home/pi/Adafruit_Python_DHT/examples

Puis on tape cette commande :

sudo ./AdafruitDHT.py 22 4

Vous devez obtenir ceci :

Image non disponible

On reviens dans le dossier Pi :

cd /home/pi/

Voici un exemple pour intégrer cette librairie dans nos programme, on créer un fichier nommé dht.py :

nano dht.py

Et on y colle ce programme :

Penser à supprimer les lignes vides en début de programme dans nano après avoir copier le code, sinon vous aurez une erreur.

Puis on tape cette commande :

python dht.py

Vous devez obtenir ceci :

Image non disponible

Si tout t'es ok, on supprime ce programme, on en a plus besoin :

rm dht.py

Vous devez avoir installé Apache, php voir même phpmyadmin avant cette étape, si ce n'est pas déjà fait suivez ce tuto

La base de donnée

On va créer une base de données pour revoir les datas de la sonde

Elle va se composer d'une Table, qui contiendra 3 champs : la date et heure, la température et l'humidité

On va commencer par créer la base de donnée, on va la nommé dataDHT pour exemple.

Donc dans le terminal on tape :

sudo mysql -u root -p

tapez votre mot de passe root mysql et vous entrez dans la console mysql :

Image non disponible

Puis on créer la base de donnée nommée dataDHT :

create database dataDHT;

Image non disponible

On se rend dans la base de donnée dataDHT :

USE dataDHT;

Image non disponible

On va maintenant créer un utilisateur et son mot de passe pour utiliser la base de donnée dataDHT.

Pour l'exemple on va créer l'utilisateur manu et son mot de passe soundsysteme :

create user 'manu'@'localhost' identified by 'soundsysteme';

On donne tous les privilèges à l'utilisateur manu sur la base de donnée dataDHT :

grant all privileges on dataDHT.* to 'manu'@'localhost';

On applique les privilèges :

flush privileges;

Et on quitte :

quit

ce qui donne dans le terminal :

Image non disponible

On a crée l'utilisateur manu, qui a tout les droits sur la base de donnée dataDHT.

Et on redémarre mysql :

sudo service mysql restart

Voilà, maintenant on va se connecter en tant que l'utilisateur manu à la base de donnée dataDHT et définir le nom de la table et des champs

sudo mysql -u manu -p

tapez le mot de passe, dans notre exemple, soundsysteme et vous entrez dans la console mysql

use dataDHT;

On va maintenant créer la table nommé temphumi qui contiendra les champs dateheure de type DATETIME (format de date et heure), temp de type DOUBLE (nombre à virgule) et humi de type DOUBLE (nombre à virgule)

create table temphumi (dateheure DATETIME, temp DOUBLE, humi DOUBLE);

Et on quitte :

quit

Image non disponible

Et on redémarre mysql :

sudo service mysql restart

Vous pouvez la voir également par phpmyadmin

On se connecte 192.168.XXX.XXX/phpmyadmin avec le login manu et mot de passe soundsysteme

Image non disponible

Image non disponible

Image non disponible

Image non disponible

Si une erreur count(): Parameter must be an array or an object that implements Countable apparaît, il faut taper cette commande dan le terminal du pi :

sudo sed -i "s/|\s*\((count(\$analyzed_sql_results\['select_expr'\]\)/| (\1)/g" /usr/share/phpmyadmin/libraries/sql.lib.php

Et on redémarre apache :

sudo systemctl restart apache2

Voila notre base de donnée est prête.

Le programme

On va créer un petit programme qui lit la sonde et envoi les datas à notre base de donnée.

cd /home/pi

Puis

nano dht.py

Et copier le programme suivant :

Penser à supprimer les lignes vides en début de programme dans nano après avoir copier le code, sinon vous aurez une erreur.

Maintenant on teste le programme :

python dht.py

On se connecte à phpmyadmin : 192.168.XXX.XXX/phpmyadmin avec le login manu et mot de passe soundsysteme

Image non disponible

Nos datas on bien été enregistré dans la base de donnée.

Pour lancer ce programme toute les minutes, on va passer par une tâche cron, On tape :

crontab -e

validez le choix par defaut [1]

Puis on ajoute ces lignes à la fin (toute les minutes, le programme se lance et envoi les datas à la BDD)

* * * * * python /home/pi/dht.py

Image non disponible

Au bout de quelques minutes vous pouvez constater que les relevés sont bien automatisés :

Image non disponible

Une page web simple

Bon voilà tout est prêt, on va maintenant créer notre page web, on se rend dans le dossier web d'apache :

cd /var/www/html

On y crée un dossier qui contiendra notre site web, je le nomme sonde :

mkdir sonde

On se s'y déplace :

cd sonde

Et on y crée 3 fichiers :

Le premiers est la page data.php

nano data.php

Et copier le code suivant :

A ce stade, on peut déjà voir nos datas dans un navigateur à l'adresse XXX.XXX.XXX.XXX/sonde/data.php en remplaçant les XXX par l'adresse IP du Raspberry.

Image non disponible

Seulement les datas ne se rafraîchissent pas toutes seules et il n'y a pas de déco

Le second est la page index.php elle nous permet de faire rafraîchir ces datas

nano index.php

Et copier le code suivant :

A ce stade, les datas se rafraîchissent mais il reste la page de déco a faire, vérifiez à cette adresse : XXX.XXX.XXX.XXX/sonde/index.php en remplaçant les XXX par l'adresse IP du Raspberry.

Image non disponible

Et le troisième est la page de déco index.css

nano index.css

Et copier le code suivant :

Voila le résultat, toujours à l'adresse XXX.XXX.XXX.XXX/sonde/index.php :

Image non disponible

Un graphique utilisant la Base De Donnée

On va créer un nouveau site, donc un nouveau dossier, je le nomme graph :

cd /var/www/html

mkdir graph && cd graph

Pour faire des graphes il existe plein de librairies, j'utilise highcharts une librairie JavaScript.

Pour la télécharger : highcharts

Dézippez le dossier, puis à l'aide de Filezilla, copiez le fichiers highcharts.js qui se trouve dans le sous-dossier code, et le thème gray.js qui se trouve dans le sous-dossier theme dans votre dossier /var/www/html/graph du Raspberry Pi.

Image non disponible

Image non disponible

Image non disponible

Téléchargez également jquery en enregistrant la page dans un dossier de votre pc, ( téléchargement par ex ) renommez le en jquery.js :

Image non disponible

Copiez le à l'aide de Filezilla dans votre dossier web du Raspberry Pi /var/www/html/graph.

Image non disponible

Image non disponible

Nous avons donc la librairie highcharts, le thème gray et la librairie jquery

On va donc créer en premier le fichier qui récupère les datas de la base de donnée et les affiche sous format json afin que l'on puisse les utiliser pour les graphiques.

cd /var/www/html/graph && nano data.php

Et copier le code suivant :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/graph/data.php :

Image non disponible

On va maintenant créer la page qui va accueillir le graph :

nano index.php

Et copier le code suivant :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/graph/index.php :

Image non disponible

Il n'y a que le titre sans déco car on a pas encore créer le graphique graph.js et la page déco index.css

On va maintenant créer le graphique :

nano graph.js

Et copier le code suivant :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/graph/index.php :

Image non disponible

C'est pas mal, non ? il reste à ajouter la page déco index.css

nano index.css

Et copier le code suivant :

puis on ajoute cette ligne <script src="gray.js"></script> après l'appel du graphique dans la page index.php, comme ceci :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/graph/index.php :

Image non disponible

Dessiner des jauges

On va créer un nouveau site, donc un nouveau dossier, je le nomme jauge :

cd /var/www/html

mkdir jauge && cd jauge

Pour faire des jauges il existe plein de librairies, j'utilise RGraph une librairie JavaScript.

Pour la télécharger : RGraph

Dézippez le dossier, puis à l'aide de Filezilla, copiez les fichiers : RGraph.gauge.js, RGraph.common.effects.js, RGraph.common.dynamic.js, RGraph.common.csv.js et RRGraph.common.core.js qui se trouvent dans le sous-dossier librairie, dans votre dossier /var/www/html/jauge du Raspberry Pi.

Image non disponible

Image non disponible

Téléchargez également jquery en enregistrant la page dans un dossier de votre pc, ( téléchargement par ex ) renommez le en jquery.js :

Image non disponible

Copiez le à l'aide de Filezilla dans votre dossier web du Raspberry Pi /var/www/html/jauge.

Image non disponible

Ces jauges récupèrent les datas dans un fichier au format CSV, et non par la BDD, on va donc ajouter l'écriture des datas dans un fichier CSV à notre programme en python dht.py

On supprime l'ancien programme :

rm /home/pi/dht.py

Et on créer le nouveau

nano /home/pi/dht.py

Et on copie le code suivant :

Penser à supprimer les lignes vides en début de programme dans nano après avoir copier le code, sinon vous aurez une erreur.

Si ce n'est pas déjà fait, pour lancer ce programme toute les minutes, on va passer par une tâche cron, On tape :

crontab -e

validez le choix par defaut [1]

Puis on ajoute ces lignes à la fin (toute les minutes, le programme se lance et envoi les datas à la BDD)

* * * * * python /home/pi/dht.py

Image non disponible

On va maintenant créer la page qui va accueillir les jauges :

nano /var/www/html/jauge/index.php

Et copier le code suivant :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/jauge/index.php :

Image non disponible

PHP nous affiche une erreur car le fichier jauge.html que l'on souhaite insérer n'existe pas encore.

On va donc maintenant créer la page qui dessine les jauges :

nano /var/www/html/jauge/jauge.html

Et copier le code suivant :

Puis le fichier pour la déco :

nano /var/www/html/jauge/index.css

Et copier le code suivant :

Voila le résultat, à l'adresse XXX.XXX.XXX.XXX/jauge/index.php :

Image non disponible

Les jauges se rafraîchiront toutes les 30 secondes.