sábado, 10 de junio de 2017

Tutorial #2 de AJAX en ESP8266 (NodeMCU)

El video muestra como implementar AJAX en el servidor web de un ESP8266, lo que permite poder actualizar datos de la página web sin necesidad de recargarla. Es una herramienta muy útil para de IOT (internet de las cosas).



Código Fuente:

#include <ESP8266WebServer.h>

//---------------------------------------------------------------
ESP8266WebServer server(80);

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

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

String XML, xmlTemperatura; 

unsigned long previousMillis = 0;

//--------CODIGO HTML y JavaScript-------------
String webSite = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8' />"
"<title>Tempetatura</title>"
"<script type='text/javascript'>"
"function loadDoc(){"
"  var xhttp = new XMLHttpRequest();"
"  xhttp.onreadystatechange = function() {"
"    if (this.readyState == 4 && this.status == 200) {"
"      myFunction(this);"
"    }"
"  };"
"  xhttp.open('GET','xml',true);"
"  xhttp.send();"
"  setTimeout('loadDoc()',500);"
"}"
"function myFunction(xml){"
"  var i;"
"  var xmlDoc = xml.responseXML;"
"  var dato ='';"
"  dato = xmlDoc.getElementsByTagName('TEMPERATURA')[0].childNodes[0].nodeValue;"
"  document.getElementById('temperatura').innerHTML = dato;"
"}"
"</script>"
"</head>"
"<body onload='loadDoc()'>"
"<a>TEMPERATURA: </a>"
"<a id='temperatura'></a>"
"<a>&degC</a>"
"</body>"
"</html>";

void construirXML(){
  XML="";
  XML+="<TEMPERATURA>";
  XML+=xmlTemperatura;
  XML+="</TEMPERATURA>";
}

void handleWebsite(){
  server.send(200,"text/html",webSite);
}

void handleXML(){
  construirXML();
  server.send(200,"text/xml",XML);
}

//---------------------------SETUP-------------------------------
void setup() {

  // Inicia Serial
  Serial.begin(115200);
  Serial.println("");

  // Conexión WIFI
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED and contconexion <50) { //Cuenta hasta 50 si no se puede conectar lo cancela
    ++contconexion;
    delay(500);
    Serial.print(".");
  }
  if (contconexion <50) {
      //para usar con ip fija
      IPAddress ip(192,168,1,156); 
      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());
  }
  else { 
      Serial.println("");
      Serial.println("Error de conexion");
  }

  server.on("/",handleWebsite);
  server.on("/xml",handleXML);
  server.begin();
}

//--------------------------LOOP--------------------------------
void loop() {

  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= 1000) { //envia la temperatura cada 1 segundos
    previousMillis = currentMillis;
    int analog = analogRead(17);
    float temp = analog*0.322265625;
    xmlTemperatura = String(temp, 1); //1 decimal
  }

  server.handleClient();
}


No hay comentarios:

Publicar un comentario