La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]

Plateforme de développement ESP32: http://bit.ly/2PRyK8h
Flash deals Banggood: http://bit.ly/2upifb4
Faire un don pour soutenir la chaîne: http://bit.ly/35TD7os

TIMESTAMPS:

Intro 00:20
Préparation du projet 03:30
CSS 08:21
HTML 09:06
JAVASCRIPT 17:42
C++ 23:34
Upload avec le SPIFFS 34:06
Test/démonstration 36:54
??? 38:48
Conclusion 39:41

Je me suis inspiré de ces deux tutoriels que j’ai en quelque sorte fusionnés ensemble et ensuite personnalisés pour créer cette vidéo:
https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
https://circuits4you.com/2018/11/20/web-server-on-esp32-how-to-update-and-display-sensor-values/

VSCodium:
https://vscodium.com/

Ma vidéo sur PlatformIO:
https://youtu.be/-2NhjhzFQsM

Bibliothèques nécessaires pour réaliser ce projet:
https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/AsyncTCP

Uploader les fichiers dans le SPIFFS avec l’IDE Arduino:
https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/

Bonjour! Dans cette vidéo je vais vous montrer ce qui est (selon moi) la meilleure méthode pour créer et héberger une interface web sur un ESP32/ESP8266. Dans cette vidéo je programme sur PlatformIO (une vidéo au sujet de cet IDE est disponible sur ma chaîne). Je vais vous montrer comment programmer une interface web simple qui fait allumer/éteindre une LED avec des boutons et qui affiche une lecture de capteur. La différence avec mon précédent tutoriel à ce sujet, c’est que dans cette vidéo chaque langage de programmation sera dans son propre fichier et sera uploadé dans la mémoire flash de l’ESP32 grâce au SPIFFS. Du javascript sera utilisé pour envoyer en arrière-plan les requêtes HTTP qui contrôleront la LED et qui mettront à jour la valeur d’un capteur. Plus besoin d’ajouter le code HTML directement dans le code C++ et plus besoin de faire rafraîchir l’entièreté de la page périodiquement pour la mettre à jour et pour envoyer des requêtes. J’espère que cette vidéo vous sera utile!

LE CODE:

HTML

<!DOCTYPE html>
<html lang="fr">
    
<head>
    <title>Serveur ESP32</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="w3.css">
    <script type="text/javascript" src="script.js"></script>
</head>

<body class="w3-animate-opacity">

    <div class="w3-card w3-blue w3-padding-small w3-center">
        <h1>ESP32</h1>
    </div>

    <div class="w3-margin w3-center w3-card w3-padding-24">
        <h3 class="w3-padding">Allumer/Éteindre la LED</h3>
        <button onclick="onButton()" class="w3-button w3-green w3-xlarge w3-ripple w3-wide" style="width:40%;">ON</button>
        <button onclick="offButton()" class="w3-button w3-red w3-xlarge w3-ripple w3-wide" style="width:40%;">OFF</button>
        <br><br>
    </div>

    <div class="w3-margin w3-center w3-card w3-padding-24">
        <h3 class="w3-padding">Niveau de luminosité</h3>
        <p class="w3-xxlarge"><span id="valeurLuminosite">0</span></p>
    </div>

    <div class="w3-padding w3-center">
        <i><a href="https://TommyDesrochers.com" style="text-decoration: none;">Tommy Desrochers 2020</a></i>
    </div>

</body>

</html>

CSS

Pour le CSS, j’ai utilisé la bibliothèque W3.css disponible ici: https://www.w3schools.com/w3css/
Pour plus d’infos: https://www.w3schools.com/w3css/w3css_downloads.asp
Pour diminuer la taille d’une bibliothèque CSS: https://uncss-online.com/

JAVASCRIPT

function onButton() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "on", true);
    xhttp.send();
}

function offButton() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "off", true);
    xhttp.send();
}

setInterval(function getData()
{
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function()
    {
        if(this.readyState == 4 && this.status == 200)
        {
            document.getElementById("valeurLuminosite").innerHTML = this.responseText;
        }
    };

    xhttp.open("GET", "lireLuminosite", true);
    xhttp.send();
}, 2000);

C++

#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char *ssid = "Nom du réseau";
const char *password = "Mot de passe";

const int led = 2;
const int capteurLuminosite = 34;

AsyncWebServer server(80);

void setup()
{
  //----------------------------------------------------Serial
  Serial.begin(115200);
  Serial.println("\n");

  //----------------------------------------------------GPIO
  pinMode(led, OUTPUT);
  digitalWrite(led, LOW);
  pinMode(capteurLuminosite, INPUT);

  //----------------------------------------------------SPIFFS
  if(!SPIFFS.begin())
  {
    Serial.println("Erreur SPIFFS...");
    return;
  }

  File root = SPIFFS.open("/");
  File file = root.openNextFile();

  while(file)
  {
    Serial.print("File: ");
    Serial.println(file.name());
    file.close();
    file = root.openNextFile();
  }

  //----------------------------------------------------WIFI
  WiFi.begin(ssid, password);
	Serial.print("Tentative de connexion...");
	
	while(WiFi.status() != WL_CONNECTED)
	{
		Serial.print(".");
		delay(100);
	}
	
	Serial.println("\n");
	Serial.println("Connexion etablie!");
	Serial.print("Adresse IP: ");
	Serial.println(WiFi.localIP());

  //----------------------------------------------------SERVER
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/w3.css", "text/css");
  });

  server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/script.js", "text/javascript");
  });

  server.on("/lireLuminosite", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    int val = analogRead(capteurLuminosite);
    String luminosite = String(val);
    request->send(200, "text/plain", luminosite);
  });

  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led, HIGH);
    request->send(200);
  });

  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led, LOW);
    request->send(200);
  });

  server.begin();
  Serial.println("Serveur actif!");
}

void loop()
{

}

Cet article contient des liens affiliés. Cela signifie que je gagne une certaine commission sur les produits achetés à partir de ces liens. C’est majoritairement ainsi que je peux financer mes projets et partager gratuitement mes vidéos sur le web. Alors je souhaite remercier tous ceux qui me soutiennent. C’est grâce à vous que ces vidéos sont possibles!

TIMESTAMPS:

LE CODE:

HTML

CSS

JAVASCRIPT

C++

Plus d'articles: