INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Async Webserver Button mit Inhalt
13.04.2019, 14:06
Beitrag #1
Async Webserver Button mit Inhalt
Hallo in die Gemeinde,
nun beisse ich mich langsam durch den Webserver des ESP32.
Ich habe nun erstmal erfolgreich eine html-Seite, welche sich selber aktualisiert mittels javascript.
Läuft prima...

Nun möchte ich gerne einen Button haben, welcher mit den Inhalt einer Varibalen darstellt und toggelbar ist:
(Pumpe an) oder
(Pumpe aus)
Das ganze solle aber nicht via html-Code hin und hergesendet werden, so wie es fast alle Besüiele ziegen, sondern irgendwie via javascript laufen, damit ich nur einmalig eine html-Seitze hochlade und diese mach alles "alleine".
Der ESP hört ja schon prima auf meine Datenübergabe.
Nun wäre ein zusätzlicher Button, so wie ich es aus der SPS-Welt "gewohnt" bin in darzustellen und halt beim betätigen wird eine Aktion zum ESP-Gesendet und der gibt Antwort und das Javascript "malt" den Teil der HTML Neu !?

Die bisherigen Beispiele brachten nur einen Submit-Button und dann konnte man in einer weiteren Ausgabe das Ergebnis sehen, ebenfalls übertragen die meisten innerhalb des INO-Codes die HTML-Seiten.

Ich bitte um alle Vorschläge

Bedankt
Shrimps

PS: Das Buttonbeispiel in meinem Code macht es nicht richtig Smile


Anbei meine bisherigen Codeschnipsel:
Code:
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h5>Messwerte</h5>
  <p>Analoger Pin 36: <span id='pin36'></span></p>
  <p>Analoger Pin 39: <span id='pin39'></span></p>
  <p>Analoger Pin 5: <span id='pin5'></span></p>
  <br>
  <br>
  <button onclick="window.location.href='/mybutton1'"> Zero </button>

  <script>
    requestData(); // get intial data straight away
  
    // request data updates every 5000 milliseconds
    setInterval(requestData, 5000);

    function requestData() {

      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/sensors');

      xhr.onload = function() {
        if (xhr.status === 200) {

          if (xhr.responseText) { // if the returned data is not null, update the values

            var data = JSON.parse(xhr.responseText);

            document.getElementById("pin36").innerText = data.pin36;
            document.getElementById("pin39").innerText = data.pin39;
            document.getElementById("pin5").innerText = data.pin5;

          } else { // a problem occurred

            document.getElementById("pin36").innerText = "?";
            document.getElementById("pin39").innerText = "?";
            document.getElementById("pin5").innerText = "?";
          }
        } else {
          console.log('Request failed.  Returned status of ' + xhr.status);

          document.getElementById("pin36").innerText = "?";
          document.getElementById("pin39").innerText = "?";
          document.getElementById("pin5").innerText = "?";

        }
      };
      
      xhr.send();
    }
    
  </script>
</body>

</html>

Code:
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char* ssid = "*";
const char* password = "*";
const char* host = "*";

AsyncWebServer server(80);

unsigned long iTicks = 0; // Zaehler fuer Durchlaeufe


void setup(void) {
  Serial.begin(115200);

  if (!SPIFFS.begin(true)){
    Serial.println("Dateisystem no init");
    return;
  }
  Serial.println("Programm startet");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    }
  Serial.println("");
  Serial.println("WiFi-Verbindung hergestellt.");
  Serial.println("IP-Addresse: ");
  Serial.println(WiFi.localIP());
  
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");

  server.on("/sensors", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "application/json", "{\"pin36\": 5.2, \"pin39\": 0.322, \"pin5\": 1}");
    Serial.println("Datenanfrage an ESP32...");
  });


  server.on("/mybotton1", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html","OK");
    Serial.println("Button !");
  });



  server.begin();
  Serial.println("Server Online");
}

boolean Timer1(long interval){
  static int oldValue;
  int value=millis() % interval;
  boolean q= value < oldValue;
  oldValue=value;
  return q;
}


void loop() {

  iTicks++;

  if (Timer1(2000)) {
    Serial.print("Ticks: ");
    Serial.println(iTicks);;
    iTicks = 0;
  }
  
//
}
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2019, 14:13
Beitrag #2
RE: Async Webserver Button mit Inhalt
Dann musst Du Dir AJAX oder Fetch anschauen.

