Internet de les coses amb ESP32 i ESP8266

Exemples Referència Plaques   Recursos CITCEA
Projectes Programació Perifèrics   Inici

Seleccionem el color d'un NeoPixel

Ara farem servir un NeoPixel (un LED RGB intel·ligent). En aquest cas la pàgina web ens permetrà enviar tres valors al microcontrolador, que es correspondran amb les intensitats dels tres colors que posarem al NeoPixel. Els valors que hem de posar han d'estar entre 0 i 255.

La pàgina que veurà l'usuari tindrà el següent contingut (vegeu les etiquetes del llenguatge html).

<!DOCTYPE HTML>
<meta charset='UTF-8'>
<html>
<h1>El NeoPixel t&eacute; ara el color 255, 0, 0</h1>
<p></p>
<form action='/' method='get'>
<p>Entra valors entre 0 i 255</p>
R: &nbsp; &nbsp; <input type='text' name='R' value=''><br>
G: &nbsp; &nbsp; <input type='text' name='G' value=''><br>
B: &nbsp; &nbsp; <input type='text' name='B' value=''><br>
<p></p>
<input type='submit' value='Enviar'>
</form>
</html>

Que ens donarà una pàgina similar a aquesta:

Pàgina web

El programa connecta el microcontrolador a un punt d'accés existent (del que hem de saber l'identificador i la contrasenya), escriu al monitor sèrie la seva adreça IP i es queda a l'espera que algun usuari s'hi connecti. Quan ho fa, li envia la pàgina html en la que els colors del NeoPixel es personalitzen segons com estigui en aquell moment. Quan es prem el botó es torna a carregar la pàgina afegint els paràmetre corresponents als valors que ha escrit l'usuari. A continuació podem veure com queda l'adreça (vegeu les comandes http) quan hem triat un color taronja (255, 128, 0). Atès que ara no sabem l'adreça IP fins que s'ha fet la connexió, hem posat lletres per representar els quatre nombres (aaa.bbb.ccc.ddd). Podeu consultar també les funcions de la biblioteca ESP8266WiFi que fem servir.

aaa.bbb.ccc.ddd/?R=255&G=128&B=0

El programa que fem servir per provar-ho és el següent:

#include <ESP8266WiFi.h>    // Carreguem la biblioteca ESP8266WiFi
#include <Adafruit_NeoPixel.h>
#define LED 15    // pota on hem connectat el NeoPixel
const char idXarxa[] = "xarxa-wifi";    // Nom del punt d'accés 
const char contrasenya[] = "contrasenya-wifi";    // Contrasenya de connexió 
int R = 127;
int G = 127;
int B = 0;    // Inicialment en color groc al 50 %
Adafruit_NeoPixel cadena = Adafruit_NeoPixel(1, LED, NEO_GRB + NEO_KHZ800);
WiFiServer server(80);    // Creem un objecte de comunicació amb el port 80
                          // El port 80 és el de defecte per a http
