NeoPixel LED-Strip per WLAN steuern: ESP8266-Projekt mit Android-App

Komponenten und Materialien

ElectroPeak ESP8266 Serial WIFI Witty Cloud Board	×	1
NeoPixel Smart LED Strip (60 LED/m)	×	3
ElectroPeak Logic Level Converter	×	1
ElectroPeak 21cm 40P Male To Female Jumper Wire	×	1
PVC-Rohr 60cm, 2 Zoll	×	1
Transparenzpapier (Tracing Paper)	×	1
Glaszylinder	×	1
5V Netzteil (mind. 9A)	×	1
Arduino Nano R3	×	1

Benötigte Werkzeuge

• Heißklebepistole
• Lötkolben

Apps und Online-Dienste

• Arduino IDE

Über dieses Projekt

Dieses und weitere Tutorials finden Sie auf der offiziellen ElectroPeak-Website.

Erstellen Sie eine coole Feuersimulation mit WLAN-Steuerung. Eine Android-App mit schöner Oberfläche ist bereit zur Installation. Wir nutzen Arduino und ESP8266 zur Flammensteuerung. Am Ende lernen Sie:

• Wie NeoPixels funktionieren
• Wie man ESP8266 programmiert und Variablen per WLAN steuert
• Wie man einen coolen Feuereffekt mit NeoPixels erstellt

Einführung in NeoPixels

Individuell ansteuerbare LEDs (NeoPixels) gibt es schon länger. Falls unbekannt: Sie sind wie normale RGB-LEDs, aber jede LED lässt sich einzeln ansprechen – für unendlich viele Muster und Animationen. Beim WS2812B brauchen Sie nur 3 Drähte: 2 für Strom, 1 für Daten. Ein einziger freier Arduino-Pin steuert hunderte LEDs!

In diesem Projekt nutzen wir sie für einen Feuereffekt. Zur Ansteuerung verwenden wir die großartige FastLED-Bibliothek und den Fire2012-Sketch von Mark Kriegsman. Wir nutzen 6 LED-Streifen à 30 LEDs (gesamt 180 LEDs), geklebt auf ein PVC-Rohr in einem Glaszylinder (meist als Vase genutzt). Zum Diffundieren des Lichts dient Transparenzpapier, das Licht durchlässt und streut.

Aufbau

1. Glaszylinder besorgen: Unserer ist 60 cm lang, 12 cm Durchmesser. Mattiertes Glas wäre ideal, bei klarem Glas hilft Transparenzpapier (innen oder außen) zur Diffusion.
2. PVC-Rohr zuschneiden: Innere Länge messen, Rohr passend schneiden (unseres: 59 cm). Durchmesser ~4 cm ideal. LED-Streifen darauf kleben.
3. LED-Streifen schneiden: 6 gleich lange Stücke (hier je 50 cm von 60 LED/m Streifen = 3 Meter Gesamt). Gleichmäßig um das Rohr verteilen und aufkleben.











4. Verbinden: Entweder direkt anlöten per Schema oder Pin-Header anlöten und Breadboard-Kabel nutzen.



5. Rohr in Zylinder einsetzen: Zur Zentrierung Schaumstoffringe schneiden (Außendurchmesser = Zylinder-Innendurchmesser, Innendurchmesser = Rohr-Außendurchmesser). Je einen Ring pro Seite, Rohr vorsichtig hineinschieben.

Code

Wir nutzen Arduino IDE für ESP8266. Benötigt ein Board mit 3 MB SPIFFS, um Controller-Dateien hochzuladen. SPIFFS = "Serial Peripheral Interface Flash File System". Damit können Sie im Browser (Handy/Notebook) die ESP-Adresse (Standard: 192.168.4.1) aufrufen und die Steueroberfläche nutzen – ohne App-Installation, ideal für iOS.

Folgenden Sketch auf den ESP hochladen. FastLED-Bibliothek vorher in Arduino IDE installieren (Download hier). Der Feuersimulations-Code basiert auf Mark Kriegsmans Fire2012-Beispiel (in den Examples). Das Original ist für einen Streifen; hier für variable Streifenzahl erweitert. Mehr Streifen/LEDs = besserer Effekt.

Die Logik der Feuersimulation ist im Beispielcode gut beschrieben.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FastLED.h"
#include "EEPROM.h"
#include "FS.h" // für SPIFFS

#define DATA_PIN 5
#define LED_TYPE WS2811
#define COLOR_ORDER GRB
#define NUM_LEDS 30
#define NUM_STRIPS 6
#define CHIPSET WS2812B

// EEPROM-Adressen für Persistenz
#define cs0Adr 0
#define cs1Adr 3
#define cs2Adr 6
#define cs3Adr 9
#define BriAdr 15
#define FpsAdr 16
#define SparkingAdr 17
#define CoolingAdr 18
#define EEPROMCheckAdr 20 // Wert 250 = zuvor gespeichert

CRGB leds[NUM_STRIPS * NUM_LEDS];
String inData;
uint8_t FPS = 100;
uint8_t SPARKING = 150;
uint8_t COOLING = 90;
uint8_t BRIGHTNESS = 100;
uint8_t csRGB[4][3] = {{0,0,0}, {255,0,0}, {255,127,0}, {255,255,255}};
unsigned long previousMillis = 0;
bool change = false;
unsigned long changeMillis = 0;
bool initSetup = true;
CRGBPalette16 gPal;
ESP8266WebServer server(80);

