Temp Sensoren an Webseite übergeben [ESP32 webserver: Aktualiseren mit AJAX]

International Deutsch
1

Hallo habe 3 Temp sensoren auf lcd ausgegeben Funktioniert wunderbar, möchte die drei sensoren auch auf die webseite ausgeben habe es soweit das ich einen sensor ausgeben kann mit den anderen zwei breuchte ich hilfe, hir mal mein Code

void indexHTML() {
  server.send(200, "text/html",
              "<!DOCTYPE html>\
  <html>\
  <head>\
  <title>Temperaturanzeige</title>\
  <meta http-equiv='content-type' content='text/html'; charset='utf-8'>\
  <style>\
  body { background-color: #585858; font-size: 50px; font-family: Arial, Helvetica, Sans-Serif; color: #F2F2F2; margin-left: 40px; }\
  h1 { color: #2ECCFA; margin-top: 50px; margin-bottom: 0px; }\
  h2 { font-size: 20px; margin-top: 0px; margin-bottom: 50px; }\
  #tempInnenraum { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  #tempOfenrohr { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  </style>\
  </head>\
  <body>\
  <h1>Temperaturanzeige</h1>\
  <h2>(Ofen)</h2>\
  <table><tr><td>Aktuelle InnenraumTemp:&nbsp;</td>\
  <td id='tempInnenraum'><span id='Innenraum'>-</span>°C</td></tr></table>\
  <table><tr><td>Aktuelle OfenrohrTemp    :&nbsp;</td>\
  <td id='tempOfenrohr'><span id='Ofenrohr'>-</span>°C</td></tr></table>\
  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    xhttp.onreadystatechange = function() {\
      if (this.readyState == 4 && this.status == 200) {\
        document.getElementById('Innenraum').innerHTML = this.responseText;\
      }\
    };\
    xhttp.open('GET', 'TempWeb3', true);\
    xhttp.send();\
  }\
  </script>\
  </body>\
  </html>\
  ");
}

void TempRaum() {
  String Raum = String(TempMesungDS());
  server.send(200, "text/plane", Raum);
}
void TempOfenrohr() {
  String Ofenrohr = String(thermocouple.readCelsius());
  server.send(200, "text/plane", Ofenrohr);
}
void TempInnenraum() {
  String Innenraum = String(thermocouple2.readCelsius());
  server.send(200, "text/plane", Innenraum);
}

server.on("/", indexHTML);
  server.on("/TempWeb", TempRaum);  
  server.on("/TempWeb2", TempOfenrohr);
  server.on("/TempWeb3", TempInnenraum);
2

Leider postest du entgegen der Empfehlung im Forum How to nur unvollständigen Code.

Ich hoffe dir hilft daher auch dieses Codeschnippsel meinerseits:

schick dir die 3 Felder als JSON raus und parse das JSON so:

if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
var jo=JSON.parse(this.responseText);
for (var i in jo)
{if(document.getElementById(i)) document.getElementById(i).innerHTML=jo[i];}
}}}
3

Hir der komplette Code

#include "wlan.h"
#include "ota.h"
#include "button.h"
#include "uhrzeit.h"
#include "max6675.h"
#include "DS18B20.h"

#include <WebServer.h>

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 20, 4);

int thermoDO = 15;  // SO
int thermoCS = 2;   // CS
int thermoCLK = 0;  // SCK
MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO);

int thermoDO2 = 16;  // SO
int thermoCS2 = 17;  // CS
int thermoCLK2 = 5;  // SCK
MAX6675 thermocouple2(thermoCLK2, thermoCS2, thermoDO2);

unsigned long tempzeit = 0;
int intervalltemp = 3000;


WebServer server(80);

//-----------------------------------------------
int buttonState = 0;
unsigned long aktuelleZeit = 0;
int intervall = 500;
unsigned long aktuelleZeit2 = 0;
int intervall2 = 7000;
int mode = 0;
int lcdStufe;
//-----------------------------------------------
int aktuelleUhrzeit = 0;
int intervallUhrzeit = 1000;

void setup() {
  //Serial.begin(9600);
  wlaninit();
  otainit();
  lcd.init();
  buttonInit();
  uhrzeitInit();
  ds18b20init();
  lcd.backlight();
  lcd.setCursor(0, 0);
  lcd.print("Press Button");

  server.on("/", indexHTML);
  server.on("/TempWeb", TempRaum);  // TempOfenrohr TempRaum
  server.on("/TempWeb2", TempOfenrohr);
  server.on("/TempWeb3", TempInnenraum);
  //server.on("/", handle_root);
  server.begin();
}


