web:javascript:serveurhttp

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:serveurhttp [2026/04/27 18:49] – [2. Code du serveur HTTP intégré à la carte Arduino] mnoweb:javascript:serveurhttp [2026/04/27 23:43] (Version actuelle) – [2. Code du serveur HTTP intégré à la carte Arduino] mno
Ligne 5: Ligne 5:
 [Mise à jour le 27/4/2026] [Mise à jour le 27/4/2026]
  
 +  * **Ressource**
 +    * [[:microc:uc:mkr|Microcontrôleurs - Arduino MKR Wifi 1010]]
 ==== 1. Présentation ==== ==== 1. Présentation ====
 Ce document présente la communication mise en œuvre entre un PC, un Raspberry Pi et une carte Arduino MKR Wifi 1010 dans les activités de projet en terminale STI2D spécialité SIN. Ce document présente la communication mise en œuvre entre un PC, un Raspberry Pi et une carte Arduino MKR Wifi 1010 dans les activités de projet en terminale STI2D spécialité SIN.
Ligne 64: Ligne 66:
 <html> <html>
 <head><meta charset="utf-8"> <head><meta charset="utf-8">
-<title>Serveur MKR Wifi 1010 V6</title>+<title>Serveur MKR Wifi 1010 V6a</title>
 <style> <style>
 .ip{color:blue;} .ip{color:blue;}
Ligne 73: Ligne 75:
 </head> </head>
 <body> <body>
-<h3>[Accueil] Serveur HTTP <span style="color:red;">V6</span> (MKR Wifi 1010)</h3>+<h3>[Accueil] Serveur HTTP <span style="color:red;">V6a</span> (MKR Wifi 1010)</h3>
 <p><u>Remarque</u> : la LED <b>L</b> de la carte doit clignoter quelques secondes après la mise sous tension.</p> <p><u>Remarque</u> : la LED <b>L</b> de la carte doit clignoter quelques secondes après la mise sous tension.</p>
 <b>Commandes reconnues</b> <b>Commandes reconnues</b>
Ligne 137: Ligne 139:
  
 === 2.4 Gestionnaire de requêtes === === 2.4 Gestionnaire de requêtes ===
-  - **Page d'accueil** <code cpp *.cpp>+  - **Chargement de la page d'accueil** <code cpp *.cpp>
 // g0. Renvoi de la page d'accueil du serveur // g0. Renvoi de la page d'accueil du serveur
 // Particularité : charset=utf-8 dans le Content-Type : cohérent avec ta déclaration HTML, évite des problèmes d'affichage des accents // Particularité : charset=utf-8 dans le Content-Type : cohérent avec ta déclaration HTML, évite des problèmes d'affichage des accents
