customisation http update esp32

Bonsoir , je cherche a s avoir si nous avons la possibilité d amélioré l apparence de la page ota de l esp32
si oui de quel manière ?
J aimerais ajouté un fond (couleur uni)
ajouté un logo si possible .
Et pourquoi pas cree mes propre bouton .

merki merki

Votre image vient de quelque part... vous n’avez pas le code du serveur HTTP OTA update documenté sur ce site ? (jai pas lu tout Mais ils postent bcp de code...)

j ai cru comprendre que tout ce joue dans la variable serverIndex ; mais je ne suis pas certain je ne vois pas de valeur background :confused:

moijerem:
j ai cru comprendre que tout ce joue dans la variable serverIndex ; mais je ne suis pas certain je ne vois pas de valeur background :confused:

De quel code !!!

oops desolé

#ifndef WEB_H_
#define WEB_H_

#define host BOARD.c_str()

void  loadCredentials(){
  print(debug, true, "\r\n> WIFI", true);
  if(eeRead(sysSetting) == USER){
    BOARD = eeReadStr(boardName);
    SSID = eeReadStr(ssid);
    PSWD = eeReadStr(pswd);
    print(debug, true, "  Config : OK\r\n", true);
  } else {
    BOARD = "ESP32_MASTER";
    SSID = "nc";
    PSWD = "nc";
    print(debug, true, F("  PAS CONFIGURE\r\n"), true);
  }
}

/*
 * Server Index Page
 */
 
const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>";

bool START_WIFI(){
  WiFi.begin(SSID.c_str(), PSWD.c_str());
  print(true, true, F("> CONNEXION RESEAU WIFI "), false);

  byte maxConnections = 0;
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    print(true, true, ((maxConnections % 10 == 0) ? F(".") : F("")), false);
    if(++maxConnections >= 50) {
      print(true, true, F(" ERRREUR"), true);
      return 0;
      break;
    }
  }
  print(true, true, F(" OK"), true);
  print(true, true, ((String)"<REP>Connecte sur " + SSID.c_str() + "<REP>"), true);
  

  /*use mdns for host name resolution*/
  if (!MDNS.begin(host)) { //http://esp32.local
    print(true, true, F("Error setting up MDNS responder!"), true);
    while (1) {
      delay(1000);
    }
  }
}


 bool LOAD_SERVER(){
  server.on("/", HTTP_GET, [](){
      server.sendHeader("Connection", "close");
      server.send(200, "text/html", serverIndex);
    });
    /*handling uploading firmware file */
    server.on("/update", HTTP_POST, [](){
      server.sendHeader("Connection", "close");
      server.send(200, "text/plain", (Update.hasError())?"FAIL":"OK");
      ESP.restart();
    },[](){
      HTTPUpload& upload = server.upload();
      if(upload.status == UPLOAD_FILE_START){
        Serial.printf("<Update>%s<Update>\n", upload.filename.c_str());
        SerialBT.printf("<Update>%s<Update>\n", upload.filename.c_str());
        if(!Update.begin(UPDATE_SIZE_UNKNOWN)){//start with max available size
          Update.printError(Serial);
        }
      } else if(upload.status == UPLOAD_FILE_WRITE){
        /* flashing firmware to ESP*/
        if(Update.write(upload.buf, upload.currentSize) != upload.currentSize){
          Update.printError(Serial);
          Update.printError(SerialBT);
        }
      } else if(upload.status == UPLOAD_FILE_END){
        if(Update.end(true)){ //true to set the size to the current progress
          Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
          SerialBT.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
        } else {
          Update.printError(Serial);
          Update.printError(SerialBT);
        }
      }
    });
    server.begin();
  return true;
 }

#endif

Le corps de la page html affichée se trouve ici:

"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"

C'est du html basique.
Tu peux insérer une balise pour ajouter une image dans la page. Attention pour l'image, si tu donnes une URL relative à ton IP ton programme devra servir l'image ce qui implique qu'elle est intégré dans ton code. Si tu donnes une URL externe il faudra que le client possède un accès au net.

Si tu veux définir une couleur de fond le plus simple est d'encadrer l'ensemble d'une balise avec un paramètre bgcolor

Merci pour la couleur de fond je n est pas rencontré de souci j ai voulu intégré une image de fond disponible sur mon ftp et la cela ne fonctionne pas j ai loupé quelque chose je pense :confused: une idee de la raison pourquoi ce code ne fonctionne pas ?

