Blog

  • Post category:Wemos D1 mini ESP8266
  • Commentaires de la publication :0 commentaire
  • Dernière modification de la publication :mars 28, 2023
  • Temps de lecture :8 min de lecture

Piloter un panneau led 8×8 depuis une page web avec un ESP8266 wemos D1

 

    Prérequis :

Matériel :

  • 1 x Carte Wemos D1 mini ESP8266
  • 1 x Panneau led 8×8 WS2812B 64 bits
  • Fils de connexion
  • 1 x Breadboard

Version IDE :

Bibliothèque :

 

 

Vidéo de démonstration :

 

Schéma de câblage :

 

 

Download Code :

  Piloter un panneau led 8×8 depuis une page web avec un ESP8266 wemos D1

 

Code :

#include <Adafruit_NeoPixel.h>
#define PIN D1        // Pin de connexion NeoPixel
#define NUMPIXELS 64  // Taille NeoPixel
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
char cstr[10];

//SSID et mot de passe de votre routeur WiFi
const char* ssid     = "------"; // "Votre Nom_du_routeur"
const char* password = "------"; // "Votre Mot_de_passe_du_routeur"

ESP8266WebServer server(80);  //Server on port 80

void setup(void) {
  Serial.begin(9600);
  pixels.begin();

  WiFi.begin(ssid, password);  //Connect to your WiFi router
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //Si la connexion est réussie, affichez l'adresse IP dans le moniteur série
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println("WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());         //Adresse IP attribuée à votre ESP
  server.on("/", handleRoot);             
  server.on("/action_page", handleForm);  
  server.begin();                         //Démarrer le serveur
  Serial.println("HTTP server started");
  Serial.println("");
  pixels.show();
  pixels.clear();
}

void loop(void) {
  server.handleClient();  //Traiter les demandes des clients
}

void handleRoot() {
  String message = "<!DOCTYPE html>";
  message += "<html><head>\n";
  message += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";
  message += "<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n";
  message += "</head><body><center><h2>www.Robdomo.com</h2><br>\n";
  message += "<form action=\"/action_page\">\n";
  message += "<table><tr>\n";
  for (int i = 0; i < 8; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 8; i < 16; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 16; i < 24; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 24; i < 32; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 32; i < 40; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 40; i < 48; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 48; i < 56; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr><tr>\n";
  for (int i = 56; i < 64; i++) {
    message += "<td><div class=\"form-check\"><input class=\"form-check-input\" name=\"";
    message += i;
    message += "\" type=\"checkbox\" value=\"1\"></div></td>\n";
  }
  message += "</tr></table>\n";
  message += "<br><input type=\"submit\"  class=\"btn btn-success\" value=\"Valider\">\n";
  message += "</form>\n";
  message += "</center></body>\n";
  message += "</html>\n";

  server.send(200, "text/html", message);
}

void handleForm() {
  pixels.clear();
  for (int t = 0; t < NUMPIXELS; t++) {
    sprintf(cstr, "%d", t);
    if (server.arg(cstr) == "1") {
      pixels.setPixelColor(t, pixels.Color(0, 150, 0));
    } else {
      pixels.setPixelColor(t, pixels.Color(0, 0, 0));
    }
    pixels.show();
  }
  handleRoot();
}

 

 

Nombre de vues: 731

Laisser un commentaire