کنترل آردوینو با HTML/Javascript به روش آسان: 8 مرحله

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

این آموزش به شما نشان می دهد که چگونه می توانید arduino را با تماس ajax از adafruit Huzzah با استفاده از توابع جاوا اسکریپت کنترل کنید. اساساً می توانید از جاوا اسکریپت در صفحه html استفاده کنید که به شما این امکان را می دهد تا به راحتی رابط های html را با توابع جاوا اسکریپت ساده که از تماس تلفنی ajax استفاده می کنند ، بنویسید. به ESP8266 اجازه می دهد تا با آردوینو ارتباط برقرار کند. بنابراین ، همه پین ها را می توان از یک تابع جاوا اسکریپت تنظیم کرد. به همین ترتیب ، ما می توانیم مقدار هر پین را با استفاده از یک تابع javascript بخوانیم. امیدوارم با این کار بتوانید کنترل آردوینو را از طریق سند html راحت تر کنید. من متوجه شدم که افراد زیادی هستند که می توانند html بنویسند. اکثر آنها نمی خواهند برای ساختن برنامه تلفن همراه با جاوا یا xcode یا چارچوب دیگر زحمت بکشند. این کار را برای افراد بسیار آسان می کند زیرا تنها کاری که باید انجام دهند استفاده از یک تابع جاوا اسکریپت برای تنظیم و خواندن مقادیر از پین ها است. به عنوان مثال ، نوشتن خیلی راحت تر نیست

روشن کن

به منظور روشن کردن یک دکمه. زیبایی این است که هیچ برنامه نویسی arduino دیگری به جز اعلام pinMode (12 ، INPUT) درگیر نیست. در عملکرد تنظیمات شما تا زمانی که پین اعلام شده باشد ، جاوا اسکریپت می تواند برای سایر موارد استفاده شود.

document.onload = {

GetJSON ('A0' ، 1 'return_json')

}

این تنها کاری است که باید انجام دهید تا مقدار پین آنالوگ 0 را بدست آورید و نتیجه را به div برگردانید. بنابراین این باید راهی آسان برای افراد باشد تا بتوانند صفحات html ایجاد کنند که آردوینو را کنترل می کند. همچنین یک رابط ایجاد کنید تا پین های آردوینو با جاوا اسکریپت تنظیم و خوانده شوند.

مرحله 1: آنچه شما نیاز دارید

من این پروژه را برای کاربرانی طراحی کردم که می خواهند arduino خود را با یک صفحه html در ESP8266 کنترل کنند. هدف این پروژه ایجاد یک روش ساده برای تنظیم مقادیر پین ها در آردوینو با عملکرد جاوا اسکریپت است. برای examplate onclick = "SetPin (12 ، 1 ، 0)" پین 12 را در آردوینو شما روی High قرار می دهد.

برای این آموزش به موارد زیر نیاز دارید تا بتوانید دقیقاً آن را دنبال کنید. با این حال ، من تصور می کنم که باید روی اکثر ترکیبات arduino و ESP8266 کار کند. با این حال ، برای پیگیری دقیق آنچه من در اینجا دارم به اجزای زیر نیاز دارید.

Arduino Uno - باید با هر گونه سازگار با arduino که دارای سریال Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 تستر آنالوگ کدورت کم توان LED است کار کند - هر سنسور آنالوگ که خروجی آنالوگ را فراهم می کند ، Wire Wifi Router Cell Phone با مرورگر موبایل Arduino Libraries انجام می دهد.

مرحله 2: آماده سازی شناسه آردوینو

این پروژه به کتابخانه های آردوینو جدید و پیکربندی و به خاطر زمان نیاز دارد. من از هر صفحه ای اسکرین شات نمی گذارم و فقط آنچه را که برای پیکربندی و اجرای آن نیاز دارید ، اجرا می کنم. من سعی کردم آن را تا حد ممکن برای کاربر آسان کنم.

این کد از تعدادی کتابخانه برای کار کردن استفاده می کند. در ابتدا ما بر روی تنظیم arduino برای ESP8266 که من از Adafruit Huzzah در این مثال استفاده می کنم تمرکز می کنیم ، زیرا من محصولات adafruit را مطمئن ترین و بهترین پشتیبانی را می دانم. تا زمانی که سعی نکنید از سرور Adafruit Discord پشتیبانی دریافت کنید. شانس بسیار بهتری برای کمک در انجمن های پشتیبانی خواهید داشت.

