کنترل بیسیم تجهیزات

ورود / ثبت نام

کنترل بیسیم تجهیزات

  • 031-37714320
  • 09211229251
  • 09137875491
ورود / ثبت نام
دسته‌ها

جدیترین مقالات

بایگانی‌ها
آخرین دیدگاه‌ها

یک وب سرور ساده ESP32 در Arduino IDE ایجاد کنید

ESP32، جانشین جدید ESP8266، ستاره‌ای در حال ظهور در پروژه‌های مرتبط با اینترنت اشیا یا وای‌فای بوده است. این یک ماژول وای فای کم هزینه است که می تواند برای اجرای یک وب سرور مستقل با کمی کار اضافی برنامه ریزی شود. چقدر باحاله؟

این آموزش شما را در فرآیند ایجاد یک وب سرور ساده ESP32 در Arduino IDE راهنمایی می کند. بنابراین، بیایید شروع کنیم.

وب سرور دقیقا چیست و چگونه کار می کند؟

وب سرور مکانی است که در آن صفحات وب ذخیره، پردازش و به مشتریان وب ارائه می شوند. کلاینت وب فقط یک مرورگر وب است که ما در رایانه ها و تلفن های خود از آن استفاده می کنیم. یک سرویس گیرنده وب و یک وب سرور با استفاده از یک پروتکل خاص به نام پروتکل انتقال ابرمتن (HTTP) با یکدیگر ارتباط برقرار می کنند.

HTTP Web Server Client Illustration 1 1

در این پروتکل، یک کلاینت با ارسال یک درخواست HTTP برای یک صفحه وب خاص، یک مکالمه را آغاز می کند. سپس سرور محتوای آن صفحه وب یا یک پیام خطا را در صورتی که نتواند آن را پیدا کند (مانند خطای معروف 404) برمی گرداند.

حالت های عملیاتی ESP32

یکی از مفیدترین ویژگی های ESP32 این است که نه تنها به یک شبکه وای فای موجود متصل می شود و به عنوان یک وب سرور عمل می کند، بلکه همچنین می تواند شبکه خود را ایجاد کند که به دستگاه های دیگر اجازه می دهد مستقیماً به آن متصل شوند و به صفحات وب دسترسی پیدا کنند. این امکان پذیر است زیرا ESP32 می تواند در سه حالت کار کند: حالت Station (STA)، حالت Soft Access Point (AP) و هر دو به طور همزمان.

حالت ایستگاه (STA)

در حالت Station (STA)، ESP32 به یک شبکه WiFi موجود (شبکه ای که توسط روتر بی سیم شما ایجاد شده است) متصل می شود.

ESP32 Web Server Station STA Mode Demonstration 1 1

در حالت STA، ESP32 یک آدرس IP از روتر بی سیمی که به آن متصل است، دریافت می کند. با این آدرس IP، می‌تواند یک وب سرور راه‌اندازی کند و صفحات وب را به همه دستگاه‌های متصل در شبکه WiFi موجود ارائه دهد.

حالت نقطه دسترسی نرم (AP)

در حالت اکسس پوینت (AP)، ESP32 شبکه WiFi خود را راه اندازی می کند و مانند یک روتر وای فای به عنوان یک هاب عمل می کند. با این حال، برخلاف روتر وای فای، رابطی با شبکه سیمی ندارد. بنابراین، این حالت عملکرد، نقطه دسترسی نرم (Soft-AP) نامیده می شود. همچنین بیش از پنج ایستگاه نمی توانند به طور همزمان به آن متصل شوند.

ESP32 Web Server Soft Access Point AP Mode Demonstration 1 1

در حالت اکسس پوینت (AP)، ESP32 شبکه WiFi خود را راه اندازی می کند و مانند یک روتر وای فای به عنوان یک هاب عمل می کند. با این حال، برخلاف روتر وای فای، رابطی با شبکه سیمی ندارد. بنابراین، این حالت عملکرد، نقطه دسترسی نرم (Soft-AP) نامیده می شود. همچنین بیش از پنج ایستگاه نمی توانند به طور همزمان به آن متصل شوند.

در حالت AP، ESP32 یک شبکه WiFi جدید ایجاد می کند و یک SSID (نام شبکه) و یک آدرس IP به آن اختصاص می دهد. با این آدرس IP می تواند صفحات وب را به تمام دستگاه های متصل ارائه دهد.

سیم کشی LED به ESP32

اکنون که اصول عملکرد یک وب سرور و حالت‌هایی را که ESP32 می‌تواند در آن ایجاد کند، فهمیدیم، زمان آن رسیده است که چند LED را به ESP32 متصل کنیم که می‌خواهیم آن‌ها را از طریق WiFi کنترل کنیم.

