ЕСП32 веб сервер који користи Ардуино ИДЕ

Esp32 Veb Server Koji Koristi Arduino Ide



ЕСП32 је плоча микроконтролера која се може повезати са више уређаја користећи своје ГПИО пинове. Има процесор са два језгра са уграђеним Ви-Фи и Блуетоотх интерфејсом. Обе ове карактеристике чине ЕСП32 одговарајућом плочом за дизајнирање ИоТ пројеката. Једна од главних карактеристика ЕСП32 плоче је њена способност да се повеже са постојећом приступном тачком. И не само то, већ може да креира и своју приступну тачку, тако да други уређаји могу да се повежу са њом.

У овом чланку о ЕСП32 истражићемо како можемо повезати ЕСП32 плочу са приступном тачком и дизајнирати њен веб сервер. Користећи тај веб сервер, ми ћемо контролисати ЛЕД диоде и АЦ уређаје уз помоћ релејног модула.

Садржај:

1. ЕСП32 веб сервер

Веб сервер има посебан програм који може да обрађује и шаље веб странице веб клијентима. Да бисмо отворили веб локацију, користимо веб претраживач. Овај веб претраживач се такође назива веб клијент. Веб локација коју желите да видите се чува на другом рачунару који се зове веб сервер.







Да би разговарали једни са другима, веб сервер и веб клијент користе заједнички језик који се зове ХТТП. Овако то функционише: веб клијент тражи од веб сервера веб страницу користећи ХТТП захтев. Веб сервер шаље назад тражену веб страницу. Ако веб страница није присутна, видећете поруку о грешци.



У ЕСП32 можемо дизајнирати веб сервер, јер ЕСП32 не само да може да се повеже са другим уређајима преко мреже, већ може да креира и свој веб сервер и да одговори на примљене захтеве. Ово је све могуће јер ЕСП32 може да ради у три различита режима:



  • Станица
  • Приступна тачка
  • И станица и приступна тачка

Можете погледати овај чланак да бисте добили увид у сва три режима ЕСП32:





Како поставити ЕСП32 приступну тачку (АП) користећи Ардуино ИДЕ

2. Како да креирате ЕСП32 веб сервер користећи Ардуино ИДЕ

Да бисте креирали ЕСП32 веб сервер користећи Ардуино ИДЕ, можете повезати ЕСП32 са приступном тачком и генерисати ИП адресу за веб сервер. Можете да примените ХТМЛ и ЦСС да дизајнирате интерфејс вашег сервера.



Када схватите како ЕСП32 приступна тачка ради, можете лако дизајнирати ЕСП32 веб сервер користећи Ардуино ИДЕ код. ЕСП32 код веб сервера користи ЕСП32 Ви-Фи библиотеку. Ово нам олакшава рад, јер ова библиотека садржи све важне функције потребне за повезивање ЕСП32 са приступном тачком.

Хајде да дизајнирамо ЕСП32 веб сервер користећи Ардуино ИДЕ код.

3. ЕСП32 код веб сервера

ЕСП32 код веб сервера укључује ЕСП32 везу са приступном тачком и добијање ИП адресе за сервер. Када добијете ИП адресу, морате се повезати на исту мрежу да бисте приступили ЕСП32 веб серверу. Одатле можете контролисати ЛЕД диоде и друге уређаје.

Отворите Ардуино ИДЕ и повежите своју ЕСП32 плочу са њом:

Инсталирање ЕСП32 плоче у Ардуино ИДЕ

Када је ЕСП32 плоча повезана, учитајте следећи код на своју плочу.

/***************

Линукхинт.цом
ЕСП32 веб сервер за контролу ЛЕД лампица

*************/
// Увезите библиотеку за Ви-Фи веза
#инцлуде <ВиФи.х>
// Унесите своје Ви-Фи име и лозинку
цонст цхар * ссид = 'ЕСП32' ;
цонст цхар * лозинка = '123456789' ;
// Изаберите број порта за веб сервера
ВиФиСервер сервер ( 80 ) ;
// Направите променљиву за чување веб захтева
Стринг хеадер;
// Креирајте променљиве за чување статуса излаза
Стринг оутпут26Стате = 'ВАН' ;
Стринг оутпут27Стате = 'ВАН' ;
// Доделите излазне пинове променљивим
цонст инт оутпут26 = 26 ;
цонст инт оутпут27 = 27 ;
унсигнед лонг цуррентТиме = миллис ( ) ;
унсигнед лонг превиоусТиме = 0 ;
// Изабрати време лимит за веб захтев ин милисекунди
цонст лонг тимеоутТиме = 2000 ;
празнина подешавања ( ) {
Сериал.бегин ( 115200 ) ;
// Поставите излазне пинове као излази
пинМоде ( оутпут26, ОУТПУТ ) ;
пинМоде ( оутпут27, ОУТПУТ ) ;
// Искључите излазе
дигиталВрите ( оутпут26, ЛОВ ) ;
дигиталВрите ( оутпут27, ЛОВ ) ;
// Повежите се на Ви-Фи мрежу
Сериал.принт ( 'Повезивање на ' ) ;
Сериал.принтлн ( ссид ) ;
ВиФи.бегин ( ссид, лозинка ) ;
// Чекати све док веза је успостављена
док ( ВиФи.статус ( ) ! = ВЛ_ЦОННЕЦТЕД ) {
кашњење ( 500 ) ;
Сериал.принт ( '.' ) ;
}
Сериал.принтлн ( '' ) ;
Сериал.принтлн ( „ВиФи повезан.“ ) ;
Сериал.принтлн ( 'ИП адреса: ' ) ;
Сериал.принтлн ( ВиФи.лоцалИП ( ) ) ;
сервер.бегин ( ) ;
}