Ligne 161: Ligne 163:
   - **Transmission de la valeur analogique présente sur A0 (même principe pour A1, ...A4)** <code cpp *.cpp>   - **Transmission de la valeur analogique présente sur A0 (même principe pour A1, ...A4)** <code cpp *.cpp>
 void lectureVal0() { void lectureVal0() {
-  unsigned int val = val0; +  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
-  server.send(200, F("text/plain"), String(val));+  server.send(200, F("text/plain; charset=utf-8"), String(val0));
 } }
 </code> </code>
   - **Transmission des valeurs analogiques présentes sur A0 et A1 au format JSON** <code cpp *.cpp>   - **Transmission des valeurs analogiques présentes sur A0 et A1 au format JSON** <code cpp *.cpp>
 // g10. Transmission des valeurs analogiques présentes sur A0 et A1 au format JSON // g10. Transmission des valeurs analogiques présentes sur A0 et A1 au format JSON
 +// msgjson: objet JSON
 void lectureVals0et1() { void lectureVals0et1() {
-  unsigned int val_0 = val0; +  String msgjson = F("{\"val0\":"); 
-  unsigned int val_1 = val1; +  msgjson += val0; 
-  String msgjson = "[{\"val0\":"; +  msgjson += F(",\"val1\":"); 
-  msgjson += val_0; +  msgjson += val1; 
-  msgjson += ","; +  msgjson += F("}"); 
-  msgjson += "\"val1\":"; +  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
-  msgjson += val_1; +  server.send(200, F("application/json; charset=utf-8"), msgjson);
-  msgjson += "}]"; +
-  server.send(200, F("text/plain"), msgjson);+
 } }
 </code> </code>
   - **Mesure et transmission des valeurs analogiques présentes sur A0 à An au format JSON** <code cpp *.cpp>   - **Mesure et transmission des valeurs analogiques présentes sur A0 à An au format JSON** <code cpp *.cpp>
 +// g11. Mesure et transmission des valeurs analogiques présentes sur A0 à An au format JSON
 +// mmsgtablejson : tableau contenant un objet JSON
 void lectureAll() { void lectureAll() {
-  // Mesures 
-  unsigned int val_0 = val0; 
-  unsigned int val_1 = val1; 
-  unsigned int val_2 = val2; 
-  unsigned int val_3 = val3; 
-  unsigned int val_4 = val4; 
   String msgjson = "[{\"val0\":";   String msgjson = "[{\"val0\":";
-  msgjson += val_0;+  msgjson += val0;
   msgjson += ",";   msgjson += ",";
   msgjson += "\"val1\":";   msgjson += "\"val1\":";
-  msgjson += val_1;+  msgjson += val1;
   msgjson += ",";   msgjson += ",";
   msgjson += "\"val2\":";   msgjson += "\"val2\":";
-  msgjson += val_2;+  msgjson += val2;
   msgjson += ",";   msgjson += ",";
   msgjson += "\"val3\":";   msgjson += "\"val3\":";
-  msgjson += val_3;+  msgjson += val3;
   msgjson += ",";   msgjson += ",";
   msgjson += "\"val4\":";   msgjson += "\"val4\":";
-  msgjson += val_4;+  msgjson += val4;
   msgjson += "}]";   msgjson += "}]";
-  server.send(200, F("text/plain"), msgjson);+  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
 +  server.send(200, F("application/json; charset=utf-8"), msgjson);
 } }
 </code> </code>
Ligne 208: Ligne 206:
 // g12. Mesure de 2 valeurs mises à l'echelle (max 5) // g12. Mesure de 2 valeurs mises à l'echelle (max 5)
 // et insertion dans une table JSON // et insertion dans une table JSON
 +// mmsgtablejson : tableau contenant un objet JSON
 void lectureTableJSON() { void lectureTableJSON() {
-  unsigned int val_0 = val0; +  String msgtablejson = R"([{ "H0": 0, "T0": )" + String(val0 * 0.05) + R"( }, { "H1": 1, "T1": )" + String(val1 * 0.05) +
-  unsigned int val_1 = val1; +
-  String msgtable = R"([{ "H0": 0, "T0": )" + String(val_0 * 0.05) + R"( }, { "H1": 1, "T1": )" + String(val_1 * 0.05) ++
                     R"( }, { "H": 1, "T": 11.7 },                      R"( }, { "H": 1, "T": 11.7 }, 
   { "H": 2, "T": 12 },    { "H": 2, "T": 12 }, 
Ligne 236: Ligne 233:
   { "H": 23, "T": 15.4 }])";   { "H": 23, "T": 15.4 }])";
   // Transmission   // Transmission
-  server.send(200, F("text/plain"), msgtable);+  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
 +  server.send(200, F("application/json; charset=utf-8"), msgtablejson);
 } }
 </code> </code>
Ligne 331: Ligne 329:
 </code> </code>
  
 +{{ :materiels:capteurs:distance:arduinoico.png?nolink&50|}}
 +<callout type="tip" icon="true" title="TELECHARGER">La dernière version du <html><a href="https://webge.fr/doc/wikis/code/Arduino/ARD_MKR1010_HTTP_SERVER_V6a.zip" target="_blank" title="Version 1">serveur HTTP</a></html> sur Arduino MKR wifi 1010.</callout>
 ==== 3. Code Arduino, php et jQuery correspondant ==== ==== 3. Code Arduino, php et jQuery correspondant ====
 ===3.1 Lecture d'une valeur === ===3.1 Lecture d'une valeur ===