با قرار دادن ESP32 روی تخته نان خود شروع کنید و مطمئن شوید که هر طرف تخته در سمت دیگری از تخته نان قرار دارد. سپس، دو LED را با استفاده از یک مقاومت محدود کننده جریان 220Ω به GPIO 4 و 5 دیجیتال متصل کنید.

وقتی کارتان تمام شد، باید چیزی شبیه تصویر زیر داشته باشید.

Simple ESP32 Web Server Wiring Fritzing Connections with LED 1 1

ایده استفاده از وب سرور ESP32 برای کنترل چیزها

بنابراین ممکن است از خود بپرسید: “چگونه می توانم چیزها را از وب سروری که فقط صفحات وب را پردازش و ارائه می کند کنترل کنم؟”.

بسیار ساده است. ما با بازدید از یک URL خاص، چیزها را کنترل می کنیم.

هنگامی که یک URL را در یک مرورگر وب وارد می‌کنید، یک درخواست HTTP (که به عنوان درخواست GET نیز شناخته می‌شود) به سرور وب ارسال می‌کند. مسئولیت رسیدگی به این درخواست بر عهده وب سرور است.

فرض کنید یک URL مانند http://192.168.1.1/ledon را در مرورگر وارد کرده اید. سپس مرورگر یک درخواست HTTP را به ESP32 ارسال می کند. هنگامی که ESP32 این درخواست را دریافت می کند، تشخیص می دهد که کاربر می خواهد LED را روشن کند. در نتیجه، LED را روشن می کند و یک صفحه وب پویا را به مرورگری می فرستد که وضعیت LED را به صورت “روشن” نشان می دهد. خیلی ساده است، درست است؟

مثال 1 – پیکربندی وب سرور ESP32 در حالت نقطه دسترسی (AP)

حالا بریم سراغ چیزهای جالب!

این مثال، همانطور که عنوان نشان می دهد، نحوه پیکربندی وب سرور ESP32 را در حالت نقطه دسترسی (AP) و ارائه صفحات وب به هر مشتری متصل نشان می دهد. برای شروع، ESP32 خود را به رایانه خود متصل کرده و طرح را اجرا کنید. سپس با جزئیات بیشتری به آن خواهیم پرداخت.

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #3498db;}\n";
  ptr +=".button-on:active {background-color: #2980b9;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

دسترسی به وب سرور در حالت AP

پس از آپلود طرح، Serial Monitor را با 115200 baud باز کنید و دکمه RESET را در ESP32 فشار دهید. اگر همه چیز خوب باشد، پیام «سرور HTTP شروع شد» را نشان می دهد.

ESP32 Web Server Access Point Mode Serial Monitor Output Server Started 1 1

اکنون یک تلفن، لپ‌تاپ یا دستگاه دیگری که می‌تواند به شبکه WiFi متصل شود، تهیه کنید و به دنبال شبکه‌ای به نام ESP32 بگردید. با استفاده از رمز عبور 12345678 به شبکه متصل شوید

ESP32 Web Server Access Point Mode Joining Server 1 1

پس از اتصال به شبکه ESP32 AP خود، یک مرورگر را باز کرده و به 192.168.1.1 بروید. ESP32 باید یک صفحه وب را برگرداند که وضعیت فعلی LED ها و دکمه ها را نشان می دهد. در عین حال می‌توانید مانیتور سریال را بررسی کنید تا وضعیت پین‌های GPIO ESP32 را ببینید.

ESP32 Web Server Access Point Mode Serial Monitor Output Webpage Accessed 1 1
ESP32 Web Server Access Point Mode Web Page 1 1

اکنون، در حالی که مراقب URL هستید، روی دکمه کلیک کنید تا LED1 روشن شود. پس از کلیک بر روی دکمه، ESP32 یک درخواست برای URL /led1on دریافت می کند. سپس LED1 را روشن می کند و یک صفحه وب با وضعیت LED به روز شده ارائه می دهد. همچنین وضعیت پین GPIO را روی نمایشگر سریال چاپ می کند.

ESP32 Web Server Access Point Mode Serial Monitor Output LED Control 1 1
ESP32 Web Server Access Point Mode Web Page 1 LED Control 1 1

می توانید دکمه LED2 را تست کنید تا ببینید آیا به طور مشابه کار می کند یا خیر.

بیایید نگاهی دقیق تر به کد بیندازیم تا ببینیم چگونه کار می کند تا بتوانید آن را مطابق با نیاز خود تغییر دهید.

توضیح دقیق کد

