Een eenvoudige webserver bouwen met M5Stack ATOM S3 en ATOMIC PoE W5500

Hardwarevereisten:

• M5Stack ATOM S3
• M5Stack Ethernet Module (of compatibel)
• USB Type-C-kabel voor programmeren
• Ethernet-kabel voor netwerkverbinding

M5Stack ATOMIC PoE Basis W5500

Bekijk product

M5Stack ATOMEN3

Bekijk product

Softwarevereisten:

• Arduino IDE (met ESP32 bordondersteuning)
• M5Stack-bibliotheek voor ATOM S3

#include "M5AtomS3.h"
#include 
#include 

#definieer SCK 5
#definieer MISO 7
#definieer MOSI 8
#define CS 6

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; // MAC-adres (vaak overschreven door DHCP)
IPAddress ip(192, 168, 1, 177); // Statisch IP-adres (niet gebruikt in dit DHCP-ingeschakelde voorbeeld)

EthernetServer server(80); // Maak een serverobject op poort 80 (HTTP)

lege instellingen() {
    automatische cfg = M5.config();
    AtomS3.begin(cfg);

    AtomS3.Display.setTextColor(GREEN);
    AtomS3.Display.setTextDatum(midden_centrum);
    AtomS3.Display.setFont(&fonts::Orbitron_Light_24);
    AtomS3.Display.setTextSize(1);

    SPI.begin(SCK, MISO, MOSI, -1); // Initialiseer SPI-communicatie voor Ethernet
    Ethernet.init(CS); // Initialiseer de Ethernet-chip met de CS-pin

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

    while (Ethernet.begin(mac) != 1) { // Probeer een IP-adres te krijgen via DHCP
        Serial.println("Fout bij het verkrijgen van IP-adres via DHCP, probeer opnieuw...");
        vertraging(1000);
    }

    // Check for Ethernet hardware present
    if (Ethernet.hardwareStatus() == EthernetNoHardware) {
        Serial.println("Ethernet shield werd niet gevonden. Sorry, kan niet draaien zonder hardware. :(");
        terwijl (waar) {
            vertraging(1); // doe niets, geen zin om te draaien zonder Ethernet-hardware
        }
    }
    if (Ethernet.linkStatus() == LinkOFF) {
        Serial.println("Ethernet-kabel is niet verbonden.");
    }


    server.begin(); // Start de server
    Serial.print("server is op ");
    Serial.println(Ethernet.localIP()); // Print het toegewezen IP-adres
    AtomS3.Display.setTextSize(0.5);
    AtomS3.Display.clear();
    AtomS3.Display.drawString(Ethernet.localIP().toString().c_str(), AtomS3.Display.width() / 2, 60); // Toon IP op het scherm
}


lege lus() {
    EthernetClient client = server.available(); // Controleer op een nieuwe clientverbinding
    if (client) { // Als er een client is verbonden
        Serial.println("nieuwe client");
        boolean currentLineIsBlank = true;
        while (client.connected()) { // Terwijl de client nog steeds verbonden is
            if (client.available()) { // Als de client gegevens heeft verzonden
                char c = client.read(); // Lees een teken van de client
                Serial.write(c); // Print het teken naar de Serial Monitor

                if (c == '\n' && currentLineIsBlank) { // Controleer op het einde van de HTTP-aanroep
                    // Send HTTP response
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Verbinding: sluiten");
                    client.println("Vernieuwen: 5"); // Vernieuw de pagina elke 5 seconden
                    client.println(); // Lege regel om het einde van de header aan te geven
                    cliënt.println("");
                    client.println("");
                    client.print("Hallo M5Stack LAN Module!");
                    cliënt.println("");
                    break; // Verlaat de binnenste while-lus (verzoek verwerkt)
                }
                als (c == '\n') {
                    currentLineIsBlank = true;
                } else if (c != '\r') {
                    currentLineIsBlank = false;
                }
            }
        }
        vertraging(1);
        client.stop(); // Sluit de clientverbinding
        Serial.println("client disconnected");
    }
}

