Alles über Arduino und Co.

suche
Generic filters

Zisterne 3.0 Web Server + SPIFFS

Zisterne 3.0 Web Server + SPIFFS

Der ESP8266 egal welche Version, haben einen Speicherplatz auf dem Chip wo man Daten ablegen und abrufen kann. Könne Ihr hier nachlesen. https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html

Das werden wir hier benutzen um die Bilder und die HTML Seite dort abzulegen.

				
					|--------------|-------|---------------|--|--|--|--|--|
^              ^       ^               ^     ^
Sketch    OTA update   File system   EEPROM  WiFi config (SDK)
				
			
BoardFlash chip size, bytesFile system size, bytes
Generic module512k64k, 128k
Generic module1M64k, 128k, 256k, 512k
Generic module2M1M
Generic module4M1M, 2M, 3M
Adafruit HUZZAH4M1M, 2M, 3M
ESPresso Lite 1.04M1M, 2M, 3M
ESPresso Lite 2.04M1M, 2M, 3M
NodeMCU 0.94M1M, 2M, 3M
NodeMCU 1.04M1M, 2M, 3M
Olimex MOD-WIFI-ESP8266(-DEV)2M1M
SparkFun Thing512k64k
SweetPea ESP-2104M1M, 2M, 3M
WeMos D1 R1, R2 & mini4M1M, 2M, 3M
ESPDuino4M1M, 2M, 3M
WiFiduino4M1M, 2M, 3M

Was wird für das Projekt benötigt.

1. Installation ESP8266 in der Arduino IDE

Um den EPS8266 in der Arduino IDE verwenden zu können, muss dieser erst installiert werden. Wie das geht habe ich in diesem Blogbeitrag schon einmal erklärt.

2. Filesystem Uploader Plugin (SPIFFS)

Mit diesem Plugin können Daten bequem per Knopfdrück auf den EPS8266 (SPIFFS) geladen werden.
Zunächst müsst Ihr euch das Plugin von Github herunterladen. https://github.com/esp8266/arduino-esp8266fs-plugin/releases

Den Inhalt der ZIP Datei kopiert ihr in den Tools Ordner.
C:\Program Files (x86)\Arduino\tools
oder in diesen, das ist egal.
C:\Users\???\Documents\Arduino\tools

Wenn das erledigt ist müsst Ihr die Arduino IDE neu starten. Dann sollte das Plugin hier angezeigt werden.

3. Installation der Librarys

Ihr braucht hier die Librarys ESPAsyncWebServer und ESPAsyncTCP.
Die Zip Datei entpackt Ihr in den Library Ordner C:\Users\???\Documents\Arduino\libraries jenachdem wo er bei euch liegt.

ODER / ALTERNATIV

Die Import Funktion der Arduino IDE nutzen.

Welche Bauteile werden benötigt.

Beim ESP spielt es keine Rolle welches Modell genommen wird.

Schema

Alternativ zu der 5 Volt Spannungsversorgung kann auch die 3,3 Volt genommen werden. Der D1 mini verträgt nur 3,3 Volt an den Eingängen. Der Ultraschallsensor gibt aber keine 5 Volt am Echo Ausgang raus.

Der Programmcode

				
					#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

const char* ssid = "DEIN WLAN";
const char* password = "DEIN PASSWORT";

AsyncWebServer server(80);

char* Bild = "";

int trigger = 12;
int echo = 13;
long dauer = 0;

long entfernung = 0;
long Liter = 0;

//Berechnung der Liter für die Webseite
String getLiter() {
  digitalWrite(trigger, LOW);
  delay(5);
  digitalWrite(trigger, HIGH);
  delay(10);
  digitalWrite(trigger, LOW);
  dauer = pulseIn(echo, HIGH);
  // Prüfen ob Messwert zwischen 200cm und 0cm liegt
  entfernung = (dauer / 2) / 29.1;
    if (entfernung >= 200 || entfernung <= 0)
  {
    entfernung = 0;
  }
  else
  {
    Liter = 199 - entfernung;
    Liter = Liter * 84.7457;
  }
  Serial.println(Liter);
  return String(Liter);
}

