/********* Rui Santos Complete project details at RandomNerdTutorials.com/esp32-web-server-slider-pwm/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Modified by T.J.Moir Jan 2024 to add a Quad Encoder and OLED Display
Find the IP address first from this program then type it into a browser on another computer connected to the same wi-fi Look at the serial output to find IP address *********/ // Import required libraries #include #include #include //Dimmer Quadrature encoder: change these numbers as required #define outputA 35 #define outputB 32 // For Display #include #include #include #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels // Declaration for SSD1306 display connected using I2C #define OLED_RESET -1 // Reset pin #define SCREEN_ADDRESS 0x3C Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); /* Vcc is 3.3v SCL is pin 22 SDA is pin 21 Also needs ground pin */ int brightness; int enable1Pin = 26; //PWM volatile int counter=0; // for sampling freq int sample_pin=27; // Setting PWM properties const int freq =200; const int pwmChannel = 0; //PWM resolution const int resolution = 8; ///////////////////// // Replace with your network credentials const char* ssid = "xxxxx"; const char* password = "xxxxx"; ///////////////////////////// ///////////// void IRAM_ATTR isr_quadencoder() { // quadrature encoder if(digitalRead(outputA) == digitalRead(outputB)) { //Clockwise counter++; } else { //Counter Clockwise counter--; }
} ///////////////// String sliderValue = "0"; const char* PARAM_INPUT = "value"; int setpoint_web=0; // Create AsyncWebServer object on port 80 AsyncWebServer server(80); const char index_html[] PROGMEM = R"rawliteral(
/*********
Rui Santos
Complete project details at RandomNerdTutorials.com/esp32-web-server-slider-pwm/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Modified by T.J.Moir Jan 2024 to add a Quad Encoder and OLED Display
Find the IP address first from this program then type it into a browser on another computer connected to the same wi-fi
Look at the serial output to find IP address
*********/
// Import required libraries
#include
#include
#include
//Dimmer Quadrature encoder: change these numbers as required
#define outputA 35
#define outputB 32
// For Display
#include
#include
#include
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
// Declaration for SSD1306 display connected using I2C
#define OLED_RESET -1 // Reset pin
#define SCREEN_ADDRESS 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
/*
Vcc is 3.3v
SCL is pin 22
SDA is pin 21
Also needs ground pin
*/
int brightness;
int enable1Pin = 26; //PWM
volatile int counter=0;
// for sampling freq
int sample_pin=27;
// Setting PWM properties
const int freq =200;
const int pwmChannel = 0;
//PWM resolution
const int resolution = 8;
/////////////////////
// Replace with your network credentials
const char* ssid = "xxxxx";
const char* password = "xxxxx";
/////////////////////////////
/////////////
void IRAM_ATTR isr_quadencoder() {
// quadrature encoder
if(digitalRead(outputA) == digitalRead(outputB)) {
//Clockwise
counter++;
} else {
//Counter Clockwise
counter--;
}
}
/////////////////
String sliderValue = "0";
const char* PARAM_INPUT = "value";
int setpoint_web=0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
ESP Web Server
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #AFD65C;
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: 45px; height: 35px; background: #003249; cursor: pointer; }
ESP Toms Server
%SLIDERVALUE%
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
boolean running = false;
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// 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 /slider?value=
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on /slider?value=
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
//ledcWrite(ledChannel, sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
// Get the setpoint from remote computer
setpoint_web=sliderValue.toInt();
//Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
////////////////
// initialize the OLED object
if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;); // Don't proceed, loop forever
}
// Clear the display buffer.
display.clearDisplay();
pinMode(enable1Pin, OUTPUT);//PWM
pinMode (outputA,INPUT);//Encoder input A
pinMode (outputB,INPUT);//Encoder input B
pinMode(sample_pin,OUTPUT);//Sampling freq measure with scope
attachInterrupt(outputA,isr_quadencoder, FALLING);
// configure LED PWM functionalitites
ledcSetup(pwmChannel, freq, resolution);
// attach the channel to the GPIO to be controlled
ledcAttachPin(enable1Pin, pwmChannel);
}
void loop()
{
if(counter>255){counter=255;}
if(counter255){brightness=255;}
if(brightness