HTML pages with read/write variables

Question

I need support on this embedded project, using ESP32 and Arduino IDE. The difficulty would be to display and read VARIABLES on the HTML page because I only found these examples:

• Reference in Portuguese - Chamar de code A
• Reference in English- Call code B

I’m coded in code B (it’s working right) and I need to merge with code A.

In the file "Esp_web_namespace_example.Ino", I have the following code:

#ifndef _WPAGE_
#define _WPAGE_

#include <WebServer.h>
#include <Update.h>
#include <ESPmDNS.h>
//#include <ESPAsyncWebServer.h>

#include "pagehelper.h"
#include "index.html.h"
#include "settings.html.h"
#include "style.css.h"
#include "smiley.jpg.h"
#include "wifi.html.h"
#include "server.html.h"
#include "display.html.h"
#include "gerais.html.h"
#include "logo.jpg.h"

WebServer Wbit(80);

String readDHTTemperature() {
  // As leituras do sensor também podem ter até 2 segundos 'de idade (é um sensor muito lento)
  // Leia a temperatura como Celsius (o padrão)
  float t = random(0,1000);
  // Leia a temperatura como Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Verifique se alguma leitura falhou e saia mais cedo (para tentar novamente).
  if (isnan(t)) { 
    Serial.println("Falha ao ler do sensor DHT!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}

String processor(const String& var){
  //Serial.println(var);
  if(var == "MSG1"){
    return readDHTTemperature();
  }
  else if(var == "MSG2"){
    //return readDHTHumidity();
  }
  return String();
}



void web2(){


  // CSS
    Wbit.on(style_css::PageName(), [] {Wbit.send_P(200, "text/css", style_css::estilo); });

    // HTML - PAGES
    Wbit.on("/", [] {Wbit.send_P(200, "text/html", index_html::HtmlPage); });  // Startpage
    
    Wbit.on(settings_html::PageName(), [] {Wbit.send_P(200, "text/html", settings_html::HtmlPage); });  // Settings

    Wbit.on(index_html::PageName(), [] {Wbit.send_P(200, "text/html", index_html::HtmlPage); });  // index

     // wifi

    Wbit.on(wifi_html::PageName(), [] {Wbit.send_P(200, "text/html", wifi_html::HtmlPage); });

     // servidor
    Wbit.on(server_html::PageName(), [] {Wbit.send_P(200, "text/html", server_html::HtmlPage); });

 // display
    Wbit.on(display_html::PageName(), [] {Wbit.send_P(200, "text/html", display_html::HtmlPage); });

     // gerais
    Wbit.on(gerais_html::PageName(), [] {Wbit.send_P(200, "text/html", gerais_html::HtmlPage); });

    // IMAGES
    Wbit.on(smiley_jpg::PageName(), [] {Wbit.sendContent_P(smiley_jpg::Image, sizeof(smiley_jpg::Image)); });

    // LOGOTIPO
    Wbit.on(logo_jpg::PageName(), [] {Wbit.sendContent_P(logo_jpg::Image, sizeof(logo_jpg::Image)); });

    Wbit.begin();
  
}

void webloop2(){
  Wbit.handleClient();
}

#endif

As possible check contains the snippet of code A:

String readDHTTemperature() {
  // As leituras do sensor também podem ter até 2 segundos 'de idade (é um sensor muito lento)
  // Leia a temperatura como Celsius (o padrão)
  float t = random(0,1000);
  // Leia a temperatura como Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Verifique se alguma leitura falhou e saia mais cedo (para tentar novamente).
  if (isnan(t)) { 
    Serial.println("Falha ao ler do sensor DHT!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}
//Efetua a identificação das variáveis 
String processor(const String& var){
  //Serial.println(var);
  if(var == "MSG1"){  //Busca no HTML a variavel %MSG1%
    return readDHTTemperature();
  }
  else if(var == "MSG2"){ //Busca no HTML a variável %MSG2%
    //return readDHTHumidity();
  }
  return String();
}

The critical point is code A, which has:

• server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html, processor);

And code B, the respective line would be below:

• Wbit.on("/", [] {Wbit.send_P(200, "text/html", index_html::HtmlPage); }); // Startpage

Finally, the attempt to modify, generates error, for code that adds call to Processor (Processor makes the identification/modification of variables in the HTML field)

Wbit.on("/", [] {Wbit.send_P(200, "text/html", index_html::HtmlPage,processor); }); // Startpage

I think you need to understand the syntax of the above command.

The index.html file contains (showing only the snippet showing the variables):

<h3>MENSAGENS DO DISPLAY</h3>
              <div class="conteudo">
                <div> 
                  <span>MENSAGEM DA LINHA 1</span>
                  <input type="text" maxlength="16" value="%MSG1%">
                </div>
                
                <div> 
                  <span>MENSAGEM DA LINHA 2</span>
                  <input type="text" maxlength="16" value="%MSG2%">
                </div>
           </div>

However, if a solution is not possible, I need more examples of this integration/portability. I need, understand and know what to study, not to depend on third party source.