void loop() {
  //ensureWIFIConnection();
  ArduinoOTA.handle();
  timeClient.update();
  server.handleClient();
  schalten();
  lcdSchalten(lcdStufe);
}
// ----------------------------------------------------------------------------------
void lcdSchalten(int schalt) {
  //static int altPower = -1;

  // if (altPower == power) return;
  //  altPower = power;
  switch (schalt) {
    case 0:
      // lcd.setCursor(0, 0);
      // lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        //  lcd.print(timeClient.getFormattedTime());
        lcd.print("Verbunden mit");
        // lcd.print("Fuehler 1");
        //lcd.setCursor(0, 1);
        // lcd.print(TempMesungDS2());
        lcd.setCursor(0, 1);
        lcd.print(String(WiFi.SSID()));
      } else {
        lcd.setCursor(0, 0);
        lcd.print("Nicht Verbunden");
        lcd.setCursor(0, 1);
        lcd.print("Mit Wlan");
      }
      //lcd.print("Fuehler 2");
      break;
    case 1:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(0, 1);
        lcd.print(WiFi.localIP().toString());
      } else {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        lcd.setCursor(0, 1);
        lcd.print("-----------");
      }
      //lcd.print("Luft     ");
      break;
    case 2:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
    case 3:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (millis() - tempzeit > intervalltemp) {
        lcd.setCursor(12, 0);
        lcd.print(thermocouple.readCelsius());
        lcd.setCursor(18, 0);
        printX("&0& ");  //----------------------------------------------------
        tempzeit = millis();
        lcd.setCursor(0, 0);
        lcd.print("Ofenrohr");
        lcd.setCursor(12, 1);
        lcd.print(thermocouple2.readCelsius());
        lcd.setCursor(18, 1);

        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 1);
        lcd.print("Innenraum");
        lcd.setCursor(12, 2);
        lcd.print(TempMesungDS());
        lcd.setCursor(18, 2);
        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 2);
        lcd.print("Raum");
      }
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
  }
}

//------------------------------------------------------------------------------------


void mode0() {
  mode = 0;
  Serial.println("Mode0");
  lcd.clear();
  lcdStufe = 0;
  lcdSchalten(lcdStufe);
}

void mode1() {
  mode = 1;
  Serial.println("Mode1");
  lcd.clear();
  lcdStufe = 1;
  lcdSchalten(lcdStufe);
}

void mode2() {
  mode = 2;
  Serial.println("Mode2");
  lcd.clear();
  lcdStufe = 2;
  lcdSchalten(lcdStufe);
}

void mode3() {
  mode = 3;
  Serial.println("Mode3");
  lcd.clear();
  lcdStufe = 3;
  lcdSchalten(lcdStufe);
}

void schalten() {
  // read the state of the pushbutton value:
  buttonState = button();

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // check mode
    if (millis() - aktuelleZeit > intervall) {
      if (mode == 0) {
        mode2();
      } else if (mode == 1) {
        mode2();
      } else if (mode == 2) {
        mode3();
      } else if (mode == 3) {
        mode0();
      }


      aktuelleZeit = millis();
    }
  }
  if (millis() - aktuelleZeit2 > intervall2) {
    if (mode == 0) {
      mode1();
    } else if (mode == 1) {
      mode0();
    }
    aktuelleZeit2 = millis();
  }
}
//---------------------------------------------------------------------------------

void uhrzeit() {
  if (millis() - aktuelleUhrzeit > intervallUhrzeit) {
    Serial.println(timeClient.getFormattedTime());
    aktuelleUhrzeit = millis();
  }
}
//--------------------------------------------------------------------------------

void printX(const char a[]) {
  int i = 0;
  while (true) {
    char ch = a[i++];
    if (ch == 0) return;
    if (ch == '&') {
      ch = a[i++];
      switch (ch) {
        case 'a':
          lcd.write(0xE1);
          break;
        case 'o':
          lcd.write(0xEF);
          break;
        case 'u':
          lcd.write(0xF5);
          break;
        case '0':
          lcd.write(0xDF);
          break;
        default:
          if (ch < 128) lcd.write(ch);
      }
    } else if (ch < 128) {
      lcd.write(ch);
    }
  }
}

//--------------------------------------------------------------------------------




void indexHTML() {
  server.send(200, "text/html",
              "<!DOCTYPE html>\
  <html>\
  <head>\
  <title>Temperaturanzeige</title>\
  <meta http-equiv='content-type' content='text/html'; charset='utf-8'>\
  <style>\
  body { background-color: #585858; font-size: 50px; font-family: Arial, Helvetica, Sans-Serif; color: #F2F2F2; margin-left: 40px; }\
  h1 { color: #2ECCFA; margin-top: 50px; margin-bottom: 0px; }\
  h2 { font-size: 20px; margin-top: 0px; margin-bottom: 50px; }\
  #tempInnenraum { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  #tempOfenrohr { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  </style>\
  </head>\
  <body>\
  <h1>Temperaturanzeige</h1>\
  <h2>(Ofen)</h2>\
  <table><tr><td>Aktuelle InnenraumTemp:&nbsp;</td>\
  <td id='tempInnenraum'><span id='Innenraum'>-</span>°C</td></tr></table>\
  <table><tr><td>Aktuelle OfenrohrTemp    :&nbsp;</td>\
  <td id='tempOfenrohr'><span id='Ofenrohr'>-</span>°C</td></tr></table>\
  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    xhttp.onreadystatechange = function() {\
      if (this.readyState == 4 && this.status == 200) {\
        document.getElementById('Innenraum').innerHTML = this.responseText;\
      }\
    };\
    xhttp.open('GET', 'TempWeb3', true);\
    xhttp.send();\
  }\
  </script>\
  </body>\
  </html>\
  ");
}

