SPIFFS

ESP32 SPIFFS 3 PWM Slider

Der ESP32 besitzt ein internes File-System, das SPIFFS (Serial Peripheral Interface Flash File System). In diesem Projekt wird in das SPIFFS ein WEB-Server, ein CSS-File und ein Java-File kopiert. Über die IP-Adresse wird der WEB-Server aufgerufen und drei Slider angezeigt, mit denen drei Ausgänge mit PWM gedimmt werden.

Hardware

Die Hardware für den SPIFFS WEB-Server:

1 x ESP32

3 x LEDs

3 x 220R Widerstände

Verdrahtung

Die Verdrahtung der PWM-Ausgänge

ESP32 PWM 1 -> PIN 12

ESP32 PWM 2 -> PIN 13

ESP32 PWM 3 -> PIN 14

SPIFFS-Vorbereitung

Den FileSystem Uploader in der Arduino IDE installieren

Das Verzeichnis /Arduino/tools/ESP32FS/tool/ erstellen

Die Datei esp32fs.jar in das Verzeichnis kopieren

(ESP8266 Arduino-Erweiterung) ESP8266FS-0.1.3.zip

Die Arduino IDE neu starten

Im Pull-Down-Menü "Werkzeuge" befindet sich jetzt das Menü "ESP32 Sketch Data Upload"

SPIFFS-Test

Zunächst wird der SPIFFS Upload getestet

Die txt-Datei in den Programm-Ordner /SPIFFS-Test/data/ kopieren

In der Arduin IDE Menü "Sketch" mit "Sketch-Ordner anzeigen" (Strg+K) den /data Ordner auswählen

In der Arduino IDE "Werkzeuge", "ESP32 Sketch Data Upload" die txt-Datei hochladen

Das Test-Programm in den ESP32 laden und mit dem Seriellen Monitor den Upload testen

SPIFFS-Test-Programm

C++ Code:

/*************************************************************************************************
                                      PROGRAMMINFO
**************************************************************************************************
Funktion: ESP32 SPIFFS-Test
**************************************************************************************************
Version: 30.05.2021
**************************************************************************************************
Board: ESP32 Dev Module
**************************************************************************************************
C++ Arduino IDE V1.8.13
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
**************************************************************************************************
1. Strg+K Ordner auswaehlen
2. ESP32 Sketch Data Upload
3. Hochladen
4. Mit dem Seriellen Monitor testen
**************************************************************************************************/
#include "SPIFFS.h"

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

  if(!SPIFFS.begin(true)){
    Serial.println("SPIFFS-Error");
    return;
  }

  File file = SPIFFS.open("/SPIFFS-txt.txt");
  if(!file){
    Serial.println("Fehler beim Öffnen der Datei zum Lesen");
    return;
  }

  Serial.println("Dateiinhalt:");
  while(file.available()){
    Serial.write(file.read());
  }
  file.close();
}

void loop() {

}

RAW code

SPIFFS-Files auflisten

C++ Code:

/*************************************************************************************************
                                      PROGRAMMINFO
**************************************************************************************************
Funktion: ESP32 SPIFFS-Files auflisten
**************************************************************************************************
Version: 30.05.2021
**************************************************************************************************
Board: ESP32 Dev Module
**************************************************************************************************
C++ Arduino IDE V1.8.13
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
**************************************************************************************************
1. Strg+K Ordner auswaehlen
2. ESP32 Sketch Data Upload
3. Hochladen
4. Mit dem Seriellen Monitor testen
**************************************************************************************************/
#include "SPIFFS.h"

void listAllFiles(){

  File root = SPIFFS.open("/");

  File file = root.openNextFile();

  while(file){

      Serial.print("FILE: ");
      Serial.println(file.name());

      file = root.openNextFile();
  }

}

void setup() {

  Serial.begin(115200);

  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  Serial.println("\n\n----Listing files before format----");
  listAllFiles();

/* bool formatted = SPIFFS.format();

  if(formatted){
    Serial.println("\n\nSuccess formatting");
  }else{
    Serial.println("\n\nError formatting");
  }

  Serial.println("\n\n----Listing files after format----");
  listAllFiles();
 */

}

void loop() {}

RAW code

SPIFFS formatieren

C++ Code:

/*************************************************************************************************
                                      PROGRAMMINFO
**************************************************************************************************
Funktion: ESP32 SPIFFS formatieren
**************************************************************************************************
Version: 30.05.2021
**************************************************************************************************
Board: ESP32 Dev Module
**************************************************************************************************
C++ Arduino IDE V1.8.13
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
**************************************************************************************************
1. Strg+K Ordner auswaehlen
2. ESP32 Sketch Data Upload
3. Hochladen
4. Mit dem Seriellen Monitor testen
**************************************************************************************************/
#include "SPIFFS.h"

void listAllFiles(){

  File root = SPIFFS.open("/");

  File file = root.openNextFile();

  while(file){

      Serial.print("FILE: ");
      Serial.println(file.name());

      file = root.openNextFile();
  }

}

void setup() {

  Serial.begin(115200);

  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  Serial.println("\n\n----Listing files before format----");
  listAllFiles();

 bool formatted = SPIFFS.format();

  if(formatted){
    Serial.println("\n\nSuccess formatting");
  }else{
    Serial.println("\n\nError formatting");
  }

  Serial.println("\n\n----Listing files after format----");
  listAllFiles();


}

