Булуттан Arduino/ESP Config веб -баракчаңызды жүктөңүз: 7 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:42

Arduino / ESP (ESP8266 / ESP32) долбоорун түзүүдө, сиз бардыгын каттуу коддоп койсоңуз болот. Бирок көбүнчө бир нерсе болуп кетет жана сиз IoT-түзмөгүңүздү IDEге кайра тиркеп саласыз. Же сизде конфигурацияга көбүрөөк адамдар кирди жана сиз ички иштерди түшүнүшүн күтпөстөн, UI менен камсыз кылгыңыз келет.

Бул үйрөткүч UUдун көпчүлүгүн Arduino / ESPтин ордуна булутка кантип коюу керектигин айтып берет. Муну мындай кылуу менен сиз мейкиндикти жана эс тутумду үнөмдөйсүз. Акысыз статикалык веб -баракчаларды камсыз кылган кызмат GitHub Pages сыяктуу "булут" катары өзгөчө ылайыктуу, бирок башка варианттар да иштеши мүмкүн.

Веб -баракчаны ушундай жол менен куруу үчүн колдонуучунун браузери 4 кадамдан өтүүсүн талап кылат:

1. Arduino / ESPтен URL url сураңыз
2. Төмөнкүлөрдү айтып, абдан жөнөкөй веб -баракчаны алыңыз:
3. Булуттан JavaScript файлын сураңыз
4. Чыныгы баракты түзүүчү кодду алыңыз

Бул Инструкция ошондой эле баракча жогоруда көрсөтүлгөн кадамдарга ылайык даяр болгондон кийин Arduino / ESP менен кантип иштөө керектигин түшүндүрөт.

Бул нускамада түзүлгөн кодду GitHubдан да тапса болот.

Алдын ала шарттар

Бул көрсөтмө сиз кээ бир материалдарга жана кээ бир мурунку билимдерге жетүүңүздү болжолдойт:

• An Arduino (тармакка кирүү мүмкүнчүлүгү бар) / ESP
• Жогорудагыларды тиркөө үчүн компьютер
• Wi -Fi Интернетке туташкан
• Arduino IDE орнотулган (ошондой эле ESP32 үчүн)
• Эскизди IoT-түзмөгүңүзгө кантип жүктөөнү билесиз
• Сиз Git & GitHub кантип колдонууну билесиз

1 -кадам: Жөнөкөй вебсервер эскизинен баштоо

Биз мүмкүн болушунча жөнөкөй баштайбыз жана бул жерден өсө берсин.