празнина петља ( ) {
ВиФиЦлиент клијент = сервер.доступан ( ) ; // Проверавати за нове клијенте
ако ( клијент ) { // Ако је клијент повезан,
тренутно време = милис ( ) ;
претходно време = тренутно време;
Сериал.принтлн ( „Нови клијент“. ) ; // Обавестите серијски порт
Стринг цуррентЛине = '' ; // Направите стринг за чување података о клијенту
док ( клијент.повезан ( ) && цуррентТиме - претходно време = 0 ) {
Сериал.принтлн ( „ГПИО 26 укључен“ ) ;
оутпут26Стате = 'НА' ;
дигиталВрите ( оутпут26, ХИГХ ) ;
} друго ако ( хеадер.индекОф ( „ГЕТ /26/офф“ ) > = 0 ) {
Сериал.принтлн ( „ГПИО 26 офф“ ) ;
оутпут26Стате = 'ВАН' ;
дигиталВрите ( оутпут26, ЛОВ ) ;
} друго ако ( хеадер.индекОф ( „ГЕТ /27/он“ ) > = 0 ) {
Сериал.принтлн ( „ГПИО 27 укључен“ ) ;
оутпут27Стате = 'НА' ;
дигиталВрите ( оутпут27, ХИГХ ) ;
} друго ако ( хеадер.индекОф ( „ГЕТ /27/офф“ ) > = 0 ) {
Сериал.принтлн ( „ГПИО 27 офф“ ) ;
оутпут27Стате = 'ВАН' ;
дигиталВрите ( оутпут27, ЛОВ ) ;
}

цлиент.принтлн ( '<хтмл>' ) ;
цлиент.принтлн ( '<хеад><мета наме=' виевпорт ' цонтент=' ширина =девице-видтх, инитиал-сцале= 1 '>' ) ;
цлиент.принтлн ( '<линк рел=' икона ' хреф=' подаци:, '>' ) ;
// ЦСС за стилизовање дугмади
цлиент.принтлн ( '<стиле>хтмл { фонт-фамили: Хелветица; дисплаи: инлине-блоцк; маргин: 0пк ауто; тект-алигн: центер;}' ) ;
цлиент.принтлн ( 'тело { позадина: линеарни градијент (надесно, #0ф0ц29, #302б63, #24243е); }' ) ;
// Неонско плава дугмад са ефектом сјаја
цлиент.принтлн ( '.буттон { бацкгроунд-цолор: #08ф; бордер: ноне; цолор: вхите; паддинг: 16пк 40пк;' ) ;
цлиент.принтлн ( 'тект-децоратион: ноне; фонт-сизе: 30пк; маргин: 2пк; цурсор: поинтер; бок-схадов: 0 0 20пк #08ф;}' ) ;
// Тамно сива дугмад са ефектом сјаја
цлиент.принтлн ( '.буттон2 {бацкгроунд-цолор: #333; бок-схадов: 0 0 20пк #333;}' ) ;
// Транзициони ефекат за дугмад
цлиент.принтлн ( '.буттон, .буттон2 {прелаз: све 0,3с лакоће уласка;}' ) ;
// Заобљена дугмад
цлиент.принтлн ( '.буттон, .буттон2 {гранични радијус: 50%;}' ) ;
// Наслов веб странице
цлиент.принтлн ( '<боди><х1 стиле=' бела боја '>Линукхинт ЕСП32 веб сервер' ) ;
// Наслов веб странице
цлиент.принтлн ( '<х1 стиле=' бела боја; сенка текста: 0 0 10пк #08ф;'>ЕСП32 веб сервер');
// Прикажите стање и дугмад за ГПИО 26
цлиент.принтлн ( '<п стиле=' бела боја; '>ГПИО 26 - Држава ' + оутпут26Стате + '' ) ;
// Прикажите дугме ОН ако стање је ИСКЉУЧЕНО
ако ( оутпут26Стате == 'ВАН' ) {
цлиент.принтлн ( '<п><а хреф=' / 26 / на '><буттон цласс=' дугме „>УКЉУЧЕНО ) ;
} друго { // Прикажите дугме ОФФ ако стање је УКЉУЧЕНО
цлиент.принтлн ( '<п><а хреф=' / 26 / ван '><буттон цласс=' дугме дугме2 '>ИСКЉУЧЕНО' ) ;
}
// Прикажите стање и дугмад за ГПИО 27
цлиент.принтлн ( '<п стиле=' бела боја; '>ГПИО 27 - Држава ' + оутпут27Стате + '' ) ;
// Прикажите дугме ОН ако стање је ИСКЉУЧЕНО
ако ( оутпут27Стате == 'ВАН' ) {
цлиент.принтлн ( '<п><а хреф=' / 27 / на '><буттон цласс=' дугме „>УКЉУЧЕНО ) ;
} друго { // Прикажите дугме ОФФ ако стање је УКЉУЧЕНО
цлиент.принтлн ( '<п><а хреф=' / 27 / ван '><буттон цласс=' дугме дугме2 '>ИСКЉУЧЕНО' ) ;
}
цлиент.принтлн ( '' ) ;
// Завршите ХТТП одговор празним редом
цлиент.принтлн ( ) ;
// Изађите из док петља
пауза ;
} друго { // Обришите тренутну линију ако то је нови ред
цуррентЛине = '';
}
} елсе иф (ц != '
') { // Додајте бајт у тренутну линију ако је' није кочија повратак
цуррентЛине += ц;
}
}
}
// Ресетујте заглавље
заглавље = '' ;
// Затворите клијентску везу
клијент.стоп ( ) ;
Сериал.принтлн ( „Клијент је прекинут.“ ) ;
Сериал.принтлн ( '' ) ;
}
}