Beispiele (für Fetch) findest Du unter anderem bei Fips.

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2019, 18:20
Beitrag #3
RE: Async Webserver Button mit Inhalt
Falls du nicht auf Ajax festgelegt bist kann ich dir die Fetch Api emfehlen.
Da es dir um das übertragen der Daten mit Javascript geht kannst du dir auch die Beispiele für den Esp8266 ansehen.
Den Link zu meiner Webseite hat Tommy ja bereits gepostet.

Gruß Fips

Meine Esp8266 & ESP32 Projekte
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
14.04.2019, 10:10
Beitrag #4
RE: Async Webserver Button mit Inhalt
Hi Fips,
besten Dank für die ausführlichen Infos auf deinen Seiten.
Ich muss mich nun nur noch durchbeissen wegen der unterschiedlichen vorgehensweisen...
Mein obiges beispiel beruht auf json, welche ich auch bei dir gefunden habe.

Dann versuche ich noch zu verstehen, wo der Unterschied zum AsyncWebServer ist.
Ich suche nach dem Server, welcher mir am meisten Resourcen für meine Steuer- und Regelungsaufgaben übrig läßt.
Diese haben eigentlich vorrang.

Btw: Die Canvas-Gauges haben mir auch schon Spaß gemacht, gibt es sowas nicht auch für Schalter/Lampen etc. ?

Ich versuche ja ein Mini-HMI für eine kleine Steuerung nachzubilden.

Lernend
Shrimps

(13.04.2019 18:20)Fips schrieb:  Falls du nicht auf Ajax festgelegt bist kann ich dir die Fetch Api emfehlen.
Da es dir um das übertragen der Daten mit Javascript geht kannst du dir auch die Beispiele für den Esp8266 ansehen.
Den Link zu meiner Webseite hat Tommy ja bereits gepostet.

Gruß Fips
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
15.04.2019, 17:45
Beitrag #5
RE: Async Webserver Button mit Inhalt
Es geht nun gut voran,
habe nun interaktion der Website mit dem ESP einigermaßen im Griff...
Was noch deutlich unkar ist, ob der asyncwebserver oder der webserver der richtige ist ???

Ich baue momentan alles auf dem Async auf, ist ja ziemlich identisch...

Ich msse auch z.zt. die Ticks(Loops), welche zwischen den aufrufen vergehen...

Jetzt noch ein wenig Fleißarbeit in die "HMI"-Page und dann ran an ESP32-NOW um zwei zu koppeln...

Neben dem Webserver versteht sich Smile

Falls gewünscht, poste ich gerne mal einen Ausschnitt aus der bisherigen Sache...

Shrimps
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  NodeMCU12E mit UDP Client & UDP Server & Webserver rkuehle 6 3.330 10.02.2019 20:52
Letzter Beitrag: Tommy56
  ESP8266 als SPIFFS/Webserver soll Daten verarbeiten TiRe 23 3.357 23.01.2019 08:03
Letzter Beitrag: Fips
  Via Webserver GPIO schalten arguido 1 1.614 05.05.2018 11:19
Letzter Beitrag: Tommy56
  Einfacher Webserver Nodemcu Esp8266 Onboard Led (Pin) schalten Fips 31 12.234 06.01.2018 20:41
Letzter Beitrag: Tommy56
Lightbulb Sonoff WiFi Wireless Switch per Webserver vom Tablet oder Smartphone aus schalten Fips 1 5.593 12.09.2017 20:45
Letzter Beitrag: Fips
  [Vorstellung] ESP8266 Webserver mit AJAX Tommy56 19 9.750 03.07.2017 12:09
Letzter Beitrag: Tommy56
  Messdatenausgabe auf Webserver über NanoESP RivaDynamite 10 5.070 10.01.2017 15:49
Letzter Beitrag: renid55
  ESP8266 ESP12-E Webserver-Frage Claus_M 8 3.941 14.11.2016 22:02
Letzter Beitrag: Claus_M
  ESP8266 Webserver Programmieren HDT 11 6.266 23.08.2016 13:28
Letzter Beitrag: HDT
  ESP8266 Webserver Marc2014 0 2.349 30.07.2016 20:15
Letzter Beitrag: Marc2014

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste