Construire un serveur Web simple avec M5Stack ATOM S3 et ATOMIC PoE W5500

Exigences matérielles :

• M5Stack ATOM S3
• Module Ethernet M5Stack (ou compatible)
• Câble USB Type-C pour programmation
• Câble Ethernet pour connexion réseau

M5Stack ATOMIC PoE Base W5500

Voir le produit

M5Stack ATOMS3

Voir le produit

Exigences logicielles :

• Arduino IDE (avec support de la carte ESP32)
• Bibliothèque M5Stack pour ATOM S3

#include "M5AtomS3.h"
#include 
#include 

#définir SCK 5
#définition du MISO 7
#définir MOSI 8
#définir CS 6

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; // adresse MAC (souvent remplacée par DHCP)
IPAddress ip(192, 168, 1, 177); // Adresse IP statique (non utilisée dans cet exemple activé par DHCP)

EthernetServer serveur(80); // Créer un objet serveur sur le port 80 (HTTP)

configuration vide() {
    auto cfg = M5.config();
    AtomS3.begin(cfg);

    AtomS3.Display.setTextColor(VERTE);
    AtomS3.Display.setTextDatum(middle_center);
    AtomS3.Display.setFont(&fonts::Orbitron_Light_24);
    AtomS3.Display.setTextSize(1);

    SPI.begin(SCK, MISO, MOSI, -1); // Initialiser la communication SPI pour Ethernet
    Ethernet.init(CS); // Initialiser la puce Ethernet avec la broche CS

    AtomS3.Display.drawString("Init...", AtomS3.Display.width() / 2, 60);

    while (Ethernet.begin(mac) != 1) { // Essayer d'obtenir une adresse IP via DHCP
        Serial.println("Erreur lors de l'obtention de l'adresse IP via DHCP, nouvelle tentative...");
        délai(1000);
    }

    // Check for Ethernet hardware present
    if (Ethernet.hardwareStatus() == EthernetNoHardware) {
        Serial.println("Le bouclier Ethernet n'a pas été trouvé. Désolé, je ne peux pas fonctionner sans matériel. :(");
        tandis que (vrai) {
            delay(1); // ne rien faire, aucun intérêt à exécuter sans matériel Ethernet
        }
    }
    if (Ethernet.linkStatus() == LinkOFF) {
        Serial.println("Le câble Ethernet n'est pas connecté.");
    }


    server.begin(); // Démarrer le serveur
    Serial.print("le serveur est à ");
    Serial.println(Ethernet.localIP()); // Imprimer l'adresse IP assignée
    AtomS3.Display.setTextSize(0.5);
    AtomS3.Display.clear();
    AtomS3.Display.drawString(Ethernet.localIP().toString().c_str(), AtomS3.Display.width() / 2, 60); // Afficher l'IP à l'écran
}


boucle vide() {
    EthernetClient client = server.available(); // Vérifier la connexion d'un nouveau client
    if (client) { // Si un client est connecté
        Serial.println("nouveau client");
        boolean currentLineIsBlank = true;
        while (client.connected()) { // Tant que le client est encore connecté
            if (client.available()) { // Si le client a envoyé des données
                char c = client.read(); // Lire un caractère du client
                Serial.write(c); // Imprimer le caractère sur le Moniteur Série

                if (c == '\n' && currentLineIsBlank) { // Vérifiez la fin de la requête HTTP
                    // Send HTTP response
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println("Rafraîchir : 5"); // Rafraîchir la page toutes les 5 secondes
                    client.println(); // Ligne vide pour signaler la fin de l'en-tête
                    client.println("");
                    client.println("");
                    client.print("Bonjour M5Stack LAN Module !");
                    client.println("");
                    break; // Quitter la boucle while intérieure (demande traitée)
                }
                si (c == '\n') {
                    currentLineIsBlank = true;
                } sinon si (c != '\r') {
                    currentLineIsBlank = false;
                }
            }
        }
        retard(1);
        client.stop(); // Fermer la connexion du client
        Serial.println("client déconnecté");
    }
}

Explication détaillée :

1. Comprend : Le code commence par inclure les bibliothèques nécessaires : M5AtomS3.h pour l'ATOM S3, SPI.h pour la communication SPI (utilisée par le module Ethernet), et M5_Ethernet.h pour la fonctionnalité Ethernet.

2. Définit : Les déclarations #define définissent les broches SPI utilisées par le module Ethernet. Celles-ci sont cruciales pour une communication correcte.

3. Adresse MAC : byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; déclare une adresse MAC. Bien qu'incluse, cela est souvent remplacé par le serveur DHCP lorsque l'appareil se connecte au réseau.

4. Adresse IP : IPAddress ip(192, 168, 1, 177); définit une adresse IP statique. Cependant, dans cet exemple, DHCP est utilisé, donc cette adresse IP statique n'est pas réellement assignée à l'appareil. C'est un espace réservé.

5. Serveur Ethernet : EthernetServer server(80); crée une instance de la classe EthernetServer, qui écoute les connexions entrantes sur le port 80 (le port HTTP standard).
6. fonction set up() :

