html-Code für virtuelles website-Button-Pad

[Moppi]

wenn keine neuen Daten verfügbar sind, muss ich ja keine Daten von der website pollen, und die loop kann diesen Schritt überspringen.

Wenn es notwendig ist, kann das eingebaut werden.

der Buffer muss bei mir allerdings signed char sein

Das weiß ich nicht, ob Du die Daten von einem in das andere Array überträgst. Dachte ich mir so. Sonst kann man den auch auf char ändern, belegt dann aber ein Vielfaches mehr Speicherplatz.




MfG

[HaWe]

danke, aber wie geagt:
zip Anhänge bringebn nichts, besser man kann es dirket lesen, um sich darüber zu verständigen.

Habe es getestet und noch etwas geändert + ergänzt, die Buttons werden jetzt richtig erkannt:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>


// Version 0.0.2

const char* ssid = "WLAN";
const char* password = "0.0.2";

ESP8266WebServer server(80);

//-----------------------------------------------------
  //HTML und Daten für das Eingabe-/Ausgabefeld
  //einfügen im globalen Scope
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------
  //Hintergrundfarbe Buttons, wenn aktiv
    const String bColorActiv = "red";
  //Breite und Höhe des ges. Feldes
    const int tableWidth = 10;
    const int tableHeight = 10;
  //Füllzeichen für Felder
    const String fillChar = "X";
  //Parameter-Array enthält den Status aller Felder
  //der Ein-/Ausgabematrix (0= AUS, 1= AN)
    bool matrix[tableHeight*tableWidth]={0};
  //Status, ob Änderungen vorliegen
    bool toChange = 0;
    bool toLearn = 0;
    bool toDetect = 1;
    bool toReset = 0;
    bool toSave = 0;
    bool toClear = 0;
  //HTML
    String body = "";
    String s1="<style>\nform{margin:0}\n#un{width:0;height:0;visibility:hidden}\n#bu{width:10em;height:2em;}\n#rw{display:table-row;}\n#ce{display:table-cell;}\n#ip{width:1.5em;text-align:center;font-weight:bold}\n</style>\n<script>dge=document.getElementById; function oc(ob){if(ob.value=='')ob.value='"+fillChar+"';else ob.value='';}</script>\n<div role=\"presentation\" style=\"display:table\"><div id='rw'><div id='ce' style=\"padding-right:1em\"><form method=\"get\"><div role=\"presentation\" style=\"margin-bottom:1em;display:table\">";
    String s2="<div id=\"rw\">";
    String s3="<div id=\"ce\"><input onclick=\"oc(this);\" type=\"text\" name=\"b";
    String s3_1="\" value=\"";
    String s3_2="\" maxlength=\"1\" id=\"ip\"></div>";
    String s4="</div>";
    String s5="</div><div id='ce'><input id=\"bu\" type=\"submit\" value=\"Change:Ok\"><p></form>";
    String s5_0="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Clear\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"clear\"></form>"; 
    String s5_1="<form method=\"get\"><input id=\"bu\" style=\"background-color:";
    String s5_1n="\" type=\"submit\" value=\"Learn\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"learn\"></form>";
    String s5_2="<form method=\"get\"><input id=\"bu\" style=\"background-color:";
    String s5_2n="\" type=\"submit\" value=\"Detect\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"detect\"></form>";
    String s5_3="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Reset\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"reset\"></form>";
    String s5_4="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Save\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"save\"></form></div></div></div>";
    
    String par="b";
  //-----------------------------------------------------


float bufferArray[100];