//Auswertung wann welches Bild angezeigt werden soll
String getBild() {
  if (Liter >= 0 && Liter <= 1833)
  {
    Bild = "/bat_emty.jpg";
  }
  else if (Liter >= 1833 && Liter <= 3666)
  {
    Bild = "/bat_1.jpg";
  }
  else if (Liter >= 3666 && Liter <= 5500)
  {
    Bild = "/bat_2.jpg";
  }
  else if (Liter >= 5500 && Liter <= 7332)
  {
    Bild = "/bat_3.jpg";
  }
  else if (Liter >= 7332 && Liter <= 9165)
  {
    Bild = "/bat_4.jpg";
  }
  else if (Liter >= 9165 && Liter <= 16000)
  {
    Bild = "/bat_full.jpg";
  }
  Serial.println(Bild);
  return String(Bild);
}


// Platzhalter im HTML Code
String colldata(const String& var) {
  Serial.println(var);
  if (var == "LITER") {
    return getLiter();
  }
}

void setup() {
  Serial.begin(115200);

  // Starte SPIFFS
  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  pinMode(trigger, OUTPUT);
  pinMode(echo, INPUT);
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print Local IP Address
  Serial.println(WiFi.localIP());

  // Webseite Laden
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/index.html", String(), false, colldata);
  });

  // CSS Datei Laden
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Liter an Webseite übergeben
  server.on("/Liter", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/plain", getLiter().c_str());
  });
  // Bild an Webseite übergeben
  server.on("/bat", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, getBild().c_str(), "image/jpg");
  });

  // Start server
  server.begin();
}

void loop() {

}
				
			

Funktionsweise

				
					#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
				
			
Als erstes werden die Librarys inkludiert.
				
					const char* ssid = "DEIN WLAN";
const char* password = "DEIN PASSWORT";

AsyncWebServer server(80);
				
			
Für das WLAN werden die Zugangsdaten benötigt und der Web Server wird mit dem Port 80 erstellt.
				
					char* Bild = "";

int trigger = 12;
int echo = 13;
long dauer = 0;

long entfernung = 0;
long Liter = 0;
				
			
Definieren der Variablen (char, int und long). char* Bild  speichert die Bildinformation, int trigger und echo sind für den Ultraschallsensor Zuständig. Der long entfernung gibt den die gemessene Entfernung des Ultraschallsensors wieder und der long Liter ist für die Berechnung der Literzahl da.

Die Berechnung des Volumen:

Hier werden 2 Funktionen erstellt (getLiter und getBild) die einmal den Sensorwert als LONG zurück gibt und einmal den Bildname als CHAR zurück gibt.
				
					//Berechnung der Liter für die Webseite
String getLiter() {
  digitalWrite(trigger, LOW);
  delay(5);
  digitalWrite(trigger, HIGH);
  delay(10);
  digitalWrite(trigger, LOW);
  dauer = pulseIn(echo, HIGH);
  // Prüfen ob Messwert zwischen 200cm und 0cm liegt
  entfernung = (dauer / 2) / 29.1;
    if (entfernung >= 200 || entfernung <= 0)
  {
    entfernung = 0;
  }
  else
  {
    Liter = 199 - entfernung;
    Liter = Liter * 84.7457;
  }
  Serial.println(Liter);
  return String(Liter);
}
				
			
Meine Zisterne fast 10000 Liter. Die 199 cm ist die Enfternung vom Sensor bis zum Boden der Zisterne. Jetzt brauchen wir den Multiplikator, die 100% Füllstand sind bei mir bei 118 cm erreicht, also 10000/118=84,7457.
Das ist nun der Multiplikator aus der Sketch.
    Liter = 199 – entfernung;
    Liter = Liter * 84.7457;
				
					// Platzhalter im HTML Code
String colldata(const String& var) {
  Serial.println(var);
  if (var == "LITER") {
    return getLiter();
  }
}
				
			
Die Funktion colldata() weist dem Platzhalter in der HTML Datei (%LITER%) den Wert zu.
				
					  // Webseite Laden
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/index.html", String(), false, colldata);
  });

  // CSS Datei Laden
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Liter an Webseite übergeben
  server.on("/Liter", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/plain", getLiter().c_str());
  });
  // Bild an Webseite übergeben
  server.on("/bat", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, getBild().c_str(), "image/jpg");
  });
				
			
