Speel met Fire via wifi (ESP8266, NeoPixels en Android-app)

Over dit project

Je kunt deze en andere geweldige tutorials lezen op Officiële website ElectroPeak

Creëer een cool vuursimulatie-effect met Wi-Fi draadloze bediening. Een mobiele app (voor Android-smartphones) met een mooie interface is klaar om te installeren om met je creatie te spelen! We zullen ook Arduino en ESP8266 gebruiken om de vlam te regelen. Aan het einde van dit project leer je:

• Hoe NeoPixels werken.
• Hoe ESP8266 te programmeren en variabelen te regelen via Wi-Fi
• Een cool vuureffect creëren met NeoPixels

Een inleiding tot NeoPixels

Individueel adresseerbare LED's of vaak NeoPixels genoemd, bestaan ​​​​al geruime tijd en u kent ze waarschijnlijk, maar als u dat niet doet, zijn ze als normale RGB-LED's, maar zoals de naam al doet vermoeden, kan de kleur van elk van hen afzonderlijk worden geadresseerd , waardoor oneindig coole patronen en animaties kunnen worden gemaakt. Voor WS2812b heb je maar 3 draden nodig, 2 voor voeding en 1 voor data. Dat betekent dat je slechts één vrije Arduino-pin nodig hebt om een ​​heleboel LED's aan te sturen!

In dit project gaan we deze slimme leds gebruiken om een ​​vuureffect te creëren. Voor het aansturen van LED's gaan we de geweldige FastLED-bibliotheek gebruiken. We gebruiken het Fire2012-schetsvoorbeeld van de bibliotheek geschreven door Mark Kriegsman. We gebruiken 6 strips LED's met elk 30 LED's (totaal 180 LED's) we plakken deze LED's op een stuk PVC-buis en plaatsen ze in een glazen cilinder (deze glazen cilinders worden meestal gebruikt als vazen). We moeten het licht van de LED's diffunderen om ze ononderbroken te laten lijken, daarvoor hebben we overtrekpapier gebruikt dat licht doorlaat en licht verspreidt.

Bouw

Koop eerst een goede glazen cilinder, onze cilinder heeft een lengte van 60 cm en een diameter van 12 cm.

Als je een matglazen cilinder kunt vinden, zal dat mooi zijn, maar als het een helder glas is, kun je overtrekpapier gebruiken om het cilinderoppervlak (binnen- of buitenoppervlak) te bedekken, overtrekpapier verstrooit het licht goed en levert goede resultaten op.

Nadat je een glazen cilinder hebt gekregen, meet je de interne lengte en knip je de PVC-buis af zodat deze in de cilinder past. Onze glazen cilinder heeft een hoogte van 60 cm (exclusief basis heeft deze een interne lengte van 59 cm), dus we snijden onze PVC-buis op 59 cm. Op deze pijp plak je LED strips, een pijp met een diameter van 4cm zou perfect zijn.

Vervolgens moeten we onze ledstrip in 6 gelijke delen knippen, hier gebruiken we een strip met een dichtheid van 60 LED's / m (u kunt hogere dichtheden gebruiken voor betere effecten als u dat wilt) we gebruiken zes lengtes van 50 cm, dat betekent dat we 3 meter nodig hebben. Spreid de zes lengtes gelijkmatig rond de PVC-buis en plak de strips op de buis. Zo zou het eruit moeten zien.

Aan de LED-strips aan elkaar kunt u ofwel rechtstreeks draden aan de strip solderen volgens de volgende tekening of eerst pin-headers aan de strips solderen en vervolgens breadboard-draden gebruiken om ze aan te sluiten.

Als alle LED-stripaansluitingen klaar zijn, moet u de buis in de cilinder plaatsen. Om de buis in de cilinder te centreren, kunt u schuim gebruiken om een ​​cirkel te snijden die een buitendiameter heeft die gelijk is aan de binnendiameter van de glazen cilinder en een binnendiameter die gelijk is aan de buitendiameter van de PVC-buis. Bereid er twee voor aan elke kant van de pijp. Bevestig deze onderdelen aan de uiteinden en plaats de pijp voorzichtig in de cilinder.

Code

We gebruiken Arduino IDE voor het coderen en uploaden naar ESP8266. U moet een bord gebruiken met een ESP8266 met 3 MB SPIFFS als u de controllersoftwarebestanden op de SPIFFS wilt uploaden. SPIFFS is een afkorting voor "Serial Peripheral Interface Flash File System". U kunt de controllerbestanden naar dit geheugen uploaden om de bestanden vanaf die locatie te bedienen. Door dit te doen, kunt u uw browser openen (op uw telefoon of notebook) en naar het adres van uw ESP gaan (de standaardinstelling is 192.168.4.1) en u krijgt de controllerinterface in uw browser zonder de app te hoeven installeren, als u een iPhone of iPad hebt, is dit uw enige keuze.