//-----------------------------------------------------
//-----------------------------------------------------
void setup() {

  Serial.begin(115200);
  delay(1000);
  Serial.println();

  //-----------------------------------------------------
  //Anmeldung am Netzwerk
  //-----------------------------------------------------
  Serial.println("connecting by IPAddress(192,168,2,99)");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password); //begin WiFi connection
  WiFi.config(IPAddress(192, 168, 2, 99), IPAddress(192, 168, 2, 1), IPAddress(192, 168, 2, 1), IPAddress(255, 255, 255, 0));

  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  //-----------------------------------------------------
  //Auswertung und Erstellung des Ein-/Ausgabefeldes
  //-----------------------------------------------------
  //Einbinden in setup() und in loop() nutzen durch
  //Aufruf von "server.handleClient();"
  //benötigt Objekt "server", erstellt im globalen Scope
  //mittels:       ESP8266WebServer server(80);
  //benötigt auch: #include <ESP8266WebServer.h>
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------
  server.on("/",[]()
   {
    //Auswerten des Query-String vom Browser
    int n = 0; 
    if(server.hasArg("bn")){
      if(server.arg("bn") == "clear") toClear=1; else {toClear=0; toChange=0; for(int i=0; i<(tableWidth*tableHeight); i++) matrix[n] = 0;}
      if(server.arg("bn") == "save") toSave=1; else toSave=0;
      if(server.arg("bn") == "reset") toReset=1; else toReset=0;
      if(server.arg("bn") == "detect") toDetect=1; else toDetect=0;
      if(server.arg("bn") == "learn") toLearn=1; else toLearn=0;
    }
    for(int x=0; x < tableHeight; x++){
      for(int j=0; j < tableWidth; j++){
        if(server.hasArg(par+String(n))){
          String a = server.arg(par+String(n));
          bool ic = matrix[n];
          if (a == "") matrix[n] = 0; else matrix[n] = 1; 
          if (ic != matrix[n]) toChange = 1;
          n++;
        }
        if(toChange){
          toClear = 0;
          toSave = 0;
          toReset = 0;
          toDetect = 0;
          toLearn = 0;
        }
      }
    }
    //Aufbau des Feldes
    String v; body = s1; n = 0;
    for(int x=0; x < tableHeight; x++){
      body += s2;
      for(int j=0; j < tableWidth; j++){ 
        if (matrix[n]) v = fillChar; else v = "";
        body += s3 + String(n) + s3_1 + v + s3_2;
        n++;
      }
      body += s4;
    }
    body += s4+s5+s5_0+s5_1;
    if (toLearn) body += bColorActiv;
    body += s5_1n+s5_2;
    if (toDetect) body += bColorActiv;
    body += s5_2n+s5_3+s5_4;
    //Senden der Seite an den Browser
    server.send(200, "text/html", body);
   }
  );
  //-----------------------------------------------------



  //-----------------------------------------------------
  //Webserver starten
  //-----------------------------------------------------
  server.begin();
  Serial.println("Web server started!");

}


uint32_t timestamp=0, sec=0;
uint8_t modeLearn=0, modeDetect=0;

//-----------------------------------------------------
//-----------------------------------------------------
void loop() {  
  server.handleClient();
  // Aktionen nach ButtonClick:
  /*
  if(toClear) {
    Serial.println((String)"toClear="+toClear);
    memset(matrix , 0, sizeof(matrix));
    toClear=0;
  }
  */
  if (toChange) {
    Serial.println("new data:");
    for (int i = 0; i < 100; i++) {
       bufferArray[i] = (float)matrix[i];
       Serial.println((String)i + ": " + bufferArray[i]);
    }
    toChange=0;
  }
  if(toLearn){       
    modeLearn=1;
    modeDetect=0;
    Serial.println((String)"modeLearn="+modeLearn);
    toLearn=0; 
  }
  else 
  if(toDetect) {      
    modeLearn=0;
    modeDetect=1;
    Serial.println((String)"modeDetect="+modeDetect);
    toDetect=0;  
  }
  if(toReset) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toReset="+toReset);
    toReset=0;
  }
  if(toSave) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toSave="+toSave);
    toSave=0;
  }
  if(millis()-timestamp >= 1000) {
    sec++;
    timestamp +=1000;
    Serial.println(sec);
  }
}

jetzt will ich mal nach dem WE versuchen, das als Eingabe-Panel für ein NN zu nutzen!

- - - Aktualisiert - - -

PS,
auch
clear
funktioniert, es löscht alle X bei BtnClick,
nur wenn man kurz vorher OK gedrückt hat, muss man 2x clear drücken, damit man den Löschvorgang im Panel sieht.

- - - Aktualisiert - - -

noch eine Frage:
kann man in der Website erkennbar machen, ob gerade Lern-Mode oder Detect-Mode gewählt ist (vlt über die Änderung der entspr. Button-Farbe auf rot?)

[Moppi]

nur wenn man kurz vorher OK gedrückt hat, muss man 2x clear drücken, damit man den Löschvorgang im Panel sieht.

