Bygga en enkel webbserver med M5Stack ATOM S3 och ATOMIC PoE W5500

Hårdvarukrav:

• M5Stack ATOM S3
• M5Stack Ethernet-modul (eller kompatibel)
• USB Type-C-kabel för programmering
• Ethernetkabel för nätverksanslutning

M5Stack ATOMIC PoE Bas W5500

Visa produkt

M5Stack ATOMS3

Visa produkt

Mjukvarukrav:

• Arduino IDE (med ESP32-stöd)
• M5Stack-bibliotek för ATOM S3

#include "M5AtomS3.h"
#include <SPI.h>
#include <M5_Ethernet.h>

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

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; // MAC-adress (överskrivs ofta av DHCP)
IPAddress ip(192, 168, 1, 177); // Statisk IP-adress (används inte i detta DHCP-aktiverade exempel)

EthernetServer server(80); // Skapa ett serverobjekt på port 80 (HTTP)

void setup() {
    auto cfg = M5.config();
    AtomS3.begin(cfg);

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

    SPI.begin(SCK, MISO, MOSI, -1); // Initiera SPI-kommunikation för Ethernet
    Ethernet.init(CS); // Initiera Ethernet-chipet med CS-stiftet

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

    while (Ethernet.begin(mac) != 1) { // Försök att få en IP-adress via DHCP
        Serial.println("Fel vid hämtning av IP-adress via DHCP, försöker igen...");
        delay(1000);
    }

    // Check for Ethernet hardware present
    if (Ethernet.hardwareStatus() == EthernetNoHardware) {
        Serial.println("Ethernet-sköld hittades inte. Tyvärr, kan inte köras utan hårdvara. :(");
        while (true) {
            delay(1); // gör ingenting, ingen mening att köra utan Ethernet-hårdvara
        }
    }
    if (Ethernet.linkStatus() == LinkOFF) {
        Serial.println("Ethernet-kabeln är inte ansluten.");
    }


    server.begin(); // Starta servern
    Serial.print("servern är på ");
    Serial.println(Ethernet.localIP()); // Skriv ut den tilldelade IP-adressen
    AtomS3.Display.setTextSize(0.5);
    AtomS3.Display.clear();
    AtomS3.Display.drawString(Ethernet.localIP().toString().c_str(), AtomS3.Display.width() / 2, 60); // Visa IP på skärmen
}


void loop() {
    EthernetClient client = server.available(); // Kontrollera om en ny klientanslutning finns
    if (client) { // Om en klient är ansluten
        Serial.println("ny klient");
        boolean currentLineIsBlank = true;
        while (client.connected()) { // Medan klienten fortfarande är ansluten
            if (client.available()) { // Om klienten har skickat data
                char c = client.read(); // Läs ett tecken från klienten
                Serial.write(c); // Skriv ut tecknet till Serial Monitor

                if (c == '\\n' && currentLineIsBlank) { // Kontrollera slutet på HTTP-förfrågan
                    // Send HTTP response
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println("Refresh: 5"); // Uppdatera sidan var 5:e sekund
                    client.println(); // Tom rad för att signalera slutet på headern
                    client.println("");
                    client.println("");
                    client.print("Hello M5Stack LAN Module!");
                    client.println("");
                    break; // Avsluta den inre while-loopen (förfrågan behandlad)
                }
                if (c == '\\n') {
                    currentLineIsBlank = true;
                } else if (c != '\\r') {
                    currentLineIsBlank = false;
                }
            }
        }
        delay(1);
        client.stop(); // Stänger klientanslutningen
        Serial.println("client disconnected");
    }
}

Detaljerad förklaring:

1. Inkluderingar: Koden börjar med att inkludera nödvändiga bibliotek: M5AtomS3.h för ATOM S3, SPI.h för SPI-kommunikation (används av Ethernet-modulen) och M5_Ethernet.h för Ethernet-funktionalitet.

2. Definitioner: #define-satserna definierar SPI-pinnarna som används av Ethernet-modulen. Dessa är avgörande för korrekt kommunikation.

3. MAC-adress: byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; deklarerar en MAC-adress. Även om den inkluderas, överskrivs den ofta av DHCP-servern när enheten ansluter till nätverket.

4. IP-adress: IPAddress ip(192, 168, 1, 177); definierar en statisk IP-adress. I detta exempel används dock DHCP, så denna statiska IP tilldelas inte enheten. Det är en platshållare.

5. Ethernet Server: EthernetServer server(80); skapar en instans av klassen EthernetServer, som lyssnar efter inkommande anslutningar på port 80 (standard HTTP-port).
6. ställer in funktionen setup():