Gedetailleerde Uitleg:

1. Inclusief: De code begint met het opnemen van de noodzakelijke bibliotheken: M5AtomS3.h voor de ATOM S3, SPI.h voor SPI-communicatie (gebruikt door de Ethernet-module) en M5_Ethernet.h voor Ethernet-functionaliteit.

2. Definities: De #define-instructies definiëren de SPI-pinnen die door de Ethernet-module worden gebruikt. Deze zijn cruciaal voor een goede communicatie.

3. MAC-adres: byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; declareert een MAC-adres. Hoewel dit is opgenomen, wordt dit vaak overschreven door de DHCP-server wanneer het apparaat verbinding maakt met het netwerk.

4. IP-adres: IPAddress ip(192, 168, 1, 177); definieert een statisch IP-adres. In dit voorbeeld wordt echter DHCP gebruikt, dus dit statische IP is niet daadwerkelijk aan het apparaat toegewezen. Het is een tijdelijke aanduiding.

5. Ethernet Server: EthernetServer server(80); maakt een instantie van de EthernetServer-klasse aan, die luistert naar binnenkomende verbindingen op poort 80 (de standaard HTTP-poort).
6. set up() functie:

• auto cfg = M5.config(); AtomS3.begin(cfg);: Initialiseert de M5 ATOM S3 hardware.
• De volgende regels configureren de weergave voor het afdrukken van tekst: kleur, uitlijning, lettertype en grootte instellen.
• SPI.begin(SCK, MISO, MOSI, -1); initialiseert de SPI-communicatie met de gedefinieerde pinnen. De -1 geeft aan dat er geen specifieke chip select pin door de SPI-bibliotheek zelf wordt beheerd.
• Ethernet.init(CS); initialiseert de Ethernet-chip met behulp van de opgegeven chipselect (CS) pin.
• AtomS3.Display.drawString("Init...", AtomS3.Display.width() / 2, 60); toont "Init..." op het ATOM S3-scherm om aan te geven dat de initialisatie bezig is.
• De while (Ethernet.begin(mac) != 1) lus probeert een IP-adres te verkrijgen via DHCP. Het blijft elke seconde opnieuw proberen totdat een geldig IP-adres is ontvangen. Dit is waar de ATOM S3 zijn netwerkadres krijgt.
• De code controleert vervolgens of de Ethernet-hardware aanwezig is en of er een verbinding (kabelverbinding) is tot stand gebracht. Zo niet, dan stopt het programma. Dit is belangrijk voor een robuuste werking.
• server.begin(); start de Ethernet-server, waardoor deze klaar is om inkomende verbindingen te accepteren.
• Het toegewezen IP-adres (verkregen via DHCP) wordt afgedrukt op de Seriële Monitor en weergegeven op het scherm van de ATOM S3.

• HTTP/1.1 200 OK: Een standaard HTTP-respons die succes aangeeft. * Content-Type: text/html: Geeft aan dat de responsbody HTML is. * Connection: close: Vertelt de client dat de verbinding zal worden gesloten nadat de respons is verzonden. Dit is een eenvoudige benadering; persistente verbindingen kunnen worden gebruikt voor efficiëntere communicatie. * Refresh: 5: Deze header instrueert de browser om de pagina elke 5 seconden te verversen. Dit creëert een dynamisch effect. * Een lege regel (client.println();) is cruciaal; het scheidt de HTTP-headers van de daadwerkelijke inhoud. * De HTML-inhoud wordt vervolgens verzonden:

  Hello M5Stack LAN Module!

  . Dit is de eenvoudige HTML die in de browser zal worden weergegeven. * break; verlaat de binnenste while (client.connected()) lus omdat de respons is verzonden. * De code behandelt vervolgens de logica voor het detecteren van het einde van de HTTP-aanroep. if (c == '\n') controleert op een nieuwe regelkarakter, wat het begin van een nieuwe regel in de aanvraag aangeeft. currentLineIsBlank wordt ingesteld op true wanneer een nieuwe regel wordt aangetroffen. else if (c != '\r') controleert of het teken geen carriage return is. Als het geen carriage return is, betekent dit dat er gegevens op de huidige regel staan, dus currentLineIsBlank wordt ingesteld op false. Deze logica detecteert effectief de lege regel die het einde van de HTTP-headers aangeeft. * delay(1); biedt een kleine vertraging, zodat de browser tijd heeft om de ontvangen gegevens te verwerken. * client.stop(); sluit de verbinding met de client. * Serial.println("client disconnected"); print een bericht naar de Serial Monitor dat aangeeft dat de client is losgekoppeld.