was soll bei clear passieren, der Puffer geleert? Dann machen wir das so, wusste ich ja nicht.

kann man in der Website erkennbar machen, ob gerade Lern-Mode oder Detect-Mode gewählt ist (vlt über die Änderung der entspr. Button-Farbe auf rot?)

Die Buttonfarbe kann geändert werden. Allerdings würde sie beim zweiten Klick zurückwechseln.



MfG

[HaWe]

nochmal:
zip Anhänge bringebn nichts, besser man kann es dirket lesen, um sich darüber zu verständigen.

und: nein, es soll sich der Status von
Learn
Detect
nur dann ändern, wenn eine von beiden Tasten geclickt wurde, und dann dauerhaft so bleiben.
Wenn es vom Programm intern geändert wird, soll es sich entsprechend anpassen, damit man immer sieht, welcher Mode aktiv ist.
Der jeweilge Status wird gespeichert in den Variablen
modeLearn
modeDetect


wenn man frisch OK geklickt hat, muss man aber auch immer noch 2x Clear clicken, bis das Keypad gelöscht wird.


verwende jetzt mal bitte original meinen Code als Basis, weil ich mittlerweile schon ein aar Dinge abgewandelt habe, u.a. Variablennamen und auch void setup(void).

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

// Version 0.0.3


const char* ssid = "WLAN";
const char* password = "0.0.3";

ESP8266WebServer server(80);

//-----------------------------------------------------
  //HTML und Daten für das Eingabe-/Ausgabefeld
  //einfügen im globalen Scope
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------
  //Hintergrundfarbe Buttons, wenn aktiv
    const String bColorActiv = "red";
  //Breite und Höhe des ges. Feldes
    const int tableWidth = 10;
    const int tableHeight = 10;
  //Füllzeichen für Felder
    const String fillChar = "X";
  //Parameter-Array enthält den Status aller Felder
  //der Ein-/Ausgabematrix (0= AUS, 1= AN)
    bool matrix[tableHeight*tableWidth]={0};
  //Status, ob Änderungen vorliegen
    bool toChange = 0;
    bool toLearn = 0;
    bool toDetect = 1;
    bool toReset = 0;
    bool toSave = 0;
    bool toClear = 0;
  //HTML
    String body = "";
    String s1="<style>\nform{margin:0}\n#un{width:0;height:0;visibility:hidden}\n#bu{width:10em;height:2em;}\n#rw{display:table-row;}\n#ce{display:table-cell;}\n#ip{width:1.5em;text-align:center;font-weight:bold}\n</style>\n<script>dge=document.getElementById; function oc(ob){if(ob.value=='')ob.value='"+fillChar+"';else ob.value='';}</script>\n<div role=\"presentation\" style=\"display:table\"><div id='rw'><div id='ce' style=\"padding-right:1em\"><form method=\"get\"><div role=\"presentation\" style=\"margin-bottom:1em;display:table\">";
    String s2="<div id=\"rw\">";
    String s3="<div id=\"ce\"><input onclick=\"oc(this);\" type=\"text\" name=\"b";
    String s3_1="\" value=\"";
    String s3_2="\" maxlength=\"1\" id=\"ip\"></div>";
    String s4="</div>";
    String s5="</div><div id='ce'><input id=\"bu\" type=\"submit\" value=\"Change:Ok\"><p></form>";
    String s5_0="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Clear\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"clear\"></form>"; 
    String s5_1="<form method=\"get\"><input id=\"bu\" style=\"background-color:";
    String s5_1n="\" type=\"submit\" value=\"Learn\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"learn\"></form>";
    String s5_2="<form method=\"get\"><input id=\"bu\" style=\"background-color:";
    String s5_2n="\" type=\"submit\" value=\"Detect\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"detect\"></form>";
    String s5_3="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Reset\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"reset\"></form>";
    String s5_4="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Save\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"save\"></form></div></div></div>";
    
    String par="b";
  //-----------------------------------------------------


float bufferArray[100];

