Anleitung: Einführung zu fipsok.de

Esp8266 und Esp32 - Programmierung mit Arduino IDE - Eine Einführung

Motivation: Die Seiten von Fips finde ich sehr gut, allerdings habe ich mehrere Anläufe gebraucht, die Idee hinter den Seiten zu verstehen. Mit dem folgenden Text möchte ich helfen, die ersten Hürden zu überwinden.

Zielgruppe: Fortgeschrittene Anfänger bei der Arduino-Programmierung, die nun WLAN nutzen möchten.

Tabs: Größere Projekte können für eine bessere Übersichtlichkeit in mehrere Dateien aufgeteilt werden. Die Arduino IDE unterstützt dies durch die Anzeige der Dateien in Tabs. Alle Dateien müssen im selben Projektordner liegen und die Datei Webserver.ino muß den Namen des Projektordners erhalten. Das Einbinden der Projektdateien übernimmt die Arduino IDE.

Welche Tabs man für das eigene Projekt auswählt, hängt von der Aufgabenstellung ab.

WiFi.mode: Möchte man den ESP mit einem Router wie der Fritz!Box verbinden, um auch Zugang zum Internet zu erlangen, verwendet man den Connect Tab. SSID und Passwort sind die des Routers. Der Router vergibt eine IP, die im seriellen Monitor angezeigt wird. Im Browser eines ebenfalls mit dem Router verbundenen PCs wird die vom Router vergebene IP zur Kontaktaufnahme mit dem ESP verwendet.

Der ESP kann aber auch ein von einem Router unabhängiges WLAN erzeugen. Dazu verwendet man den Access Point Tab. SSID und Passwort können frei gewählt werden. Die vom ESP vergebene IP 192.168.4.1 wird im seriellen Monitor angezeigt. Der PC muß zunächst mittels SSID und Passwort mit dem ESP verbunden werden (Win10: Windows-Einstellungen / Netzwerk und Internet / Verfügbare Netzwerke anzeigen). Im Browser des PCs wird die vom ESP vergebene IP zur Kontaktaufnahme mit dem ESP verwendet.

Unabhängig vom WiFi.mode kann der ESP als Client oder Webserver eingesetzt werden.

Dateisystem: Ein Browser erwartet Dateien wie http://192.168.4.1/index.html zur Anzeige. Beim ESP sind die Tabs Esp8266 LittleFS oder Esp32 Spiffs zum Speichern von Dateien vorgesehen. Auch Stylesheets können abgelegt werden. Enthält die html-Datei Javascript, können JSON-Datenpakete zur dynamischen Anzeige von Zuständen verwendet werden.

Alternativ kann der ESP den Inhalt einer Datei auch als Zeichenkette zusammenstellen und diese anstelle eines Dateiinhalts an den Browser schicken. Da immer der ganze Dateiinhalt übertragen wird, kann auf Javascript zur Aktualisierung verzichtet werden. Für den Einstieg ist dies die möglicherweise einfachere Variante.


Beispiel für ESP32: Ein einfaches Beispiel zum Ein- und Ausschalten einer LED soll den Einstieg erleichtern.

  1. Zwischen G13 und GND wird eine LED mit Vorwiderstand 330 Ω geschaltet. Je nach eigener Hardware kann auch ein anderer Pin verwendet werden. Da die eingebaute LED schon in anderen Situationen blinkt, habe ich einen unabhängigen Pin gewählt.

  2. Projektverzeichnis ESP_LEDeinaus anlegen.

  3. Von der Seite Esp32 WebServer Tab die Datei in das Projektverzeichnis kopieren und in ESP_LEDeinaus.ino umbenennen.

  4. Von der Seite Esp32 Access Point Tab die Datei Connect.ino in das Projektverzeichnis kopieren.

  5. Von der Seite Esp32 EspBoardLed Tab die Datei EspBoardLed.ino in das Projektverzeichnis kopieren.

  6. Arduino-IDE mit einer der drei Dateien starten. Die IDE zeigt drei Tabs.

  7. ESP32 per USB mit PC verbinden. In der IDE ESP32 entsprechend der eignen Hardware als Board auswählen, dann den Port wählen.

  8. Änderungen im Tab ESP_LEDeinaus:

— 1. Kommentierung entfernen: #define DEBUGGING

