| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:javascript:leaflet [2026/05/04 16:25] – mno | web:javascript:leaflet [2026/05/04 17:05] (Version actuelle) – [3. Création de la carte] mno |
|---|
| |
| * **Etape 5. Gérer la communication avec la carte Arduino** | * **Etape 5. Gérer la communication avec la carte Arduino** |
| * **Ressource** : | * **Ressource** : <html><a href="https://webge.fr/dokuwiki/doku.php?id=web:javascript:serveurhttp#lecture_de_n_valeurs_transmises_au_format_json" target="_blank">C++ & jQuery - Communiquer avec une carte à microcontrôleur</a></html> |
| * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu la table au format JSON suivante :**[{"val0":237,"val1":771}]**. \\ //Remarque : ces valeurs correspondent à la position angulaire de deux potentiomètres reliés aux entrées A0 et A1 d'une carte Arduino MKR Wifi 1010.// \\ \\ Cette table est contenue dans la variable **data**. \\ La méthode **each** de l'objet jQuery extrait le contenu de la table. On obtient : \\ - **enrty.val0** = 237 \\ - **entry.val1** = 771 \\ Pour les tests avec des potentiomètres, ces valeurs doivent être adaptées pour qu'un curseur s'affiche aux alentours de Bourges. \\ \\ **Renseigner** les lignes de code mises en surbrillance dans le fichier //geolocalisation.html//. | * **Explication du code ci-dessous** \\ On suppose que la fonction //chargerCoordonnees// a reçu l'objet au format JSON :**{"val0":237,"val1":771}**. \\ //Remarque : ces valeurs correspondent à la position angulaire de deux potentiomètres reliés aux entrées A0 et A1 d'une carte Arduino MKR Wifi 1010. Ces potentiomètres simulent la latitude et la longitude // \\ \\ Cet objet est contenu dans la variable **data**. \\ On récupère la valeur de la latitude et de la longitude avec : \\ - **data.val0** \\ - **data.val1** \\ Pour les tests avec des potentiomètres, ces valeurs doivent être adaptées pour qu'un curseur s'affiche aux alentours de Bourges. \\ \\ **Renseigner** les lignes de code mises en surbrillance dans le fichier //geolocalisation.html//. |
| |
| <code javascript *.js [enable_line_numbers="true",highlight_lines_extra="13,16,19,20"]> | <code javascript *.js [enable_line_numbers="true",highlight_lines_extra="13,16,19,20"]> |
| }, delaiMesure); | }, delaiMesure); |
| </code> \\ \\ **Résultat attendu** | </code> \\ \\ **Résultat attendu** |
| | |
| | {{ :web:javascript:resultat_attendu_gps.png?nolink&500 |}} |
| |
| <callout type="info" title="Pour aller plus loin..." icon="true">La communication avec la carte Arduino est réalisée par la méthode <html><a href="https://developer.mozilla.org/fr/docs/Glossary/AJAX" target="_blank"><b>$.ajax</b></a></html> de jQuery (située dans la fonction //**loadCoordinates**//) pour effectuer une requête HTTP asynchrone vers un serveur. Elle est conçue pour récupérer des données <html><a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation" target="_blank"><b>JSON</b></a></html> (la latitude et la longitude) depuis un fichier PHP, traiter ces données, mettre à jour la carte et afficher la valeur de la latitude et la longitude dans la page html. \\ On pourra utiliser Copilot pour avoir une description détaillée du code fonctionnel.</callout> | <callout type="info" title="Pour aller plus loin..." icon="true">La communication avec la carte Arduino est réalisée par la méthode <html><a href="https://developer.mozilla.org/fr/docs/Glossary/AJAX" target="_blank"><b>$.ajax</b></a></html> de jQuery (située dans la fonction //**loadCoordinates**//) pour effectuer une requête HTTP asynchrone vers un serveur. Elle est conçue pour récupérer des données <html><a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation" target="_blank"><b>JSON</b></a></html> (la latitude et la longitude) depuis un fichier PHP, traiter ces données, mettre à jour la carte et afficher la valeur de la latitude et la longitude dans la page html. \\ On pourra utiliser Copilot pour avoir une description détaillée du code fonctionnel.</callout> |