ESP32 Web Server ile Slider LED Parlaklığı Değiştirme(PWM)
Bu yazımızda , LED parlaklığını kontrol etmek için sliderlı bir ESP32 web sunucusunun nasıl oluşturulacağını göstereceğiz. Web sunucusu projelerinize nasıl slider ekleyeceğinizi, değerini okuyarak ESP32'nin kullanabileceği bir değişkene kaydetmeyi öğreneceksiniz. Bu değeri, bir PWM sinyalinin görev döngüsünü kontrol etmek ve bir LED’in parlaklığını değiştirmek için kullanacağız. Bir LED yerine örneğin bir servo motoru kontrol edebilirsiniz.
ESP32, sliderlı bir web sayfası görüntüleyen bir web sunucusu barındırır;
Slideri hareket ettirdiğinizde, yeni slider değeriyle ESP32'ye bir HTTP isteğinde bulunursunuz;
HTTP isteği aşağıdaki biçimde gelir: GET / slider? Değer = SLIDERVALUE, burada SLIDERVALUE, 0 ile 255 arasında bir sayıdır. Sliderinizi başka bir aralığı içerecek şekilde değiştirebilirsiniz;
HTTP isteğinden, ESP32 kaydırıcının geçerli değerini alır;
ESP32, PWM görev döngüsünü kaydırıcı değerine göre ayarlar;
Bu, bir LED’in (bu örnekte yapacağımız gibi), bir servo motorun, bir eşik değerinin ayarlanması veya diğer uygulamaların parlaklığını kontrol etmek için yararlı olabilir.
Servo motor için slider değerlerini 0–180 arasında olacak şekilde değiştirmeniz gerekecektir.
ESP32 kartlarını Arduino IDE kullanarak programlayacağız, bu nedenle bu uygulamaya geçmeden önce Arduino IDE’nizde ESP32 kartının kurulu olduğundan emin olun.
Daha önceki yazılarımızda bunu anlatmıştık.
Burada sadece kart ESP32 olacağı için aşağıdaki link tercihler kısmına yapıştırmamız gerekir.
https://dl.espressif.com/dl/package_esp32_index.json
Aşağıdaki kütüphaneleri kullanarak web sunucusunu oluşturacağız:
Aşağıdaki kod, bir web sunucusundaki slideri kullanarak ESP32 üzerinde yerleşik LED’inin parlaklığını kontrol eder. Başka bir deyişle, PWM görev döngüsünü bir slider ile değiştirebilirsiniz. Bu, örnek LED parlaklığını kontrol etmek veya bir servo motoru kontrol etmek için yararlı olabilir.
Kodu Arduino IDE’nize kopyalayın. Ağ kimlik bilgilerinizi girin ve kod düzgün çalışacaktır.
/*********
PWM ile LED parlaklığını ayarlama
ESP32-WROOM-32 kullanacağız.
Makers Dükkan
*********/
// Kütüphaneleri yüklüyoruz
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Kendi SSID ve PASSWORD yazın
const char* ssid = “Buraya_kendi_ağ_adınızı_girin_SSID”;
const char* password = “Wifi_PASSWORD_girin”;
const int output = 2;
String sliderValue = “0”;
// PWM frekans ayarları
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;
const char* PARAM_INPUT = “value”;
// Port 80 açılıyor
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: 400px; 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; }
</style>
</head>
<body>
<h3>Makers Dukkan</h3>
<h2>ESP32-WROOM-32</h2>
<h3>PWM ile LED Kontrol</h3>
<p><span id=”textSliderValue”>%SLIDERVALUE%</span></p>
<p><input type=”range” onchange=”updateSliderPWM(this)” id=”pwmSlider” min=”0" max=”255" value=”%SLIDERVALUE%” step=”1" class=”slider”></p>
<script>
// min=”0" max=”255" bu değerleri servo için 0 ile 180 yapmalıyız.
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();
}
</script>
</body>
</html>
)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();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// configure LED PWM functionalitites
ledcSetup(ledChannel, freq, resolution);
// attach the channel to the GPIO to be controlled
ledcAttachPin(output, ledChannel);
ledcWrite(ledChannel, sliderValue.toInt());
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(“Connecting to WiFi..”);
}
// ESP Local IP Address yazdırma kısmı
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 inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
ledcWrite(ledChannel, sliderValue.toInt());
}
else {
inputMessage = “No message sent”;
}
Serial.println(inputMessage);
request->send(200, “text/plain”, “OK”);
});
// Start server
server.begin();
}
void loop() {
}
