Einen einfachen Webserver mit M5Stack ATOM S3 und ATOMIC PoE W5500 erstellen

Hardware-Anforderungen:

• M5Stack ATOM S3
• M5Stack Ethernet-Modul (oder kompatibel)
• USB Type-C-Kabel zum Programmieren
• Ethernet-Kabel für Netzwerkverbindung

M5Stack ATOMIC PoE Basis W5500

Produkt anzeigen

M5Stack ATOMS3

Produkt anzeigen

Software Anforderungen:

• Arduino IDE (mit ESP32-Board-Unterstützung)
• M5Stack-Bibliothek für ATOM S3

#include "M5AtomS3.h"
#include 
#include 

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

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; // MAC-Adresse (wird oft von DHCP überschrieben)
IPAddress ip(192, 168, 1, 177); // Statische IP-Adresse (in diesem DHCP-aktivierten Beispiel ungenutzt)

EthernetServer server(80); // Erstelle ein Serverobjekt auf Port 80 (HTTP)

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

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

    SPI.begin(SCK, MISO, MOSI, -1); // Initialisiere die SPI-Kommunikation für Ethernet
    Ethernet.init(CS); // Initialisiere den Ethernet-Chip mit dem CS-Pin

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

    while (Ethernet.begin(mac) != 1) { // Versuche, eine IP-Adresse über DHCP zu erhalten
        Serial.println("Fehler beim Abrufen der IP-Adresse über DHCP, versuche es erneut...");
        Verzögerung (1000);
    }

    // Check for Ethernet hardware present
    if (Ethernet.hardwareStatus() == EthernetNoHardware) {
        Serial.println("Ethernet-Schild wurde nicht gefunden. Entschuldigung, kann ohne Hardware nicht ausgeführt werden. :(");
        während (wahr) {
            delay(1); // nichts tun, es hat keinen Sinn, ohne Ethernet-Hardware zu laufen
        }
    }
    if (Ethernet.linkStatus() == LinkOFF) {
        Serial.println("Ethernet-Kabel ist nicht verbunden.");
    }


    server.begin(); // Server starten
    Serial.print("Server ist erreichbar unter ");
    Serial.println(Ethernet.localIP()); // Drucke die zugewiesene IP-Adresse
    AtomS3.Display.setTextSize(0.5);
    AtomS3.Display.clear();
    AtomS3.Display.drawString(Ethernet.localIP().toString().c_str(), AtomS3.Display.width() / 2, 60); // IP auf dem Bildschirm anzeigen
}


void schleife() {
    EthernetClient client = server.available(); // Überprüfen Sie die Verbindung eines neuen Clients
    if (client) { // Wenn ein Client verbunden ist
        Serial.println("neuer Client");
        boolean currentLineIsBlank = true;
        while (client.connected()) { // Während der Client noch verbunden ist
            if (client.available()) { // Wenn der Client Daten gesendet hat
                char c = client.read(); // Lese ein Zeichen vom Client
                Serial.write(c); // Drucke das Zeichen auf den Serial Monitor

                if (c == '\n' && currentLineIsBlank) { // Überprüfen, ob das Ende der HTTP-Anfrage erreicht ist
                    // Send HTTP response
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Verbindung: schließen");
                    client.println("Aktualisieren: 5"); // Aktualisieren Sie die Seite alle 5 Sekunden
                    client.println(); // Leere Zeile, um das Ende des Headers zu signalisieren
                    client.println("");
                    client.println("");
                    client.print("Hallo M5Stack LAN-Modul!");
                    client.println("");
                    break; // Verlasse die innere while-Schleife (Anfrage verarbeitet)
                }
                wenn (c == '\n') {
                    currentLineIsBlank = true;
                } sonst wenn (c != '\r') {
                    currentLineIsBlank = false;
                }
            }
        }
        Verzögerung(1);
        client.stop(); // Schließe die Client-Verbindung
        Serial.println("Client getrennt");
    }
}

Detaillierte Erklärung:

1. Enthält: Der Code beginnt mit dem Einbinden notwendiger Bibliotheken: M5AtomS3.h für den ATOM S3, SPI.h für die SPI-Kommunikation (verwendet vom Ethernet-Modul) und M5_Ethernet.h für die Ethernet-Funktionalität.

