Mit ESP32 Mehere Werte auf Webseite darstelln

Nowareeng

Ensign
Registriert
Apr. 2022
Beiträge
242
Kann mir dabei jemand helfen ? Was mach ich falsch ?
Code:
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h"  //Web page header file

#define LED 2  //On board LED

//SSID and Password of your WiFi router
const char* ssid = "SSID";
const char* password = "passwort";
WebServer server(80); //Server on port 80

//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
}

void handleADC() {
 int a = 654321;;
 String adcValue = String(a);
 
 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}
void handleADCb() {
 int  b = 123456;
 String adcValueb = String(b);
 
 server.send(200, "text/plane", adcValueb); //Send ADC value only to client ajax request
}

void handleLED() {
 String ledState = "OFF";
 String t_state = server.arg("LEDstate"); //Refer  xhttp.open("GET", "setLED?LEDstate="+led, true);
 Serial.println(t_state);
 if(t_state == "1")
 {
  digitalWrite(LED,LOW); //LED ON
  ledState = "ON"; //Feedback parameter
 }
 else
 {
  digitalWrite(LED,HIGH); //LED OFF
  ledState = "OFF"; //Feedback parameter 
 }
 
 server.send(200, "text/plane", ledState); //Send web page
}
//==============================================================
//                  SETUP
//==============================================================
void setup(void){
  Serial.begin(115200);
 
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");

  //Onboard LED port Direction output
  pinMode(LED,OUTPUT);
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
 
  server.on("/", handleRoot);      //Which routine to handle at root location. This is display page
  server.on("/setLED", handleLED);
  server.on("/readADC", handleADC);
  server.on("/readADCb", handleADCb);

  server.begin();                  //Start server
  Serial.println("HTTP server started");
}
//==============================================================
//                     LOOP
//==============================================================
void loop(void){
  server.handleClient();          //Handle client requests
}
 
Erst mal zuwenig Info um dir helfen zu können.
Echt Blöd der verregente Samstag.
 
  • Gefällt mir
Reaktionen: bog und Nowareeng
Code:
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The ESP8266 NodeMCU Update web page without refresh</h1>
    <button type="button" onclick="sendData(1)">LED ON</button>
    <button type="button" onclick="sendData(0)">LED OFF</button><BR>
</div>

<div>
    ADC Value a is : <span id="ADCValue"></span><br>
  ADC Value b is : <span id="ADCValueb"></span><br>
    LED State is : <span id="LEDState">NA</span>
</div>

<script>

function sendData(led) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("LEDState").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "setLED?LEDstate="+led, true);
  xhttp.send();
}

setInterval(function() {
  // Call a function repetatively with 2 Second interval
  getData();
}, 2000); //2000mSeconds update rate


function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ADCValue").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "readADC", true);
  xhttp.send();
}

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ADCValueb").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "readADCb", true);
  xhttp.send();
}
</script>
<br><br><a href="https://circuits4you.com">Circuits4you.com</a>
</body>
</html>
)=====";
Ergänzung ()

Post 1 ist die .ino
Post 2 ist die index.h
Ergänzung ()

Der code funktioniert soweit ausser dass ADCValue und ADCValueb auf der Webseite sich in die Haare kriegen und nur ADCValueb angezeigt wird 🤯
 
Zuletzt bearbeitet:
Nur so vom überfliegen, du hast die Funktion getData zweimal definiert. Die zweite Definition überschreibt sicherlich die erste.
 
  • Gefällt mir
Reaktionen: kartoffelpü und Nowareeng
das doppelte getdata() hatte ich auch gerade entdeckt, aber @BeBur war etwas schneller ;)
 
Vielleicht könntest du auch etwas erklären was denn genau nicht funktioniert.
Ist die Seite denn prinzipiell erreichbar per Browser?
Zur besseren Lesbarkeit wäre auch gut wenn der Code Tag mit C/C++ deklariert wäre ;-)
 
2 mal function getData() { ...
 
lynxx schrieb:
Ja schon, aber interessiert JavaScript doch nicht, wird halt die zweite Definition genommen und da sie gleich sind ists doch erstmal egal?

Edit: Nevermind, die sind ja nicht gleich :D
 
Läuft....

Keine Hausaufgaben......Blödes Hobby
Ergänzung ()

function getData2B() { ...

Keine Zahlen im Namen 🤦
 
Zuletzt bearbeitet:
Übergeb der Funktion halt den String von dem Value den du lesen möchtest 😁
 
  • Gefällt mir
Reaktionen: Nowareeng
kann man das auch in einem übergeben?

server.send(200, "text/plane", adcValue + adcValueb)

wie sieht dann das script im html aus?
 
  • Gefällt mir
Reaktionen: Nowareeng
Du könntest z.B ein eindeutiges Trennzeichen verwenden das nicht in den Daten vorkommt. z.B:
server.send(200, "text/plane", adcValue + "#" + adcValueb)

und dann nicht "...innerHTML = this.responseText;" sondern nur den Teilstring von 0 bis '#', bzw '#' bis zum Ende des Strings ..
 
  • Gefällt mir
Reaktionen: Nowareeng
Mann ihr seid spitze ......werd ich ausprobieren......
Danke!!!!
Ergänzung ()

lynxx schrieb:
und dann nicht "...innerHTML = this.responseText;" sondern nur den Teilstring von 0 bis '#', bzw '#' bis zum Ende des Strings ..

Aber so ganz kapieren tu ich das nicht...🤯
Ergänzung ()

Andere Frage :
Code:
<style>
.card{
    max-width: 400px;
     min-height: 250px;
     background: #02b875;
     padding: 30px;
     box-sizing: border-box;
     color: #FFF;
     margin:20px;
     box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
}
</style>

Erzeugt eine Box links oben auf der Webseiten....

Wie kann ich eine zweite Box rechts davon Erzeugen....?
 
Zuletzt bearbeitet:
lynxx schrieb:
Du könntest z.B ein eindeutiges Trennzeichen verwenden das nicht in den Daten vorkommt. z.B:
server.send(200, "text/plane", adcValue + "#" + adcValueb)

und dann nicht "...innerHTML = this.responseText;" sondern nur den Teilstring von 0 bis '#', bzw '#' bis zum Ende des Strings ..

ich möchte eine homepage auf einfache weise mit werten befüllen (hab das bis dato mit client.print gelöst, möchte aber auf async web server umstellen. habt ihr eine idee?

1681628999091.png
 
Zurück
Oben