void TempRaum() {
  String Raum = String(TempMesungDS());
  server.send(200, "text/plane", Raum);
}
void TempOfenrohr() {
  String Ofenrohr = String(thermocouple.readCelsius());
  server.send(200, "text/plane", Ofenrohr);
}
void TempInnenraum() {
  String Innenraum = String(thermocouple2.readCelsius());
  server.send(200, "text/plane", Innenraum);
}

// TempMesungDS()               Raum
// thermocouple.readCelsius()   Ofenrohr
// thermocouple2.readCelsius()  Innenraum
4

Was sind das für Libraries ?
Die kenne ich nicht, bitte noch den Link posten.

5

wlan.h


#include <WiFi.h>
#include <WiFiMulti.h>
WiFiMulti wifiMulti;



#include "secrets.h"  // Passwords saved in this file to be hidden from versioncontrol / sharing




// WiFi-Settings (if not defined in secrets.h replace your SSID/PW here)
const char* WIFI_SSID = SECRET_WIFI_SSID;              // Wifi network name (SSID)
const char* WIFI_PASSWORD = SECRET_WIFI_PASSWORD;      // Wifi network password
const char* WIFI_SSID_2 = SECRET_WIFI_SSID_2;          // Wifi network name (SSID)
const char* WIFI_PASSWORD_2 = SECRET_WIFI_PASSWORD_2;  // Wifi network password

const uint32_t CONNECTION_TIMEOUT_MS = 10000;  // WiFi connect timeout per AP.
const uint32_t MAX_CONNECTION_RETRY = 20;      // Reboot ESP after __ times connection errors


unsigned long aktuelleVersuche = 0;
int intervallVersuche = 1000;
int intervallNeustart = 10000;

void wlaninit() {
  //Serial.begin(115200);                             // Activate debugging via serial monitor
  WiFi.mode(WIFI_STA);                            // Connectmode Station: as client on accesspoint
  wifiMulti.addAP(WIFI_SSID, WIFI_PASSWORD);      // multpile networks possible
  wifiMulti.addAP(WIFI_SSID_2, WIFI_PASSWORD_2);  // multpile networks possible
  wifiMulti.run();                                // ensureWIFIConnection();                        // Call connection-function for the first time
}



void ensureWIFIConnection() {
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("No WIFI Connection found. Re-establishing...");
    int connectionRetry = 0;
    while ((wifiMulti.run(CONNECTION_TIMEOUT_MS) != WL_CONNECTED)) {
      //delay(1000);
      if (millis() - aktuelleVersuche > intervallVersuche) {
        connectionRetry++;
        aktuelleVersuche = millis();
      }
      Serial.println("WLAN Connection attempt number " + String(connectionRetry));
      if (connectionRetry > MAX_CONNECTION_RETRY) {
        Serial.println("Connection Failed! Rebooting...");
        //delay(5000);
        if (millis() - aktuelleVersuche > intervallNeustart) {
          ESP.restart();
        }
      }
    }
    Serial.println("WiFi is connected");
    Serial.println("IP address: " + (WiFi.localIP().toString()));
    Serial.println("Connected to (SSID): " + String(WiFi.SSID()));
    Serial.println("Signal strength (RSSI): " + String(WiFi.RSSI()) + " dB (-50 dB = perfect / -100 dB no signal)");
  }
}
6

ota.h

#include <ArduinoOTA.h>
//#include <arduino.h>




void otainit() {
  // Serial.begin(9600);
  //WiFi.mode(WIFI_STA);
  // WiFi.begin(ssid, password);
  // while (WiFi.waitForConnectResult() != WL_CONNECTED) {
  //   Serial.println("Connection Failed! Rebooting...");
  //   delay(5000);
  //  ESP.restart();
  //}

  // Port defaults to 8266
  // ArduinoOTA.setPort(8266);

  // Hostname defaults to esp8266-[ChipID]
  // ArduinoOTA.setHostname("myesp8266");

  // No authentication by default
  // ArduinoOTA.setPassword("admin");

  // Password can be set with it's md5 value as well
  // MD5(admin) = 21232f297a57a5a743894a0e4a801fc3
  // ArduinoOTA.setPasswordHash("21232f297a57a5a743894a0e4a801fc3");

  ArduinoOTA.onStart([]() {
    String type;
    if (ArduinoOTA.getCommand() == U_FLASH) {
      type = "sketch";
    } else {  // U_FS
      type = "filesystem";
    }

    // NOTE: if updating FS this would be the place to unmount FS using FS.end()
    Serial.println("Start updating " + type);
  });
  ArduinoOTA.onEnd([]() {
    Serial.println("\nEnd");
  });
  ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) {
    Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
  });
  ArduinoOTA.onError([](ota_error_t error) {
    Serial.printf("Error[%u]: ", error);
    if (error == OTA_AUTH_ERROR) {
      Serial.println("Auth Failed");
    } else if (error == OTA_BEGIN_ERROR) {
      Serial.println("Begin Failed");
    } else if (error == OTA_CONNECT_ERROR) {
      Serial.println("Connect Failed");
    } else if (error == OTA_RECEIVE_ERROR) {
      Serial.println("Receive Failed");
    } else if (error == OTA_END_ERROR) {
      Serial.println("End Failed");
    }
  });
  ArduinoOTA.begin();
  Serial.println("Ready");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}