• auto cfg = M5.config(); AtomS3.begin(cfg);: Initierar M5 ATOM S3-hårdvaran.
• Följande rader konfigurerar displayen för att visa text: ställer in färg, justering, typsnitt och storlek.
• SPI.begin(SCK, MISO, MOSI, -1); initierar SPI-kommunikationen med de definierade pinnarna. -1 indikerar att ingen specifik chip select-pin hanteras av SPI-biblioteket självt.
• Ethernet.init(CS); initierar Ethernet-chippet med den angivna chip select (CS)-pinnen.
• AtomS3.Display.drawString("Init...", AtomS3.Display.width() / 2, 60); visar "Init..." på ATOM S3-skärmen för att indikera att initialisering pågår.
• while (Ethernet.begin(mac) != 1)-loopen försöker erhålla en IP-adress via DHCP. Den fortsätter att försöka varje sekund tills en giltig IP mottas. Här får ATOM S3 sin nätverksadress.
• Koden kontrollerar sedan om Ethernet-hårdvaran finns och om en länk (kabelanslutning) är etablerad. Om inte, stoppas programmet. Detta är viktigt för robust drift.
• server.begin(); startar Ethernet-servern och gör den redo att ta emot inkommande anslutningar.
• Den tilldelade IP-adressen (hämtad via DHCP) skrivs ut till Serial Monitor och visas på ATOM S3:s skärm.

• HTTP/1.1 200 OK: Ett standard HTTP-svar som indikerar framgång. * Content-Type: text/html: Anger att svarskroppen är HTML. * Connection: close: Meddelar klienten att anslutningen kommer att stängas efter att svaret har skickats. Detta är en enkel metod; persistenta anslutningar kan användas för effektivare kommunikation. * Refresh: 5: Denna header instruerar webbläsaren att uppdatera sidan var 5:e sekund. Detta skapar en dynamisk effekt. * En tom rad (client.println();) är avgörande; den separerar HTTP-headerna från det faktiska innehållet. * HTML-innehållet skickas sedan:

  Hello M5Stack LAN Module!

  . Detta är den enkla HTML som kommer att visas i webbläsaren. * break; avslutar den inre while (client.connected())-loopen eftersom svaret har skickats. * Koden hanterar sedan logiken för att upptäcka slutet på HTTP-förfrågan. if (c == '\n') kontrollerar om det är ett radbrytningstecken, vilket indikerar början på en ny rad i förfrågan. currentLineIsBlank sätts till true när en radbrytning påträffas. else if (c != '\r') kontrollerar om tecknet inte är en vagnretur. Om det inte är en vagnretur betyder det att det finns data på den aktuella raden, så currentLineIsBlank sätts till false. Denna logik upptäcker effektivt den tomma raden som signalerar slutet på HTTP-headerna. * delay(1); ger en liten fördröjning, vilket ger webbläsaren tid att bearbeta den mottagna datan. * client.stop(); stänger anslutningen med klienten. * Serial.println("client disconnected"); skriver ut ett meddelande till Serial Monitor som indikerar att klienten har kopplats från.

Förbättringar och vidare utveckling:

• Dynamiskt innehåll: Den nuvarande HTML-koden är statisk. Du kan generera dynamiskt innehåll med hjälp av variabler och logik i din Arduino-kod. Till exempel kan du visa sensoravläsningar, styra aktuatorer eller visa aktuell tid.
• Hantera olika förfrågningar: Koden svarar för närvarande på alla förfrågningar med samma HTML. Du kan implementera logik för att hantera olika HTTP-metoder (GET, POST, etc.) och olika URL:er, vilket gör att du kan skapa ett mer komplext webbgränssnitt.
• HTML Formulär och Användarinmatning: Lägg till HTML-formulär på din webbsida för att låta användare mata in data. Du kan sedan bearbeta denna data på ATOM S3 och använda den för att styra dina enheter.
• WebSockets: För realtidskommunikation, överväg att använda WebSockets istället för HTTP. WebSockets möjliggör tvåvägskommunikation mellan klienten och servern, vilket är avgörande för interaktiva applikationer.
• Säkerhet: För produktionsmiljöer är säkerhet avgörande. Implementera autentiserings- och auktoriseringsmekanismer för att skydda din enhet och data.
• Filssystem Integration: Lagra HTML-, CSS- och JavaScript-filer på ett SD-kort eller flashminne och servera dem från ATOM S3. Detta gör att du kan skapa mer avancerade webbgränssnitt.
• AJAX och JavaScript: Använd AJAX (Asynchronous JavaScript and XML) för att dynamiskt uppdatera delar av webbsidan utan att behöva ladda om hela sidan. Detta förbättrar användarupplevelsen.
• mDNS (Multicast DNS): Använd mDNS för att ge din ATOM S3 ett lättläst namn på det lokala nätverket, vilket gör det enklare att komma åt den.
• Felhanteing: Implementera robust felhantering för att smidigt hantera situationer som nätverksavbrott eller ogiltig användarinmatning.
• OTA (Over-The-Air) Uppdateringar: Implementera OTA-uppdateringar för att kunna uppdatera firmware på din ATOM S3 på distans.

Felsökning:

• Ingen IP Adress: Kontrollera din nätverksanslutning, se till att DHCP är aktiverat på din router och verifiera att Ethernet-modulen är korrekt ansluten till ATOM S3.
• Kan inte ansluta: Dubbelkolla IP-adressen för ATOM S3, se till att den är på samma nätverk som din dator och verifiera att inga brandväggar blockerar anslutningen.
• Problem med Serial Monitor: Se till att baudraten i Serial Monitor matchar baudraten som används i din kod (vanligtvis 115200).