![\"\"](\"https:\/\/hub.imt-atlantique.fr\/fablab\/wp-content\/uploads\/archives\/2023\/10\/logo3_nu.png\"){kind=logo}
<\/a><\/p>\npar \u00a0 \u00a0 Antoine DAGORN\u00a0 \u00a0 \u00a0 \u00a0 Salom\u00f3n OJEDA\u00a0 \u00a0 \u00a0 Cl\u00e9ment LERICHE \u00a0 \u00a0 Th\u00e9o BARTH\u00c9LEMY \u00a0 \u00a0 Daniel TAPIA<\/span><\/p>\n V2 – 15\u00a0 janvier 2024<\/span><\/p>\n <\/p>\n Dans le cadre du projet fil rouge de la TAF Conception d\u2019objet communicant de l\u2019\u00e9cole d\u2019ing\u00e9nieur IMT Atlantique, nous avons travaill\u00e9 sur un projet concernant la s\u00e9curit\u00e9 maritime.<\/span><\/p>\n Les activit\u00e9s nautiques solitaires sans flotteur, comme la plong\u00e9e en apn\u00e9e, la chasse sous-marine et la natation en eau libre en mer, offrent une exp\u00e9rience immersive exceptionnelle, mais pr\u00e9sentent des d\u00e9fis importants en termes de s\u00e9curit\u00e9. Des situations d\u2019urgence, telles que la perte d\u2019orientation, les changements m\u00e9t\u00e9orologiques, les accidents ou les probl\u00e8mes de sant\u00e9, peuvent survenir \u00e0 tout moment. Le d\u00e9fi consiste \u00e0 assurer la s\u00e9curit\u00e9 de ces pratiquants en mer tout en pr\u00e9servant leur autonomie et leur immersion dans l\u2019exp\u00e9rience. Notre probl\u00e9matique est de trouver un moyen d\u2019assurer une localisation en temps r\u00e9el du sportif et de lui permettre de signaler un probl\u00e8me \u00e0 une personne de confiance, qu\u2019il s\u2019agisse d\u2019un membre de sa famille, d\u2019un ami ou d\u2019un membre de son club sportif, par exemple.<\/span><\/p>\n <\/p>\n La solution propos\u00e9e consiste en une balise GPS con\u00e7ue \u00e0 partir d’un Arduino et d’un module GPS. Cette balise se fixe facilement \u00e0 la bou\u00e9e du pratiquant de sport en apn\u00e9e (rappelons que la bou\u00e9e est un \u00e9quipement obligatoire). Une fois en place, elle \u00e9met toutes les minutes un signal GPS.<\/span><\/p>\n Ce signal peut \u00eatre r\u00e9cup\u00e9r\u00e9 et consult\u00e9 par un proche via un site web, accessible depuis un ordinateur ou un t\u00e9l\u00e9phone. Ainsi, le proche peut suivre en temps r\u00e9el la position du pratiquant de sport en apn\u00e9e.<\/span><\/p>\n De plus, cette balise est dot\u00e9e d’un bouton d’alerte. En cas de situation de d\u00e9tresse, lorsque ce bouton est activ\u00e9, un SMS contenant les coordonn\u00e9es GPS est automatiquement envoy\u00e9 \u00e0 un num\u00e9ro pr\u00e9alablement d\u00e9fini. Cela permet de transmettre rapidement une alerte avec les informations n\u00e9cessaires pour localiser le pratiquant en difficult\u00e9.<\/span><\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Pour r\u00e9cup\u00e9rer la latitude et la longitude des modules GPS NEO-6M avec Arduino, nous avons commenc\u00e9 par \u00e9tablir la connexion physique en reliant les broches VCC, GND, RX et TX du module \u00e0 notre Arduino UNO. Ensuite, dans le code Arduino, nous avons configur\u00e9 la communication s\u00e9rie en utilisant la biblioth\u00e8que SoftwareSerial et nous avons d\u00e9fini la vitesse de communication selon les sp\u00e9cifications des modules (g\u00e9n\u00e9ralement 9600 bps). Dans la boucle principale du programme, nous avons lu les trames NMEA provenant des modules GPS \u00e0 l’aide de la fonction readStringUntil(‘\\n’) et avons stock\u00e9 ces trames. Nous avons identifi\u00e9 les trames pertinentes contenant des donn\u00e9es de position, telles que \u00ab\u00a0$GPGGA\u00a0\u00bb, et nous avons analys\u00e9 l’information pour extraire la latitude et la longitude. Ensuite, nous avons utilis\u00e9 des fonctions pour effectuer la conversion des donn\u00e9es, transformant les coordonn\u00e9es du format NMEA en degr\u00e9s d\u00e9cimaux. Enfin, nous avons pu visualiser ou utiliser ces donn\u00e9es sur le port s\u00e9rie d’Arduino. Une LED a \u00e9t\u00e9 ajout\u00e9e pour s\u2019assurer que notre dispositif r\u00e9cup\u00e8re la coordonn\u00e9e GPS. Elle s\u2019allume lorsque le module GPS re\u00e7oit les coordonn\u00e9es GPS.<\/span><\/p>\n On peut noter qu\u2019au d\u00e9but du projet, nous avions le choix entre ESP32 et Arduino. Nous avons commenc\u00e9 avec l’ESP32, mais nous n’arrivions pas \u00e0 envoyer de SMS au d\u00e9but, nous sommes donc pass\u00e9s \u00e0 l’Arduino et nous avons r\u00e9ussi. On a donc continu\u00e9 le projet avec Arduino.<\/span><\/p>\n <\/p>\n <\/p>\n La premi\u00e8re id\u00e9e que nous avions \u00e9tait de passer par Blynk qui est une application permettant de recevoir des SMS depuis le module SIM900. Cependant, c\u2019est une application avec des fonctionnalit\u00e9s payante, par exemple l\u2019affichage de la coordonn\u00e9e GPS sur une carte. Nous avons donc chang\u00e9 de strat\u00e9gie pour finalement adopter ThingSpeak et d\u00e9velopper notre propre site web pour afficher sur une carte la coordonn\u00e9e GPS.<\/span><\/p>\n ThingSpeak est un logiciel open source \u00e9crit en Ruby qui permet aux utilisateurs de communiquer avec des appareils compatibles avec l’internet. L’utilisation de Thingspeak se justifie par sa gratuit\u00e9 et par les solutions qu’il offre. En effet, cette plateforme permet de faire la liaison entre la carte arduino et Thingspeak via le r\u00e9seau GPRS (internet mobile) et ensuite de faire la liaison avec un site web.<\/p>\n Une fois que nous avons r\u00e9ussi \u00e0 obtenir la latitude et la longitude des modules GPS NEO-6M avec Arduino, nous avons ensuite envoy\u00e9 ces donn\u00e9es via le module GSM\/GPRS SIM900. Nous avons utilis\u00e9 la biblioth\u00e8que SoftwareSerial d’Arduino pour \u00e9tablir la communication avec le module SIM900 \u00e0 l’aide de commandes AT, configurant la connexion et les param\u00e8tres n\u00e9cessaires. Afin d’acc\u00e9der aux donn\u00e9es \u00e0 distance et d’\u00e9tablir une architecture de base de donn\u00e9es, on utilise ThingSpeak pour collecter les donn\u00e9es envoy\u00e9es depuis l’Arduino. Cela nous a \u00e9galement permis de g\u00e9rer les requ\u00eates API pour les envoyer ult\u00e9rieurement vers un site web. Un compte ThingSpeak a \u00e9t\u00e9 cr\u00e9\u00e9 avec un canal ouvert, facilitant ainsi la r\u00e9ception des requ\u00eates sans complication. L’adresse de ce canal est la suivante : https:\/\/thingspeak.com\/channels\/2345649<\/a>. Deux champs ont \u00e9t\u00e9 configur\u00e9s pour enregistrer la longitude et la latitude, bien qu’il soit possible d’inclure davantage de champs pour des propositions futures. ThingSpeak offre une haute capacit\u00e9 de r\u00e9ception de donn\u00e9es et de stockage, ce qui en fait une solution id\u00e9ale pour un projet de cette nature.<\/span><\/p>\n Le code associ\u00e9 \u00e0 cette fonctionnalit\u00e9 est disponible ici : https:\/\/git.resel.fr\/deepbluetracker\/website\/-\/tree\/arduinos\/Arduino?ref_type=heads<\/a><\/p>\n <\/p>\n Nous avons h\u00e9berg\u00e9 notre site internet via le fournisseur internet de l’IMT Atlantique Brest, le ResEl, qui propose un service d’h\u00e9bergement de site web. Cette solution a \u00e9t\u00e9 choisie pour sa gratuit\u00e9 et pour la proximit\u00e9 que nous avons avec les personnes en charge de ce service.<\/p>\n Voici une explication de la cr\u00e9ation de ce site :<\/p>\n Architecture logicielle :<\/b><\/p>\n Notre site internet est construit autour du Framework Node.js et d\u2019un environnement docker. Nous avons trois fichiers : \u2018server.js\u2019, \u2018index.html\u2019 et \u2018style.css\u2019 qui composent l\u2019essentiel du site internet de notre solution. L\u2019utilisation de docker permet un d\u00e9ploiement facile sur un large panel de machines, le but \u00e9tant d\u2019assurer la reproductibilit\u00e9 du projet.<\/span><\/p>\n C\u00f4t\u00e9 server : Node.js<\/b><\/p>\n Au c\u0153ur de notre back-end se trouve le fichier <\/span>\u2018server.js\u2019<\/b>, un fichier Node.js qui met en route notre serveur, prend en charge les requ\u00eates et y r\u00e9pond. Node.js est un moteur d’ex\u00e9cution JavaScript qui nous permet d’ex\u00e9cuter des scripts c\u00f4t\u00e9 serveur afin de cr\u00e9er des pages de contenu dynamiques avant que celle-ci soit envoy\u00e9e au navigateur web c\u00f4t\u00e9 client.<\/span><\/p>\n Les fonctions cl\u00e9s sont les suivantes :<\/b><\/p>\n La passerelle : \u2018index.html\u2019<\/b><\/p>\n \u2018index.html\u2019 <\/b>\u00a0agit comme la porte d\u2019entr\u00e9e de notre application web. C\u2019est le premier fichier avec lequel l\u2019utilisateur va interagir. Ce fichier d\u00e9finit la structure de notre page web en y incluant des liens vers les fichiers CSS et JavaScript pour am\u00e9liorer l\u2019apparence et les fonctionnalit\u00e9s.<\/span><\/p>\n Les \u00e9l\u00e9ments cl\u00e9s sont les suivants :<\/b><\/p>\n Styliser l\u2019exp\u00e9rience : \u2018style.css\u2019<\/b><\/p>\n Avec <\/span>\u2018style.css\u2019<\/b>, nous cr\u00e9ons l\u2019esth\u00e9tique de notre application web. Le CSS nous permet de d\u00e9finir le style de notre page web, s\u2019assurant que celle-ci est non seulement fonctionnelle, mais visuellement agr\u00e9able.<\/span><\/p>\n Les \u00e9l\u00e9ments cl\u00e9s de style sont les suivants :<\/b><\/p>\n Lien vers le code (et explication rapide) et vers le site web :<\/b><\/p>\n Code du site\u00a0: <\/span>https:\/\/git.resel.fr\/deepbluetracker\/website<\/span><\/a><\/p>\n Lien du site : https:\/\/deepbluetracker.cooc.resel.fr\/<\/a><\/p>\n Explication\u00a0:<\/span>\u00a0<\/strong><\/p>\n Nous allons voir plus en d\u00e9tail les trois fichiers principaux de notre site-web : \u2018index.html\u2019,<\/b> <\/span>\u2018server.js\u2019 <\/b>et <\/span>\u2018style.css\u2019<\/b> qui se trouvent dans le dossier <\/span>\u2018public\u2019 <\/b>\u00a0dans le git.<\/span><\/p>\n \u2018index.html\u2019<\/b><\/span><\/p>\n Le fichier <\/span>\u2018index.html\u2019<\/b> d\u00e9finit la structure g\u00e9n\u00e9rale du site web, il se compose en deux parties principales, l\u2019en-t\u00eate avec le titre du site et le corps qui contient le contenu du site.<\/span><\/p>\n Dans l’en-t\u00eate se trouvent les liens vers les fichiers de style et vers les outils qui permettent d\u2019afficher une carte interactive.<\/span><\/p>\n Le corps du site est compos\u00e9 d\u2019une carte interactive et d\u2019un tableau des positions.<\/span><\/p>\n Une section est d\u00e9di\u00e9e \u00e0 la carte, un bouton s\u2019y trouve qui permet de centrer la carte sur le dernier emplacement enregistr\u00e9.<\/span><\/p>\n Une autre section contient un tableau destin\u00e9 \u00e0 afficher les d\u00e9tails des positions suivies, comme la date, l\u2019heure et les coordonn\u00e9es g\u00e9ographiques, il y a aussi une option pour choisir une date et voir les positions de la journ\u00e9e choisie.\u00a0<\/span><\/p>\n \u00c0 la fin de la page, il y a un pied de page avec un petit message.<\/span><\/p>\n Enfin, le code inclut les diff\u00e9rents scripts qui rendent la page int\u00e9ractive.<\/span><\/p>\n \u2018style.css\u2019<\/b><\/span><\/p>\n Ce fichier permet de styliser et mettre en forme la page web, dans un premier temps nous r\u00e9initialiser\u00a0 les styles par d\u00e9fauts. Annuler les marges, les paddings et d\u00e9finir le box sizing pour plusieurs \u00e9l\u00e9ments HTML, l’int\u00e9r\u00eat est d\u2019assurer une coh\u00e9rence visuelle car chaque navigateur a ses propre style par d\u00e9faut.<\/span><\/p>\n Puis nous \u00e9tablissons les styles g\u00e9n\u00e9raux de la page web\u00a0 <\/span>\u2018body\u2019<\/b> avec une police de caract\u00e8res, sa hauteur et couleur, ce style est appliqu\u00e9 \u00e0 l\u2019ensemble du corps de la pahe.<\/span><\/p>\n Nous d\u00e9finissons \u00e9galement des <\/span>\u2018headers\u2019<\/b> qui nous servent de titre dans la structure de notre site web, nous appliquons un espace sous le titre principal de chaque headers. De la m\u00eame mani\u00e8re, nous ajoutons un espace autour de la section <\/span>\u2018main\u2019<\/b> de la page.<\/span><\/p>\n Nous cr\u00e9ons des styles pour la section de la carte <\/span>\u2018#map-section\u2019<\/b> et <\/span>\u2018#map\u2019<\/b> nous d\u00e9finissons les dimensions de la carte et les espaces entourant la section qui contient la carte.<\/span><\/p>\n Nous cr\u00e9ons une section pour les pings <\/span>\u2018#ping-section h2\u2019<\/b> avec un titre et des espacements et des bordures, nous faisons de m\u00eame avec le s\u00e9lecteur de dates <\/span>\u2018.data-selector\u2019<\/b>, <\/span>\u2018.table-container\u2019<\/b> et <\/span>\u2018table\u2019<\/b>.<\/span><\/p>\n Pour le bouton nous appliquons un effet visuel au survol <\/span>\u2018:hover\u2019<\/b> et enfin nous appliquons un effet de style sur le pied de page <\/span>\u2018footer\u2019<\/b>.<\/span><\/p>\n Pour que les effets de style soient r\u00e9actifs sur mobile nous utilisons une requ\u00eate m\u00e9dia pour les ajuster (hauteur de la carte et les espacements dans le conteneur du tableau).<\/span><\/p>\n \u2018server.js\u2019<\/b><\/span><\/p>\n Ce script visant \u00e0 rendre la page web int\u00e9ractive est d\u00e9coup\u00e9 en plusieurs parties.<\/span><\/p>\n Dans un premier temps nous affichons un message dans la console afin de s\u2019assurer que le site internet est bien lanc\u00e9 <\/span>\u2018console.log(\u00ab\u00a0Le site web est charg\u00e9 et pr\u00eat \u00e0 fonctionner !\u00a0\u00bb);\u2019<\/b>.<\/span><\/p>\n Ensuite nous d\u00e9clarons les diff\u00e9rentes variables n\u00e9cessaires au bon fonctionnement de la carte et la r\u00e9cup\u00e9ration des donn\u00e9es de l\u2019API ThingSpeak (map, maker, appDara, etc).<\/span><\/p>\n La premi\u00e8re fonction que nous avons d\u00e9velopp\u00e9e est \u2018upadateDataFromAPI\u2019. Cette fonction r\u00e9cup\u00e8re les donn\u00e9es depuis l’API ThingSpeak et les traite elle est appel\u00e9e p\u00e9riodiquement pour mettre \u00e0 jour les donn\u00e9es. Elle met \u00e0 jour la position du marqueur sur la carte sans changer le zoom ou le centrage de la carte.<\/span><\/p>\n La deuxi\u00e8me fonction d\u00e9velopp\u00e9e est <\/span>\u2018filterPingsByDate\u2019<\/b>. Elle permet de filtrer les pings par la date s\u00e9lectionn\u00e9e dans le s\u00e9lecteur de dates. Elle met \u00e0 jour le tableau de pings\u00a0 avec les donn\u00e9es filtr\u00e9es.<\/span><\/p>\n Une autre fonction est <\/span>\u2018updatePingTable\u2019<\/b> qui met\u00a0 \u00e0 jour le tableau des pings avec les donn\u00e9es fournies, en affichant les pings dans l’ordre d\u00e9croissant de l’heure. Les heures sont ajust\u00e9es au format HH:MM:SS.<\/span><\/p>\n La fonction <\/span>\u2018fillDateSelector\u2019<\/b> remplit le s\u00e9lecteur de dates avec des dates uniques et s\u00e9lectionne par d\u00e9faut la date la plus proche de la date actuelle. Apr\u00e8s avoir s\u00e9lectionn\u00e9e la date la plus proche, cette fonction met \u00e9galement \u00e0 jour le tableau des pings pour afficher les donn\u00e9es correspondates.<\/span><\/p>\n La fonction <\/span>\u2018initializeMap\u2019<\/b> initialise la carte Leaflet et la positionne sur les coordonn\u00e9es du dernier ping.<\/span><\/p>\n La fonction <\/span>\u2018centerMapOnLastPing\u2019<\/b> est appel\u00e9e lorsque l’utilisateur clique sur le bouton, le zoom et le centrage sont ensuite ajust\u00e9s sur le dernier ping re\u00e7u.<\/span>La fonction <\/span>\u2018updateDataFromAPI\u2019 <\/b>est la fonction principale de notre script c\u2019est donc cette fonction que nous appelons p\u00e9riodiquement avec l\u2019instruction <\/span>\u2018setInterval(updateDataFromAPI, 5000);\u2019<\/b>.<\/span><\/p>\n En r\u00e9ponse \u00e0 une situation d’urgence, nous avons mis en place une fonctionnalit\u00e9 d’envoi de SMS d’urgence en utilisant Arduino, un bouton et le module GSM\/GPRS SIM900. Lorsqu’un utilisateur appuie sur le bouton d’urgence, le code Arduino d\u00e9clenche une action sp\u00e9cifique. Il a \u00e9t\u00e9 n\u00e9cessaire d’ajouter un num\u00e9ro de t\u00e9l\u00e9phone destinataire auquel le message serait envoy\u00e9. \u00c0 ce moment, le module GPS NEO-6M est sollicit\u00e9 pour r\u00e9cup\u00e9rer instantan\u00e9ment la latitude et la longitude. Ces coordonn\u00e9es sont ensuite int\u00e9gr\u00e9es dans un message d’urgence, qui inclut un lien vers Google Maps pour une localisation pr\u00e9cise. Pour ce faire, nous avons de nouveau utilis\u00e9 la biblioth\u00e8que SoftwareSerial pour communiquer avec le module GSM\/GPRS SIM900 via des commandes AT.<\/span><\/p>\n <\/p>\n La boite a \u00e9t\u00e9 imprim\u00e9e \u00e0 partir d\u2019une mod\u00e9lisation 3D (fichier en annexe) sur une des imprimantes 3D du fablab. Elle a \u00e9t\u00e9 faite sur mesure pour optimiser l\u2019espace \u00e0 l\u2019int\u00e9rieur. De plus, des trous permettent de faire sortir l\u2019antenne (pour une meilleure transmission des donn\u00e9es) et la module GPS (pour \u00e9viter d\u2019avoir une couche suppl\u00e9mentaire entre lui et l\u2019ext\u00e9rieur). Deux autres trous permettent de brancher l\u2019arduino Uno et la batterie portable.<\/span><\/p>\n <\/p>\n Une fois assembl\u00e9 dans sa boite, le dispositif ressemble \u00e0 ce que l\u2019on voit sur les images suivantes :\u00a0<\/span><\/p>\n Afin de le rendre \u00e9tanche, nous l\u2019avons plac\u00e9 dans une pochette \u00e9tanche (type pochette pour t\u00e9l\u00e9phone), puis nous l\u2019avons attach\u00e9 \u00e0 une bou\u00e9e gonflable (voir image ci-dessous), qui est obligatoire lors de la pratique de chasse sous-marine, pour qu\u2019il flotte \u00e0 la surface de l\u2019eau. De plus, \u00e9tant donn\u00e9 la place limit\u00e9e \u00e0 l’int\u00e9rieur de la pochette \u00e9tanche, nous avons observ\u00e9 que le bouton \u00e9tait susceptible de s’activer de mani\u00e8re involontaire sous la pression exerc\u00e9e par la pochette. Afin de rem\u00e9dier \u00e0 ce probl\u00e8me, nous avons ajout\u00e9 un petit cylindre creux pour pr\u00e9venir ce ph\u00e9nom\u00e8ne. Le bouton reste actionnable en appuyant soi-m\u00eame depuis l’ext\u00e9rieur.<\/span><\/p>\n Le site internet que nous avons d\u00e9velopp\u00e9 est disponible sur ce lien : https:\/\/deepbluetracker.cooc.resel.fr\/<\/a><\/p>\n On y retrouve les fonctionnalit\u00e9s suivantes :<\/p>\n D\u00e9monstration de notre dispositif :<\/p>\n\n <\/p>\n Lors de son utilisation, les crit\u00e8res de fonctionnement du dispositif qui font d\u00e9faut au prototype sont :\u00a0<\/span><\/p>\n1. Mise en contexte du projet<\/strong><\/h2>\n
2. Pr\u00e9sentation g\u00e9n\u00e9rale de la solution<\/strong><\/h2>\n
3. R\u00e9alisation<\/strong><\/h2>\n
3.1 Liste du mat\u00e9riel utilis\u00e9<\/h3>\n
\n
3.2 R\u00e9cup\u00e9ration de la coordonn\u00e9e GPS<\/h3>\n
<\/a>3.3 Sch\u00e9ma des branchements<\/h3>\n
<\/a>3.4 Transmission de la coordonn\u00e9e GPS via ThingSpeak<\/h3>\n
3.5 Site web dynamique<\/h3>\n
\n
\n
\n
3.6 Envoie SMS d\u2019urgence<\/h3>\n
3.7 Bo\u00eetier contenant le dispositif<\/h3>\n
<\/a>4. R\u00e9sultats<\/b><\/h2>\n
4.1 Le dispositif<\/h3>\n
<\/a><\/a><\/h3>\n
4.2 Le site internet<\/h3>\n
\n
<\/a><\/h3>\n
4.3 D\u00e9monstration<\/h3>\n
<\/h3>\n
4.4 D\u00e9fauts<\/h3>\n
\n