طرح با گنجاندن WiFi.hکتابخانه آغاز می شود. این کتابخانه حاوی متدهای مخصوص ESP32 است که برای اتصال به شبکه از آنها استفاده می کنیم. پس از آن، ما WebServer.hکتابخانه را شامل می‌شویم که حاوی روش‌هایی است که به ما در پیکربندی سرور و رسیدگی به درخواست‌های HTTP ورودی بدون نگرانی در مورد جزئیات پیاده‌سازی سطح پایین کمک می‌کنند.

#include <WiFi.h>
#include <WebServer.h>

از آنجایی که ما در حال پیکربندی وب سرور ESP32 در حالت اکسس پوینت (AP) هستیم، شبکه WiFi خود را ایجاد می کند. بنابراین، ما باید SSID، رمز عبور، آدرس IP، ماسک زیر شبکه IP و دروازه IP را تنظیم کنیم.

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

به دنبال آن، یک شی از کتابخانه WebServer ایجاد می کنیم تا بتوانیم به توابع آن دسترسی داشته باشیم. سازنده این شیء، پورتی را که سرور به آن گوش می دهد، به عنوان پارامتر می پذیرد. از آنجایی که HTTP به طور پیش فرض از پورت 80 استفاده می کند، ما از این مقدار استفاده خواهیم کرد. این به ما امکان می دهد بدون تعیین پورت در URL به سرور متصل شویم.

// declare an object of WebServer library
WebServer server(80);

در مرحله بعد، پین های GPIO ESP32 را که LED ها به آنها متصل هستند و همچنین وضعیت اولیه آنها را اعلام می کنیم.

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

در داخل تابع Setup()

در تابع راه اندازی، ما سرور وب ESP32 را در حالت نقطه دسترسی نرم (AP) پیکربندی می کنیم. ابتدا یک اتصال سریال برای اهداف اشکال زدایی ایجاد می کنیم و پین های GPIO را طوری پیکربندی می کنیم که به عنوان یک خروجی رفتار کنند.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);

سپس، یک نقطه دسترسی نرم را برای ایجاد یک شبکه Wi-Fi با ارائه یک SSID، رمز عبور، آدرس IP، ماسک زیر شبکه IP و دروازه IP پیکربندی می کنیم.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);

برای رسیدگی به درخواست‌های HTTP ورودی، باید مشخص کنیم که هنگام دسترسی به یک URL خاص، کدام کد باید اجرا شود. برای این کار از .on()روش استفاده می کنیم. این روش دو پارامتر را می پذیرد: یک مسیر URL نسبی و نام تابعی که باید هنگام بازدید از آن URL اجرا شود.

برای مثال، اولین خط قطعه کد زیر، نشان می دهد که وقتی یک سرور درخواست HTTP را در مسیر ریشه (/) دریافت می کند، handle_OnConnect()تابع را فراخوانی می کند. توجه به این نکته ضروری است که URL مشخص شده یک مسیر نسبی است.

به طور مشابه، ما باید چهار URL دیگر را برای کنترل دو حالت دو LED مشخص کنیم.

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

ما مشخص نکرده‌ایم که اگر سرویس گیرنده نشانی اینترنتی را درخواست کند که با آن مشخص نشده است، چه سرویسی باید ارائه کند server.on(). باید خطای 404 (صفحه یافت نشد) را به عنوان پاسخ بدهد. برای انجام این کار از server.onNotFound()روش استفاده می کنیم.

server.onNotFound(handle_NotFound);

حال برای راه اندازی سرور، متد شی سرور را begin()فراخوانی می کنیم.

server.begin();
Serial.println("HTTP server started");

در داخل تابع Loop()

درخواست‌های واقعی HTTP ورودی در تابع حلقه بررسی می‌شوند. برای این کار از متد شی سرور استفاده می handleClient()کنیم. همچنین بر اساس درخواست، وضعیت LED ها را تغییر می دهیم.

void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

اکنون باید handle_OnConnect()تابعی را بنویسیم که قبلاً به URL ریشه (/) وصل کرده بودیم server.on. این عملکرد را با تنظیم وضعیت هر دو LED روی LOW (وضعیت اولیه LED ها) و چاپ آن بر روی نمایشگر سریال شروع می کنیم.

ما از روش ارسال برای پاسخ به درخواست HTTP استفاده می کنیم. اگرچه روش را می توان با تعدادی آرگومان مختلف فراخوانی کرد، اما ساده ترین شکل به کد پاسخ HTTP، نوع محتوا و محتوا نیاز دارد.

