جستجو
برای جستجو متن مورد نظر وارد کنید و Enter بزنید برای بستن Esc بزنید.
قبل از شروع اموزش به مفهوم و کاربرد وب سرور می پردازیم.ماژول NodeMcu از تراشه esp8266 استفاده می کند و در نتیجه ما توسط این ماژول توانایی ارسال و دریافت اطلاعات در بستر Wifi را خواهیم داشت.در بیشتر پروژه ها می توانیم چند میکروکنترلر را با هم بصورت بی سیم شبکه نماییم و توسط سوکت نویسی با پروتکل TCP/IP اطلاعات را رد و بدل نماییم و یا اینکه ماژول خود را به وای فای یا اکسس پوینت کامپیوتر متصل نماییم و عمل فوق را تکرار نماییم.با توجه به توابع اماده برای این کار در اردوینو برای Esp کار سختی نخواهیم داشت.اما در مکان هایی ممکن است کامپیوتر در دسترس نباشد و نتوانیم توسط ان شبکه میکروکنترلری خود را کنترل یا مانیتورینگ نماییم.در اینجا سه راه حل مد نظر قرار می گیرد.
1 . استفاده از نمایشگر و صرف هزینه زیاد در صورتی که نیاز به گرافیک خوب و ابعاد بزرگ نمایشگر باشد.
روش های اول و دوم در کنار مزایای خود نیازمند صرف هزینه و وقت زیاد برای طراحی برنامه می باشد.در روش سوم به ایجاد سرور لوکال بر روی ماژول esp می پردازیم که کاربر توسط موبایل خود از طریق وای فای به ان متصل می شود و در browser موبایل با تایپ ادرس ip ماژول به صفحه وب طراحی شده و ذخیره شده درون حافظه esp دسترسی پیدا می کند و همچنین توسط توابع جاوا اسکریپت که سمت مرورگر موبایل کاربر پردازش می شوند می تواند با ماژول esp به تبادل اطلاعات برای کنترل یا مانیتورینگ برد خود بپردازد.
از مزایای روش فوق می توان به حذف نمایشگر روی برد و همچنین بخاطر استاندارد بودن وب (Html , CSS و JS) توانایی نمایش صفحات وب در هر وسیله ای و با هر سیستم عاملی وجود دارد و نیاز به طراحی اپلیکیشن جداگانه برای هر دستگاه نمی باشد (ios , Android , windows , …) اشاره نمود.
برای ایجاد صفحات وب به سه ساختار پایه و اصلی که در همه صفحات وب وجود دارد نیازمندیم:
در واقع بدون جاوا اسکریپت فقط یک صفحه زیبا همانند قاب عکس توانستیم به کاربر نشان بدهیم و کاربر هیچگونه تعاملی نمی تواند با برد کنترلی خود برای کنترل یا مانیتورینگ داشته باشد.برای ارتباط با سرور خود (esp) نیازمند استفاده از ایجکس می باشیم که کار سختی هم در پیش نخواهیم داشت.
نکته : هر چقدر هم صفحه یا صفحات وب شما سنگین باشد (در صورت کافی بودن فضای ماژول) و نیاز به پردازش گرافیکی و اجرای دستورات جاوا اسکریپتی داشته باشد , میکروکنترلر یکبار اطلاعات را به سمت مرورگر کاربر می فرستد و بعد از ان پردازش کارها بر عهده سخت افزار جانبی کاربر(موبایل , تبلت و یا …) می باشد !
در واقع با این راه حل بخش هندل کردن نمایشگر , گرافیک و بخشی از کارهای کلی را از دوش میکروکنترلر خارج می کنیم و دستگاه کاربر را بعنوان پردازشگر دوم و کمکی به خدمت می گیریم.و در اخر فقط فرمان های کاربر به سمت میکروکنترلر ارسال می شود و یا اینکه اطلاعات سنسورها و … از میکرو خوانده می شود.
برای ادامه بهتر است کاربر مقدار خیلی کمی به HTML , CSS و جاوا اسکریپت اشنایی داشته باشد.
ابتدا کمی راجب صفحه وب خود توضیح می دهیم .شما می توانید صفحه وب خود را حتی در فایل notepad معمولی با پسوند HTML ذخیره نمایید و نتیجه کار خود را در مرورگر کامپیوتر ببینید و نواقص طراحی و گرافیکی خود را برطرف نمایید.
برای سادگی یک پروژه معمولی را دنبال می کنیم که کاربر با تایپ متن خود روی تکست باکس مرورگر خود و با ارسال ان ,متن مورد نظر را روی نمایشگر سمت میکروکنترلر مشاهده می نماید و همچنین با فشردن یک باتن مقدار متغییری که هر یک ثانیه سمت میکروکنترلر به مقدار ان اضافه می شود را بخواند.
نکته : بجای متن خود شما می توانید هر فرمان دلخواهی را ارسال نمایید(در صورت دریافت متن string در سمت میکروکنترلر و تحلیل ان می توانید الگوریتم کنترلی خود را پیاده سازی نمایید.) و بجای مقدار متغییر هر اطلاعات سنسور یا … را از میکروکنترلر دریافت نمایید.
<!DOCTYPE html>نیاز صفحه وب و ثابت است.
<html>
<head>
<meta charset="UTF-8">
توسط متای فوق مشخص می کنیم صفحه از کارکترهای غیر از لاتین نیز پشتیبانی می کند.
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">توسط متای بالا ذکر می کنیم صفحه ما فول اسکرین و غیر اسکرول کردن توسط کاربر باشد.
<title>hello</title>تایتل صفحه با نام دلخواه خود
</head>
<style type="text/css">
در این بخش توابع css را مشخص و بکار می بریم.
body{صفحه اصلی و روت در صفحه وب به اسم body می باشد.
padding: 0;
margin: 0;
حذف فضای حاشیه برای نمایش صفحه خود
display: flex;مشخص کردن نوع نمایش محتویات درون صفحه وب خود.
align-items: center;
justify-content: center;
قرار دادن عناصر خود در وسط صفحه از لحاظ موقعیت سطر و ستون
flex-wrap: nowrap;
flex-direction: column;مشخص کردن نحوه چیدمان عناصر
justify-content: space-around;ایجاد فضای خالی بین عناصر صفحه
height: 400px;
width: 100%;
مشخص کردن پهنا و ارتفاع صفحه مرکزی
overflow-y: auto;در صورت کوچک بودن ارتفاع مرورگر نسبت به صفحه درونی اسکرول بار ایجاد شود
background-color: rgb(216, 137, 137);تنظیم رنگ بک گراند صفحه به RGB
}
.btn{
باتن ما کلاسی به اسم btn برای دریافت استایل css دارد.این کلاس را در اینجا برایش مشخص می کنیم.
border-radius: 50px;گرد کردن گوشه های باتن خود
border:solid 2px rgb(55, 14, 202);
background-color: black;
color: rgb(243, 18, 213);
text-align: center;
font-weight: bold;
user-select: none;
غیر فعال کردن توانایی کاربر برای انتخاب متن دورنی باتن
width :150px;
height:50px;
font-size:1.3em;
مشخص کردن ابعاد و اندازه فونت
display: flex;
align-items: center;
justify-content: center;
transition: 1S;
ایجاد تاخیر 1 ثانیه در نمایش افکت hover (موقعی که ماوس روی ان می رود یا کلیک می شود)و …
}
.btn:hover{
background-color: blueviolet;
color: black;
تغییر رنگ در حالت کلیک یا رفتن ماوس روی ان
}
.mytextCss{
width: 300px;
height: 60px;
font-weight: bolder;
font-size: 1.5em;
استایل برای تکست باکس خود
}
.btn2{
border-radius: 50px;
border:solid 2px rgb(39, 216, 216);
background-color: black;
color: rgb(194, 243, 18);
text-align: center;
font-weight: bold;
user-select: none;
width :250px;
height:50px;
font-size:1.3em;
display: flex;
align-items: center;
justify-content: center;
transition: 1S;
}
.btn2:hover{
background-color: rgb(39, 216, 216);
color: black;
}
.box{
border:dashed 2px rgb(0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
flex-direction: column;
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript">
</script>
<body>
<div id="readBtn" class="btn2">
<p>Read Count</p>
باتن برای خواندن وضعیت متغییر درون میکروکنترلر
</div>
<div class="box">
<div>
<input class="mytextCss" id="myText" type="text"/>
تکست باکس برای گرفتن متن کاربر
</div>
<div id="sendBtn" class="btn">
<p>Send</p>
باتن برای ارسال متن درون تکست باکس
</div>
</div>
<script type="text/javascript">
بخش اجرای توابع جاوا اسکریپت
اگر دقت کرده باشید در بخش توصیف عناصر به هر کدام یک id با نام دلخواه دادیم تا بتوانیم انها را در بخش جاوا اسکریپت راحتتر پیدا نماییم
document.getElementById("readBtn").addEventListener("click",function(){در صورت اجرای کلیک روی باتن فوق درخواست خواندن متغییر به میکروکنترلر ارسال می شود تا میکرو در صورت دریافت درخواست در جواب مقدار متغییر را بفرستد.ساختار کلی کار با توابع ایجکس به شکل زیر است
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
if(xhr.status == 200){
در صورتی که با موفقیت دستور ارسال شد جواب برگشتی را به کاربر نمایش می دهیم.
xhr.responseText حاوی دیتای دریافتی از سمت میکرو می باشد.فرمت اطلاعات string می باشد.
alert("Read Count: " + xhr.responseText);
}
else{
alert("Connection is Lost");
نمایش خطا به کاربر در صورت قطع ارتباط
}
}
};
xhr.open("POST","read",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("");
ارسال اطلاعات به شکل post به میکرو
});
document.getElementById("sendBtn").addEventListener("click",function(){
همچنین ارسال متن تایپ شده کاربر به سمت میکروکنترلر
var mydata = document.getElementById("myText").value;
alert("your Data : " + mydata);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
else{
alert("Connection is Lost");
}
}
};
xhr.open("POST","str",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(mydata);
متغییر mydata حاوی متن تکست باکس می باشد.
});
</script>
</body>
</html>
توضیح برنامه esp :
#include <Adafruit_GFX.h>
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_ILI9341.h>
فراخوانی توابع مربوط به نمایشگر
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
فراخوانی کتابخانه های مورد نیاز سرور
#include <stdio.h>
#include <string.h>
#include <iostream>
uint8_t Count = 0;
Adafruit_ILI9341 tft = Adafruit_ILI9341(D2, D1, D7, D5, D0, D6);
ایجاد شئی کلاس برای راه اندازی نمایشگر از نوع چیپ درایور ILI9341 و مشخص کردن پایه های اتصالی
AsyncWebServer server(80);مشخص کردن پورت سرور خود بر روی 80 (پورت پیش فرض مرورگر برای نمایش صفحه وب می باشد)
برای اینکه کد صفحات وب درون حافظه برنامه (نه رم) ذخیره شوند از ساختار زیر استفاده می کنیم:
const char HTML[] PROGMEM = R"rawliteral(
//your web codes
)rawliteral";
String getText = "";
uint32_t mTime = 0;
void setup() {
Serial.begin(9600);
tft.begin();
tft.fillScreen(ILI9341_BLACK);
راه اندازی و پاک کردن صفحه نمایشگر
tft.setRotation(1);
tft.setTextSize(3);
tft.setTextColor(ILI9341_YELLOW);
تنظیم نوع چرخش صفحه , سایز و رنگ متن نمایشگر
tft.setCursor(10 , 10);
tft.println("boot ...");
نمایش متن دلخواه
WiFi.mode(WIFI_AP);تنظیم حالت اکسس پوینت
WiFi.softAP(“Gil Electronic”,”12345678″);
تنظیم نام و پسورد دلخواه سرور تا کاربر در موبایل با جستجوی وای فای به ان متصل شود.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html",HTML);
در صورت درخواست لود کردن صفحه وب محتویات ارایه وب را ارسال می کنیم.
});
server.on("/read", HTTP_POST, [](AsyncWebServerRequest *request){
request->send(200, "text/plain",String(Count));
در صورت امدن درخواست خواندن از متغییر مقدار ان را به رشته تبدیل و ارسال می نماییم
});
server.on("/str", HTTP_POST, [](AsyncWebServerRequest *request){
int headers = request->headers();
در صورت امدن متن تکست باکس از سمت مرورگر
AsyncWebHeader* h = request->getHeader(headers - 1);
Serial.printf("%s\n", h->value().c_str());
int params = request->params();
چون نوع متد post حاوی بخش های مختلف می باشد.و در تابع getHeader می توانیم به بخش های مختلف دسترسی داشته باشیم
for(int i = 0 ;i < params; i++){
AsyncWebParameter* p = request->getParam(i);
if(p->isPost()){
آن بخش که حاوی دیتا می باشد را گرفته
Serial.println("---------------");
Serial.println(p->value().c_str());
getText = p->value().c_str();
و کارکتر به کارکتر خوانده و درون متغییر getText ذخیره می کنیم.
}
}
request->send_P(200, "text/plain","ok");
ارسال وضعیت اوکی به مرورگر با ساختار بالا که گیرنده متوجه شود دیتا را به درستی دریافت کرده است.
});
server.begin();
اغاز به کار سرور خود
نوع سرور ما از نوع اسنکرون می باشد و باعث می شود در برنامه حالت بلاک برای دریافت و یا ارسال اطلاعات به وجود نیاید.
mTime = millis();
}
void loop() {
if(getText.length() > 0){
tft.fillScreen(ILI9341_BLACK);
در صورتی که متغییر ما خالی نیست.صفحه را پاک کرده و متن جدید را نمایش می دهیم.
tft.setCursor(10 , 10);
tft.print(getText);
getText = "";
delay(500);
}
delay(500);
if((millis() - mTime) > 1000){
با کمک تایمر millis هر یک ثانیه به متغییر Count اضافه می کنیم.
Count++;
mTime = millis();
}
}
اجرای صفحه وب ایجاد شده در مرورگر موبایل بعد از اتصال به سرور Esp:
نمایش متن روی نمایشگر سمت میکروکنترلر بعد از ارسال متن تایپ شده در مرورگر :
نکته : بعد از روشن کردن وای فای وسیله خود نام وای فای خود را پیدا کرده و رمز ان را وارد نموده و به ان متصل شوید بعد از اتصال در مرورگرخود ای پی ماژول esp که بصورت زیر است را در ادرس بار برنامه مرورگر وارد نمایید:
192.168.4.1
در ادامه می توانید فایل برنامه را دریافت نمایید:
سپاس بیکران
ممنون از لطف شما