Witam, bawię się trochę w html'u i chciałem wykonać (przy pomocy wujka Google, użyłem gotowego kodu i troche zmodyfikowałem) lokalną stronę internetową, na której były by przyciski, które przekazywały by informację o wciśnięciu do ESP32, no i do tego momentu mi się udało. Bardzo mi zależy na tym, aby to były przyciski (pushbutton), a nie przełączniki. Bardzo bym prosił o pomoc, nigdzie nie mogę znaleźć sposobu, aby on tak działał (może też nie do końca rozumiem te rozwiązania). Z góry dziękuję za pomoc.
Obecny kod strony:
<!DOCTYPE HTML><html>
<head>
<title>Obsluga zdalna</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.button {position: relative; display: inline-block; width: 120px; height: 68px}
.button input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 104px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px;background-color: #b80}
input:checked+.slider {}
input:checked+.slider:before {background-color: #d20}
</style>
</head>
<body>
<h2>Obsluga zdalna</h2>
<h4>Power</h4><label class="button"><input type="checkbox" onchange="toggleCheckbox(this)" id="2" ><span class="slider"></span></label><h4>Volume up</h4><label class="button"><input type="checkbox" onchange="toggleCheckbox(this)" id="4" ><span class="slider"></span></label><h4>Volume down</h4><label class="button"><input type="checkbox" onchange="toggleCheckbox(this)" id="33" ><span class="slider"></span></label>
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true);
}
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
}
</script>
</body>
</html>
Kod ESP(nie zaktualizowany, ponieważ sama strona jeszcze nie działa)
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "HUAWEI_B535_D6C4DD";
const char* password = "haslo";
const char* Pin = "output";
const char* Status = "state";
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>Obsluga zdalna</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.button {position: relative; display: inline-block; width: 120px; height: 68px}
.button input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked+.slider {background-color: #b30000}
input:checked+.slider:before
</style>
</head>
<body>
<h2>Obsluga zdalna</h2>
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons += "<h4>Power</h4><label class=\"button\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" " + outputState(2) + "><span class=\"slider\"></span></label>";
buttons += "<h4>Volume up</h4><label class=\"button\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"4\" " + outputState(4) + "><span class=\"slider\"></span></label>";
buttons += "<h4>Volume down</h4><label class=\"button\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"33\" " + outputState(33) + "><span class=\"slider\"></span></label>";
return buttons;
}
return String();
}
String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(2, OUTPUT);
digitalWrite(2, LOW);
pinMode(4, OUTPUT);
digitalWrite(4, LOW);
pinMode(33, OUTPUT);
digitalWrite(33, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/update?output=<Czynnosc>&state=<Stan>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String Czynnosc;
String Stan;
// GET input1 value on <ESP_IP>/update?output=<Czynnosc>&state=<Stan>
if (request->hasParam(Pin) && request->hasParam(Status)) {
Czynnosc = request->getParam(Pin)->value();
Stan = request->getParam(Status)->value();
digitalWrite(Czynnosc.toInt(), Stan.toInt());
}
else {
Czynnosc = "No message sent";
Stan = "No message sent";
}
Serial.print("GPIO: ");
Serial.print(Czynnosc);
Serial.print(" - Set to: ");
Serial.println(Stan);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
