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("");
  }
}

17 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
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Hola Alejandro. Te quería comentar que ya resolví el problema que tenía. No puedo pasar el código por acá xq supera el num de caracteres.
      Pero lo que hice fue:
      >> asignar un #include < driver/adc.h >

      >> En SETUP agregé 2 lineas de cod: adc1_config_width(ADC_WIDTH_12Bit);
      adc1_config_channel_atten(ADC1_CHANNEL_7, ADC_ATTEN_0db);

      >> En el LOOP agregé el codigo para la lectura del voltaje: volt = ( 12.00 * adc1_get_raw ( ADC1_CHANNEL_7 )) / 4096;

      >> Y en la linea:
      client.println(paginaInicio + String(hallRead()) + paginaFin);

      la cambié por:
      client.println(pageInicio + String(volt) + pageFinal);

      Eso es todo, saludos.

      Eliminar
    6. Me alegra que lo hayas resuelto. Saludos.

      Eliminar
    7. Que tal, tengo el mismo problema solo que soy aun mas novata, me podrias enseñar tu codigo, te paso mi correo, ojala que si puedas elisesentera60@gmail.com

      Eliminar
    8. solo agregaste eso ultimo al codigo?

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Buenos días Alejandro.
    Tengo una consulta respecto al código, ya realicé todos los pasos para la lectura del sensor por servidor Web.
    Ahora requiero que empiece sólo a transmitir datos al presionar un pulsador externo. En que parte del código podría poner dicha condición para que ésto se cumpla?

    Sus tutoriales son demasiado buenos.
    Saludos.

    ResponderEliminar
  4. Hola Buen dia.. una consulta.. si quiero mostrar resultados en la pagina pero a su vez quiero poner botones para prender o apagar un led, como se hace.

    ResponderEliminar
  5. Hola Buenas Noches, me gustaría que en uno de tus ejemplo haya algo con la Camara OV7670 y la ESP8266. Es un desafío ya que veo tus servidores locales desde la ESP me gustaría saber si lográs una SnapShot (foto) desde la camara a tu ESP mediante WebSocket. Gracias espero que se entienda. Muy buenos tus tutos saludos.

    ResponderEliminar
  6. Saludos FEDE, muchas gracias por tus vídeos, son muy buenos, quisiera saber como hago para que en la página me muestre además de la variable hall, también me muestre la fecha y hora. Gracias por su atención

    ResponderEliminar
  7. Hola, gracias por sus tutoriales, son muy buenos y mas si los hace públicos; tengo como tres años de ser aficionado de arduino y mas de los modulod wifi, no entiendo mucho de programacion y me enreda mucho lo de variables constantes y string pero soy bueno para seguir instruciones; me gustaria un tuto que pueda utilizar un esp32 con varias entradas y varias salidas digitales imcluyendo entrada con señal analogica y varias salidas pmw, ademas visualizar sensor hall y un tactil; todo esto en una sola pagina: 3 salidas, 2 entradas digitales altas o bajas, 2entradas analogicas, 2 salidas pmw, sensor hall, una entrada tactil; una entrada digital que active un led y actualice el estado en la pagina pero que el boton pueda reactivarlo, y ademas que al apretar un boton fisico me actualice la pagina web y se ponga intermitente al estar en on o contacto, ademas que emita un sonido y extremo que mande correo o sms si es celular. Gracias

    ResponderEliminar