Ähnlich wie auf der Seite bistabiler Schalter beim Calliope mini wird ein Button (monostabil) genutzt, um einen runden Bereich abwechselnd in Schwarz oder Grün einzufärben (bistabil).
Im Schript-Teil wird eine Variable led_an auf 0 gesetzt und dann bei jedem Klick auf den Button in den anderen Zustand (0 oder 1) gesetzt. Gleichzeitig wird die Hintergrundfarbe des Bereichens kreis geändert.
Der HTML-Code ersetzt den Code in der bisherigen index.html. Sie wird dann wieder auf den ESP32 geladen und dann kann man nach dem Aufruf der Seite über den Button die LED ein- und ausschalten.
<!DOCTYPE html>
<html>
<head>
<title>LED</title>
<style>
#kreis {
width: 50px;
height: 50px;
border-radius: 50%;
background-color:#000;
}
</style>
</head>
<body>
<h1>LED-Steuerung</h1>
<button onclick="farbe_aendern()">Klick mich!</button>
<div id="kreis">
</div>
<script>
let led_an=0;
const kreis = document.getElementById("kreis");
function farbe_aendern() {
if (led_an==0) {
kreis.style.backgroundColor="#0f0";
led_an=1;
} else {
kreis.style.backgroundColor="#000";
led_an=0;
}
}
</script>
</body>
</html>:
Die Website soll als nächstes an den Webserver melden, wenn der Button gedrückt wurde. Wenn man auf den Button "Klick mich!" klickst, wird eine GET-Anfrage an die Webseite gesendet, also an die Adresse "/", also die Startseite. Dabei wird ein Parameter namens "button" mit dem Wert "pressed" übermittelt. Das bedeutet, dass die Webseite erkennen kann, dass der Button gedrückt wurde, und entsprechend darauf reagieren kann.
<form method="get" action="/">
<button type="submit" name="button" value="pressed" onClick="farbe_aendern()">Klick mich!</button>
</form>