sábado, 20 de octubre de 2018

ESP32 desde Cero - Tutorial 7: Mostrar los Datos de un Sensor en una Página Web

En este video explico cómo mostrar los datos del sensor interno de efecto Hall en una página web alojada en un servidor web dentro del mismo ESP32.


Código Fuente:

#include <WiFi.h>

//------------------Servidor Web en puerto 80---------------------

WiFiServer server(80);

//---------------------Credenciales de WiFi-----------------------

const char* ssid     = "---";
const char* password = "---";

//---------------------VARIABLES GLOBALES-------------------------
int contconexion = 0;

String header; // Variable para guardar el HTTP request

//------------------------CODIGO HTML------------------------------
String paginaInicio = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8' />"
"<META HTTP-EQUIV='Refresh' CONTENT='1'>"
"<title>Servidor Web ESP32</title>"
"</head>"
"<body>"
"<center>"
"<h3>Servidor Web ESP32</h3>";

String paginaFin = "</center>"
"</body>"
"</html>";


//---------------------------SETUP--------------------------------
void setup() {
  Serial.begin(115200);
  Serial.println("");
  
  // Conexión WIFI
  WiFi.begin(ssid, password);
  //Cuenta hasta 50 si no se puede conectar lo cancela
  while (WiFi.status() != WL_CONNECTED and contconexion <50) { 
    ++contconexion;
    delay(500);
    Serial.print(".");
  }
  if (contconexion <50) {
      //para usar con ip fija
      //IPAddress ip(192,168,1,180); 
      //IPAddress gateway(192,168,1,1); 
      //IPAddress subnet(255,255,255,0); 
      //WiFi.config(ip, gateway, subnet); 
      
      Serial.println("");
      Serial.println("WiFi conectado");
      Serial.println(WiFi.localIP());
      server.begin(); // iniciamos el servidor
  }
  else { 
      Serial.println("");
      Serial.println("Error de conexion");
  }
}

//----------------------------LOOP----------------------------------

void loop(){
  WiFiClient client = server.available();   // Escucha a los clientes entrantes

  if (client) {                             // Si se conecta un nuevo cliente
    Serial.println("New Client.");          // 
    String currentLine = "";                //
    while (client.connected()) {            // loop mientras el cliente está conectado
      if (client.available()) {             // si hay bytes para leer desde el cliente
        char c = client.read();             // lee un byte
        Serial.write(c);                    // imprime ese byte en el monitor serial
        header += c;
        if (c == '\n') {                    // si el byte es un caracter de salto de linea
          // si la nueva linea está en blanco significa que es el fin del 
          // HTTP request del cliente, entonces respondemos:
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
                     
            // Muestra la página web
            client.println(paginaInicio + String(hallRead()) + paginaFin);
            
            // la respuesta HTTP temina con una linea en blanco
            client.println();
            break;
          } else { // si tenemos una nueva linea limpiamos currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // si C es distinto al caracter de retorno de carro
          currentLine += c;      // lo agrega al final de currentLine
        }
      }
    }
    // Limpiamos la variable header
    header = "";
    // Cerramos la conexión
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

5 comentarios:

  1. Hola Alejandro, muchas gracias por tus tutoriales, resultan ser muy útiles. Te comento que probé el mismo código pero en lugar de sensor Hall uso un potenciometro para simular un sensor analógico de voltaje. Así que agrego unas lineas que serian:
    > int readSensor = analogRead(4);
    > float sensor = (readSensor * 12.0) / 4096;
    Después reemplazo así:
    > client.println(paginaInicio + String(sensor) + paginaFin);
    Pero en la pagina web solo me da el valor 12 del sensor, y no modifica su valor cuando lo vario el pote. Apreciaría un consejo. Gracias Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Fede.
      En ESP32 hay que definir varias cosas para usar analog Read.
      Hice un tutorial sobre el tema:
      http://www.sinaptec.alomar.com.ar/2018/06/esp32-desde-cero-tutorial-4-adc.html

      ¿Definiste todo eso?

      Saludos.

      Eliminar
    2. Hola, disculpa la demora de la respuesta. No, no definí todo eso. Porque antes de implementar el código del servidor web del tutorial ya había probado el tomar las mediciones con el pote y funcionaba correctamente (sin definir todo eso del tutorial 4). Así que lo único que hice fue agregar el codigo del este tutorial, y es ahi que no funciona bien. Se queda clavado en la maxima escala que ponga, ya se 12 volts o 30 volts, etc. Y no varía con el potenciometro, y la unica manera que anda es eliminando el codigo del tutorial. Ya lo probe de varias
      formas (una de esas fue agregando todo lo del tutorial 4), aunque soy novato en esto, asi que muchos recursos para encontrar la solucion no tengo. Gracias por la respuesta. Saludos.

      Eliminar
    3. Pasame el código que cuando pueda lo veo. Saludos.

      Eliminar
  2. Ahí te lo pase por mail. Saludos.

    ResponderEliminar