Esp32 Input Integer als Arduino Tab.
Die Initialisierungsliste der "map" kann angepasst bzw. beliebig erweitert werden.
Die Anzahl der Schlüssel-Wert-Paare wird nur durch den verfügbaren Speicher begrenzt.
// ****************************************************************
// Sketch Esp32 Input Modular(Tab)
// created: Jens Fleischer, 2020-12-13
// last mod: Jens Fleischer, 2020-12-13
// ****************************************************************
// Hardware: Esp32
// Software: Esp32 Arduino Core 1.0.0 - 2.0.7
// Getestet auf: ESP32 NodeMCU-32s
/******************************************************************
Copyright (c) 2020 Jens Fleischer. All rights reserved.
This file is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This file is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
*******************************************************************/
// Diese Version von Sollwert kann als Tab eingebunden werden.
// #include <WebServer.h> muss im Haupttab aufgerufen werden.
// Die Funktionalität des ESP32 Webservers ist erforderlich.
// Die Funktion "setupModify();" muss im Setup aufgerufen werden.
/**************************************************************************************/
#include <map>
// Die Initialisierungsliste der "map" kann angepasst bzw. beliebig erweitert werden.
std::map<String, int32_t>input = {{"ID", 661212}, {"Intervall", 1000}, {"Ton_Frequenz", 500}};
void setupModify() {
server.on("/modified", HTTP_POST, []() {
if (server.args()) for (auto i = 0; i < server.args(); i++) input.find(server.argName(i))->second = atoi(server.arg(i).c_str());
String temp = "{\"";
for (auto& el : input) {
if (temp != "{\"") temp += "\",\"";
temp += el.first;
temp += "\":\"";
temp += el.second;
}
temp += "\"}";
server.send(200, "application/json", temp);
// Zugriff mittels input.at("Name");
Serial.print("\nID: "); Serial.println(input.at("ID"));
Serial.print("Ton_Frequenz: "); Serial.println(input.at("Ton_Frequenz"));
Serial.print("Intervall: "); Serial.println(input.at("Intervall"));
});
}
Die Webseite zum Esp32 Input Tab.
input.html
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style32.css">
<title>ESP32 Input</title>
<style>
form {
display: flex;
flex-flow: column;
align-items: center;
}
label {
padding-top: 1.5em;
}
input {
appearance: textfield;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('button').addEventListener('click', () => {
let fd = new FormData();
document.querySelectorAll('input').forEach(n => {
if (n.checkValidity() && n.value != '') fd.append(n.name, n.value);
});
sendEsp(fd);
});
}, sendEsp());
async function sendEsp(data) {
let resp = await fetch('/modified', {method: 'POST', body: data});
let obj = await resp.json();
let buf = '';
for (var key in obj) {
buf += String.raw`<label>${key}: ${obj[key]}</label><input type="number" name="${key}" min="-2147483648" max="2147483647" title="Es dürfen nur Vorzeichen und Ziffern enthalten sein.">`;
}
document.querySelector('form').innerHTML = buf;
}
</script>
</head>
<body>
<h2>Integer Input</h2>
<form>
</form>
<div>
<button class="button">Senden</button>
</div>
</body>
</html>