Ich sehe leider sehr oft Blogartikel in denen der HTML Code in der Arduino Datei eingebettet wird. Sowas kann man für eine Mini Demonstration zwar machen, ist aber im Alltag völliger Schwachsinn. Es ist viel zu unübersichtlich und sobald das Projekt wächst nicht mehr nutzbar.

Die ordentliche Alternative ist einen Ordner namens „data“ einzurichten und in diesem die Webseiten als html Dateien abzulegen. Zusätzlich wird das Styling als CSS Datei gespeichert und es können sogar Funktionen per JavaScript Datei ausgeführt werden. Also alles 1:1 wie auf einem gewöhnlichem Webserver!

Das könnte dich auch interessieren: WeMos D1 R2 erste Schritte und Wlan Integration

Liste der Komponenten

• Arduino IDE (Entwicklungsumgebung)
• WeMos D1 R2

Das Einrichten des Dateisystems (offiziell SPIFFS) geschieht einmalig und ist kinderleicht:

(Zunächst sollte man die grundlegende Einrichtung aus dem ersten Teil abgeschlossen haben!)

1. Auf GitHub eine Kopie der Datei „ESP8266FS-0.2.0.zip“ herunterladen und entpacken
2. Die Datei esp8266fs.jar im Arduino-Tool-Verzeichnis ablegen. Der Pfad sieht etwa so aus: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (Siehe Bild) Ich musste den Pfadteil tools\ESP8266FS\tool\ im Arduino Ordner selbst erstellen.
3. Die Arduino IDE neustarten.

Das wars auch schon! Man kann jetzt in der Arduino DIE unter Tools den neuen Punkt „ESP8266 Sketch Data Upload“ sehen.

Wie kann man das neue Dateisystem jetzt nutzen?

1. Erstellen Sie in ihrem aktuellen WeMos Projekt Ordner einen zusätzlichen Ordner mit dem Namen „data“. So wie in dem nachfolgendem Bild

2. Legen Sie die Dateien, die Sie hochladen möchten, in das ‚data‘-Verzeichnis
3. Wählen Sie in der Arduino IDE im Menü ‚Tools‘ den WeMos aus und wählen Sie eine Größe bei ‚Flash Size‘
4. Das Dialogfeld für den seriellen Monitor schließen!
5. Wählen Sie aus dem Menü ‚Tools‘ die Option ‚ESP8266 Sketch Data Upload‘.

Sobald der Upload abgeschlossen ist zeigt das Nachrichtenfenster der Arduino IDE 100% Upload an.

WeMos Beispielprogramm zum Ein- und Ausschalten der OnBoard LED

Ähnlich wie im ersten Teil wird der Webserver die OnBoard LED steuern. Als Basis dient ebenfalls der Code aus dem ersten Teil. Der überarbeitete Code sieht so aus:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

Auf ein paar Besonderheiten möchte ich dabei hinweisen. Wir haben beispielsweise folgendes hinzugefügt:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Ohne die beiden Zeilen wäre der Zugriff auf die Dateien im „data“ Ordner nicht möglich. Bitte beachten, dass der Name „index.html“ als default für die Landing Page eingestellt ist. Wenn man unbedingt möchte kann man das aber auch ändern.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

Der „/led“ Endpoint empfängt die Befehle vom Webserver. Lautet der Befehl „on“ wird die LED eingeschaltet und bei „off“ wird die LED ausgeschaltet.

Wemos Webseite zum Ein- und Ausschalten der WeMos OnBoard LED

Die Beispielwebseite ist ganz einfach aufgebaut. Sie besteht in erster Linie aus 2 Buttons zum Ein- und Ausschalten der LED.

Die Ordnerstruktur der Webseite ist sehr übersichtlich gehalten. Es gibt eine Hauptseite mit dem Namen „index.html“ Dieser Name ist weltweit üblich für die Hauptseiten und wird auch automatisch vom WeMos entsprechend erkannt. Darüber hinaus einen „CSS“ Ordner fürs Styling und einen „JS“ Ordner für Funktionen.

Im Header Bereich der Webseite verlinken wir die Styles. Da wäre zum einen ein Standard Bootstrap, der alles automatisch bischen schöner macht und zusätzlich eine custom Styles Datei mit meinen eigenen Anpassungen. Außerdem werden im Header Bereich auch die Funktionen der Webseite verlinkt. Ich benutze den jQuery Standard um von der Webseite Requests an den WeMos zu senden. Meine eigenen custom Funktionen liegen in der „index.js“.

