HTML y NodeMCU ESP8266 (módulo lolin v3) [Solucionado]

International Español Software
1

Buenas a tod@s.

Resulta que mi problema esta en que necesito recabar datos de un sensor ultrasonico (HC-SR04) a través del modulo Lolin v3 o ESP8266 (Especificamente este módulo: )y mostrar los resultados en una página HTML. Lo que he podido hacer hasta el momento es:

  • Que el módulo lea los datos del sensor y los muestre vía Monitor serie con Arduino IDE
  • Que se muestre una pagina web básica configurando el modulo ESP8266 en modo Access Point

¿Cuál es el problema?... Que no he podido hacer que los datos que se muestran vía monitor serie, se visualicen en la pagina web o HTML.

Muestro código que cargo al modulo ESP8266:

#include <ESP8266WiFi.h>
#include <NewPing.h>

const char ssid[] = "NodeMCU";
const char password[] = "123456789.";

//Variables que ocupe para los pines del sensor ultrasonico
#define TRIGGER_PIN 5
#define ECHO_PIN 4
#define MAX_DISTANCE 200

WiFiServer server(80);

NewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE);

IPAddress ip(192, 168, 1, 200);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet (255,255,255,0);


void setup(){
  Serial.begin(115200);
  delay(10);
  Serial.println();

  server.begin();

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(ip, gateway, subnet);
  Serial.print("Iniciando AP:\t");
  Serial.println(ssid);

  Serial.print("Direccion IP:\t");
  Serial.println(WiFi.softAPIP());
}

void loop(){
  WiFiClient client = server.available();
  if(!client){
    return;
  }

  Serial.println("Nuevo cliente");
  while(!client.available()){
    delay(1);
  }

  while(Serial.available()>-1){
    int dato = Serial.read();
  }
  
   client.println("HTTP/1.1 200 OK");
   client.println("Content-Type: text/html");
   client.println("");
   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
   client.println("<head><meta charset=uft-8></head>");
   client.println("<body>");
   client.println("<h1>Distancia: </h1>"); //Aqui es donde deseo que se muestren los datos del sensor
   client.println("</body></html>");
   
}
/*
 * Este código lo use para poder determinar que si se leen los datos, lo cual si funciona
  delay(1000);
  Serial.print("Distancia: ");
  Serial.println(sonar.ping_cm());
  */

Cabe mencionar que he intentado crear una variable que almacene los datos que lee del sensor, pero tampoco he podido hacer que se muestre en la página. (Como dato adicional, no necesito de una base de datos como phpMyAdmin o MySQL, ya que se pretende hacer un sistema básico en donde se consulte al momento la información, ya que no se contara con un servidor dedicado para guardar la información)

Si alguien me pudiera ayudar con mi problema estaré eternamente agradecido :smiley: .

PD. A futuro tengo que agregar más sensores y algunos módulos Arduino, pero sabiendo como solventar primero este asunto lo demás esta de sobra.

2

No estoy seguro de entender tu consulta pero solo tienes que reemplazar Serial.print() por clint.print() en el lugar correcto.

 client.println("HTTP/1.1 200 OK");
   client.println("Content-Type: text/html");
   client.println("");
   client.println("<!DOCTYPE HTML>");
   client.println("<html>");
   client.println("<head><meta charset=uft-8></head>");
   client.println("<body>");
   client.println("<h1>Distancia:  "); 
   client.print(sonar.ping_cm());    //Asi
   client.println("</h1></body></html>");
   
}

Es claro que tienes que añadir la libreria e instanciar la lariable sonar.

3

Antes que nada, gracias por responder.

No lo había tenido en cuenta, en hacerlo así, en cuanto pueda lo pruebo y comentó el resultado que deseo :smiley:

Edito: La modificación funciono perfectamente a como lo requiero muchas gracias :smiley: Ahora tengo una duda... ¿Es posible hacer que los datos que recabo, se actualicen automáticamente sin la necesidad de estar actualizando la pagina manualmente?

4

Busca en Google Refresh html

5

Jopapa, tenias razón, no sabia que existe esa función dentro de HTML muchas gracias :smiley:

6