— 2. Kommentierung ergänzen: // spiffs();

— 3. Kommentierung ergänzen: // admin();

— 4. Kommentierung entfernen: espboardLed();

— 5. Kommentierung ergänzen: // if (millis() < 0x2FFF || millis() > 0xFFFFF0FF) runtime();

  1. Änderungen im Tab Connect

— 1. Eventuell Namen ändern: const char *ssid = "Esp32AP";

— 2. Passwort ändern: const char *password = "12345678";

  1. Änderungen im Tab EspBoardLed

— 1. LED-Pin ergänzen: #define LED_BUILTIN 13

  1. Den seriellen Monitor der IDE mit 115200 Baud öffnen.

  2. Projekt speichern, kompilieren und zum ESP32 übertragen.

  3. Nach der Meldung „Hard resetting via RTS pin...“ sollte der serielle Monitor folgenden Text anzeigen:

Sketchname: C:...\Temp\arduino_modified_sketch_305680\ESP_LEDeinaus.ino
Build: Wed Sep 09 11:47:35 2020 IDE: 1.8.13

Verbinde dich mit dem Netzwerk "Esp32AP"
Gib die IP 192.168.4.1 im Browser ein

Hostname des AP = espressif
Mac Adresse des AP = 25:6A:28:96:94:95
Broadcast IP des AP = 192.168.4.255
HTTP Server gestartet

  1. Im PC (Win10) die verfügbarenWLAN-Netzwerke anzeigen, „ESP32AP“ auswählen und das Passwort „12345678“ als Sicherheitsschlüssel eingeben. Nach einer Überprüfung wird die Verbindung bestätigt.
    *** Diesen Punkt bei Bedarf wiederholen ***

  2. Im PC Browser öffnen und „192.168.4.1/led“ eingeben. Die Seite „Onboard Led schalten“ mit dem Text „LED ist aus“ wird angezeigt.

  3. Durch Klicken auf „LED Ein“ wird die an Pin 13 angeschlossenen LED eingeschaltet, durch „LED Aus“ ausgeschaltet.

Der ESP32 hat als Access Point ein eigenes WLAN eingerichtet, an das man sich mit PC, Laptop oder Smartphone anmelden kann.

Das Beispiel ist damit erfolgreich umgesetzt!


Ich stelle diesen Text zur Diskussion und Ergänzung. Wenn Fips etwas übernehmen möchte, so würde ich mich freuen. Wenn es dem einen oder anderen Einsteiger helfen würde, wäre der Zweck erfüllt :slight_smile:

3 Likes

Geänderte Dateien im Anhang.

ESP_LEDeinaus.ino (2.9 KB)

Connect.ino (2.67 KB)

EspBoardLed.ino (2.77 KB)

agmue:
Wenn es dem einen oder anderen Einsteiger helfen würde, wäre der Zweck erfüllt :slight_smile:

Merker gesetzt.
+1!

Vielen Dank agmue für die hilfreiche Ergänzung!
(Und fipsok.de finde ich natürlich auch sehr gut. Habe dort schon viele wertvolle Tipps erhalten).

Ich habe den Moderator gebeten den Thread wieder aufzumachen.
Dazu hatte ich zunächst (eher ungeschickt) einen neuen Thread aufgemacht.
Der Vollständigkeit halber hier als Link.

Den Text hatte ich zunächst im anderen Thread stehen. Jetzt macht es mehr Sinn dass er hier im "Original"-thread steht

Was mir fehlt ist eine Art Übersichtsgrafik wie die einzelnen Tabs zusammenspielen.

Das man in den Tabs dann einzelne Zeilen auskommentieren muss.
Wo wird das erklärt? Wird man darauf an prominenter Stelle im Code hingewiesen?

Dann fände ich es super wenn es Screenshots zu jedem Schritt gibt. (jaaa schon klar dass das manchen zu viel Gedöns ist) Hallo ?! Es gibt ja einige Leute die fips.ok super finden es dann
aber bei einem link auf die Hauptseite schon wieder gut sein lassen.

Damit baut man einen harten User-Filter ein:
Unter diesen Vorraussetzungen werden nur Leute die einen extrem großen Durchhaltewillen haben sich das alles mit viel ergänzender Rechereche und durch viel Versuch und Irrtum das alles durchzuackern, dazu bekommen, die fips.not.so.easy-Seiten zu benutzen.

