- SF800 Solar Speicher Tutorial         
Seite 3 von 5 ErsteErste 12345 LetzteLetzte
Ergebnis 21 bis 30 von 90

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

Hybrid-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. #1
    HaWe
    Gast
    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!

  2. #2
    HaWe
    Gast
    ich habe trotz alledem noch eine Verständnisfrage:

    Wozu dient hier

    Code:
    #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?
    Geändert von HaWe (09.11.2019 um 12:16 Uhr)

  3. #3
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Alle diese Variablen zeigen an, ob Änderungen vorliegen:

    Code:
      //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
    Geändert von Moppi (09.11.2019 um 09:22 Uhr)

  4. #4
    HaWe
    Gast
    ja, sorry, deine Beschreibung verstehe ich aber nicht, weil ich generell html-Code und seine Funktionsweise nicht verstehe, insb. auch nicht, was Webserver oder Webclients oder Wifi-Server oder Wifi-Clients sind oder tun.
    Ich bräuchte eher eine funktionelle, zweckgerichtete Erklärung, welche Codezeile welches Ergebnis an welcher Stelle für welche Variablen in meinem eigenen Programm erzeugt - in diesem Falle die Codezeile mit dem toChange (hier wäre etwas zu ändern bzw. auf etwas zu reagieren im laufenden Code der loop() ).

  5. #5
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Habe meinen Beitrag nochmal geändert, um genauer auf die Frage einzugehen (hier nochmal als Auszug):

    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.




    MfG

  6. #6
    HaWe
    Gast
    das macht es jetzt leider noch nicht klarer:

    ich habe mal die Zeile
    if (ic != matrix[n]) toChange = 1;
    testweise auskommentiert und neu kompiliert: In der Tat reagiert jetzt der Browser nicht mehr auf Eingaben in der 10x10 Matrix.

    Nun habe ich toChange=1 fest hinter die for Schleife gesetzt:
    Code:
      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;
    Hier registriert es nun die entspr. Eingaben (allerdings ändert sich das Laufzeitverhalten nach Druck auf die Clear-Taste)
    Geändert von HaWe (09.11.2019 um 09:48 Uhr) Grund: typo

  7. #7
    HaWe
    Gast
    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")!
    Geändert von HaWe (09.11.2019 um 22:34 Uhr)

  8. #8
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    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
    Geändert von Moppi (09.11.2019 um 13:04 Uhr)

  9. #9
    HaWe
    Gast
    hast du nicht geschrieben, dass isChangeM die MatrixClicks abfragt? das ist aber nicht wichtig.
    Wichtig ist nur, dass der Change:OK Button abgefragt wird (isChangeOK) und dann auf Abfrage von isChangeOK ohne wenn und aber den aktuellen Matrix-Inhalt übermittelt.

    - - - Aktualisiert - - -

    Zitat Zitat von Moppi Beitrag anzeigen
    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
    Ich habe eher den Verdacht dass DU den Code fürs NN in loop() nicht richtig umgesetzt hast.
    poste dann aber auch bitte den kompletten Code, damit ich ihn bei mir kontrollieren kann!

    auf Abfrage von isChangeOK muss er folgendes machen (muss sich wie hier per Serial.print() kontrollieren lassen):

    Code:
    void loop() {
      if (isChangeOK ) {
        Serial.println("new data:");
        for (int i = 0; i < 100; i++) {
           bufferArray[i] = (float)matrix[i];
           Serial.println((String)i + ": " + bufferArray[i]);
        }
        isChangeOK =0;
      }
      //...
      //...
    }

  10. #10
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Ich habe mal einiges ausprobiert und mir anzeigen lassen, um Missverständnisse zu vermeiden:

    Code:
    meine Version: 20191102.1
    
    Ausgangssituation:
    
    
      isChange:   0
      isLearn:    0
      isDetect:   0
      isReset:    0
      isSave:     0
      isClear:    0
      stateLearn: 0
      stateDetect:0
    --------------------------------
    
    
    Status nach Änderung der Matrix + Change:Ok
    
    
      isChange:   1
      isLearn:    0
      isDetect:   0
      isReset:    0
      isSave:     0
      isClear:    0
      stateLearn: 0
      stateDetect:0
    --------------------------------
    
    
    Status nach Learn
    
    
      isChange:   0
      isLearn:    1
      isDetect:   0
      isReset:    0
      isSave:     0
      isClear:    0
      stateLearn: 1
      stateDetect:0
    --------------------------------
    
    
    Status nach Detect
    
    
      isChange:   0
      isLearn:    0
      isDetect:   1
      isReset:    0
      isSave:     0
      isClear:    0
      stateLearn: 1
      stateDetect:1
    --------------------------------
    
    
    Status nach Reset
    
    
      isChange:   0
      isLearn:    0
      isDetect:   0
      isReset:    1
      isSave:     0
      isClear:    0
      stateLearn: 1
      stateDetect:1
    --------------------------------
    
    
    Status nach Save
    
    
      isChange:   0
      isLearn:    0
      isDetect:   0
      isReset:    0
      isSave:     1
      isClear:    0
      stateLearn: 1
      stateDetect:1
    --------------------------------
    
    
    Status nach Change:Ok, ohne Änderung der Matrix
    
    
      isChange:   0
      isLearn:    0
      isDetect:   0
      isReset:    0
      isSave:     1
      isClear:    0
      stateLearn: 1
      stateDetect:1
    --------------------------------
    
    
    Status nach Änderung der Matrix + Change:Ok
    
    
      isChange:   1
      isLearn:    0
      isDetect:   0
      isReset:    0
      isSave:     1
      isClear:    0
      stateLearn: 1
      stateDetect:1
    Was mir dabei aufgefallen ist:

    Die Buttons Learn, Detect, Reset, Save und Clear setzen den Status aller anderen Buttons auf "0". Change aber tut das nicht.

    Daher: Wenn eine Änderung von Dir registriert wurde, weil isChange == 1 war, muss isChange von Deinem Programm auf "0" gesetzt werden. Solang dies nicht geschieht, bleibt isChange (nach erfolgter Änderung) auf "1", bis Du es entweder löschst oder einer der anderen Buttons angeklickt wurde.

    Zu stateLearn und stateDetect steht auch was in der Beschreibung. Wurden die zugehörigen Buttons angeklickt, bleiben diese Variablen auch so lange auf "1", bis Du sie änderst. Bei "1" erscheint hier der zugehörige Button im Browser dann in Rot.

    - - - Aktualisiert - - -

    hast du nicht geschrieben, dass isChangeM die MatrixClicks abfragt? das ist aber nicht wichtig.
    Wichtig ist nur, dass der Change:OK Button abgefragt wird (isChangeOK) und dann auf Abfrage von isChangeOK ohne wenn und aber den aktuellen Matrix-Inhalt übermittelt.
    Ich habe oben schon geschrieben, dass dies so funktioniert. Das hat immer so funktioniert. Siehe: https://www.roboternetz.de/community...l=1#post656202
    Geändert von Moppi (09.11.2019 um 14:00 Uhr)

Seite 3 von 5 ErsteErste 12345 LetzteLetzte

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 20.03.2019, 13:40
  2. html code für User Login + password (esp8266 + Arduino IDE)
    Von HaWe im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 35
    Letzter Beitrag: 19.08.2018, 19:10
  3. html-Code für nodeMCU mit Arduino IDE + Wifi libs
    Von HaWe im Forum Arduino -Plattform
    Antworten: 7
    Letzter Beitrag: 14.08.2018, 18:30
  4. HTML-Code (scripts)
    Von Technik =) im Forum Umfragen
    Antworten: 6
    Letzter Beitrag: 10.10.2008, 09:21
  5. virtuelles Autocockpit
    Von redg im Forum PC-, Pocket PC, Tablet PC, Smartphone oder Notebook
    Antworten: 6
    Letzter Beitrag: 02.10.2005, 13:53

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Solar Speicher und Akkus Tests