- Akku Tests und Balkonkraftwerk Speicher         
Ergebnis 1 bis 10 von 90

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

Baum-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. #11
    HaWe
    Gast
    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?)
    Geändert von HaWe (09.11.2019 um 22:29 Uhr)

Ä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
  •  

fchao-Sinus-Wechselrichter AliExpress