Neopixel Wemos Web server 2 è la seconda puntata dedicata al controllo dei WS2812B ad anello attraverso il web.
nel precedente articolo: neopixel wemos web server hai letto come è composto il “main” sketch ossia lo sketch principale che richiama le funzioni descritte in questo articolo.
Il file funzioni del Neopixel Wemos Web server 2
Il file function.ino non è tra gli include del main in quanto lo devi creare come tab separata:
e quando salverai il progetto avrai una cartella che contiene sia lo sketch principale sia lo sketch “function.ino” che contiene le funzioni necessarie al funzionamento del progetto.
Passa a leggere lo sketch:
String rootWebPage;
String WebPageInit = "<!DOCTYPE html><html><head><style> header { background: linear-gradient(to right, #e1335c 0%,#73172f 100%); color: #fff; padding:10px; text-align: center; vertical-align: middle; } body{ padding:15px; color: #48584f; font-family: Helvetica,Arial,sans-serif; font-variant: small-caps; font-size:1em; text-align: center; } footer { background: linear-gradient(to left, #e1335c 0%,#73172f 100%); color: #fff; padding:10px; text-align: right; vertical-align: bottom; } h2 { padding:10px; text-align: center; vertical-align: middle; font-size:2em; } ul { list-style-type: none; margin: 10; padding: 0; width: 100%; background-color: #fff; } li a { display: block; box-shadow: 5px 5px 3px #841733; background-color: #fff; border: 0px solid #000; color: #48584f; margin: 10px; padding: 8px 16px; text-decoration: none; } li a:hover { background-color: #e92558; color: #fff; } </style></head><body><header>:: Sara Savain Shirt ::</header>";
String WebPageClose = "<footer>powerd by mauroalfieri.it</br>CC licence</footer></body></html>";
String rootWebPageBODY = "<ul class=\"one\" style=\"width:100%\"><li><a href=/Rainbow1>Effetto A</a></li><li><a href=/Rainbow2>Effetto B</a></li><li><a href=/Rainbow3>Effetto C</a></li><li><a href=/Rainbow4>Effetto D</a></li></ul>";
void setup_wifi() {
delay(10);
Serial.println();
Serial.print("Connecting to ");
Serial.println(wifi_ssid);
WiFi.begin(wifi_ssid, wifi_password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
randomSeed(micros());
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
void composeWebPage() {
rootWebPage = WebPageInit;
rootWebPage += rootWebPageBODY;
rootWebPage += WebPageClose;
}
void startWebServer() {
server.on("/", handleRoot);
server.on("/Rainbow1", rainbow1);
server.on("/Rainbow2", rainbow2);
server.on("/Rainbow3", rainbow3);
server.on("/Rainbow4", rainbow4);
server.begin();
}
void handleRoot() { server.send(200, "text/html", rootWebPage); }
void rainbow1() {
currentPalette = RainbowColors_p;
currentBlending = LINEARBLEND;
server.send(200, "text/html", rootWebPage);
Serial.println("rainbow1");
}
void rainbow2() {
currentPalette = RainbowStripeColors_p;
currentBlending = NOBLEND;
server.send(200, "text/html", rootWebPage);
Serial.println("rainbow2");
}
void rainbow3() {
currentPalette = CloudColors_p;
currentBlending = LINEARBLEND;
server.send(200, "text/html", rootWebPage);
Serial.println("rainbow4");
}
void rainbow4() {
SetupPurpleAndGreenPalette();
server.send(200, "text/html", rootWebPage);
Serial.println("rainbow3");
}
/******************************* FastLED ***********************************/
void FillLEDsFromPaletteColors( uint8_t colorIndex) {
uint8_t brightness = 255;
for( int i = 0; i < NUM_LEDS; i++) {
leds[i] = ColorFromPalette( currentPalette, colorIndex, brightness, currentBlending);
colorIndex += 3;
}
}
void SetupPurpleAndGreenPalette() {
CRGB purple = CHSV( HUE_PURPLE, 255, 255);
CRGB green = CHSV( HUE_GREEN, 255, 255);
CRGB black = CRGB::Black;
currentPalette = CRGBPalette16(
green, green, black, black,
purple, purple, black, black,
green, green, black, black,
purple, purple, black, black );
}
Premetti che le prime linee sono usate per la definizione della pagina HTML come descritto nell’articolo: Neopixel wemos web server html e che ti consiglio di leggere, se non lo hai già fatto, per capire come viene realizzata la pagina HTML servita dalla Neopixel Wemos Web server 2;
la linea 01: definisce una variabile di tipo stringa rootWebPage in cui comporrai la pagina principale con i tre componenti delle linee successive:
linea 03: definisci la variabile, di tipo stringa, WebPageInit in cui metti l’header della pagina html;
linea 15: definisci la variabile, di tipo stringa, WebPageClose in cui c’è il footer della pagina;
linea 17: definisci il corpo della pagina html, che sarà sempre la stessa, come rootWebPageBODY ( String )
linea 21: definisci la funzione setup_wifi() con cui esegui la connessioe WiFi all’SSID definito nello sketch main;
linea 27: usi il metodo begin della libreria WiFi passando l’SSID e la password per la connessione;
linee 29-32: attendi fino a quando lo stato della connessione si attiva e la comunicazione WiFi può avvenire;
linee 36-39: scrivi sul monitor seriale il risultato della connessione e l’IP assegnato alla Neopixel Wemos Web server 2;
linee 42-46: la funzione composeWebPage() si occupa di concatenare le tre variabili definite alle linee 03-17 in un unica stringa definita alla linea 01;
linea 48: la startWebServer() si occupa sia di avviare il web server usando i metodi descritti sotto, sia di definire quali funzioni saranno richiamate dallo sketch quando arriva una richiesta nell’URL;
linea 49: definisci quale funzione richiamare quando nell’url è presente la chiamata alla root “/”, richiami la handleRoot che creerai di seguito;
linee 50-53: definisci quali finzioni chiamare quando nell’Url compare rainbow1-4, per ciacun Url richiama una funzione definita sotto;
linea 55: avvia il server usando il metodo begin dell’istanza sever;
linea 58: definisci la funzione handleRoot() il cui scopo è servire la prima pagina alla chiamata dell’Url “/”, la funzione usa il metodo send dell’istanza server per inviare la pagina rootWebPage che hai composto alla linea 42;
linea 60: crea la prima delle 4 funzioni che richiami dall’Url: rainbow1 che contiene le istruzioni per comporre il primo gioco di luce;
linea 61: imposta per il primo gioco di luce a palette corrente: RainbowColors_p;
linea 62: imposta la modalità di blending: LINEARBLEND;
linea 63: serve la pagina rootWebPage al client;
linea 64: scrivi sul monitor seriale “rainbow1”;
linee 67-85: definisci le funzioni rainbow2,3,4 richiamate dalle linee 51,52,53;
linee 88-95: definisci la funzione FillLEDsFromPaletteColors richiamata dallo sketch principale per accendere i led partendo dalla palette impostata;
linee 97-107: definisci la funzione SetupPurpleAndGreenPalette richiamata dalla linea 53 per applicare la palette viola e verde.
Al termine della scrittura dello sketch potrai usare il monitor seriale per vedere l’Ip assegnato dal tuo Router alla Neopixel Wemos Web server 2 e collegartici via smartphone:
e cliccando sui 4 bottoni vedrai quanto ripreso nel video:
Il blog mauroalfieri.it ed i suoi contenuti sono distribuiti con Licenza