{"id":6355,"date":"2020-03-15T14:53:01","date_gmt":"2020-03-15T13:53:01","guid":{"rendered":"https:\/\/www.thetawelle.de\/?p=6355"},"modified":"2020-09-15T11:00:26","modified_gmt":"2020-09-15T10:00:26","slug":"esp32-esp8266-von-100-zu-10000-zeilen-code","status":"publish","type":"post","link":"https:\/\/www.thetawelle.de\/?p=6355","title":{"rendered":"ESP32\/ESP8266: Von 100 zu 10000 Zeilen Code"},"content":{"rendered":"<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo-300x150.png\" alt=\"\" width=\"300\" height=\"150\" class=\"alignright size-medium wp-image-6404\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo-300x150.png 300w, https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo-1024x512.png 1024w, https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo-768x384.png 768w, https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo-1200x600.png 1200w, https:\/\/www.thetawelle.de\/wp-upload\/lights_and_more_logo.png 1280w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/a>Die <a href=\"https:\/\/github.com\/HackerspaceBremen\/hshb-lightsandmore\">ersten Zeilen Code<\/a> waren schnell geschrieben und liefen in der <a href=\"https:\/\/www.arduino.cc\">Arduino IDE<\/a>. Doch bei der einzigen Methode <code>void testLedStrip()<\/code> sollte es nicht unbedingt bleiben. Und bereits diese allererste Version behrrschte das <a href=\"https:\/\/art-net.org.uk\/\">Art-Net<\/a>-Protokoll. Doch schnell wurde es deutlich mehr Code&#8230;<\/p>\n<h2>Handbremse l\u00f6sen hilft<\/h2>\n<p>Als eine der wichtigsten Ver\u00e4nderungen sehe ich r\u00fcckblickend den Wechsel auf <a href=\"https:\/\/platformio.org\/\">PlatformIO<\/a> in <a href=\"https:\/\/code.visualstudio.com\/\">VSCode<\/a> von der Arduino IDE. Die Arduino IDE hat durchaus ihre Berechtigung, jedoch ist die Java Basis ein solcher Nervfaktor bei der Geschwindigkeit bestimmter Operationen, dass man schon viel Geduld aufbringen muss. <strong>VSCode + PlatformIO<\/strong> hat einige sehr wichtige Vorteile gebracht:<\/p>\n<ul>\n<li>Code Completion<\/li>\n<li>Macros<\/li>\n<li>\u00dcbersichtliches File Handling<\/li>\n<li>Konfigurierbare Build-Targets<\/li>\n<li>Perfekte Suchen\/Ersetzen-Funktionen f\u00fcr Refactoring<\/li>\n<li>Pre-Compiler checks<\/li>\n<\/ul>\n<p>Um nur einige zu nennen. VSCode ist im Prinzip mehr der <a href=\"https:\/\/atom.io\/\">Atom Editor<\/a> und hat mit Visual Studio wenig zu tun. Das PlatformIO Plugin r\u00fcstet den Editor auf zu einer IDE. Das ist durchaus verbl\u00fcffend, wie gut das funktioniert.<\/p>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode-976x1024.png\" alt=\"\" width=\"840\" height=\"881\" class=\"alignnone size-large wp-image-6407\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode-976x1024.png 976w, https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode-286x300.png 286w, https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode-768x806.png 768w, https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode-1200x1260.png 1200w, https:\/\/www.thetawelle.de\/wp-upload\/platform_io_vscode.png 1269w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Sehr hilfreich ist vor allem die <strong>Peek-Funktion<\/strong> in den Code der hinter bestehenden Funktionsaufrufen steht. Gerade wenn diese Funktionsaufrufe z.B. im Code eines Frameworks liegen oder in Code den man l\u00e4nger nicht angefasst hat, ist es superhilfreich ein kleines Snippet von dem betroffenen Code mal eben sehen zu k\u00f6nnen. Ruck Zuck wei\u00df man wieder was das Ding eigentlich tut.<\/p>\n<p>Auch die breite <strong>Miniatur-Vorschau-Scrollleiste<\/strong> ist einfach megapraktisch. Weil man sich gerade bei langen Codefiles optisch perfekt orientieren kann.<\/p>\n<p>Ab und an muss man VSCode dann zwar mal neustarten, wenn es zu langsam wird, aber das ist vertretbar, ich hatte keinen einzigen Crash der App und keine Datenverluste beim Coden damit.<\/p>\n<h2>C\/C++<\/h2>\n<p>Etwas kann einem die IDE nicht abnehmen, das <strong>Wissen um C\/C++<\/strong> ist nicht mal eben auf Abruf erh\u00e4ltlich. Und hier bin ich im Learning-by-Doing, schnell in viele kleine Fallen gerannt. Von den speziellen Dingen rund um Scopes bis hin zu Pointern und Objektorientierung C-Style, hab ich alles ber\u00fchrt was n\u00f6tig war, um stabilen Code zu schreiben.<\/p>\n<p>Eine der wichtigsten Erkenntnisse f\u00fcr mich war, dass diese ganzen Dateien die man da so anlegt, letztlich nur Strukturierungshilfen f\u00fcr Menschen sind, dem Compiler ist es v\u00f6llig schnurz, denn behandelt wird all das lustig geschriebene als w\u00e4re es EINE gro\u00dfe DATEI. Und daher ergeben sich auch manche Probleme die man nicht erkennen kann, wenn man nicht auf diese Metaebene steigt und sieht, dass alle Dateien eigentlich in eine gro\u00dfe Datei einfliessen, die f\u00fcr den Compiler die Wahrheit abbildet.<\/p>\n<p>Von Variablen die angeblich schon deklariert wurden, bis hin zu fehlenden Deklarationen und doppelten imports sowie weitergereichten Pointern, die beim Verlassen des Scope ung\u00fcltig wurden, habe ich <strong>alle Fehler<\/strong> gemacht, die man sich so vorstellen kann.<\/p>\n<p>Aber es hat mich dennoch nicht vom Ziel abgebracht und mit einigem Google-Aufwand habe ich mich soweit fortgebildet dass mir die Arbeitsweise mit dieser Sprache immer vertrauter wurde. Am Ende habe ich sogar <strong>Bit-Shifting<\/strong> gemacht, um das Art-Net-Protokoll f\u00fcr soegenannte Art-Poll-Requests zu bef\u00e4higen. Bits z\u00e4hlen ist so mit das Langweiligste was man tun kann, und sehr fehleranf\u00e4llig noch dazu.<\/p>\n<p>Mein wichtigstes <strong>Debugging Werkzeug<\/strong> war <\/p>\n<pre class=\"brush: cpp; gutter: true; title: Source\/Snippet; toolbar: true; notranslate\" title=\"Source\/Snippet\">\r\nSerial.println( &quot;DEBUG: I AM HERE.&quot; )\r\n<\/pre>\n<p>das habe ich dann sp\u00e4ter ausgebaut zu ein paar Macros, die ich \u00fcber des BUILD-Flag <code>DEBUG_LAM<\/code> dann komplett abschalten konnte.<\/p>\n<pre class=\"brush: cpp; gutter: true; title: Source\/Snippet; toolbar: true; notranslate\" title=\"Source\/Snippet\">\r\n    #ifdef DEBUG_LAM\r\n    #define LOG( x )  Serial.print( x )\r\n    #define LOG_ENC( x, y )  Serial.print( x, y )\r\n    #define LOG_LN( x )  Serial.println( x )\r\n    #define LOG_LN_ENC( x, y )  Serial.println( x, y )\r\n    #else\r\n    #define LOG( x )\r\n    #define LOG_ENC( x, y )    \r\n    #define LOG_LN(x)\r\n    #define LOG_LN_ENC( x, y )\r\n    #endif\r\n<\/pre>\n<p>Sp\u00e4ter habe ich dann begonnen auch <strong>Stackdumps zu dekodieren<\/strong>. Aber da war die Software eigentlich schon fertig.<\/p>\n<h2>Features: OTA Updates, WebServer, Art-Net, Drucktaster, Konfiguration<\/h2>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-576x1024.jpg\" alt=\"\" width=\"576\" height=\"1024\" class=\"alignright size-large wp-image-6410\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-576x1024.jpg 576w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-169x300.jpg 169w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-768x1365.jpg 768w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-864x1536.jpg 864w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-1152x2048.jpg 1152w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-1200x2133.jpg 1200w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_02-scaled.jpg 1440w\" sizes=\"auto, (max-width: 576px) 85vw, 576px\" \/><\/a>Nachdem die ersten LED&#8217;s am leuchten waren, wollte ich nat\u00fcrlich Effekte. Also wurde ein paar mal die LED-Routine die den Streifen befeuert umge\u00e4ndert und erweitert. Doch das reichte irgendwann nicht mehr, denn die Anzahl der Effekte nahm zu. Und ich wollte gerne wechseln k\u00f6nnen zwischen den Effekten. Auch ein einfacher Ein-Aus-Schalter w\u00e4re n\u00fctzlich.<\/p>\n<p>Also begann ich zun\u00e4chst <strong>zwei PINS mit Drucktastern<\/strong> zu verbinden und diese Taster mit einen <strong>PULL-UP-Widerstand<\/strong> zu verdrahten, der beim Dr\u00fccken der Taste volles Pegelsignal liefert. Hier war tats\u00e4chlich die Vorarbeit im Arduinokurs zu <strong>Ampelschaltungen mit Gr\u00fcnanforderung<\/strong> extrem n\u00fctzlich. Denn ich wusste dass ich einen PULL-UP oder PULL-DOWN Widerstand in der Schaltung brauchte f\u00fcr ein gutes Signalhandling.<\/p>\n<h2>WebServer zur Bedienung<\/h2>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_13.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_13-194x300.png\" alt=\"\" width=\"194\" height=\"300\" class=\"alignright size-medium wp-image-6414\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_13-194x300.png 194w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_13-663x1024.png 663w, https:\/\/www.thetawelle.de\/wp-upload\/lam_08_photo_13.png 741w\" sizes=\"auto, (max-width: 194px) 85vw, 194px\" \/><\/a>Relativ schnell kam dann der Wunsch auf, nicht nur einen Effekt zu haben, sondern eine Art <strong>Benutzeroberfl\u00e4che \/ UI<\/strong> f\u00fcr die Bedienung der &#8222;Lampe&#8220;. Das An-\/Ausschalten und auch z.B. die Helligkeit zu regeln. Durch Delphino hab ich dann gelernt, dass es einen kleinen WebServer f\u00fcr Microcontroller gibt, den ESPAsyncWebServer.<\/p>\n<p>Nach ein wenig Rumprobieren, hatte ich den Server am Laufen und konnte zumindest rudiment\u00e4r meine Lampe steuern. Das war schon ein beeindruckender erster Moment, das sowas auch mit einem Microcontroller geht. Es war nicht sonderlich schnell aber es funktionierte mit einem simplen Webbrowser und ich konnte damit die die Lampe selbst An- und Ausschalten, Art-Net Support An- und Ausschalten, die Helligkeit regeln, und den Controller Neustarten. Das waren so die wichtigsten Sachen die mir erstmal einfielen, die ich haben wollte.<\/p>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-473x1024.png\" alt=\"\" width=\"473\" height=\"1024\" class=\"alignnone size-large wp-image-6422\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-473x1024.png 473w, https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-139x300.png 139w, https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-768x1663.png 768w, https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-709x1536.png 709w, https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11-946x2048.png 946w, https:\/\/www.thetawelle.de\/wp-upload\/lam_10_photo_11.png 1125w\" sizes=\"auto, (max-width: 473px) 85vw, 473px\" \/><\/a><\/p>\n<p>Die aktuelle Ausbaustufe der Webseite sieht jedoch mittlerweile deutlich umfangreicher aus. Die gesamte <strong>Web UI<\/strong> ist mittlerweile optimiert darauf, nicht nur auf dem Desktop, sondern vor allem auf mobile Devices perfekt als <strong>Progressive Web Application (PWA)<\/strong> zu funktionieren, also m\u00f6glichst den Eindruck einer eigenst\u00e4ndigen App zu erzeugen.<\/p>\n<p>Durch einige erg\u00e4nzte <code>&lt;meta&gt;-Tags<\/code> und ein paar Icon-Dateien konnte ich f\u00fcr iOS und Android ein App-Erscheinungsbild realisieren, das auf beiden Plattformen eine sch\u00f6ne Bedienung zul\u00e4sst und Home-Screen-Shortcuts erlaubt. Nachstehend ein Foto von der PWA auf einem alten iPod.<\/p>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_12_mobile_client_01.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_12_mobile_client_01-768x1024.jpg\" alt=\"\" width=\"768\" height=\"1024\" class=\"alignnone size-large wp-image-6434\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/lam_12_mobile_client_01-768x1024.jpg 768w, https:\/\/www.thetawelle.de\/wp-upload\/lam_12_mobile_client_01-225x300.jpg 225w, https:\/\/www.thetawelle.de\/wp-upload\/lam_12_mobile_client_01.jpg 960w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><\/p>\n<h2>Webseiten in Code bauen?<\/h2>\n<p>Die erste Webseite die man da weiter oben im Screenshot sieht, hatte ich komplett in Code zusammengesetzt, inkl. des CSS. Das ist eine ziemlich krass Speicherfressende Methode wie ich schnell feststellte. Den gerade das Verketten von Strings sorgt schnell f\u00fcr <strong>Speicherfragmentierung<\/strong> und <strong>Stackoverflows<\/strong>. Ein Ausweg: Das Flash Filesystem (FS).<\/p>\n<p>Mit Hilfe des <strong>SPIFFS<\/strong> Framework, aktivierte ich ein Filesystem auf dem Microcontroller, das es erlaubt Dateien auf dem Controller zu speichern und abzurufen.<\/p>\n<blockquote><p>SPIFFS steht f\u00fcr (S)erial (P)eripheral (I)nterface (F)lash (F)ile (S)ystem und gemeint ist dabei, dass unser ESP im SPI Programmspeicher, der auch unseren Programmcode enth\u00e4lt, ein einfaches Dateisystem halten kann. \u2014 <a href=\"https:\/\/www.az-delivery.de\/blogs\/azdelivery-blog-fur-arduino-und-raspberry-pi\/esp8266-spiffs-dateisystem\">Quelle<\/a><\/p><\/blockquote>\n<p>Ab jetzt musste der WebServer &#8222;nur noch&#8220; Dateien ausliefern. Und ich konnte deutlich schneller meine Webseiten bauen, das CSS anpassen. Es dauerte nicht sehr lange und ich stellte fest, dass jeder <strong>TcpRequest<\/strong> der den WebServer traf ganz sch\u00f6n die CPU belastet. Trotz dass der WebServer auf dem zweiten Kern l\u00e4uft, wird das Rendering der Lampen beeinflusst und andere Tasks scheinbar solange angehalten.<\/p>\n<p>Daher war das Neuladen einer Webseite nach jedem Klick \u00fcberhaupt keine gute Idee. Es musste eine leichtgewichtige Kommunikation musste her. Als Mittel der Wahl entschied ich mich f\u00fcr <strong>Asynchrone Requests per JavaScript<\/strong>. Das war dann auch der Startschuss, ein API zu definieren, denn ich wollte ja keine ganze Webseite mehr ausliefern, sondern am liebsten nur noch <strong>kleine JSON-Datenpakete<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/api_lam.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/api_lam-403x1024.png\" alt=\"\" width=\"403\" height=\"1024\" class=\"alignnone size-large wp-image-6419\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/api_lam-403x1024.png 403w, https:\/\/www.thetawelle.de\/wp-upload\/api_lam-118x300.png 118w, https:\/\/www.thetawelle.de\/wp-upload\/api_lam.png 489w\" sizes=\"auto, (max-width: 403px) 85vw, 403px\" \/><\/a><\/p>\n<p>Es folgte ein massiver <strong>Aufbau einer API<\/strong> (siehe Screenshot). Und mit jedem neuen <strong>API Endpunkt<\/strong> konnte die Bedienungs-UI komplexer und umfangreicher werden. Neue Features waren jetzt mehr eine Frage der N\u00fctzlichkeit, denn per API h\u00e4tte ich jetzt alles einbauen k\u00f6nnen.<\/p>\n<p>Ich hab mir gleich auch doe M\u00fche gemacht, das API auf dem Controller selbst mit einer HTML-Datei zu dokumentieren. So ist auch for andere ein schneller Lookup m\u00f6glich.<\/p>\n<h2>Remote Fernbedienung? Remote Firmware Update!<\/h2>\n<p><a href=\"https:\/\/www.thetawelle.de\/wp-upload\/ota_uplaod.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.thetawelle.de\/wp-upload\/ota_uplaod-263x300.png\" alt=\"\" width=\"263\" height=\"300\" class=\"alignright size-medium wp-image-6416\" srcset=\"https:\/\/www.thetawelle.de\/wp-upload\/ota_uplaod-263x300.png 263w, https:\/\/www.thetawelle.de\/wp-upload\/ota_uplaod.png 624w\" sizes=\"auto, (max-width: 263px) 85vw, 263px\" \/><\/a>Hat man sich erstmal dran gew\u00f6hnt, dass man die Lampe fernsteuern kann per Browser \u00fcber das Wifi, kommt schnell der Wunsch auf mal eben ein Firmwareupdate auf den Controller zu spielen OHNE dass man ihn wieder per USB an den Rechner h\u00e4ngt.<\/p>\n<p>Und das geht tats\u00e4chlich megaeinfach. Es nennt sich <strong>Over the Air (OTA) Update<\/strong> und wird von den Frameworks unterst\u00fctzt. Mit einem PlatformIO CLI Command kann man das Update over the Air wie folgt starten:<\/p>\n<pre class=\"brush: bash; gutter: true; title: Source\/Snippet; toolbar: true; notranslate\" title=\"Source\/Snippet\">\r\nplatformio run -e BUILD_ESP8266_OTA --target upload --upload-port LAM-ESP8266.local\r\n<\/pre>\n<p>Wichtig ist hier die Angabe der Buildenvironment (hier <code>BUILD_ESP8266_OTA<\/code>) und des Upload Port (hier <code>LAM-ESP8266.local<\/code> der <strong>mDNS-Hostname<\/strong> den ich f\u00fcr den Microcontroller festgelegt habe; man kann aber auch die IP-Adresse direkt angeben).<\/p>\n<p>Mit in folgender Zeile definiertem Handler im Code legt man z.B. fest, was passieren soll bei Beginn eines Firmwareupdates over the Air:<\/p>\n<pre class=\"brush: cpp; gutter: true; title: Source\/Snippet; toolbar: true; notranslate\" title=\"Source\/Snippet\">\r\nArduinoOTA.onStart( &#x5B;]() {\r\n\r\n\/\/ Code zur Behandlung dieses Ereignisses hier einf\u00fcgen\r\n\r\n});\r\n<\/pre>\n<p>Das besonders Praktische an einem Update over the Air ist, dass man kein USB-Kabel mehr zum Microcontroller braucht. Und der Controller muss sich lediglich per Wifi im selben Netz befinden, um ihn zu erreichen f\u00fcr ein Update. Es gibt nat\u00fcrlich die M\u00f6glichkeit das Update auch mit einem <strong>Passwort<\/strong> abzusichern und nur authentifizierte Updates zuzulassen.<\/p>\n<p>Tats\u00e4chlich geht ein Update over the Air beim ESP8266 sogar schneller als per USB. Und es ist eben auch ein Weg einen Controller zu erreichen, der vielleicht sogar bereits in einem Geh\u00e4use oder <strong>schlecht erreichbar<\/strong> hinter einer Wand montiert ist.<\/p>\n<h2>Zwischenfazit<\/h2>\n<p>Es ist schlichtweg beeindruckend, was man mit diesem Microcontroller alles tun kann. Allerdings profitiert man deutlich von <strong>gen\u00fcgend Vorkenntnissen<\/strong> die man mitbringt. Bei mir waren das Vorkenntnisse in folgenden Bereichen:<\/p>\n<ul>\n<li>C (vor allem Macros, Debugging Strategien, Library Management)<\/li>\n<li>HTML (wie schaut eine g\u00fcltige Webseite aus)<\/li>\n<li>CSS (wie styled man eine Seite gezielt f\u00fcr h\u00fcbsches UI, siehe <a href=\"https:\/\/cssdiner.com\">cssdiner.com<\/a>) bzw. <a href=\"https:\/\/flukeout.github.io\/\">https:\/\/flukeout.github.io\/<\/a><\/li>\n<li>Javascript (f\u00fcr eine API-basierte Application)<\/li>\n<li>API (wie designe ich eine RESTful API)<\/li>\n<li>Arduino Grundlagen (wie kann ich Hardware prototypen mit dem Breadboard)<\/li>\n<li>WebServer\/TCP\/UDP (Grundkenntnisse \u00fcber Netzwerktraffic, Requesthandling)<\/li>\n<li>Grafikbearbeitung (um n\u00f6tige Icons in ben\u00f6tigter Gr\u00f6\u00dfe selbst zu erstellen)<\/li>\n<li>Browser Dev Tools (Umgang mit der Webconsole des Browsers, oder z.B. Postman als HTTP Client)<\/li>\n<\/ul>\n<p><small><strong>Why do I blog this?<\/strong> Der Schritt von einer <code>Lights.ino<\/code> in der Arduino IDE hin zu einer <code>main.cpp<\/code> in PlatformIO und dann zu einem Projektordner <code>\/src<\/code> voller Files die sich sauber um einzelne Teile\/Features k\u00fcmmern, war nicht so einfach. Ich hab mindestens zwei gr\u00f6\u00dfere Refactorings durchgef\u00fchrt.<\/p>\n<p>Aber es lohnt sich. Belohnt wird man mit einer sauberen Code-Struktur, einer tadellos funktionierenden RESTful API inkl. Dokumentation und einer effizienten Web-Application die auf nahezu allen Browsern Mobile und Desktop reibungslos funktioniert.<\/p>\n<p>Demn\u00e4chst dann eine Vorstellung des &#8222;fertigen&#8220; Systems, sofern so ein Teil jemals fertig sein kann. Denn eines sei verraten, bei einer simplen Lampe hab ich es nicht belassen. Der LED-Strip beherrscht mittlerweile <strong>Apps<\/strong> genauso wie <strong>Audioausgaben<\/strong> und eine Art-Net-Schnittstelle \u00fcber die er durch <strong>Art-Net<\/strong> bzw. <strong>DMX-over-IP<\/strong> prima durch Drittanbieter Apps gesteuert werden kann..<br \/>\n<\/small><\/p>\n<p><!-- \nhttps:\/\/www.heise.de\/newsticker\/meldung\/Espressif-ESP32-S2-RISC-V-Zusatzkern-im-WLAN-Mikrocontroller-4676225.html\nhttps:\/\/www.heise.de\/select\/ct\/2018\/2\/1515452111258448 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die ersten Zeilen Code waren schnell geschrieben und liefen in der Arduino IDE. Doch bei der einzigen Methode void testLedStrip() sollte es nicht unbedingt bleiben. Und bereits diese allererste Version behrrschte das Art-Net-Protokoll. Doch schnell wurde es deutlich mehr Code&#8230; Handbremse l\u00f6sen hilft Als eine der wichtigsten Ver\u00e4nderungen sehe ich r\u00fcckblickend den Wechsel auf PlatformIO &hellip; <a href=\"https:\/\/www.thetawelle.de\/?p=6355\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eESP32\/ESP8266: Von 100 zu 10000 Zeilen Code\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,88,80,68,4,114],"tags":[],"class_list":["post-6355","post","type-post","status-publish","format-standard","hentry","category-best-practice","category-coding","category-crazeekywf","category-hardware","category-learning","category-microcontroller"],"_links":{"self":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/6355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6355"}],"version-history":[{"count":0,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/6355\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}