Лесното управление на вашия Arduino с HTML/Javascript: 8 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Този урок ви показва как да контролирате arduino с ajax обратно повикване от adafruit Huzzah, използвайки само javascript функции. По принцип можете да използвате javascript в html страницата, което ще ви позволи лесно да пишете html интерфейси с прости функции на javascript, които използват обратна връзка с ajax. За да позволите на ESP8266 да комуникира с arduino. Следователно всички щифтове могат да бъдат зададени от функция JavaScript. По същия начин можем също да прочетем стойността от всеки щифт, използвайки функция JavaScript. Надявам се, че това помага да се улесни управлението на arduino от html документ. Реших, че има много хора, които могат да пишат html. Повечето от тях не искат да се притесняват, опитвайки се да направят приложение за мобилен телефон с java или xcode или друга рамка. Това ще направи много лесно за хората, защото всичко, което трябва да направят, е да използват функция JavaScript, за да задават и четат стойности от щифтове. Например, не е ли много по -лесно да се пише

Включи

За да включите бутон. Красотата е, че няма друго arduino програмиране освен деклариране на pinMode (12, INPUT); Във вашата функция за настройка. Докато пинът е деклариран, javascript може да се използва за всичко останало.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Това е всичко, което трябва да направите, за да получите стойността на аналоговия щифт 0 и да върнете резултата в div. Така че това трябва да е лесен начин хората да могат да създават html страници, които контролират arduino. Както и да създадете интерфейс, така че щифтовете на arduino да могат да се задават и четат с javascript.

Стъпка 1: Какво ще ви трябва

Изградих този проект за потребители, които искат да контролират своето arduino с html страница на ESP8266. Целта на този проект е да създаде прост метод за задаване на стойностите на щифтовете на вашия arduino с функция JavaScript. За пример onclick = "SetPin (12, 1, 0)" ще зададе Pin 12 на вашия arduino на High.

За този урок ще ви трябват следните елементи, за да следвате точно. Предполагам обаче, че трябва да работи на повечето комбинации от arduino и ESP8266. Въпреки това, за да следвате точно това, което имам тук, ще ви трябват следните компоненти.

Arduino Uno - Трябва да работи с всяка съвместима с arduino, която има сериен Rx TxAdafruit Huzzah Breakout Board USB към сериен кабел 4 Аналогов тестер за изсветляване на LED с ниска мощност - всеки аналогов сензор, който осигурява аналогов изход, ще направи Wire Wifi Router мобилен телефон с библиотеки Arduino за мобилен браузър.

Стъпка 2: Подготовка на Arduino ID

Този проект изисква нови библиотеки на arduino и известна конфигурация, за сметка на времето. Няма да поставям снимка на всеки екран и просто ще прегледам това, което ще ви е необходимо, за да конфигурирате това и да го стартирате. Опитах се да направя възможно най -лесно за потребителя.

Кодът използва няколко библиотеки, за да работи. Първо ще се съсредоточим върху настройването на arduino за ESP8266. Използвам Adafruit Huzzah в този пример, защото намирам, че продуктите от adafruit са най -надеждните и имат най -добрата поддръжка. Стига да не се опитвате да получите поддръжка от сървъра на Adafruit Discord. Ще имате много по -голям късмет да получите помощ във форумите за поддръжка.

Както и да е, използвам следните библиотеки на ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Това не е урок за това как да изтегляте и инсталирате библиотеки, но това са библиотеките, използвани на HUZZAH. Така че, моля, намерете ги и ги инсталирайте. Също така ще трябва да инсталирате дефинициите на платката за HUZZAH, така че ако отидете на ФАЙЛ> Предпочитания В полето, което казва Допълнителни URL адреси на мениджъра на табла, моля, добавете следното: //arduino.esp8266.com/stable/package_esp8266c… ако вече имате нещо в това поле, не забравяйте да добавите запетая, за да добавите допълнителен URL адрес на дъската. Щракнете добре, че отидете

Инструменти> Табло> Мениджър на табла След това потърсете ESP8266, отколкото инсталирайте ESP8266 от общността ESP8266.

Чудесно сега, нека се уверим, че имаме всичко необходимо, за да работи кодът arduino. От едната страна arduino самият arduino използва само 2 библиотеки за този урок.

СофтуерSerialArduinoJSONКоето вече трябва да имате.

Стъпка 3: Подготовка на ESP8266

Сега ще поставим кода върху ESP8266 (Adafruit HUZZAH) и ще го подготвим за свързване към Arduino. Разархивирайте кода за HUZZAH и отворете скицата. На редове 11 и 12 променете ssid и паролата на тази на вашата WIFI връзка във вашата локална мрежа. Ще забележите, че има 2 файла, файлът на скицата и файлът index.h. Файлът index.h е мястото, където се съхранява html, който ще се показва в телефона ви.

След като сте задали правилния SSID и парола за вашия wifi, можете да компилирате кода и да го заредите на вашия ESP8266. На HUZZAH трябва да задържите бутона с етикет GPIO0, след това да натиснете бутона за почивка, след което да пуснете бутона GPIO0, за да поставите чипа в режим на зареждане. Ако чипът е успешно поставен в режим на зареждащо устройство, ще светне червена лампичка, показваща, че чипът е в режим на зареждащо устройство.

