Sorry to post again on a very similar subject this time the two buttons are stacked on top of each other, I would like to change their position so that they are horizontal to each other.
Also I would like to remove some of the padding between the lines so to condense the entire page.
Again thanking you in advance for any help you can give me. As you can tell I am still at numpty level.
#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-3CXG";
const char *PWD = "JL4qtNuDHwp4";
// 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: 80px; height: 35px}
.switch input {display: none}
.switch1 {position: relative; display: inline-block; width: 80px; height: 35px}
.switch1 input {display: none}
.slider2 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 8px}
.slider2:before {position: absolute; content: ""; height: 25px; width: 25px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked+.slider2 {background-color: #b30000}
input:checked+.slider2:before {-webkit-transform: translateX(48px); -ms-transform: translateX(48px); transform: translateX(48px)}
.slider3 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 8px}
.slider3:before {position: absolute; content: ""; height: 25px; width: 25px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
input:checked+.slider3 {background-color: #b30000}
input:checked+.slider3:before {-webkit-transform: translateX(48px); -ms-transform: translateX(48px); transform: translateX(48px)}
</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>
%BUTTONPLACEHOLDER%
<script>
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>Fan 1</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"0\" " + outputState(0) + "><span class=\"slider2\"></span></label>";
buttons += "<h4>Fan 2</h4><label class=\"switch1\"><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");
sliderValue11=sliderValue11+20;
sliderValue22=sliderValue22+20;
});
// 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);
}
}
[env:esp32dev]
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
