Slider und Switch Zustand auf Website in JSON Datei schreiben/lesen

tiluhe

Grünschnabel
Hallo,

als blutiger Neuling möchte ich gerne ein kleines Projekt umsetzen. Zum Verständnis beschreib ich das mal:
Ich habe einen ESP32 Mikrocontroller so programmiert, dass er per Relais die Stromzufuhr zur Kaffeemaschine an- und abschalten kann und dass er auf Knopfdruck das Mahlwerk einer Espressomühle für eine festgelegte Zeitdauer einschaltet. Über WLAN kann ich auf den ESP32 zugreifen und den Zustand des Relais bzw. die Mahlzeit verändern. Im Heimnetz funktioniert das gut, nur leider da der Internetzugang bei uns im Haus nicht über DSL geht habe ich Internet über einen LTE Surfstick in der Fritzbox. Leider ist es Mobilfunkbetreiberseitig nicht möglich über das Internet auf das Heimnetz zuzugreifen (auch nicht mit Dyndns). Deswegen wollte ich nun einen Umweg gehen und habe den ESP32 nicht mehr als Webserver in Betrieb, sondern als HTTP Client. Er fragt jede Minute den Zustand von zwei Variablen (boolean: "machineOn" und int "grindTime") ab, die ich in einer .json-Datei auf einem Webserver gespeichert habe. Das funktioniert.

Was noch fehlt: die dazu passende sehr einfache Seite, die ich dann mit meinem Handy aufrufe und über die ich von überall via Internet die Kaffemaschine einschalten kann, damit sie vorgeheizt ist, wenn ich zuhause ankomme :) Das ganze ist ein Lernprojekt bei dem es mir mehr ums Verstehen und in die Materie eintauchen geht, als dass es mir wirklich unsterblich wichtig ist von überall die Kaffemaschine anschalten zu können... aber jetzt hab ich schonmal angefangen und würde es auch gerne zu ende bringen :)

Das Frontend der Seite hab ich erstellt, nur bin ich damit überfordert den Zustand bzw. Wert des Switches und des Sliders bei Veränderung auszulesen und in die JSON zu schreiben. Ich habe versucht das zu googeln, aber bin damit nicht weitergekommen, weil das irgendwie immer zu anderen Zwecken genutzt wird :)

Ich glaube für jemand, der sich mit HTML und Java auskennt ist das vermutlich ein Klacks, ich bin leider hoffnungslos überfordert!
Vielleicht gibt es auch eine einfachere Möglichkeit als JSON zum Datenaustausch zwischen ESP32 und der Website, auch dafür bin ich ganz offen!



<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coffee</title> <link href="styles/style.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet"> </head> <body> <h1>Cappucino Zentrale</h1> <img src="images/cappucino.jpg" alt="cappucino"> <h2>Stromzufuhr Kaffemaschine:</h2> <!-- Rounded switch --> <label class="switch"> <input type="checkbox" id="machineOnSwitch"> <span class="slider round"></span> </label> <h2>Mahlzeit Kaffemühle:</h2> <div class="slidecontainer"> <input type="range" min="16000" max="18000" value="17000" class="slider" id="grindTimeSlider" oninput="this.nextElementSibling.value = this.value"> <output>16000</output> ms <h1 id="sliderWert"></h1> </div> <script src="scripts/main.js"></script> </body> </html>

ich würde mich sehr über Hilfe freuen!
Danke schonmal und liebe Grüße,
Tim
 
Zuletzt bearbeitet:
Lösung
Versuche dieses Javascript:
Code:
        const machineOnSw = document.getElementById('machineOnSwitch');
        const grindTimeSl = document.getElementById('grindTimeSlider');
        function sendIt() {
            const machineOn = machineOnSw.checked;
            const grindTime = grindTimeSl.value;
            fetch("thread467-arduino-kaffeemaschine.php",
                {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        machineOn: machineOn,
                        grindTime: grindTime
                    })
                })
                .then(function (res) {...
Und Du hast diese Datei start.php sicherlich mit include in die index.html eingebunden? Damit das PHP auch ausgewertet wird, musst Du index.html in index.php umbenennen.
 
ich hab es jetzt in index.php umbenannt.

ist der korrekte Befehl um start.php einzubinden:

include 'start.php';
kommt das in den body in der index.php, oder wo? Sorry, ich hab noch nie mit php gearbeitet :p
 
Ja, so ist die include-Anweisung richtig. Am besten ganz an den Anfang der Datei. Es ist ja PHP-Code und hat mit dem Aufbau des HTML nichts zu tun.
 
Zurück