Kann man ja machen wenn man das genauso haben möchte.
Nach dem Motto "Wer DEN Aufwand nicht betreiben will sollte nicht zum Kreis der Arduino-User gehören" Ich finde diese Einstellung elitär-arrogant.

Wenn man möchte das die fips.ok-Seiten möglichst viele bennutzen dann muss man es aufbauen wie Random Nerd Tutorials. Gaaanz viele Screenshots die alles Schritt für Schritt zeigen.
Ist natürlich mehr Arbeit das zu erstellen. Und da das hier alles freiwillig ist kann man das natürlich nicht einfordern.

Und so richtig klasse wird es nur dann wenn dann auch noch Erklärungen dazukommen die die Prinzipien erklären um wirklich zu verstehen wie man die vorhandenen Beispiele abändert.

Nun ja mal sehen was für Reaktionen jetzt kommen.

vgs

Und ja, dazu gehöre ich auch.

Und wenn man heute programmieren möchte, sollte man auch immer selbst ein wenig (besser mehr) nachdenken. Das war früher schon so und sollte auch heute noch so sein.
Wer das nicht will oder nicht kann, darf sich gern ein anderes Hobby aussuchen.

Zudem dürfen alle hier auch Fragen stellen.
Es muss nicht immer alles vorher durchgekaut werden.

Das ist jeweils nur eine graduelle Unterscheidung. Mit dem Motto könnte man auch sagen

  • entwickle dir deinen eigenen Chip, den eigenen Compiler, die eigene Programmiersprache
    Da wird ganz viel fertiges benutzt und überhaupt nicht nachgedacht.
    #include <WebServer.h>
    und fertig.

Dann suche Dir einen Provider und baue Deine eigene Website nach Deinen Vorstellungen auf.

Gruß Tommy

3 Likes

So jetzt geht es los. Und vermutlich werde auch ich diverse Fragen haben.

Da der Post noch im Bau ist als aufklappbares Detail

Als erstes Beispiel nehme ich ESP32 onboard LED blinken lassen.
Dafür braucht man nur ein ESP32-nodeMCU-Board das eine onboard LED hat

Wenn man die Seiten fipsok.de aufruft
Sieht man da links eine Menge links
Dort runterscrollen zum Abschnitt
image

Wie man am unterstrich erkennt ist das auch ein Link
image
Dessen Sinn sich aber nicht so ganz direkt erschließt weil ja unten drunter die ganzen "Tabs" aufgelistet sind

Wenn man draufklickt landet man hier

Und da fangen die Fragen an.
Da gibt es einen Hinweis


Welcher "Ordner" ?
Man muss schon relativ viel über die Arduino-IDE wissen um das zu verstehen.
Wie man an dieser Anleitung sieht bin ich nicht der Meinung "Mit fipsok sollte man erst anfangen wenn man die allgemeine Bedienung und ihre dahinterliegenden Strukturen (Sketche-Ordner usw. ) gut kennt.

Was mit Der "Haupttab" und dem Namen "Esp32 WebServer" gemeint ist
wird deutlich sobald man es an einem Beispiel erklärt.

Und das hat dann GARNICHTS mit nicht nachdenken zu tun sondern mit effizientem Lernen wie es geht statt herumzuprobieren. Programmierwissen ist wichtig. Und wenn man das wirklich wichtig nimmt dann sollten sie Hürden es zu erlernen an möglichst vielen Stellen niedrig sein.

Die Beschriftung des links ist etwas verwirrend. Weil da sowohl Sketch als auch Tab steht
image

OK hier auch als Details damit der Eintrag kurz bleibt die Fragen die da jeweils auftauchen

Was ist ein Tab?
Was ist mit Maintab gemeint?
Wie funktioniert das aktivieren?

Nur leider werden die Antworten hier auch erscheinen. Ist OK. Wenn es fertig ist gibt es einen neuen Thread in dem dann nur die Anleitung am Stück steht

Und das bezeichne ich schlicht als Bödsinn, da es total am Thema vorbei geht.

Da hast Du Recht. Soll @StefanL38 doch einen eigenen Thread auf machen.

Gruß Tommy