7

uhrzeit.h

#include <NTPClient.h>

const long utcOffsetInSeconds = 7200;

char daysOfTheWeek[7][12] = { "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" };

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", utcOffsetInSeconds);

void uhrzeitInit() {
  timeClient.begin();
}
8

ich hab deine libs nicht, daher mal kalt

mach dir eine resource die ein JSON ausgibt:

void handleJson() {
  String message;
  message.reserve(1000);
  message = (F("{\"Raum\":")); // Start of JSON and the first object "ss":
  message += TempMesungDS();
  message += (F(",\"Ofenrohr\":"));
  message += thermocouple.readCelsius();
  message += (F(",\"Innenraum\":"));
  message += thermocouple2.readCelsius();
  message += (F("}")); // End of JSON
  server.send(200, "application/json", message);
}

den handler im setup() ergänzen,

  server.on("/json", handleJson);

und dann das ganze Script ca so

  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    xhttp.onreadystatechange = function() {\    
    if (this.readyState == 4) {\
    if (this.status == 200) {\
    if (this.responseText != null) {\
    var jo=JSON.parse(this.responseText);\
    for (var i in jo)\
    {if(document.getElementById(i)) document.getElementById(i).innerHTML=jo[i];}\
    }}}\
    };\
    xhttp.open('GET', 'json', true);\
    xhttp.send();\
  }\
  </script>\

alles ohne Garantie weil eben nicht getestet.
Fang mit dem JSON an - das muss was vernünftiges ausgeben.

wenn du es nicht schaffst kann ich nur weiter helfen wenn du

  • den adaptierten code zeigst,
  • das generierte HTML
  • und das generierte JSON in code tags postest.
  • angibst, für welchen Microcontroller das eigentlich sein soll
9

phänomenal wie oft das im internet vorkommt
https://www.google.com/search?q=200%2C+"text%2Fplane"

das wären gültige Werte:

 text/css    
 text/csv    
 text/html    
 text/javascript   
 text/plain    
 text/xml

Flugzeuge im Bauch?

10

So der Code wurde angepasst, funktioniert leider noch nich jetzt gar keine ausgabe der Sensor Daten auf der Webseite, Microcontroller wäre ein ESP32, angepasster Code
schicke ich mit

#include "wlan.h"
#include "ota.h"
#include "button.h"
#include "uhrzeit.h"
#include "max6675.h"
#include "DS18B20.h"

#include <WebServer.h>

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 20, 4);

int thermoDO = 15;  // SO
int thermoCS = 2;   // CS
int thermoCLK = 0;  // SCK
MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO);

int thermoDO2 = 16;  // SO
int thermoCS2 = 17;  // CS
int thermoCLK2 = 5;  // SCK
MAX6675 thermocouple2(thermoCLK2, thermoCS2, thermoDO2);

unsigned long tempzeit = 0;
int intervalltemp = 3000;


WebServer server(80);

//-----------------------------------------------
int buttonState = 0;
unsigned long aktuelleZeit = 0;
int intervall = 500;
unsigned long aktuelleZeit2 = 0;
int intervall2 = 7000;
int mode = 0;
int lcdStufe;
//-----------------------------------------------
int aktuelleUhrzeit = 0;
int intervallUhrzeit = 1000;

void setup() {
  //Serial.begin(9600);
  wlaninit();
  otainit();
  lcd.init();
  buttonInit();
  uhrzeitInit();
  ds18b20init();
  lcd.backlight();
  lcd.setCursor(0, 0);
  lcd.print("Press Button");

  server.on("/", indexHTML);
  server.on("/json", handleJson);
 // server.on("/TempWeb", TempRaum);  // TempOfenrohr TempRaum
 // server.on("/TempWeb2", TempOfenrohr);
  //server.on("/TempWeb3", TempInnenraum);
  //server.on("/", handle_root);
  server.begin();
}