Bitte beachten, dass die jQuery Datei VOR der eigenen Datei eingebunden werden muss, sonst können keine jQuery Befehle im eigenen Code benutzt werden! Die eigenen Funktionen werden anschließend von den Buttons verwendet. Der HTML Code der Seite sieht insgesamt folgendermaßen aus:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Besonderes Augenmerk gilt der JavaScript Funktion „changeLEDState(value)“

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Dadurch, dass jQuery genutzt wird für die Kommunikation mit dem WeMos, reicht ein einfaches Dollarzeichen mit dem entsprechendem Request Befehl. Bei diesem POST Request wird ebenfalls ein Wert mit geschickt, welcher entweder „on“ oder „off“ ist zum ein- und ausschalten der LED.

Die Webseite kann nachfolgend als zip Datei heruntergeladen werden.

Dateien zum Herunterladen

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Ganze Webseite mit html, css & js hosten appeared first on Nerd Corner.

Das könnte dich auch interessieren: Magnetwinkel mit 100 mm

Herstellung der LED-Streifen

Man muss auch wissen wie solche LED-STREIFEN hergestellt werden, der Irrglaube, dass die Streifen auf einem Endlosband bestückt werden und je nach Bedarf abgeschnitten werden ist falsch. Die Streifen werden in der Länge 500mm in eine Bestückungsmaschine gespannt und mit den LEDs bestückt. Die Anzahl der LEDs hängt davon ab wie viele LEDs pro Meter gebraucht werden. Es gibt Streifen mit 30/60/144 LEDs pro Meter. Danach werden die 500mm Streifen an den Enden auf die erforderliche Länge zusammengelötet.

Umsetzung der SMD5050 Klammer

Wie immer suche ich zuerst alle verfügbaren LED-Strefen aus meinem Sammelsurium die eine SMD5050 beinhalten. Wichtig war es alle Varianten der unterschiedlichen Hersteller zu haben. So kann man den bestmöglichen Mittelweg finden, um die Funktion (also das Klemmen) auf möglichst vielen Varianten anzuwenden.

Die Idee war es den Streifen nicht an der Rückseite zu verkleben, sondern die LED an den Außenflächen zu klammern. Im Bild 1.0 werden einige der Zahlreichen Varianten für SMD5050 dargestellt

• 1.0.1 WS2812B Streifen mit 30 LED pro Meter
• 1.0.2 WS2812B Streifen mit 60LED pro Meter
• 1.0.3 WS2812B Streifen mit 144 LED pro Meter
• 1.0.4 Sk6812 Streifen mit gleichen Unterteilungen wie oben
• 1.0.5 Kalt Weiß Streifen mit 60 LED pro Meter

Der nächste Schritt besteht darin die Außenmasse der SMD5050 auszumessen und zu vergleichen. Wie der Name SMD5050 schon beinhaltet stehen die Zahlen 5050 für die Masse 5mm an den Außenlinien (5050 ist gleich 5mm lang und 5mm breit). Zu meinem Erstaunen bewegen sich die SMDs nur im hundertstel Millimeter. Das heißt die Abweichungen sind marginal (2.0.1, 2.0.2) und für die Konstruktion zu vernachlässigen.

Anders sieht es bei der Höhe der LEDs aus, dort sind die Unterschiede etwas markanter (2.0.3, 2.0.4 und 2.0.5). Aber der größte Unterschied liegt bei den Lötungen mit mehr oder weniger Lötzinn. Die Unterschiede sind nun bekannt und können in der Konstruktion berücksichtigt werden.

Die meisten Probleme bereiten die Lötstellen und außenstehenden Widerstände. Die Lötstellen sind oft sehr unterschiedlich, manchmal etwas dicker und zuweilen ragen sie über die Seitenkante hinaus. Auch die Widerstände sind je nach Streifen an unterschiedlichen Stellen platziert.

Zuerst zeichne ich die Halteklammer (3.0.1) an der die LED später befestigt wird. Als nächstes gestalte ich den Halterahmen für die SMD5050, der später für die Klemmung der LED sorgt (3.0.2). Bei Bild 3.0.3 füge ich sogenannte Aussparungen hinzu. Diese Vertiefungen im Rahmen habe ich bei den verschiedenen LED-Streifen gemessen.