اولین پارامتری که به روش ارسال می‌دهیم، کد 200 (یکی از کدهای وضعیت HTTP ) است که با پاسخ OK مطابقت دارد. سپس نوع محتوا را به عنوان “text/html” مشخص می کنیم و در نهایت SendHTML()تابع سفارشی را پاس می کنیم که یک صفحه HTML پویا با وضعیت LED ایجاد می کند.

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

به طور مشابه، ما پنج تابع دیگر را برای رسیدگی به درخواست‌های روشن/خاموش LED و صفحه خطای 404 می‌نویسیم.

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

نمایش صفحه وب HTML

هر زمان که وب سرور ESP32 درخواستی از یک سرویس گیرنده وب دریافت می کند، این sendHTML()تابع یک صفحه وب ایجاد می کند. این به سادگی کدهای HTML را در یک رشته طولانی ادغام می کند و به server.send()تابعی که قبلاً در مورد آن صحبت کردیم برمی گردد. این تابع از وضعیت LED ها به عنوان پارامتری برای تولید محتوای HTML به صورت پویا استفاده می کند.\

اولین متنی که همیشه باید ارسال کنید، اعلان <!DOCTYPE> است که نشان می دهد ما در حال ارسال کد HTML هستیم.

String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";

عنصر viewport <meta> صفحه وب را واکنش‌گرا می‌کند و اطمینان می‌دهد که در همه دستگاه‌ها خوب به نظر می‌رسد. تگ عنوان عنوان صفحه را تعیین می کند.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";

سبک دادن به صفحه وب

به دنبال آن، ما مقداری CSS برای استایل دادن به دکمه ها و ظاهر کلی صفحه وب داریم. ما فونت Helvetica را انتخاب کردیم و محتوایی را برای نمایش به صورت یک بلوک درون خطی، تراز وسط تعریف کردیم.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

کد زیر رنگ، فونت و حاشیه اطراف بدنه، تگ های H1، H3 و p را تنظیم می کند.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

دکمه ها نیز با ویژگی هایی مانند رنگ، اندازه، حاشیه و غیره استایل بندی شده اند. انتخابگر :active ظاهر دکمه ها را در حالی که روی آنها کلیک می شود تغییر می دهد.

ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";

تنظیم عنوان صفحه وب

بعد، عنوان صفحه وب تنظیم می شود. شما می توانید این متن را به هر چیزی که مناسب برنامه شما باشد تغییر دهید.

ptr +="<h1>ESP32 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

نمایش دکمه ها و وضعیت مربوطه

این ifعبارت برای به روز رسانی پویا وضعیت دکمه ها و LED ها استفاده می شود.