void setup() {

  Serial.begin(115200);
  delay(1000);
  Serial.println();

  //-----------------------------------------------------
  //Anmeldung am Netzwerk
  //-----------------------------------------------------
  Serial.println("connecting by IPAddress(192,168,2,99)");
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password); //begin WiFi connection
  WiFi.config(IPAddress(192, 168, 2, 99), IPAddress(192, 168, 2, 1), IPAddress(192, 168, 2, 1), IPAddress(255, 255, 255, 0));

  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  //-----------------------------------------------------
  //Auswertung und Erstellung des Ein-/Ausgabefeldes
  //-----------------------------------------------------
  //Einbinden in setup() und in loop() nutzen durch
  //Aufruf von "server.handleClient();"
  //benötigt Objekt "server", erstellt im globalen Scope
  //mittels:       ESP8266WebServer server(80);
  //benötigt auch: #include <ESP8266WebServer.h>
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------
  server.on("/",[]()
   {
    //Auswerten des Query-String vom Browser
    int n = 0; 
    if(server.hasArg("bn")){
      if(server.arg("bn") == "clear") toClear=1; else {toClear=0; toChange=0; for(int i=0; i<(tableWidth*tableHeight); i++) matrix[n] = 0;}
      if(server.arg("bn") == "save") toSave=1; else toSave=0;
      if(server.arg("bn") == "reset") toReset=1; else toReset=0;
      if(server.arg("bn") == "detect") toDetect=1; else toDetect=0;
      if(server.arg("bn") == "learn") toLearn=1; else toLearn=0;
    }
    for(int x=0; x < tableHeight; x++){
      for(int j=0; j < tableWidth; j++){
        if(server.hasArg(par+String(n))){
          String a = server.arg(par+String(n));
          bool ic = matrix[n];
          if (a == "") matrix[n] = 0; else matrix[n] = 1; 
          if (ic != matrix[n]) toChange = 1;
          n++;
        }
        if(toChange){
          toClear = 0;
          toSave = 0;
          toReset = 0;
          toDetect = 0;
          toLearn = 0;
        }
      }
    }
    //Aufbau des Feldes
    String v; body = s1; n = 0;
    for(int x=0; x < tableHeight; x++){
      body += s2;
      for(int j=0; j < tableWidth; j++){ 
        if (matrix[n]) v = fillChar; else v = "";
        body += s3 + String(n) + s3_1 + v + s3_2;
        n++;
      }
      body += s4;
    }
    body += s4+s5+s5_0+s5_1;
    if (toLearn) body += bColorActiv;
    body += s5_1n+s5_2;
    if (toDetect) body += bColorActiv;
    body += s5_2n+s5_3+s5_4;
    //Senden der Seite an den Browser
    server.send(200, "text/html", body);
   }
  );
  //-----------------------------------------------------



  //-----------------------------------------------------
  //Webserver starten
  //-----------------------------------------------------
  server.begin();
  Serial.println("Web server started!");

}


uint32_t timestamp=0, sec=0;
uint8_t modeLearn=0, modeDetect=0;

void loop() {  
  server.handleClient();
  // Aktionen nach ButtonClick:
  /*
  if(toClear) {
    Serial.println((String)"toClear="+toClear);
    memset(matrix , 0, sizeof(matrix));
    toClear=0;
  }
  */
  if (toChange) {
    Serial.println("new data:");
    for (int i = 0; i < 100; i++) {
       bufferArray[i] = (float)matrix[i];
       Serial.println((String)i + ": " + bufferArray[i]);
    }
    toChange=0;
  }
  if(toLearn){       
    modeLearn=1;
    modeDetect=0;
    Serial.println((String)"modeLearn="+modeLearn);
    toLearn=0; 
  }
  if(toDetect) {      
    modeLearn=0;
    modeDetect=1;
    Serial.println((String)"modeDetect="+modeDetect);
    toDetect=0;  
  }
  if(toReset) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toReset="+toReset);
    toReset=0;
  }
  if(toSave) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toSave="+toSave);
    toSave=0;
  }
  if(millis()-timestamp >= 1000) {
    sec++;
    timestamp +=1000;
    Serial.println(sec);
  }
}

[Moppi]

Irgendwas ist schief gegangen. Muss noch mal gucken.

Noch mal:

Wenn das Muster geändert wird und es wird mit Change:Ok übertragen, dann werden die Farben der Buttons zurückgesetzt.
Wenn das Muster gelöscht wird, passiert das, was bei Änderung geschieht, Learn und Detect müssen dann neu aktiviert werden.
Nicht so?

