ESP32 Async Webserver, Variablen durch Knopfdruck updaten

International Deutsch
1

Hallo an alle,

ich benutze dieses tutorial als basis für mein programm und es funktioniert recht gut

Mein Problem ist dass ich durch "Refresh" Buttons eine Variable vom Maincode in dem HTML-Code updaten möchte. Außerdem möchte ich Radio Buttons verwenden um Variablen im Main-Code zu verändern

Ich hab mich schon ein bisschen in AJAX/jQuery eingelesen aber ich versteh nicht so recht wie ich das anwenden soll bzw finde ich nichts dazu das zu meinem Problem passt

Da der gesamte HTML Code recht lang ist poste ich erst nur den wichtigen Teil.

<!DOCTYPE HTML>
<html>
<head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>    

  </style>
  </head>
  <body>
  <h2>Musik f&uuml;r Geh&ouml;rlose</h2>
  
  <h3><u>Generelle Einstellungen:</u></h3>
  
  <form action="/get" class="radio">
    <h4>DC-Offset (current value %dcOffset%)</h4>
    <input type="button" value="Measure" onclick="measure()">
    <input type="button" value="Kalibieren" onclick="kalibieren()">

  </form>
  
  
  <h4>Zeige Peaks:</h4>
  <form action="/get" class="radio">
    <input type="radio" id="on" name="show_peaks" value="on">
    <label for="on">An</label>
    <input type="radio" id="off" name="show_peaks" value="off">
    <label for="off">Aus</label>

    <input type="submit" value="Speichern" onclick="return RadioValidator()>
  </form>
  

  <script>
    function RadioValidator() {
      if(document.getElementById('on').checked) {
        show_peaks = true;  
      }
      else if(document.getElementById('off').checked) {
        show_peaks = false; 
      }
    }
  </script>
  
</body>
</html>

Mit der Skriptfunktion RadioValidator wollte ich die Variable im Code verändern aber das funktioniert nicht wirklich

Die %DC_Offset% variable würde ich gern mit dem Measure Button updaten. Könnte das vielleicht ähnlich wie bei den Radio Buttons funktionieren?

Ich hab auch versucht die %DC_Offset% variable durch diesen Codeschnipsel zu verändern (hab ich in nem Tutorial gesehen) aber leider funktioniert das auch nicht so recht

String processor(const String& var){
  //Serial.println(var);
  if(var == "dcOffset"){
    return "changed_dcOffset";
  }
  return String();
}

Wenn irgendwelche Fragen offen sind, bitte fragt
Danke für eure Hilfe

Xenoshell

2

Da ich das von Dir verwendete Tutorial nicht kenne, kann ich Dir nicht direkt antworten.

Xenoshell:
Mein Problem ist dass ich durch "Refresh" Buttons eine Variable vom Maincode in dem HTML-Code updaten möchte. Außerdem möchte ich Radio Buttons verwenden um Variablen im Main-Code zu verändern

Das habe ich mit Hilfe der Seiten von Fips und JSON zusammen mit Javascript hinbekommen.

Da ich den Einstieg etwas sperrig fand, habe ich eine Anleitung erstellt: Einführung zu fipsok.de

Der Autor ist hier im Forum auf Deutsch aktiv.

3

Hallo,

ich habe mir mal diese Webseite mit den Beispielen angeschaut und es sieht schon recht vielversprechend aus.

Input Tab könnte ich für alle Inputs verwenden und das JavaScript von BME280 tab zum updaten der Dateien.

Das größte Problem ist wohl nur noch die Radio Buttons hinzuzufügen und auch noch zu verbinden. Da stehe ich halt wirklich auf dem Schlauch. Hast du schon Erfahrung mit anderen Input types gemacht?

Mal davon abgesehen das es nicht mehr den AsyncWebserver benutzt, solange es funktioniert wäre es mir das wert zu wechseln obwohl es große Arbeit sein wird

4

Für die Radio-Buttons musst Du etwas HTML lernen. Literatur Selfhtml und w3schools.

Gruß Tommy

5

Hallo,

ich hab mich leider etwas ungenau ausgedrückt. Ich weiß schon wie man Radio-Buttons hinzufügt.

Das ist ein Teil von meinem HTML Code mit Radio Buttons

  <h4>Zeige Peaks:</h4>
  <form action="/get" class="radio">
    <input type="radio" id="on" name="show_peaks" value="on">
    <label for="on">An</label>
    <input type="radio" id="off" name="show_peaks" value="off">
    <label for="off">Aus</label>
    <input type="submit" value="Speichern" onclick="RadioValidator()">
  </form>

Für mich existiert das Problem haupsächlich in der Verbindung mit dem Maincode die durch den Submitbutton passieren soll. Ich weiß dafür ist das onclick="RadioValidator()" da. Nur fällt mir es recht schwer sich komplett neu in XMLHttpRequests einzulesen und verstehen tu ich auch nicht alles :confused:

Ich würde halt gerne mit den Radio Buttons Boolwerte steuern aber ist nicht so einfach wie ich vermutet habe

6

Xenoshell:
Hast du schon Erfahrung mit anderen Input types gemacht?

Ich verwende Radio Button und Slider sowie einen Submit-Button:

Slider_und_Button.png

Geht das in Deine Richtung?

Slider_und_Button.png

7

Ich hab hier mal alle Inputs gezeigt die in der Webseite vorkommen sollen.

Also eben Radio Buttons mit extra Speicherbutton. Normale Inputs mit Speicherbutton und wie bei Vertikalem Zoom Inputs mit Min & Max die auch einen Speicherbutton besitzen.