2. Definiert: Die #define-Anweisungen definieren die SPI-Pins, die vom Ethernet-Modul verwendet werden. Diese sind entscheidend für eine ordnungsgemäße Kommunikation.

3. MAC-Adresse: byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x99}; deklariert eine MAC-Adresse. Während sie enthalten ist, wird sie oft vom DHCP-Server überschrieben, wenn das Gerät mit dem Netzwerk verbunden wird.

4. IP-Adresse: IPAddress ip(192, 168, 1, 177); definiert eine statische IP-Adresse. In diesem Beispiel wird jedoch DHCP verwendet, sodass diese statische IP-Adresse tatsächlich nicht dem Gerät zugewiesen ist. Es ist ein Platzhalter.

5. Ethernet-Server: EthernetServer server(80); erstellt eine Instanz der EthernetServer-Klasse, die auf eingehende Verbindungen am Port 80 (dem Standard-HTTP-Port) hört.
6. set up()-Funktion:

• auto cfg = M5.config(); AtomS3.begin(cfg);: Initialisiert die M5 ATOM S3 Hardware.
• Die folgenden Zeilen konfigurieren die Anzeige für die Ausgabe von Text: Farbe, Ausrichtung, Schriftart und Größe einstellen.
• SPI.begin(SCK, MISO, MOSI, -1); initialisiert die SPI-Kommunikation mit den definierten Pins. Die -1 zeigt an, dass kein spezifischer Chip-Select-Pin von der SPI-Bibliothek selbst verwaltet wird.
• Ethernet.init(CS); initialisiert den Ethernet-Chip mit dem angegebenen Chip-Select (CS) Pin.
• AtomS3.Display.drawString("Init...", AtomS3.Display.width() / 2, 60); zeigt "Init..." auf dem ATOM S3 Bildschirm an, um anzuzeigen, dass die Initialisierung im Gange ist.
• Die while (Ethernet.begin(mac) != 1) Schleife versucht, eine IP-Adresse über DHCP zu erhalten. Sie versucht es jede Sekunde erneut, bis eine gültige IP empfangen wird. Hier erhält der ATOM S3 seine Netzwerkadresse.
• Der Code überprüft dann, ob die Ethernet-Hardware vorhanden ist und ob eine Verbindung (Kabelverbindung) hergestellt ist. Wenn nicht, stoppt das Programm. Dies ist wichtig für einen robusten Betrieb.
• server.begin(); startet den Ethernet-Server und macht ihn bereit, eingehende Verbindungen zu akzeptieren.
• Die zugewiesene IP-Adresse (über DHCP erhalten) wird im Serial Monitor ausgegeben und auf dem Bildschirm des ATOM S3 angezeigt.

• HTTP/1.1 200 OK: Eine standardmäßige HTTP-Antwort, die Erfolg anzeigt. * Content-Type: text/html: Gibt an, dass der Antwortinhalt HTML ist. * Connection: close: Informiert den Client, dass die Verbindung nach dem Senden der Antwort geschlossen wird. Dies ist ein einfacher Ansatz; persistente Verbindungen könnten für eine effizientere Kommunikation verwendet werden. * Refresh: 5: Dieser Header weist den Browser an, die Seite alle 5 Sekunden zu aktualisieren. Dies erzeugt einen dynamischen Effekt. * Eine leere Zeile (client.println();) ist entscheidend; sie trennt die HTTP-Header vom eigentlichen Inhalt. * Der HTML-Inhalt wird dann gesendet:

  Hallo M5Stack LAN Modul!

  . Dies ist das einfache HTML, das im Browser angezeigt wird. * break; verlässt die innere while (client.connected()) Schleife, da die Antwort gesendet wurde. * Der Code behandelt dann die Logik zur Erkennung des Endes der HTTP-Anfrage. if (c == '\n') überprüft auf ein Zeilenumbruchzeichen, das den Beginn einer neuen Zeile in der Anfrage anzeigt. currentLineIsBlank wird auf true gesetzt, wenn ein Zeilenumbruch auftritt. else if (c != '\r') überprüft, ob das Zeichen nicht ein Wagenrücklauf ist. Wenn es kein Wagenrücklauf ist, bedeutet das, dass Daten in der aktuellen Zeile vorhanden sind, sodass currentLineIsBlank auf false gesetzt wird. Diese Logik erkennt effektiv die leere Zeile, die das Ende der HTTP-Header signalisiert. * delay(1); sorgt für eine kleine Verzögerung, damit der Browser Zeit hat, die empfangenen Daten zu verarbeiten. * client.stop(); schließt die Verbindung mit dem Client. * Serial.println("client disconnected"); gibt eine Nachricht an den Serial Monitor aus, die anzeigt, dass der Client getrennt wurde.