Verbeteringen en Verdere Ontwikkeling:

• Dynamische Inhoud: De huidige HTML is statisch. Je kunt dynamische inhoud genereren met behulp van variabelen en logica binnen je Arduino-code. Bijvoorbeeld, je zou sensorwaarden kunnen weergeven, actuatoren kunnen aansturen, of de huidige tijd kunnen tonen.
• Omgaan met Verschillende Verzoeken: De code reageert momenteel op elk verzoek met dezelfde HTML. Je kunt logica implementeren om verschillende HTTP-methoden (GET, POST, enz.) en verschillende URL's te verwerken, zodat je een complexere webinterface kunt creëren.
• HTML Formulieren en Gebruikers Invoer: Voeg HTML-formulieren toe aan uw webpagina om gebruikers in staat te stellen gegevens in te voeren. U kunt deze gegevens vervolgens verwerken op de ATOM S3 en gebruiken om uw apparaten te bedienen.
• WebSockets: Voor real-time communicatie, overweeg het gebruik van WebSockets in plaats van HTTP. WebSockets maken bidirectionele communicatie tussen de client en de server mogelijk, wat essentieel is voor interactieve applicaties.
• Beveiliging: Voor productieomgevingen is beveiliging cruciaal. Implementeer authenticatie- en autorisatiemechanismen om uw apparaat en gegevens te beschermen.
• Bestandssysteem Integratie: Sla HTML-, CSS- en JavaScript-bestanden op een SD-kaart of flashgeheugen op en serveer ze vanaf de ATOM S3. Dit stelt je in staat om meer geavanceerde webinterfaces te creëren.
• AJAX en JavaScript: Gebruik AJAX (Asynchronous JavaScript and XML) om delen van de webpagina dynamisch bij te werken zonder een volledige pagina herladen. Dit verbetert de gebruikerservaring.
• mDNS (Multicast DNS): Gebruik mDNS om je ATOM S3 een leesbare naam te geven op het lokale netwerk, waardoor het gemakkelijker toegankelijk is.
• Foutafhandeling: Implementeer robuuste foutafhandeling om situaties zoals netwerkverbindingen of ongeldige gebruikersinvoer op een elegante manier te beheren.
• OTA (Over-The-Air) Updates: Implementeer OTA-updates om u in staat te stellen de firmware van uw ATOM S3 op afstand bij te werken.

Probleemoplossing:

• Geen IP Adres: Controleer uw netwerkverbinding, zorg ervoor dat DHCP is ingeschakeld op uw router, en controleer of de Ethernet-module correct is aangesloten op de ATOM S3.
• Kan niet verbinden: Controleer het IP-adres van de ATOM S3, zorg ervoor dat deze zich op hetzelfde netwerk bevindt als uw computer, en controleer of er geen firewalls zijn die de verbinding blokkeren.
• Problemen met de Seriële Monitor: Zorg ervoor dat de baudrate in de Seriële Monitor overeenkomt met de baudrate die in uw code wordt gebruikt (meestal 115200).