INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Vorstellung] RGB-Farbauswahl und Test mit ESP8266
26.07.2020, 14:43 (Dieser Beitrag wurde zuletzt bearbeitet: 26.07.2020 18:25 von Tommy56.)
Beitrag #1
[Vorstellung] RGB-Farbauswahl und Test mit ESP8266
Hallo zusammen,

ich stand gerade mal wieder vor dem Problem ein paar Farben für einen WS2812B-Ring auszuwählen. Da kam mir der Gedanke, die Auswahl und die Wirkung mittels einer kleinen Website vorzunehmen.
Das Ergebnis will ich Euch vorstellen. Das ganze Konstrukt basiert auf dem modularen Webserver von Fips mit den Modulen LittleFS (Filesystem im Flash - Nachfolger von SPIFFS) und Connect und wurde ebenfalls als modularer Tab eingbaut.
Die Dokumente liegen im Filesystem im Flash und können mit dem Filemanager von Fips (Aufruf: ip/fs.html) hochgeladen werden (alle html,css und js Dateien). Infos zum Filemanager und dessen Ersteinrichtung kann man bei Fips finden.
Die Anzahl der LED wird beim Aufbau der Seite vom ESP8266 geholt und das Select entsprechend gefüllt.
Ich werde hier nur den Webserver sowie ds HTML und das Javascript im Beitrag vorstellen. Der Rest ist im Zip als Anhang (alle Files).

Website index.html:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP82666 Webserver - WS2812B Farbauswahl</title>
  <meta name="description" content="WS2812B Farbauswahl">
  <link href="design.css" rel="stylesheet">
  <script language="javascript" type="text/javascript" src="functions.js"></script>
</head>

<body onload="getAnz();">
<table border="0">
  <tr style="background-color: #dadfcb;"><td colspan="2">RGB-LED steuern (onchange):</td>
    <td colspan="2">LED:&nbsp;<select name="leds" id="leds" onchange="isChange();"><option value="a" selected>alle</option></select></td></tr>
  <tr style="background-color: #dadfcb;"><td>Rot:</td><td colspan="2"><input id="rRed" type="range" value="0" max="255" style="background:red;" onchange="isChange();" /></td><td><span id="lRed">0</span></td></tr>
  <tr style="background-color: #dadfcb;"><td>Grün:</td><td colspan="2"><input id="rGreen" type="range" value="0" max="255" style="background:green;" onchange="isChange();" /><br /><td><span id="lGreen">0</span></td></tr>
  <tr style="background-color: #dadfcb;"><td>Blau:</td><td colspan="2"><input id="rBlue" type="range" value="0" max="255" style="background:blue;" onchange="isChange();" /><br /><td><span id="lBlue">0</span></td></tr>
<tr style="background-color: #dadfcb;"><td>Hell:</td><td colspan="2"><input id="rHell" type="range" value="128" max="255" style="background:gray;" onchange="isChange();" /><br /><td><span id="lHell">128</span></td></tr>
<tr style="background-color: #fecc80;"><td colspan="4">&nbsp;</td></tr>
  <tr style="background-color: #fecc80;"><td colspan="4">Werte auf dem ESP8266:</td></tr>
  <tr style="background-color: #fecc80;"><td>Rot:</td><td><span id="sRed">---</span></td><td width="100">Leds: </td><td><span id="sLeds">0</span></td></tr>
  <tr style="background-color: #fecc80;"><td>Grün:</td><td><span id="sGreen">---</span></td><td>Farbe:</td><td><span id="sFarbe">---</span></td></tr>
  <tr style="background-color: #fecc80;"><td>Blau:</td><td><span id="sBlue">---</span></td><td>Helligkeit:</td><td width="70"><span id="sHell">---</span></td></tr>
</table>
</body>
</html>

functions.js
Code:
sliderArr = ['rRed','rGreen','rBlue','rHell'];
spanArr = ['lRed','lGreen','lBlue','lHell'];
oldValArr = [0,0,0,0];
aktValArr = [0,0,0,128];
oldLed = 0;

// nicht mehrere Anfragen parallel senden
var sendenAktiv=false;

// Anzahl LED
var anzLed = 0;

// Werte für optisch lineares Faden einer LED (microcontroller.net)
// 0...255
listArr = [0, 1, 2, 2, 2, 3, 3, 4, 5, 6, 7, 8, 10, 11, 13, 16, 19, 23,
           27, 32, 38, 45, 54, 64, 76, 91, 108, 128, 152, 181, 215, 255];

