ARDUINO WIFI REV2 - HTML ne s'affiche pas

ARDUINO WIFI REV2 - HTML ne s'affiche pas - Demande de Favicon

Bonjour à tous
j'essaie en vain d'afficher une page HTML sur mon nouveau Arduino Wifi rev2.
La page HTML apparait bien lorsque je l'appelle de Chrome.
Mais si je l'intègre dans le sketch, elle n'apparait plus lors de la connexion.
Cela fonctionne bien avec ESP8266WebServer.
Si quelqu'un pouvait m'indiquer mon erreur.....Merci
Michel

voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
#include <Arduino.h>
#include <WiFiNINA.h>
#include <WiFiServer.h>
#include <ssidpass.h>
 
const char* SSID = SECRET_SSID;
const char* PASS = SECRET_PASS;
 
const char index_html[] PROGMEM = R"=====(
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Gestion volets roulants</title>
        <meta charset="utf-8">
        <link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,
        iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAADX0lEQVRIx52Wy47jVBCGv/KtO4kT58KLILFAoJYSpFmxQMxiEEK
        waA08FNCzQyyQYJgtiMwCIdDMo0zHiZ3OzPhWLHwcOzd3oBZWVHbqr/r/qjpHnk6V0gTN8IY8+AG3DwpCbQpCGvPbFyQrAC848e
        WuWfsOJV2Tv0Z1163kr0nXoBXeeeY0Q4tNtuGPay6GTL/D9atAQrbh+de8XVIkiI1m/wOgZAnSCLGg2P2wIIlII6zLNkLuAdAMB
        LER5yCKIE4j97MpspohvAAvAIGiUgKUiv1i95uGPHoazzHMZHgDZjcA82uSmPljvAGzJ5UnIr3D6zP7HhF+/wrNDYxIG2kNigTX
        r6pSkhWoUSJZkUSIDRauD4JIzVIcI0LPR47BHGlTzdC8ocSW/RzNMKyBgu1wt+HRFY+uuIsNXW0il4glxemdUQIa7A8OUtoVoBV
        A0By3z+yGZMXzb0gi5o8BkhhvwPRbvACnY1BFyDN6Pr/8DXDZAbCsFoCtq4vmDSVKOixcH6dbZ7OXtQiqrGNUd8Q4AtBUwroEKN
        5U7LMTt9TgsyuAn/4E5csHLBcGrBXAwgtQpXgD4Ja9f8C+gCrLEK3ECG9ZhozG7RUoTpePbni7Yn4NMHvCRYB1sbs4xTxcF1XTu
        2IxmvDjnGBEliJyogIR7A5uNUquj905uR6ak6wFIvh9ul0jxgmKtkrklcj/xUq88tkKUM4ER8bxfDsBUDLTNdvJ7VbO80qRakfd
        R9F2O50Rzvy2ANYxttMqcoPOuqAdd14RDWlat6kWLEM+n7ZTdLhQtJmqAt6gGmCqrhcRGE0MM9sY8nSq99wnjpWVlgPYQZX1BsD
        vwXmrQolXZvvUVrZ3ALBeoeo6FkCEQN8pEEEDRPqD/XDNW4XiCJuIhx8S3mI11lgBozHPXgB8+gHhwmwJARHNYTyRn/9iEGihe+
        fOQQVaEL4ivGU8qYHDWygMXviKcMF4YmhUldUCC7Tg2PF5ACAWIown/PqS4QhgGfLJe7XI+28XfPwueX78wDzZRQL9AT0fIM93W
        qsUcfu2KBi9YzI7F+AsUxO95/PsHwC/X1d5H4CgBXGEbQPE0bF7T2Mb9IctiRyKrNg2yyUP36+dccRwvN/hzb8cy/1UBYqI6aXm
        adsyetI2lv8CCWmIK1xToTcAAAAASUVORK5CYII="/>
    </head>
    <body>
        <h1>Commande des volets roulants</h1>   
        <fieldset id="unit" class="volet_unitaire">
            <legend>Selection unitaire</legend>
            <input type="radio" id="v1" name="selection" value="1">
            <label for="v1">Cuisine</label>
            <input type="radio" id="v2" name="selection" value="2">
            <label for="v2">Salle</label>
            <input type="radio" id="v3" name="selection" value="3">
            <label for="v3">Salon tele</label>
            <input type="radio" id="v4" name="selection" value="4">
            <label for="v4">Salon canape</label>
            <input type="radio" id="v5" name="selection" value="5">
            <label for="v5">Chambre</label>
            <input type="radio" id="v6" name="selection" value="6">
            <label for="v6">Entree</label>
            <input type="radio" id="v7" name="selection" value="7">
            <label for="v7">Garage</label>
        </fieldset><br><br>
        <fieldset id="grp" class="volets_groupe">
            <legend>SÃ©lection groupe</legend>
            <input type="radio" id="jardin" name="selection" value="E">
            <label for="jardin">Cote jardin</label>
            <input type="radio" id="rue"    name="selection" value="D">
            <label for="rue">Cote rue</label>
            <input type="radio" id="int"    name="selection" value="A">
            <label for="int">Tous Interieur maison</label>
            <input type="radio" id="ext"    name="selection" value="B">
            <label for="ext">Tous Exterieur</label>
        </fieldset><br><br>
        <fieldset class="commandes">
            <legend>Commandes</legend>
            <input type="radio" id="ouv" name="manoeuvre" value="O">
            <label for="ouv">Ouverture</label>
            <input type="radio" id="fer" name="manoeuvre" value="F">
            <label for="fer">Fermeture</label>
            <input type="radio" id="dmo" name="manoeuvre" value="8">
            <label for="dmo">Demi-ouverture</label>
            <input type="radio" id="dmf" name="manoeuvre" value="9">
            <label for="dmf">Demi-fermeture</label>
            <input type="radio" id="arr" name="manoeuvre" value="C">
            <label for="arr">Arret manoeuvres en cours</label>
        </fieldset><br><br>
        <p id="afficheChoix"> - - </p><br><br>
        <button id="va">Click pour envoyer la commande</button> 
        <p id="result"> Resultat </p>   
        <style>
            .volet_unitaire{
                border: 2px solid orange;
                color: blue;               
            }
            .volets_groupe{
                border: 2px solid red;
                color: black;
            }
            .commandes{
                border: 2px solid green;
                color: darkslategray;
            }
            button{
                background-color: white;
            }
        </style>
        <script type="text/javascript">
            let vBouton = document.getElementById("va");       //trouve le bouton
            vBouton.addEventListener("click",transmit);
            vBouton.addEventListener("mouseover",function(){this.style.backgroundColor="red"});
            vBouton.addEventListener("mouseout",function(){this.style.backgroundColor="white"});
 
                //****le bouton de transmission est enfoncÃ©****
                function transmit(){               
                    let laSelection = document.querySelector("[name='selection']:checked").value;
                    let vManip = document.querySelector("[name='manoeuvre']:checked").value;          //trouve la manoeuvre Ã* exÃ©cuter
                    if(vManip==null) alert("Il faut une commande!");
                    else{                    
                        document.getElementById("afficheChoix").innerHTML= vManip + laSelection;     //Ã©crit sur la page
                        const xhr=new XMLHttpRequest();                                             //Objet xhr Http request
                        xhr.open("GET","/action?commande=" + vManip + "&volet=" + laSelection);     //commande GET formattÃ©
                        xhr.send();
                        xhr.onload = function(){                                                    //sur rÃ©ception d'une rÃ©ponse
                          document.getElementById("result").innerHTML = this.responseText;
                          if (xhr.status != 200){         
                            alert("Erreur " + xhr.status + " : " + xhr.statusText); //...On affiche le statut et le message correspondant
                          }
                          else{ 
                            document.getElementById("result").innerHTML=xhr.response;
                          }
                        };
                        xhr.onerror = function(){           //Si la requÃªte n'a pas pu aboutir...
                            alert("La requete a echoue");
                        }; 
                    }                   
                }
            </script>
        </body>
    </html>
)=====";
 