Mit den server.on Befehle werden die Daten wie index.html, style.css und die Werte in die Weitseite gepackt und auf dem SPIFFS gelesen.
Man könnte jetzt die Daten auch einzeln abrufen wie zu Beispiel http://ipadresse/Liter dann bekommt man hier die Literzahl angezeigt.

Der HTML Code

<!DOCTYPE html>
<!–
Projekt Details im Blog https://arduino-projekte.info
–>
<html>
<head>
<title>Zisterne 3.0</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”refresh” content=”5″>
<link rel=”icon” href=”data:,”>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>Zisterne 3.0</h1>
<p>
<span id=”Liter”>%LITER%</span>
<span class=”label”>Liter</span>
</p>
<p><img src=”/bat”></p>
</body>
</html>

Die Webseite wird über die IP Adresse des EPS8266 aufgerufen. Diese könnt Ihr über den Seriellen Monitor abrufen, oder über euren WLAN Router.
				
					<meta http-equiv="refresh" content="5">
				
			
Hier könnt Ihr einstellen in welchen Intervall die Webseite aktualisiert werden soll. In diesem Fall sind es 5 sekunden.
				
					<p><span id="Liter">%LITER%</span>
    <span class="label">Liter</span>
</p>  
<p><img src="/bat"></p>
				
			
Der %LITER% dient hier als Platzhalter und wird vom ESP8266 über den Sketch beschrieben. Hier wird die Liter Anzahl übergeben. Der “/bat” ist ebenfalls der Char String der dann von ESP beschrieben und das Bild (Batterie) übergeben wird.

Der CSS Code

CSS wird verwenden um Webseite von der Darstellung zu verändern. Alles was Schriftarten, Schriftgörßen, Farben und so weiter angeht.
				
					/***
  Projekt Details im Blog https://arduino-projekte.info
***/

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  font-size: 40px;
  color: #4054b2;
}
p {
  font-size: 30px;
}

.label {
  font-size: 30px;
  vertical-align:middle;
  padding-bottom: 5px;
}

				
			

Upload Code und Datein

  • Sketch -> Sketch Ordner anzeigen, und erstellte einen Ordner Names data. In diese Ordner packt Ihr eure Daten wie Bilder, HTML und CSS Datein.
  • Werkzeuge –> Board, wählt euer ESP8266 Board aus was Ihr benutzt.
  • Dann geht Ihr auf Werkzeuge –> Flash size and select 4M (FS:1MB) es kann hier auch stehen 4M (1M SPIFFS).
Wenn der Sketch erfolgreich hochgeladen wurde, müssen nun noch die Daten auf den SPIFFS geladen werden.

Dateisystem für SPIFFS upload.

Um das Upload Tool für das SPIFFS nutzen zu kommen müssen die Daten (Bilder, HTML-Datein usw.) im Sketch Ordern mit abgelegt werden. Dazu im Sketch Ordner eine Ordner Names data erstellen und dort die Daten ablegen.

Sketch Ordner

Data Ordner

Werkzeug -> ESP8266 Sketch Data Uoload
Wichtig Ihr müsst etwas warten bis die Daten hochgeladen sind. Wenn im Ausgabefenster die 100% angezeigt werden ist er noch nicht fertig. Ihr muss auf das “Leaving… Hard resetting via RTS pin…” warten.
noch nicht fertig
fertig

Hier könnt Ihr euch den Sketch runterladen.

Weitere Beträge zum Thema Füllstand:

Zisterne mit Wemos messen

Zisterne Füllstandsanzeige

Wasserstand einer Zisterne mit einem Wemos D1 mini überwachen. Hier zeige ich euch wir Ihr mit einem Wemos den Wasserstand einer Zisterne überwachen könnt. Ich

Weiterlesen »

Letzte Aktualisierung am 24.10.2021 / Affiliate Links / Bilder von der Amazon Product Advertising API