// Ersatz für Werteliste bei Slider - die ist definiert, aber von keinem Browser implementiert
function nextList(slider) {
  if (slider < 13) return slider;
  for(var i=14; i< listArr.length; i++) {
     if (listArr[i] >= slider) {
       if (listArr[i] == slider) return slider;
       if (slider > ((listArr[i-1] + listArr[i]) / 2)) return listArr[i];
       else return listArr[i-1];
     }
  }  
}  

// Anzahl der LED wird vom ESP8266 geholt
function getAnz() {
  fetch('./anzLeds').then(response => {
      return response.text();
    }).then(text => {
      // console.log(text);
      anzLed = parseInt(text,10);
      if (anzLed == 0) return;
      var eleLeds = document.getElementById('leds');
      // Options einfügen
      for (var i=0; i < anzLed; i++) {
        var eleOpt = document.createElement('OPTION');
        var zahlStr = ''+i;
        eleOpt.value = zahlStr;
        eleOpt.text = zahlStr;
        eleLeds.appendChild(eleOpt);
      }    
    });
}

// Die Keys heißen wie die Felder
function writeAntwort(str) {
var ele;  
  //  an & trennen
  var arr = str.split('&');
  for(var i=0; i<arr.length; i++) {
    // an = trennen
    var keyVal = arr[i].split('=');  
    document.getElementById(keyVal[0]).innerText = keyVal[1];
  }
}

// Sendeparameter zusammenfassen und Fetch-Aufruf durchführen
function buildParams() {
var paramStr = '';
  // warten bis Fetch-Request fertig
  while(sendenAktiv);
  sendenAktive = true;
  for(var i=0;i<4;i++) {
      if (i > 0) paramStr += '&';
      paramStr += sliderArr[i] + '=' + oldValArr[i];
  }
  var ledNr = document.getElementById('leds').selectedIndex;
  if (ledNr == 0) paramStr += '&l=a';
  else {
    var led = parseInt(ledNr,10) -1;
    paramStr += '&l='+led;
  }
  // console.log('ParamStr: '+paramStr);
  fetch('./setLeds?'+paramStr).then(response => {
      return response.text();
    }).then(text => {
      console.log(text);
      writeAntwort(text);      
    });
}

// von onchange bei Loslassen bei Mausaktion getriggert
function isChange() {
var val,ele, ele1;  
var changed = false;
console.log('Change');
  for(var i=0;i<4;i++) {
    ele = document.getElementById(sliderArr[i]);
    ele1 = document.getElementById(spanArr[i]);
    val = ele.value;
    korr = nextList(val);
    if (val != korr) ele.value = korr;
    ele1.innerText = korr;
    aktValArr[i] = korr;
    // Hat sich was geändert
    if (korr != oldValArr[i]) {
      oldValArr[i] = korr;
      changed = true;
    }
  }
  var sel = document.getElementById('leds').selectedIndex;
  if (sel != oldLed) {
    changed = true;
    oldLed = sel;
  }
  // Wenn Änderung
  if (changed) buildParams();
}

Der Tab im Webserver, der die LED-Steuerung durchführt.
Code:
#include <FastLED.h>

const byte DATA_PIN = 12;
const byte NUM_LEDS = 12;

CRGB leds[NUM_LEDS];


void setUpLeds() {
  FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
  FastLED.setBrightness(128);
  FastLED.clear();
  FastLED.show();

  server.on("/anzLeds", HTTP_GET, []() {
    String erg = String(NUM_LEDS);
    Serial.print("anzLeds: ");Serial.println(erg);
    server.send( 200, "text/plain", erg );
  });

  server.on("/setLeds",HTTP_GET,handleLeds);
}