Објашњење кода

ЕСП32 код веб сервера је започео подешавањем Вифи везе. Прво, укључује библиотеку ВиФи.х. Затим, овај код захтева да унесете ССИД и лозинку за мрежу са којом желите да повежете своју ЕСП32 плочу. Након тога смо креирали променљиве за чување статуса излаза, а излазни пинови су додељени овим варијаблама. Овде користимо ГПИО пинове 26 и 27, али можете користити и било које друге ГПИО пинове за повезивање уређаја или ЛЕД диода.

У другом делу кода се покреће серијска комуникација. Ово ће нам помоћи да проверимо статус ЕСП32 плоче и периферних уређаја повезаних на њу. Заједно са овим, дефинисали смо серијски излаз за различита стања две повезане ЛЕД диоде. Можете повезати ЛЕД светла и дефинисати њихов статус као ОН и ОФФ. Овај део кода ће такође одштампати ИП адресу ЕСП32 веб сервера након учитавања кода. Део кода укључујући ИП адресу биће одштампан само једном, пошто се налази унутар функције Сетуп().

У трећем делу, или унутар функције Лооп(), дефинисали смо код за руковање веб захтевима и контролу ГПИО пинова. Овај део кода ће се више пута извршавати као што је у функцији лооп(). Проверава нове клијенте и чита податке клијената. Након читања, анализира ХТТП захтеве и шаље одговарајући одговор, као што је укључивање или искључивање ЛЕД-а. Овај део кода такође садржи информације о основном стилу ЕСП32 веб сервера. Интерфејс укључује ЛЕД дугмад и њихова тренутна стања.

4. ИП адреса ЕСП32 веб сервера

ИП адреса веб сервера ЕСП32 је јединствени идентификатор уређаја на мрежи. Да бисте приступили ЕСП32 веб серверу, биће вам потребна ова ИП адреса. Након што отпремите горњи код, ИП адресу аутоматски додељује рутер познат и као динамички ИП. Међутим, можете и ручно доделити ИП адресу познату и као статичка ИП адреса.

Да бисте сазнали ИП адресу вашег ЕСП32 сервера, можете да проверите серијски монитор Ардуино ИДЕ након учитавања кода. Запамтите, ова ИП адреса ће бити приказана само ако је ЕСП32 плоча успешно повезана са приступном тачком.

Белешка : Ако вам је тешко да повежете ЕСП32 плочу са приступном тачком, покушајте да промените ССИД рутера (приступне тачке). Покушајте да избегнете специјалне знакове у свом ССИД-у.

