Projet IMA3 P2, 2016/2017, TD2 : Différence entre versions
(→L'application web) |
(→L'application web) |
||
Ligne 58 : | Ligne 58 : | ||
==== L'application web ==== | ==== L'application web ==== | ||
− | [[ Image:Capture_web.png | | + | [[ Image:Capture_web.png | frame | center | 800 | aperçu de l'application web connectée au serveur websockets ]] |
L'application web consiste en une page web codé en HTML. La partie dynamique de la page est codée en JavaScript avec l'aide de la bibliothèque Jquery. | L'application web consiste en une page web codé en HTML. La partie dynamique de la page est codée en JavaScript avec l'aide de la bibliothèque Jquery. | ||
Version du 17 juin 2017 à 11:26
Sommaire
Projet IMA3-SC 2016/2017 : Station Météo
Description du système
Notre projet est de mettre en place une station météorologique permettant de connaître :
- la température
- la pression
- l'humidité de l'air
- la vitesse du vent
- la luminosité extérieur
Les données de cette station météo seront visible par toute personne se connectant à une application web.
Cahier des charges
- La station permettra de prendre des mesures chaque heure de manière automatique, mais il devra être possible d'utiliser une interface web afin de prendre des mesures de manière manuelle.
- L'utilisateur pourra accéder à la base de donnée de la station à partir du site web et visualiser les variations des données (température, vitesse du vent, ...) en fonction du temps ou encore d'afficher toutes les données disponibles pour un jour donné.
- La page d'accueil du site doit permettre la visualisation du temps qu'il fait (clair, grisâtre, pluvieux) et de la température actuelle. L'accès aux données enregistrées se fera via un champ de recherche situé plus bas sur la page.
Le capteur température-humidité-pression sera relié à une carte arduino Uno. L'anémomètre ainsi que le capteur de luminosité seront reliés directement à un FPGA.
L'arduino sera elle aussi reliée au FPGA. En effet le capteurs mesurant la température, la pression et l'humidité de l'air communique par protocole SPI avec le microcontrôleur auquel il est relié. C'est pourquoi l'arduino, qui peut communiquer par SPI, fera office d'interface entre le capteur et le FPGA.
La connexion entre le FPGA et la Raspberry Pi se fera par liaison série filaire. Il sera peut-être possible de remplacer, par la suite, la liaison filaire par une liaison sans-fil à l'aide de modules Xbee.
Le matériel
- 1 Raspberry Pi
- 1 Arduino Uno
- 1 Shield Xbee (pour l'arduino)
- 1 adaptateur Xbee-USB (pour la raspberry)
- 1 XBee T et R
- 1 Capteur température, pression et humidité (BME280)
- 1 Anémomètre fabriqué avec 4 émetteurs/récepteurs ultrason (HC-SR04)
- 1 capteur de luminosité (GA1A1S202WP)
Git du projet
L'archive du projet contient tous les codes sources. Se trouvant dans le dossier /appWeb :
- index.html, page sur laquelle seront affichée les données.
/appWeb/js
- script.js, le script javascript qui gère la communication entre la page et le serveurs.
/prog
- main.c, le script principale C qui gère la communication entre les capteurs et l'application Web.
/code arduino
- serialArduino/, dossier contenant le programme arduino permettant de récupérer les données du capteur BME280, qui les envoient par liaison série à la carte Arduino. Pour l'instant le Xbee n'est pas pris en charge
- Plusieurs dossier contenant la librairie du capteur BME280, les test du port série, de la communication série par Xbee, etc...
Réalisation
Partie informatique
L'application web
L'application web consiste en une page web codé en HTML. La partie dynamique de la page est codée en JavaScript avec l'aide de la bibliothèque Jquery.
La page web contient :
- Un indicateur permettant d'informer l'utilisateur de l'état de la connexion au serveur websockets
- Un tableau présentant les relevé météo des capteurs
- Un bouton permettant de rafraîchir les données
L'indicateur permet de savoir si l'application est connectée au serveur Websockets, celui-ci se met en rouge si la connexion est absente ou si il y a un problème. Le tableau affiche des valeurs entières. Ces valeurs n'ont donc qu'un cardinal restreint de 256 valeurs. Ceci constitue une limite principale de notre système, la précision.
Le bouton qui permet de rafraîchir les données est appelle lors du clique, une fonction javascript chargé d'envoyer un signal "GET" au serveur websocket. Le programme codé en C, envoie alors les données sous forme de 3 octets. Ces 3 octets représentent dans l'ordre, la pression, la température et l’humidité.
Pour gérer les octets de donnée, nous avons utilisé un tableau typé javascript de type Uint8ClampedArray. Toute donnée de ce tableau est de taille 8 bits et sa valeur est un entier non-signé.
Cette structure est très pratique dans notre cas puisque elle permet à la fois de formater la requête "GET" pour l'envoi au serveur websocket mais aussi les donnée reçu du serveur websocket, pour la lecture. La communication entre le site et le serveur se fait par envoi et réception d'une suite d'octets.
Dans le cas de l'émission, chaque lettre du mot "GET" sont converties en un octet. Ces octets sont mis bout à bout en utilisant un tableau typé. Il suffit juste d'envoyer le buffer de données du tableau en argument à la fonction send(), qui envoie les donnée au serveur.
Dans le cas de la réception, le serveur envoie les octets les uns à la suite des autres. L'application web les récupères sous forme d'un buffer. On crée un autre tableau typé à partir de ce buffer, il "découpe" la chaîne d'octet ce qui permet de les différencier et facilite leurs traitement. Enfin on affiche ces octets dans les bonnes cases du tableau.
Étant donné que les valeurs échangée ne vont que de 0 à 255, il a fallut effectuer quelques conversions. La pression moyenne au niveau de la mer vaut généralement 1013 hPa. Les relevé météo n'ont jamais relevé de pression en dessous de 845 hPa ni au dessus de 1100 hPa. Partant de ce principe, la valeur affichée sur le site ne sortira jamais de cette intervalle de taille 255.
Pour la température, l'intervalle va de -128 à +127 degré.
La mesure de l'humidité ne pose aucun problème puisqu'elle s'effectue en pourcent.
Ces conversions s'effectue avant l'affichage, par le script javascript.
Partie electronique
Séance 1
Partie électronique
Lors de cette première séance, nous avons pu récupérer et nous informer sur les capteurs BME280 et GA1A1S202WP. Après avoir regarder les documentations de ces deux capteurs, nous avons téléchargé les librairies permettant de les utiliser. Une fois câblé comme il le fallait, nous avons donc d'abord testé le capteur BME280 et écrit un petit script Arduino qui affichait donc la température, la pression et l'humidité captée de la pièce. Puis nous avons branché le GA1A1S202WP seul à l'arduino, et lancer un nouveau script qui affichait alors la luminosité en Lux de l'objet vers lequel on pointait le capteur. On a ainsi pu constaté une grande différence entre un ciel nuageux, le soleil, et la luminosité de la pièce.
Partie informatique
Séance 2
Partie électronique
Dans le but de faire notre anémomètre, nous avons commencé à faire un montage avec deux capteurs HC-SR04 : nous devons en placer un face à l'autre, le premier captant les ultrasons du second. En effet, si on sait que v = d/t où v est une vitesse, d une distance et t un temps, le temps mis par les ultrasons pour aller d'un point A vers un point B en étant portés par un vent allant à une vitesse v est : tab = d/(v+c) où c est la vitesse du son. Dans l'autre sens, on obtient tba = d/(c-v) puisque le vent s'oppose à la propagation du son dans ce cas.