За да се свържете с ESP8266 ще ви е необходим сериен кабел или USB към сериен адаптер или FDTI чип. В този случай използвам кабела на adafruit, както е посочено в инструкциите. Можете обаче да се свържете с чипа по няколко начина, като използвате TTL на пиновете Tx и Rx. Надявам се, че хората, които гледат това, знаят как да се свържат с чипа, за да заредят кода върху него. Както и да е, продължете и флашнете чипа с кода в zip файла, който е прикачен към тази стъпка.

Стъпка 4: Подготовка на Arduino

За да заредите кода в arduino, променете дефиницията на дъската си на Arduino/Genuino Uno. След това разархивирайте файла, който е прикачен към тази стъпка. След това го качете на ardunio. Наистина много просто, цялата упорита работа вече е свършена за вас. Вече съм преминал през процес на пробна грешка, така че всичко, което трябва да направите, е да качите кода.

Стъпка 5: Свържете всичко заедно

Добре, така че за окабеляването имам снимка по -горе на това, което имам тук.

Свържете Tx на Huzzah към Pin 2 на arduino, Свържете Rx на Huzzah към Pin 3 на arduino. Създадох друг сериен гнездо на пинове 2 и 3 на arduino, за да освободя серийната конзола по подразбиране.

Свържете Pin V+ и En към 5v от arduino. - Адафрутът Huzzah има вграден регулатор на напрежение 3.3v, така че включването на тези щифтове по този начин може да не работи с всички модули ESP8266. Може да се наложи да свържете свой собствен регулатор на напрежение. Препоръчвам да използвате Huzzah, ако просто искате нещата да работят лесно. Свържете GND към GND на arduino

На щифтове 12, 11, 9, 8 на проводника arduino във вашите светодиоди използвах светодиоди с ниска мощност, защото тези, които привличат твърде много ток, могат да извлекат твърде много енергия, за да поддържат този експеримент прост.

След това на A0 аналогов пин 0 на arduino включих изходната линия на моя Turpitity тестер. Можете обаче да включите изхода на почти всеки сензор, който ще ви даде аналогово отчитане. Това е всичко, което трябва да направите, за да свържете това.

Стъпка 6: Достъп до уеб страницата

Сега, когато свързвате arduino и имате всичко заредено на дъските си, трябва да можете да видите html на мобилния си телефон. Сега искам да се свържете със същия wifi рутер, за който сте задали SSID и парола в кода на Huzzah. След това трябва да разберете какъв IP адрес е задал вашият рутер на вашето устройство. Обикновено, ако влезете в конфигурацията на рутерите, трябва да има списък с клиенти. Това показва IP адресите на всички устройства, свързани към вашата Wifi връзка. Ако обаче не можете да намерите този IP адрес, можете да го изключите от arduino и да го стартирате отново със серийния кабел. Ако отворите серийната конзола на устройството, тя ще отпечата IP адреса на устройството в серийната конзола, в случай че не можете да го намерите по друг начин. Както и да е, след като сте свързани към същата Wifi мрежа с мобилния си телефон. След това насочете мобилния си уеб браузър към ip адреса на Huzzah. Което вероятно изглежда нещо подобно на това. https://192.168.0.107 или нещо много подобно. Там поставям основна страница, която ще ви позволи да включите и изключите 4 -те светодиода, както и да прочетете стойността на аналоговия сензор.

Стъпка 7: Използване на Javascipt

Във файла, наречен index.h в скицата на ESP8266Code, той трябва да се появи като отделен раздел в редактора на arduino. Можете да видите основния пример, който направих тук. По принцип начинът на работа е следният.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

Това ще настрои стойността на цифровия щифт 12 на висока

SetPin (4, 0, 0);

Това ще настрои стойността на цифровия щифт 4 на ниска

SetPin (A2, 439, 1) Това ще зададе стойността на Analog Pin 2 на 439

По същия начин функцията GetJSON ще върне исканата стойност от щифт и ще я постави в html, избран с посочения идентификатор на div.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element за връщане на резултата})

Това ще изпрати заявка до arduino с искане за стойността на аналоговия пин 0 и за връщане на резултата в Div с ID resp_iGetJSON (12, 0, 'mydiv'); Това ще поиска от arduino да получи стойността на цифров пин 0 и да върне резултата в html елемент с и Id на mydiv

Стъпка 8: Поддръжка

Надявам се, че моят сценарий помага на тези от вас, които искат да го използват. Използвах един много основен html пример тук с надеждата, че други хора ще проучат всички негови възможности, които аз не мога. Това обаче трябва да демонстрира как ajax може да се използва за управление на arduino без зареждане на html страници и неща от такова естество.

Ако имате някакви коментари, не се колебайте да ме попитате, ще направя всичко възможно да отговоря. Бих искал да разширя функционалността на това още, но ми свършиха времето и парите. Работя обаче върху по -стабилна реализация на това, която съхранява файловете на обикновен уеб сървър, а не на ESP8266.

Благодаря ви, че отделихте време да видите моя код.

Джон Андерсън Изпратете ми имейл

Върмонт Интернет дизайн LLC

www.vermontinternetdesign.com