Soll der Status immer stehen bleiben, für isLearn, isDetect und isSave, sowie isReset?
Dann musst Du Dich um den Status dieser Buttons selber kümmern, denn irgendwann muss der wieder zurückgesetzt werden (wenn irgendein Button geklickt wird, werden die andern auch zurückgesetzt).

[HaWe]

es kann bei so speziellen Anforderungen wie für ein Dashborad samt User-Control und Monitor für ein NN IMO nur funktionieren, wenn der komplette lauffähige Code ständig überarbeitet wird, schrittweise und komplett -
erst wenn er komplett reibungslos funktioniert und alle Funktionen perfekt aufeinander abgestimmt sind und fehlerfrei und schnell genug miteinander funktionieren, kann man den html-Part auskoppeln und in eine eigenständige Lib auslagern.
Trotzdem vielen Dank bis hier hin, die Version 0.0.2b ist ja auch immerhin ein guter Anfang!

[HaWe]

ich habe trotz alledem noch eine Verständnisfrage:

Wozu dient hier

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

// Version 0.0.2b

const char* ssid = "WLAN";
const char* password = "59467";

ESP8266WebServer server(80);

//-----------------------------------------------------
  //HTML und Daten für das Eingabe-/Ausgabefeld
  //einfügen im globalen Scope
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------
  //Breite und Höhe des ges. Feldes
    const int tableWidth = 10;
    const int tableHeight = 10;
  //Füllzeichen für Felder
    const String fillChar = "X";
  //Parameter-Array enthält den Status aller Felder
  //der Ein-/Ausgabematrix (0= AUS, 1= AN)
    bool matrix[tableHeight*tableWidth]={0};
  //Status, ob Änderungen vorliegen
    volatile static bool toChange = 0;
    volatile static bool toLearn = 1;
    volatile static bool toDetect = 0;
    volatile static bool toReset = 0;
    volatile static bool toSave = 0;
    volatile static bool toClear = 0;
  //HTML
    String body = "";
    String s1="<style>\nform{margin:0}\n#un{width:0;height:0;visibility:hidden}\n#bu{width:10em;height:2em;}\n#rw{display:table-row;}\n#ce{display:table-cell;}\n#ip{width:1.5em;text-align:center;font-weight:bold}\n</style>\n<script>dge=document.getElementById; function oc(ob){if(ob.value=='')ob.value='"+fillChar+"';else ob.value='';}</script>\n<div role=\"presentation\" style=\"display:table\"><div id='rw'><div id='ce' style=\"padding-right:1em\"><form method=\"get\"><div role=\"presentation\" style=\"margin-bottom:1em;display:table\">";
    String s2="<div id=\"rw\">";
    String s3="<div id=\"ce\"><input onclick=\"oc(this);\" type=\"text\" name=\"b";
    String s3_1="\" value=\"";
    String s3_2="\" maxlength=\"1\" id=\"ip\"></div>";
    String s4="</div>";
    String s5="</div><div id='ce'><input id=\"bu\" type=\"submit\" value=\"Change:Ok\"><p></form>";
    String s5_0="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Clear\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"clear\"></form>"; 
    String s5_1="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Learn\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"learn\"></form>";
    String s5_2="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Detect\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"detect\"></form>";
    String s5_3="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Reset\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"reset\"></form>";
    String s5_4="<form method=\"get\"><input id=\"bu\" type=\"submit\" value=\"Save\"><input id=\"un\" type=\"text\" name=\"bn\" value=\"save\"></form></div></div></div>";
String par="b";
  //-----------------------------------------------------


float bufferArray[100];


