در ادامه ی تبدیل خوشبو کننده به سیستم IOT با ESP8266 به بخش طراحی رابط کاربری می پردازیم. در این پروژه ESP8266 نقش یک وب سرور را ایفا می کند. برای همین باید رابط کاربری ما از نوع یک صفحه ی پویا که با مرورگر ها قابل نمایش است، باشد. برای طراحی صفحه وب از HTML استفاده می کنیم. در اینجا قصد ما آموزش HTML و CSS نیست. فقط مقداری از تگ های آن را توضیح می دهیم.
خب برای شروع طراحی صفحه ی وب خود احتیاج به یک نرم افزار داریم. برنامه های زیادی در این ضمینه موجود است، ولی من از Visual Studio Code استفاده می کنم. کلا تمام صفحات وب تشکیل شده از چند تگ که پایه ی اصلی و ساختار اصلی یک وب را تشکیل می دهند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
</body>
</html>
توضیح تگهای html استفاده شده در ESP8266:
در ابتدا باید <DOCTYPE html!> را بنویسیم.
در ادامه چند تگ داریم. تگ اول html که کل صفحه را در بر می گیرد. در تگ head مشخصات صفحه، عنوان و اگر کد CSS داریم در این قسمت قرار می دهیم. تگ body هم که همانطور که از اسمش مشخص است بدنه ی سایت در آن قرار می گیرد.
در html برای مشخص کردن تیتر از تگهای h استفاده می کنیم. که از h1 تا h6 داریم. که هر کدام ضخامتی را برای حروف ما در نظر می گیرد.
برای اینکه از کاربر اطلاعاتی را بخواهیم دریافت کنیم از تگ form استفاده می کنیم. هر تگ می تونه یک سری صفت داشته باشد، که در داخل هر تگ آن را مشخص می کنیم. مثلا در تگ form ، صفتی را که برای آن مشخص می کنیم method می باشد. در اینجا ما متد را POST در نظر می گیریم. چون می خواهیم اطلاعاتی که ما به سرور ارسال می کنیم در URL نشان داده نشود.
برای نشان دادن یک دکمه یا باکسی که یک جمله یا عدد را از ما بگیرد، از تگ input استفاده می کنیم. که با تعیین صفت type نوع آن را مشخص می کنیم. که قرار است یک دکمه باشد، یا جمله یا عدد را از ما بگیرد. برای اینکه این جمله در یک متغیر قرار گیرد اسم متغیر را در صفت name مشخص می کنیم.
تگ p برای اضافه کردن یک پاراگراف می باشد. و تگ br یک خط به پایین می آید.
از هر تگی هم که استفاده می کنیم باید آنرا ببندیم. مثلا خود html را ببینید که با یک تگ دیگر html/ به این صورت بسته شده است.
برای اینکه به صفحه ی خود کمی رنگ و رو بدهیم از کدهای CSS استفاده می کنیم. که آن را در تگ style در قسمت head قرار می دهیم.
در ادامه کدهای کامل html استفاده شده در ESP8266 را قرار می دهم:
<!DOCTYPE html>
<html>
<head>
<title>Air Freshner</title>
<style>
body {
text-align: center;
background : #abfbfb;
}
</style>
</head>
<body>
<h1>Enter the Time for Period Spray</h1>
<form method="POST">
<input type="number" name="TimeSpray" min="10" max="60" value="10" >
<p>Working With : Light <input type="radio" value="11" name="Mode">
Dark <input type="radio" value="22" name="Mode"> AllTime <input type="radio" value="33" checked="checked" name="Mode" ></p>
<input type="submit" value="Submit">
<br>
Time :
<br>
Spray with light
<br>
</form>
<p>-------------------------------------------------------------------------------</p>
<h1>Enter SSID Name and PassWord Of Local WiFi</h1>
<form method="POST">
<p>SSID : <input type="text" name="SSID"></p>
<p>PassWord : <input type="text" name="SSID_Pass"></p>
<input type="submit" value="Submit">
</form>
</body>
</html>
ما در اینجا دو تا فرم ایجاد کرده ایم. یکی برای گرفتن تنظیمات خود دستگاه، و یکی هم برای گرفتن SSID و Password وایفای ما. برای اینکه وقتی به خود ESP8266 با موبایل یا لپتاپ متصل شویم دیگر دسترسی به اینترنت را از دست می دهیم. این قسمت را گذاشته ام تا بتوان با یک IP دیگر وقتی که به وایفای وصل هستیم به دستگاه هم دسترسی داشته باشیم.
این صفحه ای که ما ایجاد کردیم چون قرار است از طرف ESP8266 برای مرورگر ما ارسال شود. باید یک سری کلمه هم اول آن اضافه کنیم. که نوع پیامهایی که از طرف ESP8266 ارسال می شود را برای مرورگر ما مشخص کند. که در فیلم توضیح داده شده است.
نکته ای که باید به آن اشاره کرد این است که، خطهایی که در html در برنامه ی Visual Studio Code با زدن اینتر ایجاد کرده ایم. و به خط پایین رفته ایم و تگ دیگری نوشته ایم در برنامه ی آردوینو نمی توان به همان ترتیب این کدها را انتقال داد. برای همین در برنامه ی آردوینو باید با r\n\ آن را مشخص کنیم. و دیگر اینکه کوتیشن های استفاده شده در Visual Studio Code باید در برنامه ی آردوینو دوبار تکرار شوند تا حساب شوند.
در ادامه فیلم بخش html در ESP8266 را برایتان قرار می دهم:
دیدگاه ها :