- يوضح هذا المشروع كيفية إنشاء خادم ويب ESP8266 NodeMCU باستخدام شريط تمرير للتحكم في سطوع LED. ستتعلم كيفية إضافة شريط تمرير إلى مشاريع خادم الويب ، والحصول على قيمته وحفظه في متغير يمكن لـ ESP8266 استخدامه. سنستخدم هذه القيمة للتحكم في دورة عمل إشارة PWM وتغيير سطوع مؤشر LED. بدلاً من LED ، يمكنك التحكم في محرك سيرفو ، على سبيل المثال
#ESP8266 #LED #PWM #NodeMCU يستضيف ESP8266 خادم ويب يعرض صفحة ويب باستخدام شريط تمرير ؛ عند تحريك شريط التمرير ، تقوم بإجراء طلب HTTP إلى ESP8266 بقيمة شريط التمرير الجديدة ؛ يأتي طلب HTTP بالتنسيق التالي: GET / slider؟ value = SLIDERVALUE ، حيث يكون SLIDERVALUE رقمًا بين 0 و 1023. يمكنك تعديل شريط التمرير لتضمين أي نطاق آخر ؛ من طلب HTTP ، يحصل ESP8266 على القيمة الحالية لشريط التمرير ؛ يضبط ESP8266 دورة عمل PWM وفقًا لقيمة شريط التمرير ؛ يمكن أن يكون هذا مفيدًا للتحكم في سطوع LED (كما سنفعل في هذا المثال) ، أو محرك سيرفو ، أو إعداد قيمة عتبة أو تطبيقات أخرى- المكونات الرئيسية :
- ESP8266 NODEMCU
- MINI BREADBOARD
- JUMPER WIRES
- SMARTPHONE
- مخطط الرسم البياني :
- تحميل كود أردوينو :
/ ESP8266 Web Server with Slider Control LED Brightness (PWM)
// By : DIY Channel
// My YouTube Channel :https://www.youtube.com/c/DIYChannel2019
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "Smart";
const char* password = "00001111";
const int output = 2; //pin D4
String sliderValue = "0";
const char* PARAM_INPUT = "value";
// 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: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FF5733;
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 style="background-color:#C0C0C0;">
<h2>ESP 8266 Web Server By : DIY Channel</h2>
<p><span id="textSliderValue">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
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);
analogWrite(output, sliderValue.toInt());
// 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 <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;
analogWrite(output, sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
------------------------------------------------------------------------------------------
esp8266,esp 8266,#esp8266,esp8266 ota,esp8266 led,esp8266-01,esp8266-12,esp8266-e12,esp8266 wifi,esp8266 rele,esp8266 mdns,esp8266 relay,esp8266 dht11,esp8266 server,esp8266 led rgb,esp8266 rgb led,nodemcu esp8266,esp8266 nodemcu,esp8266 display,esp8266 adapter,esp8266 arduino,curso de esp8266,ws2812b esp8266,esp8266 tutorial,esp8266 led strip,tutorial esp8266,esp8266 web server,esp8285 vs esp8266,esp8266 fita de led,nodemcu v3 esp8266,arduino and esp8266,esp8266 rgb adapter
No comments:
Post a Comment