Upload de volgende schets naar je ESP-bord. We hebben een FastLED-bibliotheek nodig, dus voeg deze eerst toe aan je Arduino IDE als je dat nog niet hebt gedaan (je kunt hem hier downloaden). De brandsimulatiecode is de fire2012-schets van Mark Kriegsman die u in de voorbeelden kunt vinden. Dat voorbeeld is voor één ledstrip, maar hier hebben we de code aangepast om een ​​variabel aantal strips te gebruiken. Hoe meer strips/leds, hoe groter het effect.

De logica van de brandsimulatie wordt duidelijk beschreven in het voorbeeldbestand. Als je wilt weten hoe het werkt, lees dan de broncode van het voorbeeld.

#include #include #include "FastLED.h"#include "EEPROM.h"#include "FS.h" //required for SPIFFS#define DATA_PIN 5 #define LED_TYPE WS2811#define COLOR_ORDER GRB#define NUM_LEDS 30#define NUM_STRIPS 6#define CHIPSET WS2812B//addresses to save data to EEPROM to behoud the state of fire simulatie 9#define BriAdr 15#define FpsAdr 16#define SparkingAdr 17#define CoolingAdr 18#define EEPROMCheckAdr 20 // als deze waarde 250 is, nemen we aan dat we eerder hebben opgeslagen in EEPROM en gegevens van die CRGB-leds hebben geladen [NUM_STRIPS * NUM_LEDS];String inData;uint8_t FPS =100; //FRAMES_PER_SECONDuint8_t SPARKING =150; uint8_t KOELING =90; uint8_t HELDERHEID =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; //indien waar, gaan we opslaan naar EEprom.unsigned long changeMillis =0; //wijzigingen worden opgeslagen 1 minuut nadat geen wijziging is toegepast om te voorkomen dat EEPROM wear.bool initSetup =true;CRGBPalette16 gPal;ESP8266WebServer server(80); //Webserver-object. Zal luisteren in poort 80 (standaard voor HTTP)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); // sanity delay FastLED.addLeds(leds, NUM_STRIPS * NUM_LEDS).setCorrection(TypicalLEDStrip); FastLED.setBrightness(HELDERHEID);}void loop(){ server.handleClient(); // Afhandeling van inkomende verzoeken if (change) { if (millis() - changeMillis> 60000) { change =false; saveToEEPROM(); } } vuur(); FastLED.show(); FastLED.delay (1000 / FPS);}void Fire2012WithPalette (int stripNo){ static byte heat [NUM_STRIPS][NUM_LEDS]; // Stap 1. Koel elke cel een beetje af for(int i =0; i =2; k--) { heat[stripNo][k] =(heat[stripNo] [k - 1] + warmte[stripNo][k - 2] + warmte[stripNo][k - 2] ) / 3; } // Stap 3. Steek willekeurig nieuwe 'vonken' van warmte aan de onderkant aan if( random8() =periode * 1000) {// sla de laatste keer dat u met de LED knipperde op previousMillis =currentMillis; retourneer waar; } else { return false; }} ongeldige EEPROMupdate (byte-adres, bytewaarde) {if (EEPROM.read (adres)! =waarde) {EEPROM.write (adres, waarde); EEPROM.commit(); } return;} ongeldig saveToEEPROM(){ EEPROMupdate(BriAdr, BRIGHTNESS); EEPROM-update (FpsAdr, FPS); EEPROM-update (SparkingAdr, SPARKING); EEPROM-update (CoolingAdr, KOELING); for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { EEPROMupdate((i * 3 + j), csRGB[i][j]); } }}void handleCS0Change(){ csRGB[0][0] =str2int(server.arg("R")); csRGB[0][1] =str2int(server.arg("G")); csRGB[0][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS1Change(){ csRGB[1][0] =str2int(server.arg("R")); csRGB[1][1] =str2int(server.arg("G")); csRGB[1][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS2Change(){ csRGB[2][0] =str2int(server.arg("R")); csRGB[2][1] =str2int(server.arg("G")); csRGB[2][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS3Change(){ csRGB[3][0] =str2int(server.arg("R")); csRGB[3][1] =str2int(server.arg("G")); csRGB[3][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleConf(){ if (server.arg("brightness") !="") { HELDERHEID =str2int(server.arg("brightness")); FastLED.setHelderheid (HELDERHEID); changeMillis =millis(); veranderen =waar; } if (server.arg("fps") !="") { FPS =str2int(server.arg("fps")); changeMillis =millis(); veranderen =waar; } if (server.arg("sparking") !="") { SPARKING =str2int(server.arg("sparking")); changeMillis =millis(); veranderen =waar; } if (server.arg("koeling") !="") { KOELING =str2int(server.arg("koeling")); changeMillis =millis(); veranderen =waar; } server.sendHeader("Verbinding", "sluiten"); server.sendHeader("Access-Control-Allow-Origin", "*"); server.send(200, "tekst/plat", ""); // Retourneert het HTTP-antwoord} void loadConfig () { if (EEPROM.read (EEPROMCheckAdr) ==250) { BRIGHTNESS =EEPROM.read (BriAdr); SPARKING =EEPROM.lezen (SparkingAdr); KOELING =EEPROM.lezen(CoolingAdr); FPS =EEPROM.lezen (FpsAdr); als (FPS ==0) FPS =100; for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { csRGB[i][j] =EEPROM.read(i * 3 + j); } } }anders{ EEPROMupdate(BriAdr,HELDERHEID); EEPROM-update (FpsAdr,FPS); EEPROM-update (KoelingAdr, KOELING); EEPROM-update (SparkingAdr, SPARKING); for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { EEPROMupdate((i*3+j) , csRGB[i][j]); } } EEPROMupdate(EEPROMCheckAdr, 250); }}void cWiFi(){ WiFi.softAP("ElectroPeak's Flame", ""); // stel hier een wachtwoord in als je wilt, bijv. WiFi.softAP ("ElectroPeak's Flame", "12345678"); IPA-adres mijnIP =WiFi.softAPIP(); 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(); //Start de server} 