به هر حال ، من از کتابخانه های زیر در ESP8266 استفاده می کنم

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT این یک آموزش برای بارگیری و نصب کتابخانه ها نیست ، اما این کتابخانه هایی هستند که در HUZZAH استفاده می شوند. بنابراین لطفا آنها را پیدا کرده و نصب کنید. شما همچنین باید تعاریف هیئت مدیره را برای HUZZAH نصب کنید ، بنابراین اگر به FILE> Preferences بروید در کادر که آدرس های اضافی مدیران مدیران آدرس را اضافه می کند لطفاً موارد زیر را اضافه کنید https://arduino.esp8266.com/stable/package_esp8266c… اگر قبلاً دارید چیزی در این زمینه ، از این که مطمئن شوید یک کاما برای افزودن آدرس url اضافی در آنجا اضافه کرده اید. روی ok کلیک کنید کلیک کنید

ابزارها> هیئت مدیره> مدیر تابلوها از جستجوی ESP8266 نسبت به نصب ESP8266 توسط ESP8266 Community.

عالی حالا اجازه دهید مطمئن شویم که همه چیز را برای کارکردن کد آردوینو نیاز داریم. یکی arduino در کنار arduino فقط از 2 کتابخانه برای این آموزش استفاده می کند.

SoftwareSerialArduinoJSON آنچه که قبلاً باید داشته باشید.

مرحله 3: آماده سازی ESP8266

اکنون ما قصد داریم کد را روی ESP8266 (Adafruit HUZZAH) بگذاریم و آن را برای اتصال به آردوینو آماده کنیم. کد HUZZAH را از حالت فشرده خارج کرده و طرح را باز کنید. در خطوط 11 و 12 ، ssid و رمز عبور را به اتصال WIFI خود در شبکه محلی خود تغییر دهید. متوجه خواهید شد که 2 فایل وجود دارد که فایل sketch و فایل index.h وجود دارد. فایل index.h جایی است که html در آن ذخیره می شود و در تلفن شما نمایش داده می شود.

بعد از اینکه SSID و گذرواژه صحیح را روی وای فای خود تنظیم کردید ، می توانید کد را کامپایل کرده و روی ESP8266 بارگذاری کنید. در HUZZAH باید دکمه را با برچسب GPIO0 نگه دارید و سپس روی دکمه rest کلیک کنید تا دکمه GPIO0 را رها کرده و تراشه را در حالت بوت لودر قرار دهید. اگر تراشه با موفقیت در حالت بوت لودر قرار گرفته باشد ، چراغ قرمز روشن می شود که نشان می دهد تراشه در حالت بارگذاری بوت است.

برای اتصال به ESP8266 به کابل سریال یا آداپتور USB to Serial یا تراشه FDTI نیاز دارید. در این مورد من از کابل adafruit استفاده می کنم همانطور که در دستورالعمل ذکر شده است. با این حال ، می توانید با استفاده از TTL روی پین های Tx و Rx ، از چندین طریق به تراشه متصل شوید. که امیدوارم افرادی که این را مشاهده می کنند بدانند چگونه به تراشه متصل شوند تا کد روی آن بارگذاری شود. به هر حال تراشه را با کد موجود در فایل فشرده که به این مرحله ضمیمه شده است فلش کنید.

مرحله 4: آماده سازی آردوینو

برای بارگذاری کد در arduino ، تعریف برد خود را به Arduino/Genuino Uno تغییر دهید. سپس فایل فشرده شده به این مرحله را از حالت فشرده خارج کنید. از آپلود آن در ardunio. بسیار ساده است ، همه کارهای سخت قبلاً برای شما انجام شده است. من قبلاً مراحل خطا را به صورت آزمایشی طی کرده ام ، بنابراین تنها کاری که باید انجام دهید این است که کد را بارگذاری کنید.

مرحله 5: سیم کشی همه چیز با هم

خوب ، بنابراین برای سیم کشی ، من تصویری از آنچه در اینجا دارم در بالا دارم.

Tx در Huzzah را به پین 2 در arduino وصل کنید. Rx را در Huzzah به پین 3 در arduino وصل کنید. من یک سوکت سریال دیگر در پین 2 و 3 در arduino ایجاد کردم تا کنسول سریال پیش فرض آزاد شود.

Pin V+ و En را از طریق آردوینو به 5 ولت وصل کنید. - adafruit Huzzah دارای تنظیم کننده ولتاژ 3.3 ولت است بنابراین اتصال این پین ها به این شکل ممکن است با همه ماژول های ESP8266 کار نکند. ممکن است لازم باشد تنظیم کننده ولتاژ خود را سیم کشی کنید. اگر می خواهید کار را به راحتی انجام دهید ، از Huzzah استفاده می کنم. GND را به GND آردوینو وصل کنید