-  * **Utilisation** : affichage d'une grandeur physique sous la forme d'une valeur, d'un, widget jquery, etc.  +  * **Utilisation** : affichage d'une grandeur physique sous la forme d'une valeur, d'un widget jQuery, etc.  
-<code cpp exemple1.cpp>+<code cpp lectureVal1.cpp> 
 +// Réponse de la carte Arduino à la requête .../lire/val1. Transmission de la valeur analogique présente sur l'entrée A1
 void lectureVal1() { void lectureVal1() {
-  unsigned int val = val1; // à modifier +  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
-  server.send(200, F("text/plain"), String(val));+  server.send(200, F("text/plain; charset=utf-8"), String(val1));
 } }
 </code> </code>
Ligne 343: Ligne 344:
 <code php lireVal1.php> <code php lireVal1.php>
 <?php <?php
 +// Le Raspberry Pi transmet à la carte Arduino la requête issue du navigateur 
 // URL à modifier en fonction de l'adresse IP et du programme de la carte Arduino  // URL à modifier en fonction de l'adresse IP et du programme de la carte Arduino 
 $service_url = "http://192.168.x.x/lire/val1"; $service_url = "http://192.168.x.x/lire/val1";
Ligne 354: Ligne 356:
 </code> </code>
  
-<code javascript exemple1.js>+<code javascript jauge.js> 
 +// Le navigateur initie la requête vers la carte Arduino, via le Raspberry Pi et traite la réponse
 $(document).ready(function () { $(document).ready(function () {
     let delaiMesure = 3000;     let delaiMesure = 3000;
Ligne 362: Ligne 365:
       $.ajax({       $.ajax({
          url: 'scripts/lireVal1.php',          url: 'scripts/lireVal1.php',
-         type: 'get',+         method: 'GET',
          success: function (data) {          success: function (data) {
                     $("#val1").html(data); // Affichage de la valeur sur la page pour les tests                     $("#val1").html(data); // Affichage de la valeur sur la page pour les tests
-                    let val1 = parseInt(data) * 50 / 920; // * 50 / 920 : exemple de mise à l'échelle pour les tests +                    let val1 = parseInt(data) * 50 / 920; // Exemple de mise à l'échelle pour les tests 
-                    $('#jaugeCirculaire').jqxGauge({ value: val1 }); //TODO: jaugeCirculaire à remplacer par nomgrandeurphysique+                    $('#jaugeCirculaire').jqxGauge({ value: val1 });
                  },                  },
          timeout: delaiError,          timeout: delaiError,
Ligne 384: Ligne 387:
  
 ===3.2 Lecture de n valeurs transmises au format JSON === ===3.2 Lecture de n valeurs transmises au format JSON ===
-  * **Utilisation** : carte leaflet, matrice graphique , graphique+  * **Utilisation** : carte leaflet, matrice de points , graphique jQwidget
  
-  * **Exemple 2** : transfert de 2 valeurs <code cpp exemple2.cpp> +  * **Exemple 2** : transfert de 2 valeurs <code cpp lectureVals0et1.cpp> 
-// g10. Transmission des valeurs analogiques présentes sur A0 et A1 au format JSON+// Réponse de la carte Arduino à la requête .../lire/vals0et1. 
 +// g10. Transmission des valeurs analogiques présentes sur A0 et A1  
 +// msgjson: objet JSON
 void lectureVals0et1() { void lectureVals0et1() {
-  unsigned int val_0 = val0; +  String msgjson = F("{\"val0\":"); 
-  unsigned int val_1 = val1; +  msgjson += val0; 
-  String msgjson = "[{\"val0\":"; +  msgjson += F(",\"val1\":"); 
-  msgjson += val_0; +  msgjson += val1; 
-  msgjson += ","; +  msgjson += F("}"); 
-  msgjson += "\"val1\":"; +  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
-  msgjson += val_1; +  server.send(200, F("application/json; charset=utf-8"), msgjson);
-  msgjson += "}]"; +
-  server.send(200, F("text/plain"), msgjson);+
 } }
 </code> <code php getcoordonnees.php> </code> <code php getcoordonnees.php>
 <?php <?php
-  // Create cURL call, make sure to change it with your Wifi name+  // Le Raspberry Pi transmet à la carte Arduino la requête issue du navigateur  
 +  // URL à modifier en fonction de l'adresse IP et du programme de la carte Arduino 
   $service_url = "http://192.168.x.x/lire/vals0et1"; // URL à modifier   $service_url = "http://192.168.x.x/lire/vals0et1"; // URL à modifier
   $curl = curl_init($service_url);   $curl = curl_init($service_url);
Ligne 417: Ligne 421:
     $.ajax({     $.ajax({
         url: 'scripts/getcoordonnees.php',         url: 'scripts/getcoordonnees.php',
-        type: 'get',+        method: 'GET',
         dataType: 'json', // demande à jQuery de parser le JSON         dataType: 'json', // demande à jQuery de parser le JSON
         success: function (data) {         success: function (data) {
-            $.each(data, function (entryIndex, entry) { +                // Pour les tests, on souhaite 0 < val0 < 1023 => 47.07970 < latitude < 47.01328 
-                // Pour les tests, on souhaite 0 < val0 < 1000 => 47.07970 < latitude < 47.01328 +                latitude = -0.0000664 * parseFloat(data.val0) + 47.07970; 
-                latitude = -0.0000664 * parseFloat(entry.val0) + 47.07970; +                // Pour les tests, on souhaite 0 < val1 < 1023 => 2.199468 < longitude < 2.409102 
-                // Pour les tests, on souhaite 0 < val1 < 780 => 2.199468 < longitude < 2.409102 +                longitude = 0.000210 * parseFloat(data.val1) + 2.199468;
-                longitude = 0.000210 * parseFloat(entry.val1) + 2.199468;+
  
                 // Afficher les valeurs numériques                 // Afficher les valeurs numériques
Ligne 436: Ligne 439:
                 });                 });
                 marker = L.marker([latitude, longitude]).addTo(map);                 marker = L.marker([latitude, longitude]).addTo(map);
-            }) 
         },         },
         timeout: delaiError,         timeout: delaiError,
Ligne 452: Ligne 454:
 </code>  </code> 
  
-  * **Exemple 3** : lecture de 5 valeurs <code cpp *.cpp> +  * **Exemple 3** : lecture de 5 valeurs <code cpp lectureAll.cpp> 
-// g11. Mesure et transmission des valeurs analogiques présentes sur A0 à An au format JSON+// Réponse de la carte Arduino à la requête .../lire/all. 
 +// g11. Mesure et transmission des valeurs analogiques présentes sur A0 à A4 au format JSON 
 +// mmsgjson : objet JSON
 void lectureAll() { void lectureAll() {
-  // Mesures +  String msgjson = F("{\"val0\":"); 
-  unsigned int val_0 = val0; +  msgjson += val0; 
-  unsigned int val_1 = val1; +  msgjson += F(",\"val1\":"); 
-  unsigned int val_2 = val2; +  msgjson += val1; 
-  unsigned int val_3 = val3; +  msgjson += F(",\"val2\":"); 
-  unsigned int val_4 = val4; +  msgjson += val2; 
-  String msgjson = "[{\"val0\":"; +  msgjson += F(",\"val3\":"); 
-  msgjson += val_0; +  msgjson += val3; 
-  msgjson += ","; +  msgjson += F(",\"val4\":"); 
-  msgjson += "\"val1\":"; +  msgjson += val4; 
-  msgjson += val_1; +  msgjson += F("}"); 
-  msgjson += ","; +  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
-  msgjson += "\"val2\":"; +  server.send(200, F("application/json; charset=utf-8"), msgjson);
-  msgjson += val_2; +
-  msgjson += ","; +
-  msgjson += "\"val3\":"; +
-  msgjson += val_3; +
-  msgjson += ","; +
-  msgjson += "\"val4\":"; +
-  msgjson += val_4; +
-  msgjson += "}]"; +
-  server.send(200, F("text/plain"), msgjson);+
 } }
-</code> <code php *.php>+</code> <code php lireall.php>
 <?php <?php
-  // Create cURL call, make sure to change it with your Wifi name+  // Le Raspberry Pi transmet à la carte Arduino la requête issue du navigateur  
 +  // URL à modifier en fonction de l'adresse IP et du programme de la carte Arduino 
   $service_url = "http://192.168.x.x/lire/all"; // URL à modifier   $service_url = "http://192.168.x.x/lire/all"; // URL à modifier
   $curl = curl_init($service_url);   $curl = curl_init($service_url);
Ligne 489: Ligne 485:
   curl_close($curl);   curl_close($curl);
 ?> ?>
-</code> <code js *.js>+</code> <code js matrice.js>
  function loadMeasures() {  function loadMeasures() {
     $.ajax({     $.ajax({
        url: 'scripts/lireall.php',        url: 'scripts/lireall.php',
 +       method: 'GET',
        dataType: 'json',              // demande à jQuery de parser le JSON        dataType: 'json',              // demande à jQuery de parser le JSON
-       success: function (thermique) { +       success: function(data) { 
-         // thermique est maintenant un objet JavaScript +            let vals = []; 
-         let objet = thermique[0];  // récupère le premier objet du tableau +            vals[0] = parseInt(data.val0); 
-         let cellule0 = objet.val0;  // récupère la première valeur +            vals[1] = parseInt(data.val1); 
-         let cellule1 = objet.val1;  // récupère la deuxième valeur +            vals[2] = parseInt(data.val2); 
-         ... +            vals[3] = parseInt(data.val3); 
-         console.log(cellule0);       // affiche val0 +            vals[4] = parseInt(data.val4); 
-         console.log(cellule1);       // affiche val1+ 
 +            // Utilisation du tableau 
 +            ...
        },        },
        timeout: delaiError,        timeout: delaiError,
Ligne 511: Ligne 510:
 </code>  </code> 
  
-  * **Exemple 4** : transfert de n valeurs <code cpp exemple4.cpp> +  * **Exemple 4** : transfert de n valeurs <code cpp tablevar.cpp> 
-// g12. Mesure de 2 valeurs mises à l'echelle (max 50)+// Réponse de la carte Arduino à la requête .../lire/tablevar. 
 +// g12. Mesure de 2 valeurs mises à l'echelle (max 5)
 // et insertion dans une table JSON // et insertion dans une table JSON
 void lectureTableJSON() { void lectureTableJSON() {
-  unsigned int val_0 = val0; +  String msgtable = R"([{ "H0": 0, "T0": )" + String(val0 * 0.05) + R"( }, { "H1": 1, "T1": )" + String(val1 * 0.05) +
-  unsigned int val_1 = val1; +
-  String msgtable = R"([{ "H0": 0, "T0": )" + String(val_0 * 0.05) + R"( }, { "H1": 1, "T1": )" + String(val_1 * 0.05) ++
                     R"( }, { "H": 1, "T": 11.7 },                      R"( }, { "H": 1, "T": 11.7 }, 
   { "H": 2, "T": 12 },    { "H": 2, "T": 12 }, 
Ligne 528: Ligne 526:
   { "H": 23, "T": 15.4 }])";   { "H": 23, "T": 15.4 }])";
   // Transmission   // Transmission
-  server.send(200, F("text/plain"), msgtable);+  server.sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); 
 +  server.send(200, F("application/json; charset=utf-8"), msgtable);
 } }
 </code> <code php lireTable.php> </code> <code php lireTable.php>
 <?php <?php
-  // Create cURL call, make sure to change it with your Wifi name +  // Le Raspberry Pi transmet à la carte Arduino la requête issue du navigateur  
-  $service_url = "http://192.168.x.x/lire/table"; // URL à modifier+  // URL à modifier en fonction de l'adresse IP et du programme de la carte Arduino  
 +  $service_url = "http://192.168.x.x/lire/table"; 
   $curl = curl_init($service_url);   $curl = curl_init($service_url);
        
Ligne 541: Ligne 541:
   curl_close($curl);   curl_close($curl);
 ?> ?>
-</code><code js table.js>+</code><code js graphique.js>
      function loadMeasures() {      function loadMeasures() {
         $.ajax({         $.ajax({
  • web/javascript/serveurhttp.1777308552.txt.gz
  • Dernière modification : 2026/04/27 18:49
  • de mno