Om de "look and feel" van het vuur te regelen, zijn er twee variabelen om mee te spelen:SPARKING en COOLING, die je dynamisch kunt regelen in de controllersoftware die is geüpload naar de SPIFFS of de Android-app die je kunt downloaden. Je kunt hier ook FPS regelen.

De kleur van de haard wordt geregeld met een kleurenpalet dat ook te wijzigen is via de controllersoftware (via 4 kleurstops). Klik/tik gewoon op elke kleurencirkel die een kleurstop voorstelt om de kleur in te stellen, nadat u de kleur hebt ingesteld, raakt u dicht om het dialoogvenster te sluiten en de verandering te zien.

Hoe te uploaden naar SPIFFS?

Om de bestanden met Arduino IDE naar het SPIFFS-geheugen te uploaden, moet u eerst een map met de naam "data" maken in de map van de schets en alle bestanden die u wilt uploaden in die map plaatsen. Het hier geüploade bestand bevat zowel de schets als deze map.

Vervolgens heb je Arduino ESP8266 filesystem uploader plugin voor Arduino nodig. Volg de instructies op de Github-pagina en installeer de plug-in. Na installatie vindt u ESP8266 Sketch Data Upload onder tools menu. Zet je ESP in programmeermodus en klik erop. Wees geduldig en laat de bestanden uploaden, dat kan even duren. Opmerking:stel "uploadsnelheid" in op 921600 om het sneller te maken.

Hoe werkt het?

De schets die naar het ESP8266-bord is geüpload, creëert daarop een webserver, die reageert op de verzoeken die door de app worden verzonden. De app stuurt eenvoudig GET-verzoeken naar de server (ESP8266). De kleurgegevens om het palet te maken worden verzonden als argumenten in het get-verzoek, hetzelfde geldt voor andere parameters zoals Sparking- en Cooling-parameters.

Om bijvoorbeeld de helderheid in te stellen, wordt het volgende verzoek verzonden door de app

http://192.168.4.1/conf?brightness=224

er is een handler voor dit verzoek in de schets die de helderheid instelt wanneer dit verzoek wordt ontvangen. Bekijk de code voor meer informatie.

Android-app

Android-app is gemaakt met behulp van Phonegap. Het is een technologie waarmee u platformonafhankelijke mobiele apps kunt maken met behulp van webtechnologieën (HTML, CSS, Javascript). U kunt de broncode verkrijgen door deze pagina te bezoeken

Je kunt deze en andere geweldige tutorials lezen op Officiële website ElectroPeak