void loop() {
  //ensureWIFIConnection();
  ArduinoOTA.handle();
  timeClient.update();
  server.handleClient();
  schalten();
  lcdSchalten(lcdStufe);
}
// ----------------------------------------------------------------------------------
void lcdSchalten(int schalt) {
  //static int altPower = -1;

  // if (altPower == power) return;
  //  altPower = power;
  switch (schalt) {
    case 0:
      // lcd.setCursor(0, 0);
      // lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        //  lcd.print(timeClient.getFormattedTime());
        lcd.print("Verbunden mit");
        // lcd.print("Fuehler 1");
        //lcd.setCursor(0, 1);
        // lcd.print(TempMesungDS2());
        lcd.setCursor(0, 1);
        lcd.print(String(WiFi.SSID()));
      } else {
        lcd.setCursor(0, 0);
        lcd.print("Nicht Verbunden");
        lcd.setCursor(0, 1);
        lcd.print("Mit Wlan");
      }
      //lcd.print("Fuehler 2");
      break;
    case 1:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(0, 1);
        lcd.print(WiFi.localIP().toString());
      } else {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        lcd.setCursor(0, 1);
        lcd.print("-----------");
      }
      //lcd.print("Luft     ");
      break;
    case 2:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
    case 3:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (millis() - tempzeit > intervalltemp) {
        lcd.setCursor(12, 0);
        lcd.print(thermocouple.readCelsius());
        lcd.setCursor(18, 0);
        printX("&0& ");  //----------------------------------------------------
        tempzeit = millis();
        lcd.setCursor(0, 0);
        lcd.print("Ofenrohr");
        lcd.setCursor(12, 1);
        lcd.print(thermocouple2.readCelsius());
        lcd.setCursor(18, 1);

        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 1);
        lcd.print("Innenraum");
        lcd.setCursor(12, 2);
        lcd.print(TempMesungDS());
        lcd.setCursor(18, 2);
        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 2);
        lcd.print("Raum");
      }
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
  }
}

//------------------------------------------------------------------------------------


void mode0() {
  mode = 0;
  Serial.println("Mode0");
  lcd.clear();
  lcdStufe = 0;
  lcdSchalten(lcdStufe);
}

void mode1() {
  mode = 1;
  Serial.println("Mode1");
  lcd.clear();
  lcdStufe = 1;
  lcdSchalten(lcdStufe);
}

void mode2() {
  mode = 2;
  Serial.println("Mode2");
  lcd.clear();
  lcdStufe = 2;
  lcdSchalten(lcdStufe);
}

void mode3() {
  mode = 3;
  Serial.println("Mode3");
  lcd.clear();
  lcdStufe = 3;
  lcdSchalten(lcdStufe);
}

void schalten() {
  // read the state of the pushbutton value:
  buttonState = button();

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // check mode
    if (millis() - aktuelleZeit > intervall) {
      if (mode == 0) {
        mode2();
      } else if (mode == 1) {
        mode2();
      } else if (mode == 2) {
        mode3();
      } else if (mode == 3) {
        mode0();
      }


      aktuelleZeit = millis();
    }
  }
  if (millis() - aktuelleZeit2 > intervall2) {
    if (mode == 0) {
      mode1();
    } else if (mode == 1) {
      mode0();
    }
    aktuelleZeit2 = millis();
  }
}
//---------------------------------------------------------------------------------

void uhrzeit() {
  if (millis() - aktuelleUhrzeit > intervallUhrzeit) {
    Serial.println(timeClient.getFormattedTime());
    aktuelleUhrzeit = millis();
  }
}
//--------------------------------------------------------------------------------

void printX(const char a[]) {
  int i = 0;
  while (true) {
    char ch = a[i++];
    if (ch == 0) return;
    if (ch == '&') {
      ch = a[i++];
      switch (ch) {
        case 'a':
          lcd.write(0xE1);
          break;
        case 'o':
          lcd.write(0xEF);
          break;
        case 'u':
          lcd.write(0xF5);
          break;
        case '0':
          lcd.write(0xDF);
          break;
        default:
          if (ch < 128) lcd.write(ch);
      }
    } else if (ch < 128) {
      lcd.write(ch);
    }
  }
}

//--------------------------------------------------------------------------------




void indexHTML() {
  server.send(200, "text/html",
              "<!DOCTYPE html>\
  <html>\
  <head>\
  <title>Temperaturanzeige</title>\
  <meta http-equiv='content-type' content='text/html'; charset='utf-8'>\
  <style>\
  body { background-color: #585858; font-size: 50px; font-family: Arial, Helvetica, Sans-Serif; color: #F2F2F2; margin-left: 40px; }\
  h1 { color: #2ECCFA; margin-top: 50px; margin-bottom: 0px; }\
  h2 { font-size: 20px; margin-top: 0px; margin-bottom: 50px; }\
  #tempInnenraum { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  #tempOfenrohr { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  </style>\
  </head>\
  <body>\
  <h1>Temperaturanzeige</h1>\
  <h2>(Ofen)</h2>\
  <table><tr><td>Aktuelle InnenraumTemp:&nbsp;</td>\
  <td id='tempInnenraum'><span id='Innenraum'>-</span>°C</td></tr></table>\
  <table><tr><td>Aktuelle OfenrohrTemp    :&nbsp;</td>\
  <td id='tempOfenrohr'><span id='Ofenrohr'>-</span>°C</td></tr></table>\
  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    if (this.readyState == 4) {\
    if (this.status == 200) {\
    if (this.responseText != null) {\
    var jo=JSON.parse(this.responseText);\
    for (var i in jo)\
    {if(document.getElementById(i)) document.getElementById(i).innerHTML=jo[i];}\
    }}}\
    };\
    xhttp.open('GET', 'json', true);\
    xhttp.send();\
  }\
  </script>\
  </body>\
  </html>\
  ");
}

