صفحه وب پیکربندی Arduino/ESP خود را از ابر بارگیری کنید: 7 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

هنگام ایجاد پروژه Arduino / ESP (ESP8266 / ESP32) ، می توانید همه چیز را سخت کد کنید. اما بیشتر اوقات چیزی ظاهر می شود و در نهایت دستگاه IoT خود را دوباره به IDE خود متصل می کنید. یا فقط تعداد بیشتری از افراد به پیکربندی دسترسی پیدا کرده اند و می خواهید به جای اینکه انتظار داشته باشید عملکردهای داخلی را درک کنند ، یک UI ارائه دهید.

این دستورالعمل به شما می گوید که چگونه بیشتر UI را به جای Arduino / ESP در ابر قرار دهید. انجام این کار به شما در صرفه جویی در فضا و حافظه کمک می کند. سرویسی که صفحات وب رایگان را به صورت رایگان ارائه می دهد ، مانند GitHub Pages به عنوان "ابر" مناسب است ، اما احتمالاً سایر گزینه ها نیز کار خواهند کرد.

برای ایجاد صفحه وب از این طریق ، مرورگر کاربر باید 4 مرحله را طی کند:

1. آدرس اصلی را از Arduino / ESP درخواست کنید
2. یک صفحه وب بسیار ساده دریافت کنید و به آنها بگویید:
3. یک فایل جاوا اسکریپت از ابر درخواست کنید
4. کد ایجاد کننده صفحه واقعی را دریافت کنید

این دستورالعمل همچنین نحوه تعامل با Arduino / ESP را پس از آماده شدن صفحه مطابق مراحل بالا توضیح می دهد.

کد ایجاد شده در این دستورالعمل را می توان در GitHub نیز یافت.

پیش نیازها

این دستورالعمل فرض می کند که شما به مواد خاصی و برخی از دانش قبلی دسترسی دارید:

• آردوینو (با دسترسی به شبکه) / ESP
• رایانه ای که می توانید موارد بالا را به آن متصل کنید
• دسترسی وای فای متصل به اینترنت
• Arduino IDE نصب شده (همچنین برای ESP32)
• شما می دانید چگونه یک طرح را در دستگاه IoT خود بارگذاری کنید
• شما نحوه استفاده از Git & GitHub را می دانید

مرحله 1: شروع به کار با یک طرح وب سرور ساده

ما تا حد ممکن ساده شروع می کنیم و اجازه می دهیم از اینجا به بعد رشد کند.

#عبارتند از