#include #include #include "FastLED.h"#include "EEPROM.h"#include "FS.h" //required for SPIFFS#define DATA_PIN 5#define LED_TYPE WS2811#define COLOR_ORDER GRB#define NUM_LEDS 30# definieer NUM_STRIPS 6#define CHIPSET WS2812B//adressen om gegevens op te slaan in EEPROM om de brandstatus te behouden simulatie#define cs0Adr 0#define cs1Adr 3#define cs2Adr 6#define cs3Adr 9#define BriAdr 15#define FpsAdr 16#define FpsAdr 16#define 17 #define CoolingAdr 18#define EEPROMCheckAdr 20 // als deze waarde 250 is, nemen we aan dat we eerder in EEPROM hebben opgeslagen en gegevens van die CRGB-leds hebben geladen [NUM_STRIPS * NUM_LEDS];String inData;uint8_t FPS =100; //FRAMES_PER_SECONDuint8_t SPARKING =150; uint8_t KOELING =90; uint8_t HELDERHEID =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; //indien waar, gaan we opslaan naar EEprom.unsigned long changeMillis =0; //wijzigingen worden opgeslagen 1 minuut nadat geen wijziging is toegepast om te voorkomen dat EEPROM wear.bool initSetup =true;CRGBPalette16 gPal;ESP8266WebServer server(80); //Webserver-object. Zal luisteren in poort 80 (standaard voor HTTP)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); // sanity delay FastLED.addLeds(leds, NUM_STRIPS * NUM_LEDS).setCorrection(TypicalLEDStrip); FastLED.setBrightness(HELDERHEID);}void loop(){ server.handleClient(); // Afhandeling van inkomende verzoeken if (change) { if (millis() - changeMillis> 60000) { change =false; saveToEEPROM(); } } vuur(); FastLED.show(); FastLED.delay (1000 / FPS);}void Fire2012WithPalette (int stripNo){ static byte heat [NUM_STRIPS][NUM_LEDS]; // Stap 1. Koel elke cel een beetje af for(int i =0; i =2; k--) { heat[stripNo][k] =(heat[stripNo] [k - 1] + warmte[stripNo][k - 2] + warmte[stripNo][k - 2] ) / 3; } // Stap 3. Steek willekeurig nieuwe 'vonken' van warmte aan de onderkant aan if( random8() =periode * 1000) {// sla de laatste keer dat u met de LED knipperde op previousMillis =currentMillis; retourneer waar; } else { return false; }} ongeldige EEPROMupdate (byte-adres, bytewaarde) {if (EEPROM.read (adres)! =waarde) {EEPROM.write (adres, waarde); EEPROM.commit(); } return;} ongeldig saveToEEPROM(){ EEPROMupdate(BriAdr, BRIGHTNESS); EEPROM-update (FpsAdr, FPS); EEPROM-update (SparkingAdr, SPARKING); EEPROM-update (CoolingAdr, KOELING); for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { EEPROMupdate((i * 3 + j), csRGB[i][j]); } }}void handleCS0Change(){ csRGB[0][0] =str2int(server.arg("R")); csRGB[0][1] =str2int(server.arg("G")); csRGB[0][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS1Change(){ csRGB[1][0] =str2int(server.arg("R")); csRGB[1][1] =str2int(server.arg("G")); csRGB[1][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS2Change(){ csRGB[2][0] =str2int(server.arg("R")); csRGB[2][1] =str2int(server.arg("G")); csRGB[2][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleCS3Change(){ csRGB[3][0] =str2int(server.arg("R")); csRGB[3][1] =str2int(server.arg("G")); csRGB[3][2] =str2int(server.arg("B")); 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])); changeMillis =millis(); change =true;}void handleConf(){ if (server.arg("brightness") !="") { HELDERHEID =str2int(server.arg("brightness")); FastLED.setHelderheid (HELDERHEID); changeMillis =millis(); veranderen =waar; } if (server.arg("fps") !="") { FPS =str2int(server.arg("fps")); changeMillis =millis(); veranderen =waar; } if (server.arg("sparking") !="") { SPARKING =str2int(server.arg("sparking")); changeMillis =millis(); veranderen =waar; } if (server.arg("koeling") !="") { KOELING =str2int(server.arg("koeling")); changeMillis =millis(); veranderen =waar; } server.sendHeader("Verbinding", "sluiten"); server.sendHeader("Access-Control-Allow-Origin", "*"); server.send(200, "tekst/plat", ""); // Retourneert het HTTP-antwoord} ongeldig loadConfig () { if (EEPROM.read (EEPROMCheckAdr) ==250) { BRIGHTNESS =EEPROM.read (BriAdr); SPARKING =EEPROM.lezen (SparkingAdr); KOELING =EEPROM.lezen(CoolingAdr); FPS =EEPROM.lezen (FpsAdr); als (FPS ==0) FPS =100; for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { csRGB[i][j] =EEPROM.read(i * 3 + j); } } }anders{ EEPROMupdate(BriAdr,HELDERHEID); EEPROM-update (FpsAdr,FPS); EEPROM-update (KoelingAdr, KOELING); EEPROM-update (SparkingAdr, SPARKING); for (uint8_t i =0; i <4; i++) { for (uint8_t j =0; j <3; j++) { EEPROMupdate((i*3+j) , csRGB[i][j]); } } EEPROMupdate(EEPROMCheckAdr, 250); }}void cWiFi(){ WiFi.softAP("ElectroPeak's Flame", ""); // stel hier een wachtwoord in als je wilt, bijv. WiFi.softAP ("ElectroPeak's Flame", "12345678"); IPA-adres mijnIP =WiFi.softAPIP(); 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(); //Start de server}

Geen voorbeeld (alleen downloaden).