void setup() {    // Inicialització
    Serial.begin(9600);    // Monitor sèrie
    cadena.begin();  // Inicialitza els NeoPixels				
    cadena.setPixelColor(0, R, G, B);
    cadena.show();
    WiFi.begin(idXarxa, contrasenya);    // Connexió a la xarxa Wi-Fi existent
    Serial.println("Connectant a la xarxa");
    while (WiFi.status() != WL_CONNECTED) {   // Mira si s'ha connectat cada 0,5 s 
        delay(500);
        Serial.print(".");    // Cada 0,5 s posa un puntet
    }
    Serial.print("Connectat a "); 
    Serial.println(WiFi.SSID());
    server.begin();    // Posem en marxa el servidor
    Serial.print("Estat de la connexió: ");
    Serial.println(WiFi.status()); 
    Serial.println(); 
    Serial.print("Ja pots fer la teva connexió al dispositiu ");
    Serial.println(WiFi.localIP()); 
}
void loop() {    // Programa que es repeteix indefinidament
    WiFiClient client = server.available();    // Obrim un client per al servidor
    if (!client) {    // Mirem si està disponible
        return;    // Si no ho està, torna a començar
    }
	// Connexió del client
    Serial.println("Nou client");
    while(!client.available()){
        delay(1);    // Esperem tenir client
    }
    String peticio = client.readString();
    Serial.print("Petició: ");
    Serial.println(peticio);    // Quina petició ha fet el client?
    client.flush();
    // Descartem la petició de la icona favicon.ico
    if (peticio.indexOf("favicon.ico") == -1){
        // Petició del client
        if ((Dades(peticio, "R") != "") && (Dades(peticio, "R").toInt() >= 0) && (Dades(peticio, "R").toInt() <= 255)){
            R = Dades(peticio, "R").toInt();
        }
        if ((Dades(peticio, "G") != "") && (Dades(peticio, "G").toInt() >= 0) && (Dades(peticio, "G").toInt() <= 255)){
            G = Dades(peticio, "G").toInt();
        }
        if ((Dades(peticio, "B") != "") && (Dades(peticio, "B").toInt() >= 0) && (Dades(peticio, "B").toInt() <= 255)){
            B = Dades(peticio, "B").toInt();
        }
        cadena.setPixelColor(0, R, G, B);
        cadena.show();
        // Resposta al client
        client.println("HTTP/1.1 200 OK");
        client.println();    // Imprescindible línia en blanc
        client.println("<!DOCTYPE HTML>");
        client.println("<meta charset='UTF-8'>");
        client.println("<html>");
        // En el títol el color actual
        client.print("<h1>El NeoPixel té ara el color ");                 
        client.print(R);  
        client.print(", ");  
        client.print(G);  
        client.print(", ");  
        client.println(B);  
        client.println("</h1>");
        // Formulari           
        client.println("<p></p>");
        client.println("<form action='/' method='get'>");
        client.println("<p>Entra valors entre 0 i 255</p>");
        client.println("R:     <input type='text' name='R' value=''><br>");
        client.println("G:     <input type='text' name='G' value=''><br>");
        client.println("B:     <input type='text' name='B' value=''><br>");
        client.println("<p></p>");
        client.println("<input type='submit' value='Enviar'>");
        client.println("</form>"); 
        client.println("</html>"); 
        delay(1);
        Serial.println("Fi de la petició");
    }
}
String Dades(String peti, String param){
    String valor = "";
    String sepa;
    int pos;
    if (peti.indexOf("?") != -1) {    // Si no ho troba torna -1
        peti = peti.substring(peti.indexOf("?")+1);
        if (peti.indexOf(param) != -1) {    // Si no ho troba torna -1
            peti = peti.substring(peti.indexOf(param)+param.length());
            sepa = peti.substring(0, 1);
            peti = peti.substring(1);
            pos = peti.indexOf("&");
            if (pos == -1) {
                pos = peti.indexOf(" ");
            }
            if ((pos != 0) && (sepa == "=")){
                valor = peti.substring(0, pos);
            }
        } 
    }
    return valor;
}

Per provar-ho, cal editar el programa per posar-hi l'identificador de xarxa i la contrasenya per fer la connexió i enviar el programa al microcontrolador. Tingueu present que la xarxa eduroam que fem servir habitualment a la UPC no serveix, ja que té un sistema de connexió diferent. Un cop connectat el microcontrolador a la xarxa podrem veure la seva adreça IP consultant el monitor sèrie de l'entorn de programació. Llavors, podem agafar un dispositiu mòbil i connectar-nos a la mateixa xarxa Wi-Fi. Un cop connectats a la xarxa podem obrir un navegador i posar l'adreça IP del microcontrolador a la barra d'adreces. Llavors ens hauria de mostrar la pàgina que em vist més amunt i podrem enviar els colors desitjats.

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.