Schaltzustand auf Webseite ohne refresh darstellen

International Deutsch
16

Mal ein stark gekürztes Beispiel um die Onboard Led des Esp32 zu toggeln.

void handleRoot() {
  if (server.hasArg("")) {
    digitalWrite(2, !digitalRead(2));
  }
  server.send(200, "text/html", "<button onclick=\"fetch('?=')\">LED</button>");
}

Funktioniert, aber Html und Javascript sollten eigentlich nicht mehr vermischt werden.

Drei Button und die Antwort vom Server als Json Array.

window.addEventListener("load", function() {
	document.querySelector("#push").addEventListener("click", function() {detail('flag1');});
	document.querySelector("#led").addEventListener("click", function() {detail('led');});
	document.querySelector("#minmax").addEventListener("click", function() {detail('flag');});
	}); 
function detail(text) {
  fetch('http://hostname.e9nr6jt1h0fxpnem.myfritz.net:80/' + text).then(function (response) {
    return response.json();
  }).then(function (array) {
    if (array[0] != '0') {
      document.querySelector('#minmax').innerHTML = 'Max rücksetzen';
      document.querySelector('#flag').innerHTML = 'Min um ' + array[1];
    } 
    else {
      document.querySelector('#minmax').innerHTML = 'Min rücksetzen';
      document.querySelector('#flag').innerHTML = 'Max um ' + array[1];
    }
    if (array[2] != '0') {
      document.querySelector('#push').innerHTML = 'Push Off';
	  document.querySelector('#push').classList.add('buttonon');
    } 
    else {
      document.querySelector('#push').innerHTML = 'Push On';
	  document.querySelector('#push').classList.remove('buttonon');
    }
    if (array[3] != '0') {
      document.querySelector('#led').innerHTML = 'LED On';
	  document.querySelector('#led').classList.remove('buttonon');
    } 
    else {
      document.querySelector('#led').innerHTML = 'LED Off';
	  document.querySelector('#led').classList.add('buttonon');
    }
    document.querySelector('#mischen').innerHTML = array[4];
  });
}
document.addEventListener('DOMContentLoaded', detail('detail'));

Einmal in der Sekunde die Daten vom BME280 holen und Antwort vom Server als Json Objekt.

function renew() {
    fetch('http://hostname.e9nr6jt1h0fxpnem.myfritz.net:80/schlaf').then(function (response) {
      return response.json();
    }).then(function (obj) {
      document.querySelector('#Bme0').innerHTML = obj['Bme0'];
      document.querySelector('#Bme1').innerHTML = obj['Bme1'];
      document.querySelector('#Bme2').innerHTML = obj['Bme2'];
      document.querySelector('#Bme3').innerHTML = obj['Bme3'];
    });
}
document.addEventListener('DOMContentLoaded', renew);
setInterval(renew, 1000);

Mittels Fetch per 'POST' an Server senden.

function once(arg1) {
  fetch('/admin/once', {
    method: 'POST',
    body: arg1
  }).then(function (resp) {
    return resp.json();
  }).then(function (obj) {
   ........code......
  });
}

@postmaster-ino

Jetzt aber schnell einen ESP gekauft und ausprobieren.

Gruß Fips