5. Контролисање ЛЕД лампица помоћу ЕСП32 Веб сервера

Сада ћемо поставити две ЛЕД диоде са ЕСП32 плочом и контролисати их помоћу ЕСП32 веб сервера. Можете користити исте ГПИО пинове дефинисане унутар кода или модификовати код за било које друге ГПИО пинове. Овде ћемо повезати један ЛЕД на ГПИО 26, а други на ГПИО 27.

Десктоп Интерфаце

Када је хардвер спреман, следећи корак је приступ веб серверу користећи исту ИП адресу коју је дао ЕСП32 на Ардуино ИДЕ терминалу. За то се ваш систем мора повезати са истом мрежом. На радној површини отворите ВиФи подешавања и повежите се са мрежом.

Када се повежете, можете да приступите веб серверу помоћу веб прегледача (Цхроме). Унесите ИП ЕСП32 веб сервера у УРЛ траку и притисните Ентер . Када се отвори, видећете следећи интерфејс.

У тренутном стању како је постављено унутар кода, обе ЛЕД лампице су ИСКЉУЧЕНЕ. Дакле, након што повежете ЕСП32 са рачунаром, видећете да ниједна ЛЕД лампица не светли.

Почећемо тако што ћемо укључити ЛЕД на ГПИО 26. Пребаците прекидач ОФФ и видећете да ће ЛЕД светлети.

ЛЕД на ГПИО 26 је укључен.

Слично, за ЛЕД на ГПИО 27 пребаците друго дугме.

Сада ћете видети да ће друга ЛЕД повезана на ГПИО 27 такође светлети.

Такође можете да укључите обе ЛЕД диоде тако што ћете укључити њихове дугмад.

Након пребацивања оба ЛЕД-а, видећете да ће оба ЛЕД-а светлети.

Мобиле Интерфаце

ЕСП32 веб сервер није ограничен само на десктоп претраживаче, можете му приступити и са било ког другог уређаја као што је паметни телефон или таблет. Да бисте се повезали са ЕСП32 веб сервером, отворите подешавања ВиФи мреже и потражите исти ССИД који сте дефинисали унутар кода.

Након што тражите приступну тачку, повежите свој паметни телефон са том приступном тачком.

Када се повежете, отворите претраживач на свом паметном телефону и приступите веб серверу користећи ЕСП32 ИП адресу. Интерфејс у ​​паметном телефону је сличан десктопу. Имате потпуну контролу за контролу својих ГПИО пинова баш као што то радите у десктоп претраживачу.

6. Контролисање АЦ уређаја помоћу ЕСП32 Веб сервера

За сада смо повезали једноставну ЛЕД диоду са ЕСП32 и контролисали их помоћу ЕСП32 веб сервера. Али то је само једноставан програм за ЕСП32 веб сервер. Исти концепт можете применити на било који од сензора или модула и генерисати жељени излаз.

На пример, можете да повежете релејни модул са ЕСП32 и да контролишете било који АЦ уређај користећи исти горе дати код веб сервера.

читати : Релеј са ЕСП32 користећи Ардуино ИДЕ

Сада ћемо повезати АЦ сијалицу са ЕСП32 помоћу релејног модула. Овде ћу користити ГПИО пин 26 за контролу АЦ сијалице. Можете дефинисати жељене ГПИО пинове за контролу релеја.

ЕСП32 Пин Пинс релејног модула
ВИН/3В3 Вцц
ГНД ГНД
ГПИО 26 или ГПИО 27 ИН1 или ИН2

Испод је шематски дијаграм ЕСП32 са релејним модулом и АЦ сијалицом.

Након што повежете релејни модул, отворите ЕСП32 веб сервер и укључите ГПИО 26 прекидач.

Видећете да ће се сијалица укључити.

Успешно смо креирали ЕСП32 веб сервер и њиме контролишемо и АЦ и ДЦ уређаје. Можете применити исти код за било који други сензор и креирати своје прилагођене веб сервере за свој пројекат.

Закључак

ЕСП32 је плоча микроконтролера која може да се повеже са приступном тачком или може да делује као приступна тачка за друге уређаје. Користећи ову функцију ЕСП32, можете дизајнирати ЕСП32 веб сервер. Све што требате је да повежете своју ЕСП32 плочу са приступном тачком и добијете ИП адресу за веб сервер. Након тога, морате да унесете исту ИП адресу у било који од веб претраживача и одмах ћете имати приступ веб серверу. Али уверите се да сте повезани на исту мрежу док приступате ЕСП32 веб серверу. Даље, можете модификовати дати код и контролисати било који сензор или модул по вашем избору.