//*****gestion du serveur. Prototype des fonctions*****
void testRequeteClient();
void commandeRelais();
 
WiFiServer serveur(80);
 
void setup() {
  Serial.begin(9600);
  WiFi.begin(SSID, PASS); 
  while(WiFi.status() != WL_CONNECTED){
    Serial.print("-");
  }
  Serial.print(F("Connected"));
  serveur.begin();
}
 
void loop(){
  testRequeteClient();
}
 
void testRequeteClient(){
  WiFiClient client = serveur.available();
  if(!client) return;  
  while(client.connected()){
    client.setTimeout(500);
    String req = client.readStringUntil('!');   //attend un POST pendant 500ms
    Serial.println(req);
    client.flush();
    if(req.indexOf("GET / HTTP/1.1")>=0){       //si pas de POST, envoi de la page HTML
      client.println(F("HTTP/1.1 200 OK"));
      client.println(F("Content-Type: text/html\r\n"));
      client.println(index_html);
      delay(100);
      Serial.println(F("Envoi de la page HTML"));
      client.stop(); 
    }
    else if(req.indexOf("GET /favicon")){
      Serial.println(F("Favicon demande"));
      client.println(F("HTTP/1.1 200 OK"));
    }
    else if(req.indexOf("POST">=0)){
      //suite commandeRelais
    }
  }
}