adresse de l image http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/images.jpg

le code que j ai essaye

const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"body {"
  "background-image: url('http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/images.jpg');"
  "background-color: #F8FBEF;"
"}"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"</body>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>";

il faut juste rajouter du css a la page...

Desole mais la tu me parle chinois peut tu etre legerement moins brutal :stuck_out_tongue:

mon images et stocker ici
http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg

moijerem:
Desole mais la tu me parle chinois peut tu etre legerement moins brutal :stuck_out_tongue:

mon images et stocker ici
http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg

regardez un tuto HTML pour voir comment insérer du CSS dans l'en tête (ça n'a rien à voir avec arduino...)

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>Exemple de base d'utilisation d'image de fond</title>
    <style type="text/css">
<!-- 
body {
color:black;
background-color:white;
background-image:url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg);
}
#alert {
background-color: #fff;
color: #000;
text-align: center;
border: 1px solid;
}
  -->
  </style>
  </head>
  <body>
--------> LE BODY ICI <---------
  </body>
</html>

moijerem:
Merci pour la couleur de fond je n est pas rencontré de souci j ai voulu intégré une image de fond disponible sur mon ftp et la cela ne fonctionne pas j ai loupé quelque chose je pense :confused: une idee de la raison pourquoi ce code ne fonctionne pas ?

Est-ce que ton PC voit le serveur FTP lorsqu'il est connecté à l'ESP32.
En fait, est-ce que l'ESP32 est STA sur le réseau ou AP pour ton PC auquel cas ton PC ne doit plus voir le serveur FTP qui doit alors être sur un autre domaine.

hola :slight_smile:
mon esp32 et connecté a ma box comme mon pc
si je me rend sur le lien de l image avec mon pc ras il l affiche bien

par contre sur ma page ota nada :confused: j ai essayer ce code parmis tant d autre

const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"html {"
  "margin:0;"
  "padding:0;"
  "background: url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg) no-repeat center center fixed;"
  "background-size: cover;" 
"}"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"<script>"

j ai le droit a ce message voir pieces jointe Merci pour votre retour

pourquoi des accolades?
Voilà la forme d'une page HTML basique, Commencer avec le Web - Apprendre le développement web | MDN
Les balises peuvent apparaître à peu près n'importe où dans la page

j ai essayer de prendre compte de ta remarque mais malgre cela j ai toujours le meme résultat

 * Server Index Page
 */
 
const char* serverIndex = 
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<html>"
  "margin:0;"
  "padding:0;"
  "background: url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg) no-repeat center center fixed;"
  "background-size: cover;"
  "</html>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"</body>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>";

Les attributs doivent se trouver dans la balise derrière le mot clé.
Regarde un peu ici
Les balises encadrent le code de la page. Les scripts devraient être soit entre les balises body, soit dans le bloc ... avant body.

Merci :slight_smile: :slight_smile: :slight_smile: problème résolu

Ce serait bien de publier ta solution pour que les suivants puissent en profiter

la je me bat pour applique ma class au premier bouton :slight_smile:

<!DOCTYPE html>
<html>
<head>
 
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
 
  <style>
  body {
  margin:0;
  padding:0;
  background: url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/PRX.png) no-repeat center center fixed;
  background-size: cover;
  background-color: #7A7676;
  }
 
 
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
}
.myButton:active {
	position:relative;
	top:1px;
}
 
  </style>
 
</head>
<body>

 
<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>
    <input class="myButton" type='file' name='update'>
    <input class="myButton" type='submit' value='Update'>
</form>
<div id='prg'>progress: 0%</div>
<script>
$('form').submit(function(e){
    e.preventDefault();
      var form = $('#upload_form')[0];
      var data = new FormData(form);
       $.ajax({
            url: '/update',
            type: 'POST',               
            data: data,
            contentType: false,                  
            processData:false, 
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(evt) {
                    if (evt.lengthComputable) {
                        var per = evt.loaded / evt.total;
                        $('#prg').html('progress: ' + Math.round(per*100) + '%');
                    }
               }, false);
               return xhr;
            },                                
            success:function(d, s) {  
                console.log('success!')
           },
            error: function (a, b, c) {
            }
          });
});
</script>
 
</body>
</html>