void TempRaum() {
  String Raum = String(TempMesungDS());
  server.send(200, "text/plane", Raum);
}
void TempOfenrohr() {
  String Ofenrohr = String(thermocouple.readCelsius());
  server.send(200, "text/plane", Ofenrohr);
}
void TempInnenraum() {
  String Innenraum = String(thermocouple2.readCelsius());
  server.send(200, "text/plane", Innenraum);
}
void handleJson() {
  String message;
  message.reserve(1000);
  message = (F("{\"Raum\":")); // Start of JSON and the first object "ss":
  message += String(TempMesungDS());
  message += (F(",\"Ofenrohr\":"));
  message += thermocouple.readCelsius();
  message += (F(",\"Innenraum\":"));
  message += thermocouple2.readCelsius();
  message += (F("}")); // End of JSON
  server.send(200, "application/json", message);
}

// TempMesungDS()               Raum
// thermocouple.readCelsius()   Ofenrohr
// thermocouple2.readCelsius()  Innenraum
11

ok, da fehlt eine Zeile im Script.

xhttp.onreadystatechange = function() {\

habs mal als separate Seite /neu ausprobiert, für mich geht das. Hab halt viele deiner Sachen auskommentieren müssen.

Aber im wesentlichen musst nur die Zeile wieder ergänzen.

Summary 
/*
    https://forum.arduino.cc/t/temp-sensoren-an-webseite-ubergeben/1301804/
*/

#include "wlan.h"
#include "ota.h"
//#include "button.h"
#include "uhrzeit.h"
//#include "max6675.h"
//#include "DS18B20.h"

#include <WebServer.h>

#include <LiquidCrystal_I2C.h>

LiquidCrystal_I2C lcd(0x27, 20, 4);

int thermoDO = 15;  // SO
int thermoCS = 2;   // CS
int thermoCLK = 0;  // SCK
//MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO);

int thermoDO2 = 16;  // SO
int thermoCS2 = 17;  // CS
int thermoCLK2 = 5;  // SCK
//MAX6675 thermocouple2(thermoCLK2, thermoCS2, thermoDO2);

unsigned long tempzeit = 0;
int intervalltemp = 3000;


WebServer server(80);

//-----------------------------------------------
int buttonState = 0;
unsigned long aktuelleZeit = 0;
int intervall = 500;
unsigned long aktuelleZeit2 = 0;
int intervall2 = 7000;
int mode = 0;
int lcdStufe;
//-----------------------------------------------
int aktuelleUhrzeit = 0;
int intervallUhrzeit = 1000;

void setup() {
  Serial.begin(115200);
  wlaninit();
  otainit();
  lcd.init();
  //buttonInit();
  uhrzeitInit();
  //ds18b20init();
  lcd.backlight();
  lcd.setCursor(0, 0);
  lcd.print("Press Button");

  server.on("/", indexHTML);        // alt
  server.on("/neu", indexHTMLneu);  // neu
  server.on("/json", handleJson);
  server.on("/TempWeb", TempRaum);  // TempOfenrohr TempRaum
  server.on("/TempWeb2", TempOfenrohr);
  server.on("/TempWeb3", TempInnenraum);
  //server.on("/", handle_root);
  server.begin();
}


void loop() {
  //ensureWIFIConnection();
  ArduinoOTA.handle();
  timeClient.update();
  server.handleClient();
  schalten();
  lcdSchalten(lcdStufe);
}
// ----------------------------------------------------------------------------------
void lcdSchalten(int schalt) {
  //static int altPower = -1;

  // if (altPower == power) return;
  //  altPower = power;
  switch (schalt) {
    case 0:
      // lcd.setCursor(0, 0);
      // lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        //  lcd.print(timeClient.getFormattedTime());
        lcd.print("Verbunden mit");
        // lcd.print("Fuehler 1");
        //lcd.setCursor(0, 1);
        // lcd.print(TempMesungDS2());
        lcd.setCursor(0, 1);
        lcd.print(String(WiFi.SSID()));
      } else {
        lcd.setCursor(0, 0);
        lcd.print("Nicht Verbunden");
        lcd.setCursor(0, 1);
        lcd.print("Mit Wlan");
      }
      //lcd.print("Fuehler 2");
      break;
    case 1:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(0, 1);
        lcd.print(WiFi.localIP().toString());
      } else {
        lcd.setCursor(0, 0);
        lcd.print("IP Adresse: ");
        lcd.setCursor(0, 1);
        lcd.print("-----------");
      }
      //lcd.print("Luft     ");
      break;
    case 2:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
    case 3:
      // lcd.setCursor(0, 0);
      //  lcd.print(TempMesungDS2());
      if (millis() - tempzeit > intervalltemp) {
        lcd.setCursor(12, 0);
        // lcd.print(thermocouple.readCelsius());
        lcd.setCursor(18, 0);
        printX("&0& ");  //----------------------------------------------------
        tempzeit = millis();
        lcd.setCursor(0, 0);
        lcd.print("Ofenrohr");
        lcd.setCursor(12, 1);
        //   lcd.print(thermocouple2.readCelsius());
        lcd.setCursor(18, 1);

        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 1);
        lcd.print("Innenraum");
        lcd.setCursor(12, 2);
        //        lcd.print(TempMesungDS());
        lcd.setCursor(18, 2);
        printX("&0& ");  //----------------------------------------------------
        lcd.setCursor(0, 2);
        lcd.print("Raum");
      }
      if (WiFi.status() == WL_CONNECTED) {
        lcd.setCursor(0, 3);
        lcd.print(timeClient.getFormattedTime());
        // lcd.setCursor(0, 1);
        //  lcd.print(FeuchtMesungDHT11());
        lcd.setCursor(10, 3);
        lcd.print(daysOfTheWeek[timeClient.getDay()]);
      } else {
        lcd.setCursor(0, 3);
        lcd.print("Uhr");
        lcd.setCursor(4, 3);
        lcd.print("Ist Offline");
      }
      break;
  }
}