Verbesserungen und Weiterentwicklungen:

• Dynamischer Inhalt: Der aktuelle HTML-Code ist statisch. Sie können dynamische Inhalte generieren, indem Sie Variablen und Logik in Ihrem Arduino-Code verwenden. Zum Beispiel könnten Sie Sensormesswerte anzeigen, Aktuatoren steuern oder die aktuelle Uhrzeit anzeigen.
• Umgang mit verschiedenen Anfragen: Der Code reagiert derzeit auf jede Anfrage mit demselben HTML. Sie können Logik implementieren, um verschiedene HTTP-Methoden (GET, POST usw.) und verschiedene URLs zu verarbeiten, sodass Sie eine komplexere Weboberfläche erstellen können.
• HTML Formulare und Benutzer Eingaben: Fügen Sie HTML-Formulare zu Ihrer Webseite hinzu, um Benutzern die Eingabe von Daten zu ermöglichen. Sie können diese Daten dann auf dem ATOM S3 verarbeiten und verwenden, um Ihre Geräte zu steuern.
• WebSockets: Für die Echtzeitkommunikation sollten Sie WebSockets anstelle von HTTP in Betracht ziehen. WebSockets ermöglichen die bidirektionale Kommunikation zwischen dem Client und dem Server, was für interaktive Anwendungen unerlässlich ist.
• Sicherheit: In Produktionsumgebungen ist Sicherheit entscheidend. Implementieren Sie Authentifizierungs- und Autorisierungsmechanismen, um Ihr Gerät und Ihre Daten zu schützen.
• Dateisystem Integration: Speichern Sie HTML-, CSS- und JavaScript-Dateien auf einer SD-Karte oder einem Flash-Speicher und stellen Sie sie vom ATOM S3 bereit. Dies ermöglicht es Ihnen, anspruchsvollere Weboberflächen zu erstellen.
• AJAX und JavaScript: Verwenden Sie AJAX (Asynchronous JavaScript and XML), um Teile der Webseite dynamisch zu aktualisieren, ohne dass ein vollständiges Neuladen der Seite erforderlich ist. Dies verbessert die Benutzererfahrung.
• mDNS (Multicast DNS): Verwenden Sie mDNS, um Ihrem ATOM S3 einen menschenlesbaren Namen im lokalen Netzwerk zu geben, was den Zugriff erleichtert.
• Fehlerbehandlung: Implementieren Sie eine robuste Fehlerbehandlung, um Situationen wie Netzwerkunterbrechungen oder ungültige Benutzereingaben elegant zu verwalten.
• OTA (Over-The-Air) Updates: Implementieren Sie OTA-Updates, um die Firmware Ihres ATOM S3 aus der Ferne zu aktualisieren.

Fehlerbehebung:

• Keine IP-Adresse: Überprüfen Sie Ihre Netzwerkverbindung, stellen Sie sicher, dass DHCP auf Ihrem Router aktiviert ist, und vergewissern Sie sich, dass das Ethernet-Modul ordnungsgemäß mit dem ATOM S3 verbunden ist.
• Keine Verbindung: Überprüfen Sie die IP-Adresse des ATOM S3, stellen Sie sicher, dass es sich im selben Netzwerk wie Ihr Computer befindet, und vergewissern Sie sich, dass keine Firewalls die Verbindung blockieren.
• Probleme mit dem Serial Monitor: Stellen Sie sicher, dass die Baudrate im Serial Monitor mit der Baudrate übereinstimmt, die in Ihrem Code verwendet wird (normalerweise 115200).