Citation:

Envoyé par mormic

La page HTML apparait bien lorsque je l'appelle de Chrome.

où est-elle hébergée quand vous l'appelez de Chrome?

(sinon cette carte n'a pas eu bcp de succès, c'est toujours un peu compliqué les cartes avec 2 processeurs. nombreux sont ceux qui sont passés sur ESP32 ou MKR WiFi quand ils voulaient le WiFi)

Je crée ma page HTML avec VS Code et je fais simplement ouverture du fichier avec Chrome.
Le fichier apparaît bien et le favicon aussi; bien-sûr les fonctions JavaScript ne fonctionnent pas toutes en particulier AJAX.
Donc mon problème ne semble pas venir de HTML mais peut-être du dialogue HTTP ?

qu'attendez vous de ce bout de code?
Code:

1 2 3 String req = client.readStringUntil('!'); //attend un POST pendant 500ms Serial.println(req); client.flush();
vous pourriez lire ligne à ligne la requête, détecter la ligne blanche qui marque la fin des headers et ensuite attendre la requête GET ou POST

Dans le suite du prog je recevrai un POST et pour obtenir l'ensemble du message j'attends le caractère '!' pendant 500ms; passé ce délai j'analyse le message: est-ce un GET? ou autre chose.

En attendant de l'aide, j'ai poursuivi mes investigations et mon analyse est: c'est l'écriture en mémoire Flash par PROGMEM = R"====={....}===== puis la relecture qui ne fonctionne pas. En effet les caractères relus sont complètement erronés.
Je pense que cette possibilité n'est pas implémenté.
Alors ma nouvelle question: comment stocker une page HTML et comment pouvoir la présenter au client ?

Merci de votre aide.

Solution trouvée

Bonjour
En fin de recherches, j'ai une solution que je vous livre si cela intéresse quelqu'un.
La fonction PROGMEM = R"===(.....)==="; fonctionne bien.
C'est la restitution des données qui était en cause. En faisant:
Code:

1 2 3 4 5 6 7 8 9 client.println(F("HTTP/1.1 200 OK")); client.println(F("Content-Type: text/html")); char c = -1; for (size_t i=0;c;i++){ c = pgm_read_byte(page_html + i); client.print(c); } client.println(); client.stop();
tout fonctionne correctement.
Salutations
Michel

Effectivement c'est en mémoire flash et donc il faut aller chercher les octets

si vous voulez ne pas vous embêtez, il y a un petit truc qui est de préciser le type des données à la fonction print

Au lieu de faire
Code:

1 2 3 4 5 char c = -1; for (size_t i=0;c;i++){ c = pgm_read_byte(page_html + i); client.print(c); }
vous pouvez sans doute simplement faire
Code:

1 2 client.print((__FlashStringHelper*) index_html); // le cast va forcer le compilateur à prendre la variante adéquate (celle qui lit en mémoire flash)

Supérieure JAY M
Cela fonctionne encore mieux.
J'avais essayé auparavant en vain d'utiliser cette fonction. Mais je n'avais pas mis le pointeur !
Merci pour cette précision et l'aide que vous apportez à ce forum.
Cordialement
Michel