//------------------------------------------------------------------------------------


void mode0() {
  mode = 0;
  Serial.println("Mode0");
  lcd.clear();
  lcdStufe = 0;
  lcdSchalten(lcdStufe);
}

void mode1() {
  mode = 1;
  Serial.println("Mode1");
  lcd.clear();
  lcdStufe = 1;
  lcdSchalten(lcdStufe);
}

void mode2() {
  mode = 2;
  Serial.println("Mode2");
  lcd.clear();
  lcdStufe = 2;
  lcdSchalten(lcdStufe);
}

void mode3() {
  mode = 3;
  Serial.println("Mode3");
  lcd.clear();
  lcdStufe = 3;
  lcdSchalten(lcdStufe);
}

void schalten() {
  // read the state of the pushbutton value:
  //buttonState = button();

  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // check mode
    if (millis() - aktuelleZeit > intervall) {
      if (mode == 0) {
        mode2();
      } else if (mode == 1) {
        mode2();
      } else if (mode == 2) {
        mode3();
      } else if (mode == 3) {
        mode0();
      }


      aktuelleZeit = millis();
    }
  }
  if (millis() - aktuelleZeit2 > intervall2) {
    if (mode == 0) {
      mode1();
    } else if (mode == 1) {
      mode0();
    }
    aktuelleZeit2 = millis();
  }
}
//---------------------------------------------------------------------------------

void uhrzeit() {
  if (millis() - aktuelleUhrzeit > intervallUhrzeit) {
    Serial.println(timeClient.getFormattedTime());
    aktuelleUhrzeit = millis();
  }
}
//--------------------------------------------------------------------------------

void printX(const char a[]) {
  int i = 0;
  while (true) {
    char ch = a[i++];
    if (ch == 0) return;
    if (ch == '&') {
      ch = a[i++];
      switch (ch) {
        case 'a':
          lcd.write(0xE1);
          break;
        case 'o':
          lcd.write(0xEF);
          break;
        case 'u':
          lcd.write(0xF5);
          break;
        case '0':
          lcd.write(0xDF);
          break;
        default:
          if (ch < 128) lcd.write(ch);
      }
    } else if (ch < 128) {
      lcd.write(ch);
    }
  }
}

//--------------------------------------------------------------------------------

//alt
void indexHTML() {
  server.send(200, "text/html",
              "<!DOCTYPE html>\
  <html>\
  <head>\
  <title>Temperaturanzeige</title>\
  <meta http-equiv='content-type' content='text/html'; charset='utf-8'>\
  <style>\
  body { background-color: #585858; font-size: 50px; font-family: Arial, Helvetica, Sans-Serif; color: #F2F2F2; margin-left: 40px; }\
  h1 { color: #2ECCFA; margin-top: 50px; margin-bottom: 0px; }\
  h2 { font-size: 20px; margin-top: 0px; margin-bottom: 50px; }\
  #tempInnenraum { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  #tempOfenrohr { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  </style>\
  </head>\
  <body>\
  <h1>Temperaturanzeige</h1>\
  <h2>(Ofen)</h2>\
  <table><tr><td>Aktuelle InnenraumTemp:&nbsp;</td>\
  <td id='tempInnenraum'><span id='Innenraum'>-</span>°C</td></tr></table>\
  <table><tr><td>Aktuelle OfenrohrTemp    :&nbsp;</td>\
  <td id='tempOfenrohr'><span id='Ofenrohr'>-</span>°C</td></tr></table>\
  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    xhttp.onreadystatechange = function() {\
      if (this.readyState == 4 && this.status == 200) {\
        document.getElementById('Innenraum').innerHTML = this.responseText;\
      }\
    };\
    xhttp.open('GET', 'TempWeb3', true);\
    xhttp.send();\
  }\
  </script>\
  </body>\
  </html>\
  ");
}