const char* ssid = "Yoursid"؛ const char* رمز عبور = "yourpasswd"؛ سرور WiFiServer (80) ؛ void setup () {// مقداردهی اولیه سریال و منتظر بمانید تا پورت باز شود: Serial.begin (115200)؛ در حالی که (! سریال) {؛ // منتظر بمانید تا پورت سریال متصل شود. فقط برای پورت USB بومی مورد نیاز است} WiFi.begin (ssid ، گذرواژه) ؛ while (WiFi.status ()! = WL_CONNECTED) {تأخیر (500)؛ Serial.print (".") ؛ } Serial.println ("WiFi متصل است.")؛ Serial.println ("آدرس IP:") ؛ Serial.println (WiFi.localIP ()) ؛ server.begin ()؛ } void loop () {// گوش دادن به مشتریان ورودی WiFiClient client = server.available ()؛ // گوش دادن به مشتریان ورودی bool sendResponse = false؛ // اگر می خواهیم پاسخ ارسال کنیم String urlLine = "" روی true تنظیم می شود. // یک رشته ایجاد کنید تا آدرس درخواستی را در صورت (کلاینت) // در صورت دریافت مشتری ، {Serial.println ("مشتری جدید") ؛ // پیام را از پورت سریال String currentLine = "" چاپ کنید؛ // یک رشته ایجاد کنید تا داده های دریافتی از کلاینت در حالی که = client.read ()؛ // یک بایت بخوانید ، سپس اگر (c == '\ n') // اگر بایت یک کاراکتر جدید خط باشد {// اگر خط فعلی خالی باشد ، دو کاراکتر خط جدید را در یک ردیف دریافت می کنید. // این پایان درخواست مشتری HTTP است ، بنابراین یک پاسخ ارسال کنید: if (currentLine.length () == 0) {sendResponse = true؛ // همه چیز خوب است! زنگ تفريح؛ // از حلقه while خارج شوید} else // اگر خط جدیدی دارید ، جریان خط را پاک کنید: {if (currentLine.indexOf ("GET /")> = 0) // این باید خط URL باشد {urlLine = currentLine ؛ // آن را برای استفاده بعدی ذخیره کنید} currentLine = ""؛ // تنظیم رشته جاری خط فعلی}} در غیر این صورت (c! = '\ r') // اگر به جز کاراکتر بازگشت کالسکه چیز دیگری دارید ، {currentLine += c؛ // آن را به انتهای خط جاری}}} اضافه کنید اگر (sendResponse) {Serial.print ("مشتری درخواست شد") ؛ Serial.println (urlLine) ؛ // سرصفحه های HTTP همیشه با یک کد پاسخ (به عنوان مثال HTTP/1.1 200 OK) // و یک نوع محتوا شروع می شوند تا مشتری بداند چه چیزی در آینده است ، سپس یک خط خالی: client.println ("HTTP/1.1 200 OK") ؛ client.println ("نوع محتوا: text/html")؛ client.println ()؛ if (urlLine.indexOf ("GET /")> = 0) // اگر URL فقط یک " /" باشد { / // محتوای پاسخ HTTP از سربرگ: client.println ("سلام جهان!") پیروی می کند. } // پاسخ HTTP با خط خالی دیگری به پایان می رسد: client.println ()؛ } // اتصال را ببندید: client.stop ()؛ Serial.println ("مشتری قطع شده است.") ؛ }}

کد بالا را کپی کنید یا آن را از commit در GitHub بارگیری کنید.

فراموش نکنید که SSID و رمز عبور را برای مطابقت با شبکه خود تغییر دهید.

این طرح از آردوینو معروف استفاده می کند

برپایی()

و

حلقه ()

کارکرد. در

برپایی()

اتصال سریال به IDE و WiFi نیز راه اندازی می شود. پس از اتصال WiFi به SSID مذکور ، IP چاپ می شود و سرور وب راه اندازی می شود. در هر تکرار از

حلقه ()

عملکرد وب سرور برای مشتریان متصل بررسی می شود. اگر یک کلاینت متصل باشد ، درخواست خوانده می شود و URL درخواست شده در یک متغیر ذخیره می شود. اگر همه چیز خوب به نظر می رسد ، پاسخ سرور به سرویس گیرنده بر اساس URL درخواست شده انجام می شود.

هشدار! این کد برای ساده نگه داشتن آن از کلاس Arduino String استفاده می کند. بهینه سازی رشته در محدوده این دستورالعمل نیست. در مورد دستورالعمل های مربوط به دستکاری رشته آردوینو با استفاده از حداقل رم بیشتر در این مورد بخوانید.

مرحله 2: ایجاد جاوا اسکریپت از راه دور

Arduino / ESP به مرورگر بازدیدکنندگان می گوید که این یک فایل را بارگیری کنند. بقیه موارد توسط این کد جاوا اسکریپت انجام می شود.

در این دستورالعمل از jQuery استفاده خواهیم کرد ، این به شدت ضروری نیست ، اما کارها را آسان تر می کند.

این فایل باید از طریق وب قابل دسترسی باشد ، یک سرور صفحات ثابت برای انجام این کار کافی است ، به عنوان مثال صفحات GitHub. بنابراین احتمالاً می خواهید یک مخزن جدید GitHub ایجاد کرده و یک ایجاد کنید

صفحات gh

شاخه. کد زیر را داخل a قرار دهید

.js

فایل را در مخزن در شاخه صحیح قرار دهید.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/' ،

$؛ (function () {var script = document.createElement ('script')؛ // ایجاد یک عنصر script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'؛ // src = "" attribute script.onload = function () // تابع callback ، هنگامی که فایل jquery بارگیری می شود {$ = window.jQuery ؛ // jQuery را به عنوان متغیر جهانی $ init () ؛ // فراخوانی تابع init} ؛ سند ، فراخوانی کنید. getElementsByTagName ('head') [0].appendChild (اسکریپت) ؛ // تگ ایجاد شده را به سند اضافه کنید ، این کار بارگیری jQuery lib} را آغاز می کند) ()؛ function init () {// بارگیری jQuery انجام شد ، بعداً در اینجا کد اضافه می شود…}

کد بالا را کپی کنید یا آن را از commit در GitHub بارگیری کنید.

بررسی کنید که آیا فایل شما قابل دسترسی است یا خیر. در مورد صفحات GitHub به https://username.github.io/repository/your-file.j… بروید (جایگزین کنید

نام کاربری

,

مخزن

و

your-file.js

برای پارامترهای صحیح).

مرحله 3: بارگیری فایل جاوا اسکریپت از راه دور در مرورگر بازدیدکنندگان

اکنون که همه چیز را آماده کرده ایم ، وقت آن است که صفحه وب را بارگیری کنید و فایل جاوا اسکریپت از راه دور را بارگیری کنید.

می توانید این کار را با تغییر خط 88 طرح از

client.println ("سلام جهان!")؛ t

client.println ("")؛

(تغییر دادن

src

نسبت دادن به فایل جاوا اسکریپت شما). این یک صفحه وب کوچک HTML است ، تنها کاری که می کند بارگیری فایل جاوا اسکریپت در مرورگر بازدیدکنندگان است.

فایل تغییر یافته را نیز می توان در commit مربوطه در GitHub یافت.

طرح تنظیم شده را در Arduino / ESP خود بارگذاری کنید.

مرحله 4: افزودن عناصر جدید به صفحه

یک صفحه خالی بی فایده است ، بنابراین اکنون وقت آن است که یک عنصر جدید به صفحه وب اضافه کنید. در حال حاضر این یک ویدئوی YouTube خواهد بود. در این مثال از برخی از کدهای jQuery برای انجام این کار استفاده می شود.

خط زیر را به کد اضافه کنید

init ()

عملکرد:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg؟rel=0'، frameborder: '0'}). css ({عرض: '608px'، ارتفاع: '342px'}). appendTo ('بدن')؛

این باعث ایجاد یک

iframe

عنصر ، درست را تنظیم کنید

src

با استفاده از css اندازه را مشخص کرده و اندازه را تعیین کرده و عنصر را به بدنه صفحه اضافه کنید.

jQuery به ما کمک می کند تا عناصر موجود در صفحه وب را به راحتی انتخاب و تغییر دهیم ، برخی از موارد اساسی که باید بدانید:

• $ ('بدن')

• هر عنصر موجود را انتخاب می کند ، از انتخابگرهای دیگر css نیز می توان استفاده کرد

• $(' ')

  جدیدی ایجاد می کند

• عنصر (اما آن را به سند اضافه نمی کند)

• .appendTo ('. اصلی')

• عنصر انتخاب شده/ایجاد شده را به عنصری با کلاس css "main" اضافه می کند

• عملکردهای دیگر برای افزودن عناصر عبارتند از:

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .بعد از()

  ,

  .قبل از()

اگر چیزی مبهم است به تعهد مربوطه در GitHub نگاه کنید.

مرحله 5: عناصر تعاملی

یک ویدیو سرگرم کننده است ، اما هدف از این آموزش تعامل با Arduino / ESP است. بگذارید فیلم را برای دکمه ای که اطلاعات را به Arduino / ESP ارسال می کند و همچنین منتظر پاسخ است ، جایگزین کنیم.

ما به یک مورد نیاز داریم

$('')

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

$ (''). متن ('یک دکمه'). در ('کلیک' ، عملکرد ()

{ / وقتی کد روی دکمه کلیک می شود ، کد اینجا اجرا می شود}). appendTo ('body')؛

و یک درخواست AJAX به تابع callback اضافه کنید:

$.get ('/ajax' ، تابع (داده)

{// کد زمانی که درخواست AJAX به پایان برسد اجرا می شود})؛

پس از اتمام درخواست ، داده های برگشتی به صفحه اضافه می شوند:

$('

').text (داده).appendTo (' بدن ') ؛

به طور خلاصه ، کد بالا یک دکمه ایجاد می کند ، آن را به صفحه وب اضافه می کند ، وقتی روی دکمه کلیک می شود ، یک درخواست ارسال می شود و پاسخ نیز به صفحه وب اضافه می شود.

اگر این اولین بار است که از تماس های تلفنی استفاده می کنید ، ممکن است بخواهید تعهد را در GitHub بررسی کنید تا ببینید چگونه همه چیز تو در تو است.

مرحله 6: به عنصر تعاملی پاسخ دهید

البته درخواست AJAX نیاز به پاسخ دارد.

برای ایجاد پاسخ صحیح برای

/ajax

url باید یک an اضافه کنیم

در غیر این صورت ()

بلافاصله پس از بستن دستور if که علامت را بررسی می کند

/

آدرس اینترنتی

else if (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("سلام!")؛ }

در تعهد در GitHub نیز یک شمارنده اضافه کرده ام تا به مرورگر نشان دهم که هر درخواستی منحصر به فرد است.

مرحله 7: نتیجه گیری

این پایان این دستورالعمل است. اکنون یک Arduino / ESP دارید که یک صفحه وب کوچک را ارائه می دهد و به مرورگر بازدیدکننده می گوید که یک فایل جاوا اسکریپت را از ابر بارگیری کند. پس از بارگیری جاوا اسکریپت ، بقیه محتویات صفحه وب را ایجاد می کند و UI را برای کاربر فراهم می کند تا با Arduino / ESP ارتباط برقرار کند.

اکنون بستگی به تخیل شما دارد که عناصر بیشتری را در صفحه وب ایجاد کنید و تنظیمات را به صورت محلی در نوعی ROM (EEPROM / NVS / etc) ذخیره کنید.

با تشکر از شما برای خواندن ، و لطفا در صورت تمایل نظرات خود را ارائه دهید!