#кошуу

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer сервери (80); void setup () {// Сериалды баштап, порттун ачылышын күт: Serial.begin (115200); while (! Serial) {; // сериялык порттун туташуусун күтө туруңуз. 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; // жоопту жөнөтүүнү кааласак, true деп коюңуз String urlLine = ""; // эгерде (кардар) // эгер сиз кардар алсаңыз, {Serial.println ("New Client.") суралган URL дарегин кармап туруу үчүн Стринг жасаңыз; // String currentLine = "" сериялык портунан билдирүү басып чыгаруу; // кардар туташып турганда кардардан келген маалыматтарды кармап туруу үчүн Стринг жасаңыз (client.connected ()) // loop = client.read (); // байтты окуңуз, эгерде (c == '\ n') // эгерде байт жаңы саптын символу болсо {// эгерде учурдагы сап бош болсо, сизде эки жаңы сап белгиси бар. // бул кардар HTTP сурамынын аягы, андыктан жооп жөнөтүңүз: if (currentLine.length () == 0) {sendResponse = true; // баары жакшы! тыныгуу; // while циклинен чыгып кетүү} башка // эгер сизде жаңы сап болсо, анда currentLine тазалаңыз: {if (currentLine.indexOf ("GET /")> = 0) // бул URL линиясы болушу керек {urlLine = currentLine; // кийинчерээк колдонуу үчүн сактаңыз} currentLine = ""; // currentLine String баштапкы абалга келтирүү}} else if if (c! = '\ r') // эгер сизде башка нерсеге ээ болсоңуз, анда арабанын кайтаруу белгиси, {currentLine += c; // аны currentLine аягына кошуу}}} if (sendResponse) {Serial.print ("Кардар суралган"); Serial.println (urlLine); // HTTP аталыштары ар дайым жооп коду менен башталат (мис. HTTP/1.1 200 OK) // жана мазмундун түрү, ошондуктан кардар эмнени күтүп жатканын билет, андан кийин бош сап: client.println ("HTTP/1.1 200 OK"); client.println ("Мазмун түрү: текст/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // эгер URL а " /" {// болсо, HTTP жообунун мазмуну баштын артынан чыгат: client.println ("Hello world!"); } // HTTP жообу башка бош сап менен аяктайт: client.println (); } // байланышты жабуу: client.stop (); Serial.println ("Кардар ажыратылды."); }}

Жогорудагы кодду көчүрүп алыңыз же GitHubдагы милдеттенмеден жүктөп алыңыз.

Тармакка дал келүү үчүн SSID менен сырсөздү өзгөртүүнү унутпаңыз.

Бул эскизде белгилүү Arduino колдонулат

жайгашуу()

жана

цикл ()

функциялар. Ичинде

жайгашуу()

IDEге сериялык туташуу функциясы, ошондой эле WiFi. WiFi аталган SSIDге туташкандан кийин IP басылып чыгат жана веб -сервер иштей баштайт. Ар бир кайталоодо

цикл ()

функциясы веб -сервер туташкан кардарлар үчүн текшерилет. Эгерде кардар туташкан болсо, анда суроо окулат жана суралган URL өзгөрмөгө сакталат. Эгерде баары жакшы көрүнсө, серверден кардарга жооп суралган URLдин негизинде аткарылат.

ЭСКЕРТҮҮ! Бул код жөнөкөй болуу үчүн Arduino String классын колдонот. Сап оптимизациясы бул көрсөтмө берүүнүн чегинде эмес. Бул жөнүндө кененирээк маалыматты колдонуу менен Arduino String Manipulation жөнүндө окуңуз.

2 -кадам: Remote JavaScript түзүү

Arduino / ESP келүүчүлөрдүн браузерине бул файлды жүктөөнү айтат. Калганынын баары ушул JavaScript коду менен жасалат.

Бул Нускамада 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 = "" коюу script.onload = function () // кайра чалуу функциясы, jquery файлы жүктөлгөндөн кийин {$ = window.jQuery; // jQuery'ди глобалдык $ өзгөрмөсү init () катары жеткиликтүү кылуу; // init функциясын чакыруу}; документ. getElementsByTagName ('head') [0].appendChild (script); // документке түзүлгөн тегди кошуңуз, бул jQuery lib жүктөлө баштайт}) (); init init () {// jQuery жүктөлүп бүттү, кийинчерээк бул жерге код кошулат …}

Жогорудагы кодду көчүрүңүз же GitHubдагы милдеттенмеден жүктөп алыңыз.

Файлыңыз жеткиликтүү экенин текшериңиз. GitHub барактарында https://username.github.io/repository/your-file.j… өтүңүз (алмаштырыңыз

колдонуучунун аты

,

репозиторий

жана

your-file.js

туура параметрлер үчүн).

3 -кадам: Алыстан JavaScript Файлын Келүүчүлөр Браузерине жүктөө

Эми бизде бардыгы бар, веб -баракчаны алыскы JavaScript файлын жүктөөгө убакыт келди.

Сиз муну эскиздин 88 -линиясын өзгөртүү аркылуу жасай аласыз

client.println ("Салам дүйнө!"); т

client.println ("");

