Hi all
I am doing something wrong that I cannot identify, there should be two buttons appearing in the web browser, but they’re not showing.
I have checked and checked the code, but there must be something I am missing.
I would really appreciate any suggestions.
Thank you in advance.
platform = espressif32
board = esp32dev
framework = arduino
upload_speed=921600
monitor_speed = 115200
;upload_protocol = espota
;upload_port=192.168.1.118
lib_deps=
ottowinter/ESPAsyncWebServer-esphome @ ^1.2.7
ottowinter/AsyncTCP-esphome @ ^1.2.1
;sparkfun/SparkFun SHTC3 Humidity and Temperature Sensor Library @ ^1.1.3
arkhipenko/TaskScheduler @ ^3.2.2
ayushsharma82/AsyncElegantOTA @ ^2.2.5
;adafruit/Adafruit SSD1306 @ ^2.4.3
;marian-craciunescu/ESP32Ping @ ^1.7
;mathworks/ThingSpeak @ ^2.0.0
;suculent/ESP32httpUpdate @ ^2.1.145
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
#include <Preferences.h>
// Replace with your network credentials
IPAddress local_IP(192, 168, 1, 210);
IPAddress gateway(192, 168, 1, 254); // Set your network Gateway usually your Router base address
IPAddress subnet(255, 255, 255, 0);
IPAddress dns1(192,168,1,254); // Set your network DNS usually your Router base address
IPAddress dns2(8,8,8,8);
const char *SSID = "BTHub6######";
const char *PWD = "###########";
// Void's
String outputState(int output);
//############################################################################################
const int moter_output1 = 2;
const int moter_output2 = 0;
const int moter_output3 = 4;
const int moter_output4 = 16;
const int enable1 = 15;
const int enable2 = 17;
String sliderValue1 = "0";
String sliderValue2 = "0";
int sliderValue11 = 0;
int sliderValue22 = 0;
// setting PWM properties
const int freq = 16000;
const int pwm1 = 0;
const int pwm2 = 1;
const int resolution = 6;
int dutyCycle = 200;
const char* PARAM_INPUT = "value";
const char* PARAM_INPUT1 = "value";
const char* PARAM_INPUT_1 = "output";
const char* PARAM_INPUT_2 = "state";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
//############################################################################################
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP Web Server</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 450px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
.slider1 { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #7bff29;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider1::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #ffe629; cursor: pointer;}
.slider1::-moz-range-thumb { width: 35px; height: 35px; background: #1fb8ff; cursor: pointer; }
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider2 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
.slider2: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+.slider2 {background-color: #b30000}
input:checked+.slider2:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>Workshop Fan Controller</h2>
<p><span id="textSliderValue">%SLIDERVALUE1%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="64" value="%SLIDERVALUE1%" step="1" class="slider"></p>
<p><span id="textSliderValue1">%SLIDERVALUE2%</span></p>
<p><input type="range" onchange="updateSliderPWM1(this)" id="pwmSlider1" min="0" max="64" value="%SLIDERVALUE2%" step="1" class="slider1"></p>
<script>
%BUTTONPLACEHOLDER%
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/button?output="+element.id+"&state=1", true); }
else { xhr.open("GET", "/button?output="+element.id+"&state=0", true); }
xhr.send();
}
</script>
<script>
function updateSliderPWM(element) {
var sliderValue1 = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue1;
console.log(sliderValue1);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue1, true);
xhr.send();
}
function updateSliderPWM1(element) {
var sliderValue2 = document.getElementById("pwmSlider1").value;
document.getElementById("textSliderValue1").innerHTML = sliderValue2;
console.log(sliderValue2);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider1?value="+sliderValue2, 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 == "SLIDERVALUE1"){
return sliderValue1;
return String();
}
if (var == "SLIDERVALUE2"){
return sliderValue2;
return String();
}
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons += "<h4>Output - GPIO 0</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"0\" " + outputState(0) + "><span class=\"slider2\"></span></label>";
buttons += "<h4>Output - GPIO 4</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"4\" " + outputState(4) + "><span class=\"slider2\"></span></label>";
return buttons;
return String();
}
return String();
}
String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// sets the pins as outputs:
pinMode(enable1,OUTPUT);
pinMode(enable2,OUTPUT);
pinMode(moter_output1,OUTPUT);
pinMode(moter_output2,OUTPUT);
pinMode(moter_output3,OUTPUT);
pinMode(moter_output4,OUTPUT);
// configure LED PWM functionalitites
ledcSetup(pwm1, freq, resolution);
ledcSetup(pwm2, freq, resolution);
// attach the channel to the GPIO to be controlled
ledcAttachPin(enable1, pwm1);
ledcAttachPin(enable2, pwm2);
digitalWrite(moter_output1,LOW);
digitalWrite(moter_output2,HIGH);
digitalWrite(moter_output3,HIGH);
digitalWrite(moter_output4,LOW);
ledcWrite(pwm1, sliderValue1.toInt());
ledcWrite(pwm2, sliderValue2.toInt());
// Connect to Wi-Fi
WiFi.config(local_IP, gateway, subnet, dns1 ,dns2);
WiFi.mode(WIFI_STA);
WiFi.begin(SSID, PWD);
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>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage1;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage1 = request->getParam(PARAM_INPUT)->value();
sliderValue1 = inputMessage1;
ledcWrite(pwm1, sliderValue1.toInt());
sliderValue11=sliderValue1.toInt()+20;
}
else {
inputMessage1 = "No message sent";
}
Serial.print("Value: ");
Serial.println(inputMessage1);
request->send(200, "text/plain", "OK");
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider1", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage2;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT1)) {
inputMessage2 = request->getParam(PARAM_INPUT1)->value();
sliderValue2 = inputMessage2;
ledcWrite(pwm2, sliderValue2.toInt());
sliderValue22=sliderValue2.toInt()+20;
}
else {
inputMessage2 = "No message sent";
}
Serial.print("Value1: ");
Serial.println(inputMessage2);
request->send(200, "text/plain", "OK");
});
// Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
server.on("/button", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage3;
String inputMessage4;
// GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage3 = request->getParam(PARAM_INPUT_1)->value();
inputMessage4 = request->getParam(PARAM_INPUT_2)->value();
digitalWrite(inputMessage3.toInt(), inputMessage4.toInt());
}
else {
inputMessage3 = "No message sent";
inputMessage4 = "No message sent";
}
Serial.print("GPIO: ");
Serial.print(inputMessage3);
Serial.print(" - Set to: ");
Serial.println(inputMessage4);
request->send(200, "text/plain", "OK");
});
// Start server
AsyncElegantOTA.begin(&server); // Start ElegantOTA
server.begin();
}
void loop() {
AsyncElegantOTA.loop();
while (sliderValue1.toInt() != sliderValue11){
sliderValue11--;
ledcWrite(pwm1, sliderValue11);
//Serial.print(sliderValue1);Serial.print( ":" );Serial.print(sliderValue11);
delay(5);
}
while (sliderValue2.toInt() != sliderValue22){
sliderValue22--;
ledcWrite(pwm2, sliderValue22);
//Serial.print(sliderValue2);Serial.print( ":" );Serial.print(sliderValue22);
delay(5);
}
}