void indexHTMLneu() {
  server.send(200, "text/html",
              "<!DOCTYPE html>\
  <html>\
  <head>\
  <title>Temperaturanzeige</title>\
  <meta http-equiv='content-type' content='text/html'; charset='utf-8'>\
  <style>\
  body { background-color: #585858; font-size: 50px; font-family: Arial, Helvetica, Sans-Serif; color: #F2F2F2; margin-left: 40px; }\
  h1 { color: #2ECCFA; margin-top: 50px; margin-bottom: 0px; }\
  h2 { font-size: 20px; margin-top: 0px; margin-bottom: 50px; }\
  #tempInnenraum { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  #tempOfenrohr { width: 230px; height: 80px; border: 5px solid #F2F2F2; text-align:center; padding: 1px; color: #9AFE2E; background-color: #000000; font-size: 60px; }\
  </style>\
  </head>\
  <body>\
  <h1>Temperaturanzeige</h1>\
  <h2>(Ofen)</h2>\
  <table><tr><td>Aktuelle InnenraumTemp:&nbsp;</td>\
  <td id='tempInnenraum'><span id='Innenraum'>-</span>°C</td></tr></table>\
  <table><tr><td>Aktuelle OfenrohrTemp    :&nbsp;</td>\
  <td id='tempOfenrohr'><span id='Ofenrohr'>-</span>°C</td></tr></table>\
  <script>\
  setInterval(function() {\
    getData();\
  }, 1000);\
  \n\
  function getData() {\
    var xhttp = new XMLHttpRequest();\
    xhttp.onreadystatechange = function() {\
    if (this.readyState == 4) {\
    if (this.status == 200) {\
    if (this.responseText != null) {\
    var jo=JSON.parse(this.responseText);\
    for (var i in jo)\
    {if(document.getElementById(i)) document.getElementById(i).innerHTML=jo[i];}\
    }}}\
    };\
    xhttp.open('GET', 'json', true);\
    xhttp.send();\
  }\
  </script>\
  </body>\
  </html>\
  ");
}

void TempRaum() {
  //String Raum = String(TempMesungDS());
  String Raum = String(millis()); // dummy
  server.send(200, "text/plain", Raum); // !!!
}
void TempOfenrohr() {
  //String Ofenrohr = String(thermocouple.readCelsius());
  String Raum = String(millis()); // dummy
  server.send(200, "text/plain", Raum); // !!!
}
void TempInnenraum() {
  //String Innenraum = String(thermocouple2.readCelsius());
  String Raum = String(millis()); // dummy
  server.send(200, "text/plain", Raum); // !!!
}
void handleJson() {
  String message;
  message.reserve(1000);
  message = (F("{\"Raum\":")); // Start of JSON and the first object "ss":
  //message += String(TempMesungDS());
  message += String(millis()/1000); // dummy
  message += (F(",\"Ofenrohr\":"));
  //message += thermocouple.readCelsius();
  message += String(millis()/1000 * 2); // dummy
  message += (F(",\"Innenraum\":"));
  //message += thermocouple2.readCelsius();
  message += String(millis() / 1000 * 3); // dummy
  message += (F("}")); // End of JSON
  server.send(200, "application/json", message);
}

// TempMesungDS()               Raum
// thermocouple.readCelsius()   Ofenrohr
// thermocouple2.readCelsius()  Innenraum

Falls es nicht klar ist, warum ich das mit einem JSON mache:

Du kannst im JSON weitere Werte aufnehmen.
Das JavaScript geht das JSON Wertweise durch.
Gibt es eine id im Dokument die einer JSON Variable entspricht, wird der Wert ausgetauscht.
Gibt es die id nicht im Dokument - (bei dir aktuell "Raum") - dann wird der Wert ignoriert.

Und dann so generelle Sachen:

  • Statt AJAX verwendet man heute eigentlich das FetchAPI
  • Zwei Tabelle mit je einer Zeile gleich untereinander deuten darauf hin dass man evtl. nur eine Tabelle (oder besser gar keine) verwenden soll.
  • wirf mal deinen HTML code in Ready to check - Nu Html Checker und mach ihn valide
1 Like
12

Mega Vielen Dank Funktioniert wie gewünscht :grinning:

13

.
Du kannst dich bei Helfern mit einem Like/Herz bedanken - das geht für jeden hilfreichen Beitrag.

Einen Beitrag kannst du als Lösung markieren - das geht nur einmal pro Thread.

14

Erledigt

15

noch etwas Werbung in eigener Sache weil ich deine
printX
sehe.

Da gibts von mir eigentlich eine Library, die die meisten verfügbaren Sonderzeichen die auf dem LCD verfügbar sind einfach verwendbar macht.

https://werner.rothschopf.net/202009_arduino_liquid_crystal_intro.htm

lcd.print("ä ö ü im Lauftext und °÷·ñ£¥~√∝∞←→\\");
1 Like
16

Mega Danke

17

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