//-----------------------------------------------------
//-----------------------------------------------------
void setup() {

  Serial.begin(115200);
  delay(1000);
  Serial.println();

  //-----------------------------------------------------
  //Anmeldung am Netzwerk
  //-----------------------------------------------------
  Serial.println("connecting by IPAddress(192,168,2,99)");
  WiFi.mode(WIFI_STA);
  
  WiFi.config(IPAddress(192, 168, 2, 99), IPAddress(192, 168, 2, 1), IPAddress(192, 168, 2, 1), IPAddress(255, 255, 255, 0));
  WiFi.begin(ssid, password); //begin WiFi connection
  
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  //-----------------------------------------------------
  //Auswertung und Erstellung des Ein-/Ausgabefeldes
  //-----------------------------------------------------
  //Einbinden in setup() und in loop() nutzen durch
  //Aufruf von "server.handleClient();"
  //benötigt Objekt "server", erstellt im globalen Scope
  //mittels:       ESP8266WebServer server(80);
  //benötigt auch: #include <ESP8266WebServer.h>
  //-----------------------------------------------------
  //erstellt von (c): Moppi    @roboternetz.de
  //-----------------------------------------------------

  memset(matrix , 0, sizeof(matrix));
  server.on("/",[]()
   {
    //Auswerten des Query-String vom Browser
    int n = 0; 
    if(server.hasArg("bn")){
      if(server.arg("bn") == "clear") toClear=1; else toClear=0;
      if(server.arg("bn") == "save") toSave=1; else toSave=0;
      if(server.arg("bn") == "reset") toReset=1; else toReset=0;
      if(server.arg("bn") == "detect") toDetect=1; else toDetect=0;
      if(server.arg("bn") == "learn") toLearn=1; else toLearn=0;      
    }
    for(int x=0; x < tableHeight; x++){
      for(int j=0; j < tableWidth; j++){
        if(server.hasArg(par+String(n))){
          String a = server.arg(par+String(n));
          bool ic = matrix[n];
          if (a == "") matrix[n] = 0; else matrix[n] = 1; 
          if (ic != matrix[n]) toChange = 1;
          n++;
        }
      }
    }
    //toChange = 1;
    //Aufbau des Feldes
    String v; body = s1; n = 0;
    for(int x=0; x < tableHeight; x++){
      body += s2;
      for(int j=0; j < tableWidth; j++){ 
        if (matrix[n]) v = fillChar; else v = "";
        body += s3 + String(n) + s3_1 + v + s3_2;
        n++;
      }
      body += s4;
    }
    body += s4+s5+s5_0+s5_1+s5_2+s5_3+s5_4;
    //Senden der Seite an den Browser
    server.send(200, "text/html", body);
   }
  );
  //-----------------------------------------------------



  //-----------------------------------------------------
  //Webserver starten
  //-----------------------------------------------------
  server.begin();
  Serial.println("Web server started!");

}


uint32_t timestamp=0, sec=0;
uint8_t modeLearn=0, modeDetect=0;

//-----------------------------------------------------
//-----------------------------------------------------
void loop() {  
  server.handleClient();
  // Aktionen nach ButtonClick:
  if(toClear) {
    Serial.println((String)"toClear="+toClear);
    memset(matrix , 0, sizeof(matrix));
    toClear=0;
  }
  if (toChange) {
    Serial.println("new data:");
    for (int i = 0; i < 100; i++) {
       bufferArray[i] = (float)matrix[i];
       Serial.println((String)i + ": " + bufferArray[i]);
    }
    toChange=0;
  }
  if(toLearn){       
    modeLearn=1;
    modeDetect=0;
    Serial.println((String)"modeLearn="+modeLearn);
    toLearn=0; 
  }
  else 
  if(toDetect) {      
    modeLearn=0;
    modeDetect=1;
    Serial.println((String)"modeDetect="+modeDetect);
    toDetect=0;  
  }
  if(toReset) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toReset="+toReset);
    toReset=0;
  }
  if(toSave) {
    toLearn=0;
    toDetect=1;
    Serial.println((String)"toSave="+toSave);
    toSave=0;
  }
  if (millis() - timestamp >= 1000) {
    while (millis() - timestamp >= 1000) {
      sec++;
      timestamp += 1000;
    }
    Serial.println(sec);
  }
}

in Zeile 115 die Anweisung

if (ic != matrix[n]) toChange = 1;
 

Wenn der Status von toChange allein vom ButtonClick auf Btn "Change:OK" abhängig sein soll, braucht man dann die Zeile trotzdem?
Kann man sie auch ohne if(...) immer sofort fest auf toChange = 1 setzen ?
Oder kann man sie auch komplett weglassen?

[Moppi]