void handleLeds() {
const String params[] = {"rRed","rGreen","rBlue","rHell"};
uint8_t valRot, valGruen, valBlau, valHell;
uint16_t tempvals[4];
uint8_t errorCnt = 0;
String errorText = "";
String led;
int anzahl = server.args();
  // immer 5 Werte rot/grüen/blau/hell/l (ledNr) gefordert
  // z.B.: rRed=11&rGreen=54&rBlue=19&rHell=128&l=1
  if (anzahl !=5) server.send(500,"text/plain","zuwenig Parameter");
  // Ledauswahl a=alle
  if (server.hasArg("l")) led = server.arg("l");
  // Slider einlesen
  for(int i=0; i<4;i++) {
    if (server.hasArg(params[i])) {
       tempvals[i]= (server.arg(params[i]).toInt());
       // sp(params[i]);sp("=");spn(tempvals[i]);
       if (tempvals[i] > 255) {
         errorCnt++;
         errorText+= params[i]+ " falscher Wert (0...255) ";
       }
    }
    else {
      errorCnt++;
      errorText += params[i]+" fehlt ";
    }      
  }
  // alles ok, Werte anwenden
  if (errorCnt == 0) {
    valRot = tempvals[0];
    valGruen = tempvals[1];
    valBlau = tempvals[2];
    valHell = tempvals[3];
    
    FastLED.setBrightness(valHell);
    CRGB color = CRGB(valRot,valGruen, valBlau);
    if (led == "a") {
      // alle Leds
      for(int i=0;i<NUM_LEDS;i++) leds[i] = color;
    }  
    else {
    byte ledNum = led[0]-'0';
      leds[ledNum] = color;
    }
    FastLED.show();
    uint32_t colNum = (valRot << 16) + (valGruen << 8) + valBlau;
    char buffer[100];
    snprintf(buffer,sizeof(buffer),"sRed=0x%02X&sGreen=0x%02X&sBlue=0x%02X&sHell=0x%02X&sLeds=%s&sFarbe=0x%06X", valRot,valGruen,valBlau,valHell,led.c_str(),colNum);
    Serial.println(buffer);
    Serial.println(strlen(buffer));
    server.send( 200, "text/plain", String(buffer));
  
  }
  else {
    server.send(500,"text/plain",errorText);
  }
}
Ich habe als Übertragungsfoirmat text/plain gewählt, es wäre auch JSON möglich gewesen.
Bei der Auswahl der LED kann man alle oder eine einzelne LED ansteuern. Die Helligkeit wirkt sich immer auf alle LED aus. Zur LED-Steuerung wurde die FastLED Lib benutzt.

Ich hoffe, ihr könnt es nutzen, um Farben sinnvoll auszuwählen.

Gruß Tommy
   


Angehängte Datei(en)
.zip  WsLeds.zip (Größe: 10,23 KB / Downloads: 9)

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
26.07.2020, 17:56
Beitrag #2
RE: [Vorstellung] RGB-Farbauswahl und Test mit ESP8266
Hallo Tommy,
schon mal vielen Dank dafür. Werde es in den nächsten Tagen auch mal testen.
Und natürlich berichten.

Gruß Dieter

I2C = weniger ist mehr: weniger Kabel, mehr Probleme. Cool
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Gestern, 09:12
Beitrag #3
RE: [Vorstellung] RGB-Farbauswahl und Test mit ESP8266
Hatte immer noch keine Zeit mir das genauer anzuschauen.
Werde ich aber nachholen.

(26.07.2020 14:43)Tommy56 schrieb:  mit den Modulen LittleFS (Filesystem im Flash - Nachfolger von SPIFFS)

Leider ist die hier enthaltenen "LittleFS.ino" fehlerhaft

Durch das "while (true)" beim sortieren der Dateien kann es zum Absturz des Programms, wenn sich im Filesystem zwei Dateien mit gleichen Namen welche sich nur durch Groß- und Klein­schrei­bung unterscheiden, kommen.

Bitte nutzt die aktualisierte, hoffentlich fehlerfreie, Version.

@Tommy56
Mach doch bitte eine neue Zip Datei.

Gruß Fips

Meine Esp8266 & ESP32 Projekte
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Gestern, 10:04
Beitrag #4
RE: [Vorstellung] RGB-Farbauswahl und Test mit ESP8266
Danke für die Info. Hier ist das neue Zip.

Gruß Tommy


Angehängte Datei(en)
.zip  WsLeds.zip (Größe: 10,62 KB / Downloads: 3)

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  Projekt Vorstellung: Der etwas andere Schreibtisch Crama 8 4.193 02.07.2019 20:10
Letzter Beitrag: Tommy56
  Esp8266 Relaisplatine Hilgi 25 9.163 24.11.2017 15:12
Letzter Beitrag: ardu_arne
  Projekt Vorstellung: "Multifunktionale Lese Leuchte" Zis 0 2.386 15.10.2017 14:07
Letzter Beitrag: Zis
  [Projekt Vorstellung] Lichtsteuerung im Keller BennIY 0 3.161 08.05.2017 00:08
Letzter Beitrag: BennIY
  Vorstellung meines Mini-Attiny Programmers Klaus(i) 3 3.768 13.10.2015 23:14
Letzter Beitrag: hotsystems
Wink Vorstellung analoge Eisenbahn mit Arduino gesteuert Klaus(i) 0 4.234 04.10.2015 11:04
Letzter Beitrag: Klaus(i)
  Reaktions Test TheArduFreak 1 4.200 03.09.2015 16:15
Letzter Beitrag: fraju
  Vorstellung meiner Pillen Box malerlein 5 10.850 04.05.2014 21:03
Letzter Beitrag: Eichner
Information Vorstellung: XBug GByte 1 3.063 27.01.2014 12:12
Letzter Beitrag: burgi650
  Vorstellung / Projekte mschumi 1 4.198 31.07.2013 10:14
Letzter Beitrag: NoWay

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste