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

Zitat:

---

Ein bool Datentyp benötigt ja übrigens auch denselben Speicherplatz bei C/C++ ( stdbool.h ) wie ein char oder byte.

---

Habe ich nicht mit gerechnet. Dann sag noch mal, was Du für einen Datentyp brauchst, dann sparen wir die Umwandlung.

Zitat:

---

Ich muss es nur zunächst übertragen auf lineare Arrays, aber nur dann, wenn Daten auch neu verfügbar sind (OK/senden-Button auf der website frisch gedrückt).

---

Ich habe eine Variable (bool isChange) eingebaut, zum Abfragen nach server.handleClient();

Anhang 34435

MfG

Auf der website fürs 10x10 keypad ist signed char oder bool ok.

(float oder double wäre hier übertrieben und wirklich ein Speicherfresser)

Die 100 website-keys müssen zeilenweise als Array durchgezählt sein von 0...99, nicht Reihe/Spalte.

Code:

---

0  1  2  3  4  5  6  7  8  9
10 11 12 13 14 15 16 17 18 19
20 21 22 23 24 25 26 27 28 29
...

---

Die Übertragung muss dann zunächst so erfolgen (verkürzt, die echte Umwandlung ist etwas komplizierter und die mache ich später selber):

Code:

---

float bufferArray[100];  // global
//...
// Kopieren sobald neue Daten verfügbar:
  for (int i=0; i<100; i++} { bufferArray[i]=(float)websiteKey[i]; }

---

ich komme aber mit dem Reinkopieren des neuen Schnipsels nicht klar.
Kannst du bitte den vollständigen, kompletten Code posten?
Am besten als Code in Code-Tags, kein zip-Anhang

Zitat:

---

Zitat von HaWe

Die 100 website-keys müssen zeilenweise als Array durchgezählt sein von 0...99, nicht Reihe/Spalte.

---

Sind sie.

Zitat:

---

Zitat von HaWe

ich komme aber mit dem Reinkopieren des neuen Schnipsels nicht klar.
Kannst du bitte den vollständigen, kompletten Code posten?

---

:!: Anhang 34436



Auf neue Daten prüfen
if (isChange) ...


Kopieren sobald neue Daten verfügbar
for (int i=0; i<100; i++} { bufferArray[i]=(float)matrix[i]; }






MfG


PS:
Benutze lieber ZIPs, weil der Thread so leserlicher bleibt.
Ich habe im Thread nochmal etwas gelesen, ob noch irgendwas in den Code eingebaut werden soll, was ich übersehen habe.
Für das nodeMCU hatte ich ein kleines Projekt geplant. Aus diesem Grund kam ich überhaupt auf das Tastenfeld per HTML.
Du musst schauen, ob es so praktikabel ist, wenn nicht, dann nicht. Alle meine Projekte beginnen so, dass ich mit unbekannten
Dingen beginne oder mit denen, die am schwierigsten sein könnten; um frühzeitig ein Scheitern zu erkennen und dann abzubrechen.
Wenn Du das lieber anders lösen möchtest, als mit einer HTML-Seite, habe ich damit also keinerlei Problem. Alles i.O.

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

Code:

---

float bufferArray[100];

uint32_t timestamp=0, sec=0;


void loop(void) { 
  server.handleClient();
  // Kopieren sobald neue Daten verfügbar:
  if (isChange) {
    Serial.println("new data:");
    for (int i = 0; i < 100; i++) {
      bufferArray[i] = (float)matrix[i];
      Serial.println((String)i + ": " + bufferArray[i]);
    }
    isChange=0;
  }
  if(millis()-timestamp >= 1000) {
    sec++;
    timestamp=millis();
    Serial.println(sec);
  }
}

---

OK in Change:OK umbenannt.

wie kann man jetzt (edit: ) 5 weitere Buttons hinzufügen, in dieser Reihenfolge
Clear

Learn
Detect

(Change:OK)

Reset
Save

wenn einer gedrückt wurde, soll er ebenfalls seinen Status senden, wie Change:OK:

isClear
isLearn
isDetect
(isChange)
isReset
isSave

das will ich dann versuchen für eine Statemachine zu nutzen.

- - - Aktualisiert - - -

edit, 5 weitere Buttons

Du hattest das mit den Radio-Buttons schon mal angeführt. Das wäre eine Möglichkeit.

Das Feld könnte man so gestalten, nur am Ende einen Senden-Button, um die Daten der Form zu übertragen:

[ ] Learn
[ ] Detect
[ ] Reset
[*] Change
[ ] Save

( Senden )


Leider ist mir die Bedeutung von der Bezeichnung "Change:Ok" nicht klar, also was das genau ausdrücken soll.




MfG

Change:OK ist nur der neue Name des Buttons für (bisher) OK
s5 = "<input type="submit" value="Change: OK" style="width:14.9em;height:2em"></form>";

Clear

Detect <-> Learn

(Change:OK)

Reset
Save

"Change: OK" ist nur ein Arbeits-Name, könnte man auch "submit" oder "Change: submit" nennen.

Radio Buttons gehen nur für Learn/Detect
die anderen müssten eigene Buttons sein, die man wahlweise drücken kann.

späterer Zweck:
Clear soll einfach nur alle Keypad Felder der Website auf 0 zurücksetzen (so als hätte man die einzelnen X nochmal angeklickt) , ohne dass es neu gelernt oder erkannt wird (löschen aller bisherigen X)
Reset soll später alle bisherigen Lernschritte komplett löschen (mit Sicherheitsabfrage)
Save soll das bisher gelernte auf SD speichern (mit Sicherheitsabfrage)
(Load automatisch bei Programm-Neustart von SD)

- - - Aktualisiert - - -

PS, edit:
Radiobuttons für Detect/Learn könnten bei Umschalten z.B. entweder isLearn=1 oder isDetect=1 zurückliefern
(default wird sein: isLearn=0 und isDetect=1)
Learn schaltet in Lern-Mode
Detect in den Erkennungs-Mode
(evt. kann man das auch anders lösen, wie Radiobuttons funktionieren und was sie zurückgeben weiß ich ja auch noch gar nicht)

Das nodeMCU mit seinen Bibliotheken hat mir einige Schwierigkeiten bereitet.
Die Radio-Buttons wollten nicht funktionieren; obwohl das HTML im Browser schon funktionierte,
nur nicht, nachdem das mit dem nodeMCU verschickt wurde. Hat mich den ganzen Vormittag gekostet :(

Also bin ich doch auf Buttons umgestiegen, Quelltext hier:
:!: Anhang 34437


Neu hinzugekommen sind:

bool isLearn
bool isDetect
bool isReset
bool isSave


In der Browserzeile kann man noch sehen, welche Parameter an das nodeMCU verschickt wurden.
Habe das so gelassen, weil man dann bei der Entwicklung etwas zum Kontrollieren hat.
Kann später geändert werden.


MfG

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:

Code:

---

#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?)

Zitat:

---

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.

Zitat:

---

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

ja, ich hatte es selber mit memset probiert, aber wie gesagt, manchmal braucht es einen 2.Klick

Code:

---

  if(toClear) {
    Serial.println((String)"toClear="+toClear);
    memset(matrix , 0, sizeof(matrix));
    toClear=0;
  }

---

die Buttonfarbe müsste bei Learn und Detect konstant bleiben, ggf. abhängig von den beiden anderen Variablen
modeLearn
modeDetect
die nach den Buttonclicks entspr. gesetzt werden

Code:

---

// SNIP
  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;
  }
// SNIP

---