«

»

Nov 20

Stampa Articolo

Neopixel Wemos Web server 2

Neopixel Wemos Web server 2 è la seconda puntata dedicata al controllo dei WS2812B ad anello attraverso il web.

Neopixel Wemos Web server

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:

Neopixel Wemos Web server arduino ide function ino

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:

neopixel wemos web server html page

e cliccando sui 4 bottoni vedrai quanto ripreso nel video:

 

Permalink link a questo articolo: http://www.mauroalfieri.it/elettronica/neopixel-wemos-web-server-2.html

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Puoi usare i seguenti tag ed attributi HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>