(өзгөртүү

src

Бул сиздин кичинекей html веб -баракчаңыз, ал келгендердин браузерине JavaScript файлын жүктөө менен гана чектелет.

Өзгөртүлгөн файлды GitHubдагы тиешелүү милдеттенмеден да тапса болот.

Түзөтүлгөн эскизди Arduino / ESPке жүктөңүз.

4 -кадам: Баракка жаңы элементтерди кошуу

Бош барак пайдасыз, андыктан веб -баракчага жаңы элемент кошууга убакыт келди. Азырынча бул YouTube видеосу болот. Бул мисалда бул үчүн кээ бир jQuery коддору колдонулат.

Төмөнкү кодду сапка кошуңуз

ичинде()

функция:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({туурасы: '608px', бийиктик: '342px'}). AppendTo ('body');

Бул an түзөт

iframe

элемент, туура коюңуз

src

атрибут жана css аркылуу өлчөмдү орнотуу жана барактын денесине элементти кошуу.

jQuery бизге веб -беттеги элементтерди оңой тандоого жана өзгөртүүгө жардам берет, кээ бир негизги нерселер:

• $ ('дене')

• мурунтан эле бар болгон нерсени тандайт, башка CSS селекторлору да колдонулушу мүмкүн

• $(' ')

  жаңысын жаратат

• элемент (бирок аны документке кошпойт)

• .appendTo ('. main')

• тандалган/түзүлгөн элементти CSS классы бар "негизги" элементке кошот

• Башка элементтерди кошуу функциясы

  .кошуу()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  . кийин ()

  ,

  .ге чейин ()

Эгерде бир нерсе түшүнүксүз болсо, GitHubдагы тиешелүү милдеттенмени карап көрүңүз.

5 -кадам: Интерактивдүү элементтер

Видео кызыктуу, бирок бул үйрөткүчтүн максаты - Arduino / ESP менен өз ара аракеттенүү. Келгиле, видеону Arduino / ESPке жөнөтүүчү баскычка алмаштырып, жоопту күтөбүз.

Бизге керек болот

$('')

баракчага кошуу жана ага окуя угуучуну тиркөө. Окуяны угуучу көрсөтүлгөн окуя болгондо кайра чалуу функциясын чакырат:

$ (''). текст ('a button'). on ('click', function ()

{// код бул жерде баскыч басылганда аткарылат}). appendTo ('body');

Жана кайра чалуу функциясына AJAX өтүнүчүн кошуңуз:

$.get ('/ajax', функция (маалыматтар)

{// бул жердеги код AJAX суранычы аяктаганда аткарылат});

Өтүнүч аяктагандан кийин, кайтарылган маалыматтар баракчага кошулат:

$('

').text (data).appendTo (' body ');

Жыйынтыктап айтканда, жогорудагы код баскычты түзөт, аны веб -баракчага кошот, баскыч басылганда суроо жөнөтүлөт жана жооп веб -баракчага да кошулат.

Эгерде сиз биринчи жолу чалууларды колдонуп жатсаңыз, анда GitHubдагы милдеттенмени текшерип, бардыгы кантип салынганын көргүңүз келиши мүмкүн.

6 -кадам: Интерактивдүү элементке жооп бериңиз

Албетте, AJAX өтүнүчү жоопту талап кылат.

Туура жоопту түзүү үчүн

/ajax

url биз аны кошушубуз керек

башка болсо ()

if билдирүүсүнүн жабылыш кронштейнинен кийин

/

url

башка болсо (urlLine.indexOf ("Get /ajax")> = 0)

{client.print ("Салам!"); }

GitHub боюнча милдеттенмеде мен браузерге ар бир суроо уникалдуу экенин көрсөтүү үчүн эсептегич коштум.

7 -кадам: Жыйынтык

Бул көрсөтмө берүүнүн аягы. Сизде азыр кичинекей веб -баракчаны тейлеген Arduino / ESP бар, ал келуучунун браузерине булуттан JavaScript файлын жүктөөнү айтат. JavaScript жүктөлгөндөн кийин, ал колдонуучунун Arduino / ESP менен баарлашуусу үчүн UI менен камсыз кылган веб -баракчанын калган мазмунун түзөт.

Эми веб -баракчаңызда көбүрөөк элементтерди түзүү жана орнотууларды кандайдыр бир ROMдо (EEPROM / NVS / ж.б.) сактоо сиздин фантазияңызга жараша.

Окуганыңыз үчүн рахмат, жана кандайдыр бир пикир калтыруудан тартынбаңыз!