Die zwei Outputs die ich auch noch brauche sind nicht im Bild drauf. Das sind zwei Variablen die in der Webseite angezeigt werden sollen die durch einen "Messen" Button geupdatet werden sollen

Also ja das geht in meine Richtung. @agmue wie machst du denn das? Ist kein Codestück das ich in fips finden kann

Screenshot 2021-02-28 123939.jpg

Screenshot 2021-02-28 123939.jpg

8

Hallo, hier mal ein kleines Update zum ersten Problem. Dem Updaten einer Variable die in HTML angezeigt werden soll. Zuerst wollte ich das es über Knopfdruck geupdatet wird aber ich habe doch noch ein Tutorial ausgegraben das ich noch nicht gesehen habe.

Das ist zwar für Temperatur und Luftfeuchtigkeit gedacht, aber die Werte konnte ich sehr einfach anpassen um meine eigenen Werte zu erneuern.

Kann mir jemand noch bei dem setzten von Variablen helfen die durch Radio-Buttons gesteuert werden?

9

Was ich Dir gezeigt habe, stammt aus einem noch unfertigen Projekt zur Lichtsteuerung. Die etwas umfangreiche Animation ignorierst Du bitte einfach. Anbei findest Du drei wichtige und hoffentlich erhellende Dateien als Ausschnitt. Ausgegangen bin ich von den Tabs von Fips.

ESP_WifiSpiffsFastLED.zip (7.82 KB)

10

Hallo agmue,

ich hab mir mal deinen Code angeschaut und so ganz versteh ich den nicht. Du benutzt ja den Button "TwinkleFox" um die Farbwechselzeit, Blinkgeschwindigkeit und Blinkdichte zu übertragen. Der Button ist doch aber gar nicht an irgendeine Funktion geknüpft oder? Hab gedacht, da macht man dann immer sowas wie onclick=function().

document.getElementById("TF_Farbwechselzeit").value = obj.TF_Farbwechselzeit;
document.lichtparameter.TF_Blinkgeschwindigkeit[obj.TF_Blinkgeschwindigkeit].checked=true;
document.lichtparameter.TF_Blinkdichte[obj.TF_Blinkdichte].checked=true;

Was genau passiert hier in dem Skript? Für micht sieht es so aus wie als würden die Werte gespeichert werden.

if (server.hasArg("TF_Blinkdichte")) {
    TF_Blinkdichte = server.arg("TF_Blinkdichte").toInt();
    anzeigeOLED(String("TF_Blinkdichte" + String(TF_Blinkdichte)).c_str());
  }

In der Funktion void arg_TwinkleFox() werden die werte dann nochmal abgefragt und an die funktion anzeigeOLED() übergeben, oder?

Ich seh auch gerade wie du die Verbindung gemacht hast mit der Funktion und dem Maincode.

if (server.hasArg("ACTION")) {
      akt_action = server.arg("ACTION").toInt();
      anzeigeOLED(String("action " + String(akt_action)).c_str());
    }
    arg_TwinkleFox();
    if (!handleFile(server.urlDecode(server.uri())))
      server.send(404, "text/plain", "FileNotFound");
  });

Hier wird abgefragt ob der Button mit Name=Action gedrückt wurde und dann wird die Funktion arg_TwinkleFox() ausgeführt.

Ich hoffe ich hab alles richtig verstanden, wenn nicht korrigiere mich noch einmal. Ich werd mal versuchen das heute umzusetzten. Du benutzt ja auch fetch() (ich benutze XMLHttpRequest ). Hab schon positive Sachen darüber gehört. Ist das so viel einfacher oder nur ein bisschen simpler?

11

Xenoshell:
Ich werd mal versuchen das heute umzusetzten.

Ich denke, Du bist schon auf dem richtigen Weg, deshalb harre ich erstmal der Dinge, die Du noch selbst herausfindest.

Xenoshell:
Du benutzt ja auch fetch() (ich benutze XMLHttpRequest ). Hab schon positive Sachen darüber gehört. Ist das so viel einfacher oder nur ein bisschen simpler?

Eine Beurteilung ist weit außerhalb meines Wissens, ich habe mich an Fips orientiert. Für mich funktioniert das gut, mehr kann ich nicht sagen. Bei Bibliotheken bevorzuge ich wenn möglich die von Espressif, um nicht noch mehr installieren zu müssen. Ob das eine gute Idee ist, weiß ich aber auch nicht.

12

Ich bin auch von AJAX, das ich von früher her kannte, durch Fips zu Fetch gewechselt.
Es ist einfach weniger Schreiberei.

Gruß Tommy

13

Hey Leute, noch mal ein kleines Update weil ihr mir alle so schön geholfen habt. Danke nochmals :slight_smile:

Ich weiß gar nicht warum ich da nicht früher dran gedacht habe aber meine normalen Inputs mit Text sind eigentlich genau das gleiche wie meine Radio Buttons. Der einzige Unterschied ist das bei den Radio Buttons das Value schon vorgegeben ist und bei den Inputs kann eingegeben werden was auch immer.

Gesagt getan, der Serial Monitor gibt den richtigen Wert aus und er verändert sich auch noch recht zügig wenn man wechselt. Also für alle die auch Radio Buttons benutzen wollen, verweise ich einfach auf den Link in meinem Anfangspost. Ist wirklich fast das gleiche, bis eben der Unterschied mit dem festen Value bei Radio Buttons

14

Xenoshell:
Ich weiß gar nicht warum ich da nicht früher dran gedacht habe ...

Manchmal braucht es nur einen kleinen Anstoß in die richtige Richtung.

Danke für die Rückmeldung!

15

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.