piair/je-menvol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added wifi slider

Browse Source
This commit is contained in:
Pierre Tellier 2025-04-17 09:31:19 +02:00
parent 31011a7ba2
commit 42a1d3a7a5
1 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
wifi/wifi.ino
View File

@ -13,8 +13,8 @@
#include <ESPAsyncWebServer.h> #include <ESPAsyncWebServer.h>
// Replace with your network credentials // Replace with your network credentials
const char* ssid = "ESP32-ping-pong"; const char* ssid = "ESP_ping";
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; const char* password = "pong";
const char* PARAM_INPUT_1 = "output"; const char* PARAM_INPUT_1 = "output";
const char* PARAM_INPUT_2 = "state"; const char* PARAM_INPUT_2 = "state";
@ -35,7 +35,7 @@ const char index_html[] PROGMEM = R"rawliteral(
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;} body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.switch {position: relative; display: inline-block; width: 120px; height: 68px} .switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none} .switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px} .slider {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} .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 {background-color: #b30000}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)} input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
@ -44,12 +44,15 @@ const char index_html[] PROGMEM = R"rawliteral(
<body> <body>
<h2>ESP Web Server</h2> <h2>ESP Web Server</h2>
%BUTTONPLACEHOLDER% %BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) { <script>
function sendSliderValue(element) {
var slider1 = document.getElementById("slider1");
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); } xhr.open("GET", "/update?output="+slider1.id+"&state=" + slider1.value, true);
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send(); xhr.send();
} }
</script> </script>
</body> </body>
</html> </html>
@ -60,34 +63,23 @@ String processor(const String& var){
//Serial.println(var); //Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){ if(var == "BUTTONPLACEHOLDER"){
String buttons = ""; String buttons = "";
buttons += "<h4>Output - GPIO 2</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" " + outputState(2) + "><span class=\"slider\"></span></label>"; buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider1\" onchange=\"sendSliderValue(this.value)\"\"></div>";
buttons += "<h4>Output - GPIO 4</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"4\" " + outputState(4) + "><span class=\"slider\"></span></label>"; buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider2\" onchange=\"sendSliderValue(this.value)\"\"></div>";
buttons += "<h4>Output - GPIO 33</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"33\" " + outputState(33) + "><span class=\"slider\"></span></label>"; buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider3\" onchange=\"sendSliderValue(this.value)\"\"></div>";
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider4\" onchange=\"sendSliderValue(this.value)\"\"></div>";
buttons += "<div class=\"slidecontainer\"><input type=\"range\" min=\"20\" max=\"450\" value=\"250\" class=\"slider\" id=\"slider5\" onchange=\"sendSliderValue(this.value)\"\"></div>";
return buttons; return buttons;
} }
return String(); return String();
} }
String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}
void setup(){ void setup(){
// Serial port for debugging purposes // Serial port for debugging purposes
Serial.begin(115200); Serial.begin(115200);
pinMode(2, OUTPUT);
digitalWrite(2, LOW);
pinMode(4, OUTPUT);
digitalWrite(4, LOW);
pinMode(33, OUTPUT);
digitalWrite(33, LOW);
Serial.print("Setting AP (Access Point)…"); Serial.print("Setting AP (Access Point)…");
WiFi.softAP(ssid); WiFi.softAP(ssid);
@ -109,7 +101,7 @@ void setup(){
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) { if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage1 = request->getParam(PARAM_INPUT_1)->value(); inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
inputMessage2 = request->getParam(PARAM_INPUT_2)->value(); inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
digitalWrite(inputMessage1.toInt(), inputMessage2.toInt()); int requestedValue = inputMessage2.toInt();
} }
else { else {
inputMessage1 = "No message sent"; inputMessage1 = "No message sent";