void loop() {}

RAW code

SPIFFS Hauptprogramm

Nach den erfolgreichen SPIFFS-Test wird das Hauptprogramm geladen

Die Index, CSS und JS-Datei in den Programmordner Ordner /SPIFFS-Hauptprogramm/data/ kopieren

In der Arduino IDE Menü "Sketch" mit "Sketch-Ordner anzeigen" (Strg+K) den /data Ordner auswählen

In der Arduino IDE "Werkzeuge", "ESP32 Sketch Data Upload" die Index, CSS und JS-Datei hochladen

Das Hauptprogramm-Programm in den ESP32 laden und mit dem Seriellen Monitor die IP-Adresse anzeigen lassen

Den Browser mit der IP-Adresse starten

C++ Code:

/*************************************************************************************************
                                      PROGRAMMINFO
**************************************************************************************************
Funktion: ESP32 SPIFFS 3 PWM Slider
**************************************************************************************************
Version: 30.05.2021
**************************************************************************************************
Board: ESP32 Dev Module
**************************************************************************************************
C++ Arduino IDE V1.8.13
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
**************************************************************************************************
1. Strg+K Ordner auswählen
2. ESP32 Sketch Data Upload
3. Hochladen
4. Hauptprogramm hochladen
5. Mit dem Seriellen Monitor die IP-Adresse abfragen
6. Mit dem Browser das Programm testen
**************************************************************************************************/

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include <Arduino_JSON.h>

const char* ssid = "R2-D2";
const char* password = "xxx";

// AsyncWebServer port 80
AsyncWebServer server(80);

// WebSocket object
AsyncWebSocket ws("/ws");

// LED GPIO
const int ledPin1 = 12;
const int ledPin2 = 13;
const int ledPin3 = 14;

String message = "";
String sliderValue1 = "0";
String sliderValue2 = "0";
String sliderValue3 = "0";

int dutyCycle1;
int dutyCycle2;
int dutyCycle3;

// PWM Channel
const int freq = 5000;
const int ledChannel1 = 0;
const int ledChannel2 = 1;
const int ledChannel3 = 2;

const int resolution = 8;

//Json Variable Slider Werte
JSONVar sliderValues;

//Slider Werte abholen
String getSliderValues(){
  sliderValues["sliderValue1"] = String(sliderValue1);
  sliderValues["sliderValue2"] = String(sliderValue2);
  sliderValues["sliderValue3"] = String(sliderValue3);

  String jsonString = JSON.stringify(sliderValues);
  return jsonString;
}

// Initialize SPIFFS
void initFS() {
  if (!SPIFFS.begin()) {
    Serial.println("An error has occurred while mounting SPIFFS");
  }
  else{
   Serial.println("SPIFFS mounted successfully");
  }
}

// WiFi starten
void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void notifyClients(String sliverValues) {
  ws.textAll(sliverValues);
}

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
  AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
    data[len] = 0;
    message = (char*)data;
    if (message.indexOf("1s") >= 0) {
      sliderValue1 = message.substring(2);
      dutyCycle1 = map(sliderValue1.toInt(), 0, 100, 0, 1023);
      Serial.println(dutyCycle1);
      Serial.print(getSliderValues());
      notifyClients(getSliderValues());
    }
    if (message.indexOf("2s") >= 0) {
      sliderValue2 = message.substring(2);
      dutyCycle2 = map(sliderValue2.toInt(), 0, 100, 0, 1023);
      Serial.println(dutyCycle2);
      Serial.print(getSliderValues());
      notifyClients(getSliderValues());
    }
    if (message.indexOf("3s") >= 0) {
      sliderValue3 = message.substring(2);
      dutyCycle3 = map(sliderValue3.toInt(), 0, 100, 0, 1023);
      Serial.println(dutyCycle3);
      Serial.print(getSliderValues());
      notifyClients(getSliderValues());
    }
    if (strcmp((char*)data, "getValues") == 0) {
      notifyClients(getSliderValues());
    }
  }
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
  switch (type) {
    case WS_EVT_CONNECT:
      Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
      break;
    case WS_EVT_DISCONNECT:
      Serial.printf("WebSocket client #%u disconnected\n", client->id());
      break;
    case WS_EVT_DATA:
      handleWebSocketMessage(arg, data, len);
      break;
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

void initWebSocket() {
  ws.onEvent(onEvent);
  server.addHandler(&ws);
}


void setup() {
  Serial.begin(115200);
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(ledPin3, OUTPUT);
  initFS();
  initWiFi();

  // configure LED PWM functionalitites
  ledcSetup(ledChannel1, freq, resolution);
  ledcSetup(ledChannel2, freq, resolution);
  ledcSetup(ledChannel3, freq, resolution);

  // attach the channel to the GPIO to be controlled
  ledcAttachPin(ledPin1, ledChannel1);
  ledcAttachPin(ledPin2, ledChannel2);
  ledcAttachPin(ledPin3, ledChannel3);


  initWebSocket();

  // Web Server Root URL
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.serveStatic("/", SPIFFS, "/");

  // Start server
  server.begin();

}

void loop() {
  ledcWrite(ledChannel1, dutyCycle1);
  ledcWrite(ledChannel2, dutyCycle2);
  ledcWrite(ledChannel3, dutyCycle3);

  ws.cleanupClients();
}

RAW code

Serieller Monitor SPIFFS-Test

SPIFFS WEB-Server