- fchao-Sinus-Wechselrichter AliExpress         
Ergebnis 1 bis 10 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
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Ich sehe nicht, ob Du schon geantwortet hast. Kannst ja auch mal 15min warten, ob sich mein Beitrag noch ändert.
    Leider fallen immer wieder noch mehr Sachen ein, wenn ich eigentlich schon fertig geschrieben habe.




    MfG

    - - - Aktualisiert - - -

    Bevor wir jetzt weiter machen, warte ich, bis das Video hoch geladen ist, dauert noch ca. 25min.
    Dann kannst Du mal schauen, und wir können uns verständigen. Gerne auch dann mit Angabe der Position (mm:sec) im Video.




    MfG

    - - - Aktualisiert - - -

    Was die Änderungen und das Weiterentwickeln angeht:
    Ich habe den Code extra optisch gekapselt, dass man die Module erkennt und einfach austauschen kann.
    Ich wollte mir das Drama jetzt mit den LIBs "*.h" etc. ersparen, weil ich darin noch ungeübt bin.
    Daher sollte es einfach sein, auch in einem riesigen Quelltext, diese beiden Sachen zu finden und auszutauschen.
    Da muss man nicht jedesmal den gesamten Quelltext über's Forum schicken - dachte ich mir so.

  2. #2
    HaWe
    Gast
    ich kann nicht deine Änderungen in meinen Code einarbeiten, wenn du meine vorherigen Änderungen nicht ebenfalls mit übernommen hast.
    Es sind oft vielfältige Änderungen, hier und da.

    bitte auch nicht einen Post nachträglich ändern, sondern zusätzlich antworten.

    - - - Aktualisiert - - -

    drücke mal die "Learn" Taste: Learn wird rot, das stimmt;
    und dann die "Save" Taste
    und schau, ob sich die Farbe von Learn und Detect Button ändern
    Das müssen sie nämlich (Detect->rot und Learn->grau)

    das selbe bei Reset.


    guck bitte auch warum: nämlich was da in loop() und im Serial Monitor passiert.

    - - - Aktualisiert - - -


    ich beziehe mich auf Klartext-Code in https://www.roboternetz.de/community...l=1#post656003
    (bei dir Version 0.0.3, eigentlich aber Version 0.0.4)

  3. #3
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Da Du oben/vorher nicht mehr liest, schreibe ich es nochmals hier, dass das Video hochgeladen ist:




    MfG

    - - - Aktualisiert - - -

    Zitat Zitat von HaWe Beitrag anzeigen
    ich kann nicht deine Änderungen in meinen Code einarbeiten, wenn du meine vorherigen Änderungen nicht ebenfalls mit übernommen hast.
    Ich brauche Deine Änderungen nicht übernehmen. Du sollst nichts an meinem Code ändern. Machst Du das nicht, muss ich es auch nicht übernehmen.
    Das erschwert die Zusammenarbeit ... leider ... ich Suche mir das auch nicht aus.
    In einer Firma mit 30 Programmierern wäre das auch nicht anders möglich. Da verlässt Du Dich auf den Code des andern Kollegen und benutzt die Schnittstelle,
    dafür heißen die Teile so (gut, jetzt haben wir hier keine Eindeutige, aber ich habe mich sehr bemüht, die Variablen, die nach außen hin zu interessieren haben,
    ganz nach oben zu stellen und habe sie kommentiert (damit wir es einfacher haben, in Deutsch). Und wenn was an dem Modul des Kollegen funktionell nicht passend
    ist, teilt man das dem mit und er ändert das demnächst. Aber man nimmt nicht seinen Code, ändert den, gibt ihm den zurück und sagt: übernimm diese, meine Änderungen,
    die ich angebracht habe.

    Ich schaue gleich weiter ...


    MfG
    .

  4. #4
    HaWe
    Gast
    um es nochmal zu verdeutlichen:
    der Farbwechsel darf nicht stattfinden, weil ein Button im Formular gedrückt wurde,
    sondern einzig und allein, weil im Code steht
    modeDetect=1/0
    oder
    modeLearn=1/0.


    Ich muss deinen Code ändern können, denn dein Code muss auf meinen Code passen und reagieren.

    Ich brauche deinen Code auch nicht als unveränderliche Schnittstelle, sondern als integralen Bestandteil MEINES Codes.

    - - - Aktualisiert - - -

    zum Video:
    man sieht nach Druck auf Clear nicht, was im Serial Monitor passiert, da wird der Fehler nämlich offensichtlich!
    markiere die beiden letzten Felder,
    drücke OK,
    kontrolliere im Serial Monitor.

    drücke Clear, drücke OK,
    kontrolliere im Serial Monitor:
    hier sind immer noch die letzten 2 Felder markiert.

    es dürfen auch nicht sowohl Learn als auch Detect Button gleichzeitg beide rot oder beide grau sein, bedingt durch die Variablen
    modeLearn und modeDetect.

    GGf. poste bitte deinen neuen Code samt meiner Ergänzungen (Version 0.0.5)

  5. #5
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    drücke mal die "Learn" Taste: Learn wird rot, das stimmt;
    und dann die "Save" Taste
    und schau, ob sich die Farbe von Learn und Detect Button ändern
    Das müssen sie nämlich (Detect->rot und Learn->grau)
    Das weiß ich nicht, warum das passiert.

    Fakt ist: Du kannst NICHTS eigenständig zum Browser schicken, der das dann ausführt.
    Du bist immer drauf angewiesen, dass der User eine Aktion im Browser ausführt, worauf reagiert werden kann.

    Du musst wissen, welche Funktionalität da sein soll. Das meiste davon werde ich in meinem Modul einbauen können.
    Dass also bestimmte Buttons bestimmte Farben bekommen. Habe ich gemacht.
    Irgendwo hast Du doch geschrieben, der Status der Buttons darf sich nicht ändern. Oder so ähnlich.
    Wie soll das dann jetzt gemacht werden?

    Da musst Du jetzt eine Wahrheitstabelle erstellen, wo die Abhängigkeit der Buttons draus hervorgeht.
    Das so wild dort rein zu programmieren, führt ins Chaos und zu nicht funktionierendem Code. Da jagt dann ein
    Problem das andere und die Katze beißt sich am Ende in den Schwanz ... und es vergehen Stunden um Stunden dabei.

    Und deswegen werde ich dann auch die Variablen zurückändern, weil sonst die Logik in meinem Code hinten und vorne
    irgendwann nicht mehr stimmt und ich nicht mehr weiß, was an welcher Stelle mit welcher Variable gemeint ist.


    ok .... so weit



    MfG

  6. #6
    HaWe
    Gast
    Du scheinst nicht zu verstehen, wann sich ein modeStatus ändert und wann nicht und wann und wie darauf die Button-Farbe zu reagieren hat.
    Auch scheint dein Code nach Clear und OK die falschen Were zu übertragen (wie beschrieben).

    Aber ok, wenn das so ist, dass der Browser nicht Aktionen des eigenständigen, automatischen Codes ebenfalls anzeigen kann, dann macht das ganze keinen Sinn.
    Und wenn du meine Änderungen nicht übernimmst und passend weiter verarbeitest, auch nicht.
    Dann kann ich aber dein jetziges html ButtonPad auch nicht fürs NN verwenden.

  7. #7
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    Zitat Zitat von HaWe Beitrag anzeigen
    Du scheinst nicht zu verstehen, wann sich ein modeStatus ändert und wann nicht und wann und wie darauf die Button-Farbe zu reagieren hat.
    Antwort: nein



    Um dem Wirrwarr zu entgehen, habe ich mich nun noch einige Zeit
    hingesetzt und es etwas durchsichtiger gemacht, sowie geändert.
    Wenn das sinnvoll weiter verfolgt werden soll, ist das notwendig.


    Ich habe das alles in eine Datei gepackt:
    KeyPadSource7.zip

    und in noch eine:

    besch.txt





    MfG

    - - - Aktualisiert - - -

    Zitat Zitat von HaWe Beitrag anzeigen
    Und wenn du meine Änderungen nicht übernimmst und passend weiter verarbeitest, auch nicht.
    Dann kann ich aber dein jetziges html ButtonPad auch nicht fürs NN verwenden.

    Du wolltest, dass ich etwas in HTML mache. Habe ich getan. Zudem gebe ich mir alle Mühe und mache mir viele Gedanken,
    wie wir das in den Griff bekommen, dass einerseits auf die User-Aktionen reagiert und die HTML-Datei entsprechend versendet wird
    und andererseits Du aber in die Lage versetzt wirst, darauf Einfluss zu nehmen.

    Worauf Du keinen Einfluss nehmen kannst: auf den Status, ob und was für einen Button der User angeklickt hat.
    Deshalb auch auf diese Variablen nicht. Du kannst sie auslesen, aber nicht deren Namen ändern. Du kannst sie auch
    überschreiben, was aber keinen Sinn macht. Sie sollen nur dazu dienen, dass Du in Erfahrung bringen kannst, ob und was der User
    will.

    Ich habe weitere Variablen eingeführt, die Dir Kontrolle und Einfluss erlauben. Du kannst nun Einfluss nehmen, ob der Inhalt der
    neuen Variablen stateLearn und stateDetect - abhängig von der Nutzeraktion -geändert wird oder nicht und kannst
    diese Variablen selbst ändern, darüber wird auch die Farbe der Buttons bestimmt, damit der Status dieser Variablen (Buttons)
    für den Nutzer optisch ersichtlich ist.

    Ich hoffe, dass wir damit ein gutes Stück besser voran kommen!



    MfG

    - - - Aktualisiert - - -

    Wenn Du sonst für Buttons noch einen festen Status brauchst, der eben nicht abhängig vom User-Klick geändert wird, sondern für Deinen weiteren Programmablauf erhalten bleibt, solltest Du diese Variableninhalte in für Dich brauchbare Variablen, deren Namen Du dann selbst in Deinem Code bestimmen kannst, kopieren/übernehmen.
    Geändert von Moppi (02.11.2019 um 07:37 Uhr)

  8. #8
    HaWe
    Gast
    zip Anhänge bringebn nichts, besser man kann es dirket lesen, um sich darüber zu verständigen!!
    Und es muss vollständiger Code sein!! (Komplettes Program!!)

    ich will versuchen, dir noch mal den Grund zu erklären:

    als reines Keypad ist die Website grundsätzlich OK,
    und Zusatzbuttons zur Steuerung funktionieren grundsätzlich auch.
    Was die Buttons für die Zustands-Modi angeht, so müssen die allerdings angezeigt werden, und hier kommen zu
    Detect, Training
    noch mindestens 2 weitere dazu: Upload und Pause,
    und zwischen diesen Zuständen wird hin- und her geschaltet (immer nur 1 davon ist aktiv).

    Diese Zustandsmodi werden allerdings auch vom laufenden Programm selbstständig, automatisch gesetzt und geändert, nicht nur vom User auf der Website, und wenn man neue Daten eingibt, muss man wissen, in welchem Zustand das Programm gerade ist (Zustandsautomat).
    Wenn das über die Website nicht geht (Farbänderung der entspr. Buttons ,oder ggf eine Meldezeile), dann muss dies auf einem Display erfolgen und über GPIO-LEDs.

    Mein M3 Due früher hatte viel RAM (mehr als der esp8266), genügend GPIOS (70), ein 2,8"" Farb-Display und konnte MT, darüber ging es, war aber per Menüsteuerung trotzdem sehr verschachtelt.
    Mein ESP8266 hat nicht genügend freie Pins, eine SD-Karte braucht 4, und mein i2c-OLED 2 weitere, außerdem ist dieses eigentlich zu mickrig zur autonomen Steuerung: Hier bleiben also dann schon gar keine GPIOs mehr übrig für LEDs und Taster.
    Fazit:
    wenn man eine html-Website nicht auch als Dashboard zur Programmstatusanzeige verwenden kann, braucht man einen anderen Prozessor mit WiFi, mehr GPIOs, zusätzlichen GPIO-Tastern und einem großen TFT, und das kann dann nur ein ESP32 oder ein Raspi sein, und beide können ja auch MT.

    Darüberhinaus muss ich in der Lage sein, Variablennamen zu ändern, wenn es nötig ist.
    isSave ist missverständlich, da es nichts "ist", sondern nur einen btn-press signalisiert, wodurch etwas getan werden soll.
    eigentlich wäre dann sogar etwas anderes wie btn_Save_press besser, analog auch btn_Clear_press usw., damit der Code später unmissverständlich bleibt.
    Zusätzlich muss ich die Reihenfolge und Anordnung der Buttons samt ihrer Variablen für die Zwecke der NN-Steuerung ändern können, und das muss dann so bleiben.

    Dein letzter zip Anhang ist wie geesagt nicht nutzbar für mich, da er nicht meinen eigenen Code samt Test- und Debugroutinen mit eingearbeitet hat und noch nicht einmal lauffähig ist. Auch hast du die Variablennamen zurück-geändert, wodurch sie jetzt nicht mehr zu meinem Testcode passen.


    Ich werde daher wschl auf Version 0.0.2a zurückgehen, ohne Farbänderung der Buttons (denn das geht ja eh nicht programmseitig) und muss sehen, ob ich Teile der Buttons auf ein TFT/OLED-Display-Menü übertrage, samt Zustandsanzeige.

    Am WE jetzt bin ich viel unterwegs, höchstens zwischenzeitlich mal am PC (aber dann ohne ESP8266) wschl also erst im Lauf der kommen den Woche.

    Ob ich das ganze also hinkriege, dass auch du das NN am ESP8266 benutzen kannst, ist ziemlich unsicher, vermutlich vlt eher nicht, ich selber würde meinem Adafruit Feather ESP32 mit 3,5" TFT bessere Chancen einräumen, und selbst das wird viele Wochen Arbeit bedeuten.

    - - - Aktualisiert - - -

    was allerdings schön wäre: ein Bugfix für Version 0.0.2a, sodass ein Clear-Press nach Daten-OK/submit sofort das Keypad leert, nicht erst nach 2x, und es auch nicht nur scheinbar leert wie bei Version 0.0.3/4:
    sondern nach XXX Daten OK/submit, dann Clear-Press und dann unmittelbarem Click auf OK/submit dann auch wirklich sofort ein leeres Feld übertragen wird und nicht doch noch mal der vorher ungelöschte Inhalt.

    Code:
    #include <ESP8266WiFi.h>
    #include <WiFiClient.h>
    #include <ESP8266WebServer.h>
    
    
    // Version 0.0.2a
    
    const char* ssid = "WLAN";
    const char* password = "1234567";
    
    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.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
      //-----------------------------------------------------
    
      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++;
            }
          }
        }
        //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) {
        sec++;
        timestamp +=1000;
        Serial.println(sec);
      }
    }
    Geändert von HaWe (09.11.2019 um 22:32 Uhr) Grund: typos

Ä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