void setup() {
  EEPROM.begin(200);
  cWiFi();
  setupFastLED();
  loadConfig();
  gPal = CRGBPalette16(
    CRGB(csRGB[0][0],csRGB[0][1],csRGB[0][2]),
    CRGB(csRGB[1][0],csRGB[1][1],csRGB[1][2]),
    CRGB(csRGB[2][0],csRGB[2][1],csRGB[2][2]),
    CRGB(csRGB[3][0],csRGB[3][1],csRGB[3][2])
  );
}

inline void setupFastLED() {
  delay(1000);
  FastLED.addLeds<CHIPSET, DATA_PIN, COLOR_ORDER>(leds, NUM_STRIPS * NUM_LEDS).setCorrection(TypicalLEDStrip);
  FastLED.setBrightness(BRIGHTNESS);
}

void loop() {
  server.handleClient();
  if (change) {
    if (millis() - changeMillis > 60000) {
      change = false;
      saveToEEPROM();
    }
  }
  fire();
  FastLED.show();
  FastLED.delay(1000 / FPS);
}

void Fire2012WithPalette(int stripNo) {
  static byte heat[NUM_STRIPS][NUM_LEDS];
  // 1. Abkühlen
  for (int i = 0; i < NUM_LEDS; i++) {
    heat[stripNo][i] = qsub8(heat[stripNo][i], random8(0, ((COOLING * 10) / NUM_LEDS) + 2));
  }
  // 2. Wärme driftet nach oben & diffundiert
  for (int k = NUM_LEDS - 1; k >= 2; k--) {
    heat[stripNo][k] = (heat[stripNo][k-1] + heat[stripNo][k-2] + heat[stripNo][k-2]) / 3;
  }
  // 3. Zufällige Funken am Boden
  if (random8() < SPARKING) {
    int y = random8(5);
    heat[stripNo][y] = qadd8(heat[stripNo][y], random8(160,200));
  }
  // 4. Wärme → Farbe via Palette
  for (int j = 0; j < NUM_LEDS; j++) {
    byte colorindex = scale8(heat[stripNo][j], 240);
    CRGB color = ColorFromPalette(gPal, colorindex);
    leds[j + stripNo * NUM_LEDS] = color;
  }
}

void fire() {
  for (int i = 0; i < NUM_STRIPS; i++) Fire2012WithPalette(i);
}

int str2int(String InputStr) { return InputStr.toInt(); }

boolean EveryNSec(uint8_t period) {
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= period * 1000) {
    previousMillis = currentMillis;
    return true;
  }
  return false;
}

void EEPROMupdate(byte address, byte value) {
  if (EEPROM.read(address) != value) {
    EEPROM.write(address, value);
    EEPROM.commit();
  }
}

void saveToEEPROM() {
  EEPROMupdate(BriAdr, BRIGHTNESS);
  EEPROMupdate(FpsAdr, FPS);
  EEPROMupdate(SparkingAdr, SPARKING);
  EEPROMupdate(CoolingAdr, COOLING);
  for (uint8_t i = 0; i < 4; i++)
    for (uint8_t j = 0; j < 3; j++)
      EEPROMupdate(i * 3 + j, csRGB[i][j]);
}

// Handler für Webserver-Requests (Farbpaletten, Helligkeit, FPS, Sparking, Cooling)
void handleCS0Change() { /* ... */ }
void handleCS1Change() { /* ... */ }
void handleCS2Change() { /* ... */ }
void handleCS3Change() { /* ... */ }
void handleConf() { /* ... */ }
void loadConfig() { /* ... */ }
void cWiFi() {
  WiFi.softAP("ElectroPeak's Flame", ""); // Passwort optional: "12345678"
  server.on("/cs0", handleCS0Change);
  server.on("/cs1", handleCS1Change);
  server.on("/cs2", handleCS2Change);
  server.on("/cs3", handleCS3Change);
  server.on("/conf", handleConf);
  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  server.begin();
}

Zur Steuerung von "Look & Feel" gibt es zwei Hauptvariablen: SPARKING und COOLING, dynamisch über die Weboberfläche oder Android-App änderbar. Auch FPS ist einstellbar.

Die Feuerfarbe wird über eine Farbpalette mit 4 Farbstopps gesteuert – per Klick/Tap auf die Farbkreise änderbar.

Upload auf SPIFFS

1. Im Sketch-Ordner einen Ordner data anlegen, alle hochzuladenden Dateien hineinkopieren.
2. Arduino ESP8266 Filesystem Uploader Plugin installieren (GitHub-Anleitung folgen). Dann unter Werkzeuge → ESP8266 Sketch Data Upload finden.
3. ESP in Programmiermodus versetzen, Upload starten. Geduld – dauert etwas. Tipp: "Upload Speed" auf 921600 setzen für schnellere Übertragung.

Funktionsweise

Der Sketch erstellt einen Webserver auf dem ESP8266, der auf App-Requests reagiert. Die App sendet einfache GET-Requests. Farbdaten für die Palette werden als Parameter übergeben, genauso wie Sparking, Cooling, etc.

Beispiel Helligkeit: https://192.168.4.1/conf?brightness=224 – ein Handler im Sketch setzt die Helligkeit entsprechend.

Android App

Erstellt mit Phonegap (Cross-Plattform via HTML/CSS/JS). Quellcode hier.

Weitere Tutorials auf ElectroPeak's offizieller Website.

Dateien

• Fire Effect Code (Arduino Sketch)
• Sketch und Data-Ordner (ZIP für SPIFFS-Upload)
• Android APK: eps_flame_android_u5Zy5Bksvp.apk