در پین های 12 ، 11 ، 9 ، 8 روی سیم آردوینو در LED های شما ، من از LED های کم مصرف استفاده کردم زیرا آنهایی که جریان بیش از حد را جذب می کنند ، ممکن است به دلیل ساده نگه داشتن این آزمایش ، قدرت زیادی را بکشند.

نسبت به پین 0 آنالوگ A0 در آردوینو ، خط خروجی تستر Turpitity را وصل کرده ام. با این حال ، می توانید خروجی هر سنسوری را که به شما قرائت آنالوگ می کند ، متصل کنید. این تنها کاری است که شما باید انجام دهید تا بتوانید این موضوع را تقویت کنید.

مرحله 6: دسترسی به صفحه وب

اکنون که آردوینو را وصل کرده اید و همه چیز را روی برد خود بارگذاری کرده اید ، باید بتوانید HTML را در تلفن همراه خود مشاهده کنید. حالا من می خواهم شما به همان روتر wifi متصل شوید که SSID و رمز عبور را در کد در Huzzah تعیین کرده اید. سپس باید بفهمید چه IP آدرس روتر شما به دستگاه شما اختصاص داده است. معمولاً ، اگر به پیکربندی روترهای خود وارد می شوید ، باید یک لیست مشتری وجود داشته باشد. این آدرس IP همه دستگاه های متصل به اتصال Wifi شما را نشان می دهد. با این حال ، اگر نمی توانید این آدرس IP را پیدا کنید ، می توانید آن را از آردوینو جدا کرده و دوباره با کابل سریال اجرا کنید. اگر کنسول سریال را روی دستگاه باز کنید ، آدرس IP دستگاه را در کنسول سریال چاپ می کند ، در صورتی که راه دیگری را پیدا نکردید. به هر حال هنگامی که با تلفن همراه خود به همان شبکه Wifi متصل شدید. سپس مرورگر وب تلفن همراه خود را به آدرس IP Huzzah نشان دهید. که احتمالاً چیزی شبیه به این به نظر می رسد. https://192.168.0.107 یا چیزی بسیار مشابه. در آنجا یک صفحه اصلی قرار دادم که به شما امکان می دهد 4 Led را روشن و خاموش کنید و همچنین مقدار سنسور آنالوگ را بخوانید.

مرحله 7: استفاده از Javascipt

در فایلی به نام index.h در طرح ESP8266Code باید به عنوان یک برگه جداگانه در ویرایشگر arduino ظاهر شود. شما می توانید نمونه اولیه ای را که من اینجا ایجاد کرده اید مشاهده کنید. اساساً روش کار این است.

SetPin (12 ، 1 ، 0) ؛ SetPin ({شماره پین} ، {ارزش 1 بالا 0 پایین} ، {IsAnalog 1 بله 0 خیر})

با این کار مقدار پین دیجیتال 12 بر روی بالا تنظیم می شود

SetPin (4 ، 0 ، 0) ؛

با این کار مقدار پین دیجیتال 4 روی کم تنظیم می شود

SetPin (A2 ، 439 ، 1) با این کار مقدار Analog Pin 2 را روی 439 تنظیم می کند

به همین ترتیب ، تابع GetJSON مقدار درخواست شده را از یک پین باز می گرداند و آن را در یک html که با شناسه div مشخص شده قرار می گیرد ، قرار می دهد.

GetJSON ('A0' ، 1 ، 'resp_i') GetJSON ({شماره پین} ، {IsAnalog 1 بله 0 خیر} ، {شناسه عنصر HTML برای بازگشت نتیجه})

این یک درخواست برای arduino ارسال می کند که از آن مقدار پین آنالوگ 0 را می خواهد و نتیجه را با ID resp_iGetJSON به Div (12 ، 0 ، 'mydiv') برگرداند. این امر از arduino می خواهد که مقدار پین دیجیتال 0 را بدست آورد و نتیجه را به یک عنصر html با و Id of mydiv برگرداند.

مرحله 8: پشتیبانی

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

اگر نظری دارید لطفاً از من بپرسید تا بتوانم بهترین پاسخ را بدهم. من می خواهم عملکرد این برنامه را بیشتر گسترش دهم ، اما زمان و پولم تمام شد. با این حال ، من روی پیاده سازی قوی تر این کار می کنم ، که فایل ها را به جای ESP8266 روی یک وب سرور معمولی ذخیره می کند.

ممنون که وقت گذاشتید و کد من رو دیدید.

جان اندرسون ایمیل من

Vermont Internet Design LLC

www.vermontinternetdesign.com