if(led1stat)
 {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
 {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
 {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
 {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

مثال 2 – پیکربندی وب سرور ESP32 در حالت WiFi Station (STA)

Change SSID Password before trying ESP32 STA mode web server sketch 1 1

بیایید به مثال بعدی برویم، که نشان می دهد چگونه می توان وب سرور ESP32 را در حالت Station (STA) پیکربندی کرد و صفحات وب را به هر مشتری متصل در شبکه موجود ارائه کرد.

قبل از اینکه به آپلود طرح ادامه دهید، باید تغییراتی ایجاد کنید تا مطمئن شوید که برای شما کار می کند. برای اتصال ESP32 به یک شبکه موجود، باید دو متغیر زیر را با اعتبار شبکه خود تغییر دهید.

پس از اتمام کار، ادامه دهید و طرح را امتحان کنید.

#include <WiFi.h>
#include <WebServer.h>

/*Put your SSID & Password*/
const char* ssid = " YourNetworkName";  // Enter SSID here
const char* password = " YourPassword";  //Enter Password here

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #3498db;}\n";
  ptr +=".button-on:active {background-color: #2980b9;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
    ptr +="<h3>Using Station(STA) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

دسترسی به وب سرور در حالت STA

پس از آپلود طرح، Serial Monitor را با 115200 baud باز کنید و دکمه RESET را در ESP32 فشار دهید. اگر همه چیز خوب باشد، آدرس IP پویا به دست آمده از روتر شما و همچنین پیام «سرور HTTP شروع شده» را نمایش می دهد.

ESP32 Web Server Station Mode Serial Monitor Output Server Started 4 1 1 1

بعد، یک مرورگر را راه اندازی کنید و به آدرس IP نمایش داده شده در مانیتور سریال بروید. ESP32 باید یک صفحه وب با وضعیت فعلی LED ها و دو دکمه برای کنترل آنها نمایش دهد. در عین حال می‌توانید مانیتور سریال را بررسی کنید تا وضعیت پین‌های GPIO ESP32 را ببینید.

ESP32 Web Server Station Mode Serial Monitor Output Server Started 4 2 1 1
ESP32 Web Server Station Mode Web Page 1 1

اکنون، در حالی که مراقب URL هستید، روی دکمه کلیک کنید تا LED1 روشن شود. پس از کلیک بر روی دکمه، ESP32 یک درخواست برای /led1onURL دریافت می کند. سپس LED1 را روشن می کند و یک صفحه وب با وضعیت LED به روز شده ارائه می دهد. همچنین وضعیت پین GPIO را روی نمایشگر سریال چاپ می کند.

ESP32 Web Server Station Mode Serial Monitor Output LED Control 1 1
ESP32 Web Server Station Mode Web Page 1 LED Control 1 1

می توانید دکمه LED2 را تست کنید تا ببینید آیا به طور مشابه کار می کند یا خیر.

بیایید نگاهی دقیق تر به کد بیندازیم تا ببینیم چگونه کار می کند تا بتوانید آن را مطابق با نیاز خود تغییر دهید.

توضیح کد

تنها تفاوت این کد با کد قبلی این است که ما شبکه WiFi خود را ایجاد نمی کنیم، بلکه با استفاده از WiFi.begin()عملکرد به یک شبکه موجود می پیوندیم.

//connect to your local wi-fi network
WiFi.begin(ssid, password);

در حالی که ESP32 تلاش می کند به شبکه متصل شود، می توانیم از این WiFi.status()تابع برای بررسی وضعیت اتصال استفاده کنیم.


//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) 
{
delay(1000);
Serial.print(".");
}

برای اطلاع شما، این تابع وضعیت های زیر را برمی گرداند:

  • WL_CONNECTED : هنگامی که به یک شبکه Wi-Fi متصل است
  • WL_NO_SHIELD : زمانی که هیچ سپر Wi-Fi وجود ندارد
  • WL_IDLE_STATUS : وضعیت موقتی که هنگام WiFi.begin()فراخوانی اختصاص داده می‌شود و تا زمانی که تعداد تلاش‌ها منقضی شود (که منجر به WL_CONNECT_FAILED می‌شود) یا برقراری ارتباط (نتیجه WL_CONNECTED) فعال باقی می‌ماند.
  • WL_NO_SSID_AVAIL : زمانی که هیچ SSID در دسترس نیست
  • WL_SCAN_COMPLETED : هنگامی که شبکه های اسکن کامل شد
  • WL_CONNECT_FAILED : زمانی که اتصال برای همه تلاش ها با شکست مواجه می شود
  • WL_CONNECTION_LOST : زمانی که اتصال قطع شود
  • WL_DISCONNECTED : هنگامی که از شبکه جدا می شود

پس از اتصال به شبکه، این WiFi.localIP()تابع برای چاپ آدرس IP ESP32 استفاده می شود.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

تنها تفاوت بین حالت AP و STA این است که یکی شبکه خود را ایجاد می کند در حالی که دیگری به شبکه موجود می پیوندد. بنابراین، بقیه کدها برای رسیدگی به درخواست‌های HTTP و ارائه صفحات وب در حالت STA همان چیزی است که در بالا برای حالت AP توضیح داده شد. این شامل موارد زیر است:

  • اعلان پین های GPIO ESP32 که LED ها به آنها وصل شده اند
  • تعریف چندین server.on()روش برای رسیدگی به درخواست های HTTP ورودی
  • تعریف server.onNotFound()روش برای رسیدگی به خطای HTTP 404
  • ایجاد توابع سفارشی که با ضربه زدن به URL خاص اجرا می شوند
  • ایجاد صفحه HTML
  • استایل دادن به صفحه وب
  • ایجاد دکمه ها و نمایش وضعیت آنها

ترجمه از https://lastminuteengineers.com/creating-esp32-web-server-arduino-ide/

WhatsApp
Email
LinkedIn

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

SIMLES

SIMLES یک نشانه ایرانی است که به تولید دستگاه های الکترونیک و عمدتا بی سیم می پردازد.ما راه های  کنترل تجهیزات آسانی را برای شما فراهم میکنیم.

تماس

  • 031-37714320
  • 09137875491
  • 09211229251

نشانی

  • اصفهان-خ میرزاطاهر-پلاک10
  • اصفهان-سپاهانشهر-ابتدای بلوار
  • غدیر-مجتمع پرنیان-پلاک213

پرداخت از طریق زرین پال

برای اعتماد بیشتر کلیک کنید

enamad

کليه حقوق اين سایت برای  SIMLES محفوظ می باشد.

Copyright © 2020-2024 Simles.ir

خانه

فروشگاه

پرداخت

سبد خرید

حساب کاربری