Alle diese Variablen zeigen an, ob Änderungen vorliegen:

  //Status, ob Änderungen vorliegen    bool isChange = 0;
    bool isLearn = 0;
    bool isDetect = 0;
    bool isReset = 0;
    bool isSave = 0;
    bool isClear = 0;

An isChange kann man dies für das Eingabefeld (Matrix) ablesen, wird die Zeile "if (ic != matrix[n]) toChange = 1;" entfernt, ist das nicht mehr möglich.
An isLearn kann man dies für den Button Learn ablesen.
An isDetect kann man dies für den Button Detect ablesen.
An isReset kann man dies für den Button Reset ablesen.
An isSave kann man dies für den Button Save ablesen.
An isClear kann man dies für den Button Clear ablesen.

Somit kann man nach jedem "Browserkontakt" feststellen, ob sich etwas geändert hat und wenn, was sich geändert hat. Man kann feststellen: was wollte der Benutzer.

Im Falle eines einfachen Refresh der Ausgabe im Browser (was ich durchaus von Anfang an, aus Erfahrung, einkalkuliert habe), will der Benutzer gar nichts, weil er keine Eingabe tätigt, weder über das Eingabefeld (Matrix) noch über die Buttons. Dann sollten alle oben genannten Variablen auf 0 stehen. Dennoch überträgt mein Programmcode den (eventuell geänderten) Inhalt der Matrix zum Browser, wo der dargestellt wird.


Durch das Umbenennen der Variablen von "is" nach "to" wird der Sinn der Variablen im Code verfälscht und infolge dessen dann vermutlich auch falsch angewendet, das Verständnis leidet darunter.
Mein Code übernimmt die bidirektionale Datenübermittlung zwischen Browser und nodeMCU, auf möglichst minimalistische Art. Ändert man daran etwas, ist diese Funktion nicht mehr sichergestellt.
Um daran nichts ändern zu müssen, gibt es die verschiedenen Variablen für die Steuerungsmöglichkeiten des Codes. Die Beschreibung dafür war anbei.


MfG

[HaWe]

edit:
die "neue Version" kann ich wieder nicht verwenden - deine jetzigen Änderungen passen nicht zu meiner Programmstruktur.
wie oft noch:
zip Anhänge bringen nichts, besser man kann es dirket lesen, um sich darüber zu verständigen, und es bringt nur ein vollständiges Programm etwas!.


(ich habe es als komplette Block-Änderung versucht, ergibt gefühlt 1000 Fehlermeldungen).

Dann habe ich es schrittweise versucht...:
isChangeM (Matrix) interessiert ja mein Programm (in loop()) wie gesagt auch gar nicht mehr, sondern nur isChangeOK (Button);
wenn ich allerdings jetzt isChangeOK wie bisher isChange abfrage, dann werden nun überhaupt keine Matrix-Daten mehr an loop() weitergegeben.

Ist also alles kompletter Murks im jetzigen Zustand: Ich brauche die kompletten Änderungen in meinem kompletten Programm.
Ich verstehe auch nicht, warum du dich so halsstarrig weigerst, sie in den lauffähigen Code einzubauen, wo es doch als losgelöstes Block-Schnipsel überhapt nichts nutzt!

Du kannst dann dort im Komplett-Programm aber gerne alle "toXXX" nach "isXXX) zurück-verändern.

- - - Aktualisiert - - -

PS:

der Change:OK Button muss IMMER die Matrix senden, auch wenn keine Änderungen in der Matrix vorgenommen wurden - er tut aber sowieso in jedem Falle überhaupt nichts (Auswertung der Variable "isChangeOK")!

[Moppi]

der Change:OK Button muss IMMER die Matrix senden

Macht der ja auch.

Und da er auch das in der bisherigen Version macht, was Du Dir vorgestellt hast, brauchst Du auch den geänderten Code nicht. Damit wird es in der Tat u.U. nicht einfacher. Obwohl Du im neuen Code, so wie Du es brauchst, dann nicht ChangeOk abfragst, sondern ChangeM, das hat dann eigentlich die Funktion, die Du benötigst. Weil aus isChange ist isChangeM geworden.

Ich habe den Verdacht, dass Du damit nicht richtig umgehst, warum auch immer.
Da mein 3D-Drucker aber heute unter Koprostase leidet, nehme ich mir mal meinen Code und ....

... dann wird ein Video bei rauskommen.




MfG