Nach diesen drei Hauptschritten drucke ich den ersten Prototyp mit meinem Lieblingsmaterial und favorisierten Drucker. Nach den ersten Versuchen die LED zu klammern war ich sehr zuversichtlich, dass es am Ende funktioniert. Natürlich muss man beim herausnehmen des Materials auch die Stabilität der Klammer im Auge behalten.

Die Entwicklung basiert auf meinen bisherigen Erfahrungen. Es ist ein Spagat zwischen Haltekraft, Stabilität und der Druckbarkeit. Die Anzahl der gedruckten Prototypen in diesem Fall fünfzehn Stück, sagt nur bedingt über die entstandene Arbeit aus. Fünfzehn Versuche ist eher wenig. Ich hatte Glück mit dem Grundkonzept und dass die Idee die Richtige war.

Im Bild 3.0.4 und 3.0.5 seht ihr noch die Veränderungen zu 3.0.3 in den Maßen und Formen wie z.B. das Anbringen von Fasen.

Herstellen der Klammer im 3D Drucker

Die CAD Entwicklung ist nun abgeschlossen. Als nächstes ist der Durckvorgang an der Reihe. Es müssen einige Faktoren berücksichtigt werden wie z.B. das richtige kalibrieren des 3D Druckers. Wenn man ein Gehäuse mit einem Deckel auf einem schlecht kalibrierten oder nicht kalibrierten 3D Drucker mit denselben Einstellungen und Material druckt, passt es immer zusammen. Es stimmen die Masse nicht aber die Bezüge von Gehäuse und Deckel sind gleich und darum passt es trotzdem.

Anders sieht es aus, wenn ein extern produziertes Bauteil wie die SMD5050 ins Spiel kommt. Dann muss die Masse in einem bestimmten Toleranzfeld übereinstimmen. Wenn man seinen 3D Drucker nicht kalibrieren will, kann man die Maße über den Slicer anpassen. Jeder Slicer bietet eine sogenannte Skalier Funktion. Der nächste Faktor hängt mit der Größe der Klammer zusammen, da die Klammer sehr klein ist muss die Düsenkühlung auf 100% eingestellt sein. Düsenkühlung ist eigentlich der falsche Begriff, da nicht die Düse, sondern das austretende Filament gekühlt werden soll. Bei kleinen Bauteilen kommt die heiße Düse schneller wieder am Werkstück vorbei, sodass dieses nicht richtig abkühlen kann. Dadurch verläuft das Filament und kann die gewünschte Form nicht halten.

Nicht zu unterschätzen ist auch die Druckrichtung. Bei unseren Klammern sollte die Druckrichtung seitlich stattfinden, also liegend gedruckt (4.0.1). Es schadet auch nicht einen BRIM vom Slicer generieren zu lassen (4.0.2).

Montage der SMD5050 Klammer

Für die Montage der Klammer ist es ratsam die einzelne LED oder den Streifen auf eine ebene Oberfläche zu legen und danach die Klammer von oben aufzudrücken. Die LEDs sind sehr stabil und können einiges aushalten. Wer Zweifel an der Haltekraft der Verbindung hat kann natürlich noch etwas Kleber hinzufügen. Man muss auch nicht jede LED am Streifen klemmen, es reicht völlig aus jede dritte oder vierte LED zu klemmen.

Ich habe unterschiedliche Varianten von Klammern konstruiert, die man verschrauben, klemmen und natürlich verkleben kann. Eine Einschränkung gibt es aber doch. Man kann die Klammer nur in zwei Richtungen anbringen. Bei der Konstruktion musste ich den Kompromiss eingehen, dass nur zwei Seiten für das Klipsen in Frage kommen. Man kann daher die Klammer nicht alle 90 Grad drehen und anbringen, sondern nur jeweils um 180 Grad. Kurz gesagt die Lötstellen müssen immer rechts und links von der Klammer stehen und nicht oben und unten. (siehe Bilder 5.0 – 5.1)

Anwendungsbeispiele

• 5.0.1, 5.0.2 WS2812B 60 LED/m
• 5.0.3 RGW auf Platine
• 5.0.4 WS2812B 144 LED/m (geht nur jede zweite LED zu Klipsen)
• 5.1.1 SK6812 verlötet auf Trägerplatte geklemmt
• 5.1.2 WS2812B verlötet drei Stück
• 5.1.3 RGW
• 5.1.4 CW mit Seitenclips rechts und links

Dateien zum Herunterladen

• Klemme für SMD5050

The post Klick und Klemmsystem – SMD5050 Klammer appeared first on Nerd Corner.