Projet IMA3 P2, 2016/2017, TD2 : Différence entre versions
(→L'application web) |
(→L'application web) |
||
Ligne 67 : | Ligne 67 : | ||
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. | 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 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 <em>Uint8ClampedArray</em>. 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 === | === Partie electronique === |
Version du 3 juin 2017 à 22:47
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.