WLAN Dimmer

[dieterr]

Bzgl. Dimmcharakteristik: Geht halbwegs einfach mit einer einfachen quadratischen Funktion. Noch präziser wäre es mit einer Gamma Funktion (AFAIR x^2.2 ). Macht aber keinen soo großen Unterschied.
Den code schau ich mir dann mal an. Wird aber vmtl. erst nach Ostern was...

Danke, probiere beides mal aus gegen die Tabelle. Das bisschen rechnen ist sicher einfacher zu bewerkstelligen und sollte der Prozessor mit 80MHz (ich kann's immer noch nicht glauben) ja mit links nebenher machen.

Ja klar, ich fürchte ich komme an den Stellen ohne externen Hinweis eh nicht sinnvoll weiter. Falls doch, stelle ich ein Update ein.

Edit: Berechnung mit pow(2, (a*(x+1)/b))-1 funktioniert wie gewünscht

[Borax]

und sollte der Prozessor mit 80MHz (ich kann's immer noch nicht glauben) ja mit links nebenher machen.

Ja. Das Ding ist schon 'der Hammer'. Leistungsfähiger als mein erster PC und kostet gerade mal ~2€...

Berechnung mit pow(2, (a*(x+1)/b))-1 funktioniert wie gewünscht

Sehr gut! Auf meinem ATTiny habe ich das vor ein paar Jahren noch mit einer Lookup Funktion gemacht. Aber der ESP rechnet auch Float noch so schnell, dass man sich die Mühe echt sparen kann. Schöne Ostern!

[Borax]

Ich habe inzwischen mal in den code geschaut... Ein wenig chaotisch
Soll das jetzt mit Websockets oder Ajax laufen? Im code ist anscheinend beides (wobei der webSocketEvent anscheinend (noch) nichts tut). Möglich ist beides. Wobei ich auch mit beidem keine Erfahrung habe.
Wegen dem slider: Muss es so kompliziert sein? Klar kann man das mit jquery machen (braucht aber ein recht großes script ~20kb). Rein mit CSS geht es eigentlich auch, nur mit der Unterstützung von vielen Browsern/Betriebssystemen wird es dann irgendwann wieder aufwändiger als mit einem großen script framework (wie jquery). Wenn das aber sowiesonurauf einem iphone laufen soll, ginge es vmtl. mit CSS alleine auch (siehe die W3Schools Custom Slider Seite)

[dieterr]

Ein wenig chaotisch

Weiß ich, ist (mit) dem Umstand geschuldet, daß ich in das (wie ich finden schon chaotische) Ajax-Grundmodul die OTA-Update, MultiWifi, SPIFFS, etc eingeschoben habe. Da kam auch die Websockets-Bib mit, die möglicherweise gar nicht aufgerufen wird

Nur mit Ajax habe ich eine Version bekommen, die sich mit Feedback von 2 Geräten aus bedienen lässt. Leider. Und eben die Ajax-Module mit JS verstehe ich kein bisschen

Von der Optik her, wären die W3Schools Slider schon OK, aber nicht einmal die kriege ich nicht senkrecht hin Geschweige denn, ins Ajax reingepfriemelt


Edit: für die LED macht das Websockets noch nichts, aber baut die /index.html mit RGB-Slider auf

[Borax]

Ok. Ich würde dann erst mal alles raus werfen , was nicht nötig ist. Also 'einigen' wir uns auf Ajax?
Weil das:

für die LED macht das Websockets noch nichts, aber baut die /index.html mit RGB-Slider auf

ist ja dann auch nicht nötig...

Von der Optik her, wären die W3Schools Slider schon OK, aber nicht einmal die kriege ich nicht senkrecht hin

Das mit dem senkrecht ist auch nicht ganz so einfach. Wie gesagt, es geht (bei mir) recht gut für ein spezifisches 'Gerät' (d.h. insbesondere das Seitenverhältnis).
Probier mal auf der W3Schools Testseite :
https://www.w3schools.com/howto/tryit.a ... ider_round
diese werte (einfach in linken Fenster 'überschreiben', rechtes Fenster Smartphone-like einstellen, also Breite = etwa halbe Höhe) : und dann 'Run >>'

Code: Alles auswählen

.slider {
    -webkit-appearance: none;
    position: absolute;
    top: 55%;
    left: -30%;
    transform: rotate(270deg);
    width: 120%;
    height: 5px;
    border-radius: 5px;
    background: #8080F0;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
}

Sieht dann so aus:

Ich habe aber keine Ahnung wie das auf einem iPhone aussieht...
Noch eine 'Optik' Frage: Hintergrund schwarz oder weiß?

Geschweige denn, ins Ajax reingepfriemelt

Das kriege ich dann schon hin

[dieterr]

Ich denke auch Ajax. Die Websockets-Lösung scheint mir zwar flüssiger laufend, kann aber die Rückmeldung nicht. Denke ich zumindest- Korrektur erwünscht wenn falsch.

Ah:

Code: Alles auswählen

transform: rotate(270deg);

Der Rest ist ja "nur noch" Anpassung an die Fenstergröße und -format. Weiß als Hintergrund passt.

Das Beispiel sieht auf dem Iphone eigentlich gut aus - ich habe es mal kurz über den WLAN-Datenupload auf den ESP hochgeschoben. Ist schneller als das kompilieren des Programms. Über USB ist es ziemlich zäh.

[Borax]

Die Websockets-Lösung scheint mir zwar flüssiger laufend, kann aber die Rückmeldung nicht.

Könnte sie eigentlich schon. Wenn Du es selbst mal versuchen willst:
In der Websocket.js ist eine Log Funktion:

Code: Alles auswählen

connection.onmessage = function (e) {  
    console.log('Server: ', e.data);
}; 

Die verarbeitet Rückmeldungen vom Server. Das einzige Problem sehe ich darin, dass eine Websocket Verbindung eigentlich 'spezifisch' ist: Also eine Verbindung zwischen einem bestimmten Client und dem Server. Ob man dann für eine zweite Verbindung (zu einem anderen Client) einen weiteren Websocket Server braucht, oder ob der 'eine' gestartete WebSocket server schon mit mehreren Verbindungen umgehen kann, weiß ich nicht. Und auch nicht, wie man dann die verschiedenen Clients anspricht. Wahrscheinlich letzteres...
Die verschiedenen Clients haben dann unterschiedliche 'num' Parameter:

Code: Alles auswählen

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) { // When a WebSocket message is received

So könnte man dem client eine Rückmeldung schicken:

Code: Alles auswählen

            // send message to client
            webSocket.sendTXT(num, "Connected");

Möglicherweise müsste man aber an alle clients die 'Connected' sind eine passende Rückmeldung schicken. Und dann auch noch dafür sorgen, dass es hierbei keine Event Lavine gibt: Am client1 wird der Slider verändert -> der client1 sendet eine message an den server -> der server sendet eine Rückmeldung an alle clients. Dadurch ändert sich bei den clients der slider -> alle clients schicken eine message an den server ...
Bei der Ajax Lösung mache ich mir da weniger Sorgen:
1. Hast Du das ja schon getestet
2. Fragt hier jeder Client selbst 1 x pro Sekunde den aktuellen Wert beim Server ab.

[Borax]

Ich habe was passendes (Websocket) gefunden :
https://gist.github.com/bbx10/667e3d4f5f2c0831d00b
Für dieses 'Problem':

...müsste man aber an alle clients die 'Connected' sind eine passende Rückmeldung schicken.

heißt die Lösung:

Code: Alles auswählen

      // send data to all connected clients
      webSocket.broadcastTXT(payload, length);

Ich weiß aber noch nicht, wann ich dazu komme das zu testen (bzw. dann auch mit dem anderen code: OTA, wifiMulti, Slider senkrecht... zu 'verheiraten').

[dieterr]

In der IDE ist ein "WebSocketServer_LEDcontrol" dabei, der hat bei mir aber soweit ich mich erinnern kann, nicht funktioniert. Probiere das aber nochmal aus, der Code ist aber deutlich übersichtlicher als das Ajax-Dingens.

Edit: Ein Beispiel mit funktionierendem WebSockets habe ich hier gefunden. Läuft soweit gut und flüssig in Websites auf einzelnen Rechnern, mit CSS und nettem Slider. Aber eben ohne Feedback. Nicht mal beim Start.

Ein eingebautes

Code: Alles auswählen

// send data to all connected clients
      webSocket.broadcastTXT(payload, length);

war leider erfolglos

[Borax]

Nur ein ' webSocket.broadcastTXT(payload, length);' reicht natürlich nicht...
1. muss der payload definiert werden und
2. muss das Javascript im Browser auch darauf reagieren.
Hast Du das Beispiel aus dem Link schon getestet? Das macht zwar zunächst mal nur ein simples Ein/Aus, aber die Erweiterung auf Slider ist dann nicht soo schwierig. Nur wenn das natürlich gar nicht funktioniert, dann verfolge ich das auch nicht weiter.

Ein Beispiel mit funktionierendem WebSockets habe ich hier gefunden

Das ist doch genau der code aus deinem 'AJAX_OTA_Full2 (Kopie)'. Der hat keinerlei 'Rückmeldung', weil dieser code gar keine Werte vom WebSocket server zum client (Browser) schickt. Und selbst wenn, würde der client (Browser) nur im Debug Modus auf der Konsole (lässt sich in den meisten Browsern einschalten) eine Meldung ausgeben. Am Slider würde sich dadurch noch gar nichts ändern. Dazu muss die Methode 'connection.onmessage' den Wert des sliders entsprechend ändern.
So ähnlich wie im github Beispiel (hier wird allerdings nur die Farbe geändert):

Code: Alles auswählen

  websock.onmessage = function(evt) {
    console.log(evt);
    var e = document.getElementById('ledstatus');
    if (evt.data === 'ledon') {
      e.style.color = 'red';
    }
    else if (evt.data === 'ledoff') {
      e.style.color = 'black';
    }
    else {
      console.log('unknown event');
    }
  };

Aber eben ohne Feedback. Nicht mal beim Start.

Im dem oben verlinkten github Beispiel ist speziell für den Start noch eine zusätzliche Funktion eingebaut:
<body onload="javascript:start();">
Damit der eben schon beim Laden die Seite den aktuellen Wert (Farbe=rot oder schwarz) hat...

[dieterr]

Nur ein ' webSocket.broadcastTXT(payload, length);' reicht natürlich nicht...

Du siehst, ich verstehe es nicht so recht

Ich habe mal das Beispiel im Link getestet. Funktioniert. Funktioniert immer noch (großteils) nachdem OTA, SPIFFS, etc hinzugefügt wurde. Das kann ich mittlerweile

Soll ich eine Kopie des erweiterten Codes einstellen?

[Borax]

Ich habe mal das Beispiel im Link getestet. Funktioniert.

Top. Dann ist das jetzt erst mal das Hauptgerüst, weil es die (für mich) problematische Kommunikation zwischen dem ESP als server und mehreren Clients erledigt. Eine 'Event Lavine' gibt es hier wohl nicht, weil das setzen eines Werts über javasscript kein event auslöst (anders als z.B. in Windows - da erzeugt eine Änderung immer auch ein Change event, egal ob ein Wert per Maus, Tastatur oder code geändert wurde).

Soll ich eine Kopie des erweiterten Codes einstellen?

Nee. Lass mal. Ich will das erst mal mit möglichst aufgeräumtem code testen. Als erstes dann SPIFFS verwenden und die INDEX_HTML aus dem (hard codierten) PROGMEM raus nehmen und in eine Datei umwandeln. Dann das ganze auf slider erweitern/umbauen (incl. CSS) und dann erst noch die 'restlichen Punkte' (OTA Update, ssid + password über config file...) nach und nach mit rein nehmen.

[dieterr]

index.jpeg (5.34 KiB) 9426 mal betrachtet

Edit, eine Ergänzung noch:

das

Code: Alles auswählen

void startWebSocket() { // Start a WebSocket server  // Start the mDNS responder
 if (mdns.begin("espWebSock", WiFi.localIP())) { 
  Serial.println("MDNS responder started");
  mdns.addService("http", "tcp", 80);
  mdns.addService("ws", "tcp", 81);
  }
...

hat bei mir nicht zuverlässig funktioniert und wurde ersetzt durch

Code: Alles auswählen

const char* mdnsName = "espWebSock"; // Domain name for the mDNS responder

  MDNS.begin(mdnsName);                        // start the multicast domain name server
  Serial.print("mDNS responder started: http://");
  Serial.print(mdnsName);
  Serial.println(".local");
    mdns.addService("http", "tcp", 80);
    mdns.addService("ws", "tcp", 81);

[Borax]

Ok. mDNS hat bei mir noch nie funktioniert. Aber wenn es bei Dir geht, umso besser.
Ich lasse bei mir einfach die Fritzbox 'meinem' ESP immer die gleiche IP zuweisen. Dann passt das auch.
Gestern abend hab ich das Beispiel auch mal getestet. Funktioniert wirklich gut. Ein javascript Fehler wird mir zwar in der Mozilla-Ausgabe angezeigt (TypeError: Property 'handleEvent' is not callable.) aber das tut der Funktion anscheinend keinen Abbruch. Dann versuche ich heute Abend das mal auf den Slider zu erweitern (wenn nichts dazwischen kommt) ...

[Borax]

Funktioniert relativ gut. Problematisch scheint es aber zu sein, wenn die Seite im Browswer offen bleibt und das Smartphone ausgeschaltet wird (zumindest bei meinem Windows Phone). Da wird der WebSocket wohl nicht beendet und macht dann 'ab und zu' ein Update.
ssid und passwort bitte zuerst in der netconf.txt Datei im data Ordner anpassen/eingeben. Ein fallback auf SoftAP ist noch nicht programmiert...

[dieterr]

Funktioniert relativ gut.

Auch bei mir

mDNS funktioniert auch

Beim zumachen des Iphone kommt prompt "disconnected"

Interessanterweise ist der slider im Firefox horizontal, im Iphone vertikal Das ist aber eher ein Vorteil in der Bedienung habe ich bemerkt, also muss es so sein

Und dann startet mein ESP unentwegt einen AP, auch ohne dass es im Programm steht. Ich vermute, da ist beim programmieren ein flag noch nicht richtig gesetzt

[dieterr]

Habe zwischenzeitlich mal versucht, das html-file durch ein anderes mit CSS zu ersetzen. Funktioniert sogar. Nur ohne CSS Ich denke, das liegt am noch nicht angepassten Filemanager und dass das die Website das CSS-file nicht nachladen kann.
Damit würde ein cooler runder Wheel-slider in machbare Nähe rücken

Lästig ist nur, dass das Hochladen der Files über USB zum testen immer so ewig dauert.

[Borax]

Damit würde ein cooler runder Wheel-slider in machbare Nähe rücken

Müsste ich erst sehen. Möglicherweise ist das auch wieder mehr javascript (jquery) als CSS. Und dann wird es halt schwierig das 'slider-eigene' javascript mit demjenigen für die websockets zu vereinen.

und dass das die Website das CSS-file nicht nachladen kann.

Das kannst Du ja auch selbst machen...
Leg einfach eine neue Methode an:

Code: Alles auswählen

void
httpIndexCSS()
{
  File file = SPIFFS.open("/indexcss.css", "r");
  server.streamFile(file, "text/css");
  file.close();
} 

Und dann eine neue 'server.on' angeben:

Code: Alles auswählen

  server.on("/indexcss.css", httpIndexCSS); 

Wie Deine neue CSS heißt, weiß ich natürlich nicht. Wahrscheinlich nicht indexcss.css . Nur... wenn Du die index.html ersetzt, fehlt ja der ganze javascript code für den slider (wie auch immer der optisch gestaltet wird). Dann kann es eigentlich nicht mehr funktionieren.
Ich hab inzwischen auch noch ein wenig weiter gemacht. SoftAP (wenn z.B. das wlan passwort nicht mehr stimmt) geht jetzt auch. Ich habe allerdings den ganzen WifiMulti Kram raus genommen. Hast Du da Bedarf? Sprich betreibst Du mehrere APs in Deinem Netz?

Lästig ist nur, dass das Hochladen der Files über USB zum testen immer so ewig dauert.

Geht (bei mir) eigentlich. Mit max. Geschwindigkeit (921600 baud) dauert das keine 10 Sekunden für 128kB. Wie groß hast Du das Dateisystem gesetzt? Mit vollen 3MB dauert das natürlich schon recht lange.

[dieterr]

SPIFFS size ist 1M, aber ich probiere mal die Baudrate hochzudrehen. Hatte ich mal (glaube ich) versucht, war dann bei 115200 geblieben da damit der serielle Monitor sicher funktioniert hat.

Müsste ich erst sehen. Möglicherweise ist das auch wieder mehr javascript (jquery) als CSS. Und dann wird es halt schwierig das 'slider-eigene' javascript mit demjenigen für die websockets zu vereinen.

Hmm, kann sein. Muss mir die Beispiele mal genauer anschauen. Der vertica slider läuft zumindest ohne JS.

Das kannst Du ja auch selbst machen...
Leg einfach eine neue Methode an:

Probiere ich mal

[Borax]

war dann bei 115200 geblieben da damit der serielle Monitor sicher funktioniert hat.

Den verwende ich nicht. Da gibt es was besseres: https://www.heise.de/download/product/hterm-53283
(läuft prima unter Windows und Linux)
Aber so weit ich weiß ist die Baudrate des serielle Monitors unabhängig von der Upload-Baudrate. Bei mir klappt die hohe Baudrate zwar manchmal erst beim zweiten Anlauf, aber das ist immer noch schneller als mit 115200 (und nur ein 'Start').

Der vertica slider läuft zumindest ohne JS.

Ja. Respektive das JS läuft hier nur für den Websocket, nicht für die Darstellung des sliders. Ich bin kein JS Profi. Und die zwei JS 'Programme' (Websocket + Slider-Darstellung) zu verknüpfen könnte schwierig werden. Kann aber auch sein, dass ich mir da völlig unnötig Sorgen mache.

[Borax]

Neue Version im Anhang.
Noch ein paar 'Anmerkungen'...
Ich habe auf meiner Fritzbox eingestellt, dem ESP immer die gleiche IP zu vergeben. Das hat (für mich) mehrere Vorteile:
1. Wenn man die IP (+ gateway + subnet-mask) fest einstellt, dauert das verbinden mit der Fritzbox weniger als eine Sekunde. Mit IP per DHCP dauert es (bei mir) etwa 4-6 Sekunden.
2. Auch ohne mDNS kann ich die Seite (einfach die IP) als Favorit im Smartphone fest speichern (ändert sich ja nicht).
3. Für Soft-AP kann man die gleiche IP zuweisen, dann bleibt die Seite (IP) auch dann gleich, wenn man sich am ESP-AP anmeldet (z.B. um das Wlan-Passwort zu ändern, oder auch die Lichtsteuerung direkt über den Soft-AP zu machen, wenn die Fritzbox ausfällt).
Die SSID wird im Konfig-Dialog angezeigt (und wäre auch editierbar), steht aber als Default schon drin (damit die auch stimmt, musst Du sie in der config1.html ganz unten entsprechend eintragen). Die 'Konstanten' (feste IP, Soft AP SSID + Passwort) stehen alle am Anfang in der ino Datei.
Falls Du das so nicht willst, entsprechende Stellen im Code raus nehmen (auskommentieren), ansonsten editieren und 'Deine' (feste) IP eintragen.
Ach ja, noch dazu:

Interessanterweise ist der slider im Firefox horizontal, im Iphone vertikal

Ist Absicht. Nennt sich 'responsive design'. Wenn die Ansicht im Hochformat ist (also Breite kleiner als Höhe) wird der slider senkrecht dargestellt, sonst horizontal. Siehe https://wiki.selfhtml.org/wiki/Media_queries

[K Mader]

Ich kann aus eigener Erfahrung sagen, dass ^2 ausreichend ist, um schön zu wirken.

Der große Vorteil ist, dass das auch mit fixed-point Mathematik auf einem Mikrocontroller gut machbar ist.

Ausgehend von einem Wert von 0 ... 100 %.

Code: Alles auswählen

//unsere Variablen
uint8_t Helligkeit;
uint16_t tmp;
uint8_t logHelligkeit;

//Der aktuelle "theoretische" Helligkeitswert in %
Helligkeit = 50;

//Umrechnung von Linear in Log, sodass es für den Controller einfach ist
tmp = Helligkeitswert 
tmp *= Helligkeitswert;
tmp /= 100;
logHelligkeit = tmp;

//nun kann logHelligkeit als Wert für die Steuerung übernommen werden.
machmalPwm(meineLED, logHelligkeit);

Edit: Ich bin dumm, hab die 2. Seite nicht gesehen. Sorry.

LG
K Mader

[dieterr]

So, jetzt konnte ich den neuen Code mal testen. Funktioniert, auf PC und iPhone, auch der softAP. Die Dimmfunktion habe ich geändert auf

Code: Alles auswählen

  analogWrite(LEDPIN, 1023 - round(pow(2, ((dimmvalue+1)/10.1))-1));

damit ist der Verlauf recht schön, nur im ganz unteren Bereich geht zumindest die verbaute LED erst bei 18 (Dimmwert 1020) an und ist dann wie ich meine schon recht hell. Das heißt auch, bei 1021 bis 1023 ist die LED dunkel.

Die anderen Kleinigkeiten wie höherer Datenupload, und serielles Monitoring bei normaler Rate funktionieren auch

[Borax]

Ok. Freut mich! Dann geht es ja eigentlich nur noch um das OTA Update und (ggf.) Dateiupload / Download über die Weboberfläche. Das sollte aber nicht so schwierig sein. Oder hab ich noch was vergessen?

damit ist der Verlauf recht schön, nur im ganz unteren Bereich geht zumindest die verbaute LED erst bei 18 (Dimmwert 1020) an und ist dann wie ich meine schon recht hell. Das heißt auch, bei 1021 bis 1023 ist die LED dunkel.

Das kann sich aber beim Dimmereingang an einer KSQ ganz anders verhalten.

[dieterr]

Ja, OTA Update bekomme ich sicher hin, und an dem Upload per Oberfläche versuche ich mich auch mal.

Zu dem Problem am Dimmbeginn: kann es sein, dass ich die 10 Bit Dimmstufen (1024) manuell definieren muss, und er nur mit 8 Bit arbeitet?