• auto cfg = M5.config(); AtomS3.begin(cfg);: Initialise le matériel M5 ATOM S3.
• Les lignes suivantes configurent l'affichage pour la sortie de texte : réglage de la couleur, de l'alignement, de la police et de la taille.
• SPI.begin(SCK, MISO, MOSI, -1); initialise la communication SPI en utilisant les broches définies. Le -1 indique qu'aucune broche de sélection de puce spécifique n'est gérée par la bibliothèque SPI elle-même.
• Ethernet.init(CS); initialise la puce Ethernet en utilisant la broche de sélection de puce (CS) spécifiée.
• AtomS3.Display.drawString("Init...", AtomS3.Display.width() / 2, 60); affiche "Init..." sur l'écran ATOM S3 pour indiquer que l'initialisation est en cours.
• La boucle while (Ethernet.begin(mac) != 1) tente d'obtenir une adresse IP via DHCP. Elle continue de réessayer chaque seconde jusqu'à ce qu'une adresse IP valide soit reçue. C'est ici que l'ATOM S3 obtient son adresse réseau.
• Le code vérifie ensuite si le matériel Ethernet est présent et si un lien (connexion par câble) est établi. Sinon, le programme s'arrête. Cela est important pour un fonctionnement robuste.
• server.begin(); démarre le serveur Ethernet, le rendant prêt à accepter les connexions entrantes.
• L'adresse IP assignée (obtenue via DHCP) est imprimée sur le Moniteur Série et affichée sur l'écran de l'ATOM S3.

• HTTP/1.1 200 OK: Une réponse HTTP standard indiquant le succès. * Content-Type: text/html: Spécifie que le corps de la réponse est en HTML. * Connection: close: Indique au client que la connexion sera fermée après l'envoi de la réponse. C'est une approche simple ; des connexions persistantes pourraient être utilisées pour une communication plus efficace. * Refresh: 5: Cet en-tête demande au navigateur de rafraîchir la page toutes les 5 secondes. Cela crée un effet dynamique. * Une ligne vide (client.println();) est cruciale ; elle sépare les en-têtes HTTP du contenu réel. * Le contenu HTML est ensuite envoyé :

  Hello M5Stack LAN Module!

  . C'est le simple HTML qui sera affiché dans le navigateur. * break; sort de la boucle interne while (client.connected()) car la réponse a été envoyée. * Le code gère ensuite la logique pour détecter la fin de la requête HTTP. if (c == '\n') vérifie la présence d'un caractère de nouvelle ligne, indiquant le début d'une nouvelle ligne dans la requête. currentLineIsBlank est défini sur true lorsqu'une nouvelle ligne est rencontrée. else if (c != '\r') vérifie si le caractère n'est pas un retour chariot. S'il ne s'agit pas d'un retour chariot, cela signifie qu'il y a des données sur la ligne actuelle, donc currentLineIsBlank est défini sur false. Cette logique détecte efficacement la ligne vide qui signale la fin des en-têtes HTTP. * delay(1); fournit un petit délai, permettant au navigateur de traiter les données reçues. * client.stop(); ferme la connexion avec le client. * Serial.println("client disconnected"); imprime un message sur le Moniteur Série indiquant que le client s'est déconnecté.

Améliorations et Développement Supplémentaire :

• Contenu Dynamique : Le HTML actuel est statique. Vous pouvez générer du contenu dynamique en utilisant des variables et de la logique dans votre code Arduino. Par exemple, vous pourriez afficher les lectures de capteurs, contrôler des actionneurs ou montrer l'heure actuelle.
• Gestion des demandes différentes : Le code répond actuellement à toute demande avec le même HTML. Vous pouvez implémenter une logique pour gérer différentes méthodes HTTP (GET, POST, etc.) et différentes URL, vous permettant de créer une interface web plus complexe.
• HTML Formulaires et Saisie Utilisateur: Ajoutez des formulaires HTML à votre page web pour permettre aux utilisateurs de saisir des données. Vous pouvez ensuite traiter ces données sur l'ATOM S3 et les utiliser pour contrôler vos appareils.
• WebSockets : Pour la communication en temps réel, envisagez d'utiliser WebSockets au lieu de HTTP. Les WebSockets permettent une communication bidirectionnelle entre le client et le serveur, ce qui est essentiel pour les applications interactives.
• Sécurité : Pour les environnements de production, la sécurité est cruciale. Mettez en œuvre des mécanismes d'authentification et d'autorisation pour protéger votre appareil et vos données.
• Système de fichiers Intégration : Stockez des fichiers HTML, CSS et JavaScript sur une carte SD ou une mémoire flash et servez-les depuis l'ATOM S3. Cela vous permet de créer des interfaces web plus sophistiquées.
• AJAX et JavaScript : Utilisez AJAX (JavaScript asynchrone et XML) pour mettre à jour des parties de la page web de manière dynamique sans nécessiter un rechargement complet de la page. Cela améliore l'expérience utilisateur.
• mDNS (DNS multicast): Utilisez mDNS pour donner à votre ATOM S3 un nom lisible par l'homme sur le réseau local, facilitant ainsi son accès.
• Gestion des erreurs : Implémentez une gestion des erreurs robuste pour gérer avec élégance des situations telles que les déconnexions réseau ou les entrées utilisateur invalides.
• Mises à jour OTA (Over-The-Air) : Implémentez des mises à jour OTA pour vous permettre de mettre à jour le firmware de votre ATOM S3 à distance.

Dépannage:

• Pas d'adresse IP : Vérifiez votre connexion réseau, assurez-vous que le DHCP est activé sur votre routeur et vérifiez que le module Ethernet est correctement connecté à l'ATOM S3.
• Impossible de se connecter : Vérifiez l'adresse IP de l'ATOM S3, assurez-vous qu'il est sur le même réseau que votre ordinateur et vérifiez qu'il n'y a pas de pare-feu bloquant la connexion.
• Problèmes de Moniteur Série : Assurez-vous que le débit en bauds dans le Moniteur Série correspond au débit en bauds utilisé dans votre code (généralement 115200).