Интернет аутоматизована кућна аутоматизација заснована на интернету помоћу малине пи

Здраво момци, добродошли у данашњи водич, једна од добрих ствари у вези са Распберри Пи-ом је сјајна способност и лакоћа с којом вам пружа могућност повезивања уређаја на Интернет, посебно за пројекте повезане са аутоматизацијом куће. Данас ћемо истражити могућност управљања уређајима наизменичном струјом притиском на дугмад на веб страници помоћу Интернета. Користећи овај систем кућне аутоматизације заснован на ИоТ-у, можете да контролишете своје кућне уређаје са било ког места у свету. Овај веб сервер се може покренути са било ког уређаја који може покретати ХТМЛ апликације, попут паметног телефона, таблета, рачунара итд.

Потребне компоненте:

За овај пројекат захтеви спадају у две категорије, хардвер и софтвер:

И. Хардверски захтеви:

1. Распберри Пи 3 (Било која друга верзија ће бити добра)
2. Меморијска картица 8 или 16 ГБ са Распбиан Јессие
3. 5в Релеји
4. 2н222 транзистори
5. Диоде
6. Јумпер Вирес
7. Блокови за повезивање
8. ЛЕД диоде за тестирање.
9. АЦ лампица за тестирање
10. Бреадбоард и краткоспојници
11. Отпорник од 220 или 100 ома

ИИ. Захтеви за софтвер:

Поред оперативног система Распбиан Јессие који ради на Распберри Пи, такође ћемо користити ВебИОПи фраме ворк, нотепад ++ покренут на рачунару и филезила за копирање датотека са рачунара на Распберри Пи, посебно датотеке веб апликација.

Такође не морате да кодирате на Питхону за овај пројекат аутоматизације куће, ВебИОПи ће обавити сав посао.

Припрема Распберри Пи:

То ми је нека навика и мислим да је добра, прва ствар коју урадим сваки пут кад пожелим да користим Распберри Пи је да ажурирам ПИ. За овај пројекат, овај одељак ће се састојати од процедура за ажурирање Пи-а и инсталирање ВебИОПи оквира који ће нам помоћи у комуникацији од веб странице до малине пи. Вероватно бих требало да кажем да се то такође може учинити на несумњиво лакши начин користећи рад оквира питхон Фласк, али једна од занимљивих ствари код уради сам је када баците поглед испод хаубе и направите тежак посао. Ту долази сва радост „уради сам“.

Да бисте ажурирали Распберри Пи наредбе испод, а затим поново покренули РПи;

судо апт-гет упдате судо апт-гет надоградња судо ребоот

Након овога, следећа ствар је да инсталирамо вебИОПи фрамеворк.

Уверите се да сте у матичном директоријуму користећи;

цд ~

Користите вгет да бисте преузели датотеку са њихове соурцефорге странице;

вгет хттп://соурцефорге.нет/пројецтс/вебиопи/филес/ВебИОПи-0.7.1.тар.гз

Када се преузимање заврши, извуците датотеку и идите у директоријум;

тар квзф ВебИОПи-0.7.1.тар.гз цд ВебИОПи-0.7.1 /

У овом тренутку, пре покретања подешавања, морамо да инсталирамо закрпу јер ова верзија ВебИОПи- а не ради са Распберри Пи 3 који користим и нисам успео да пронађем верзију ВебИОПи-а која експлицитно ради са Пи 3.

Испод се наредбе користе за инсталирање закрпе док сте још увек у директоријуму ВебИОПи, покрените;

вгет хттпс://рав.гитхубусерцонтент.цом/доублебинд/распи/мастер/вебиопи-пи2бплус.патцх закрпа -п1 -и вебиопи-пи2бплус.патцх

Тада можемо покренути инсталациону инсталацију за ВебИОПи користећи;

судо./сетуп.сх

Наставите да кажете да ако се од вас затражи да инсталирате било какве зависности током инсталације подешавања. Када завршите, поново покрените пи;

судо ребоот

Тестирајте ВебИОПи инсталацију:

Пре него што пређемо на шеме и кодове, Када је Распберри Пи поново укључен, мораћемо да тестирамо нашу ВебИОПи инсталацију како бисмо били сигурни да све функционише у реду по жељи.

Покрените команду;

судо вебиопи -д -ц / етц / вебиопи / цонфиг

Након издавања наредбе изнад на пи, усмерите веб прегледач рачунара који је повезан са Распберри Пи на хттп: // распберрипи. мсхоме.нет :8000 или хттп; // тхепи'сИПаддресс: 8000. Систем ће затражити корисничко име и лозинку.

Корисничко име је вебиопи Лозинка је малина

Ова пријава се може уклонити касније ако желите, али чак и ваш систем аутоматизације куће заслужује додатни ниво заштите како би спречио свакога ко има уређаје за ИП контролу и ИОТ уређаје у вашем дому.

Након пријаве, погледајте око себе, а затим кликните на везу заглавља ГПИО.

За овај тест повезаћемо ЛЕД на ГПИО 17, зато наставите и поставите ГПИО 17 као излаз.

Када ово завршите, повежите лед са малином пи као што је приказано на доњој шеми.

Након везе, вратите се на веб страницу и кликните дугме пин 11 да бисте укључили или искључили ЛЕД. На овај начин можемо да контролишемо Распберри Пи ГПИО помоћу ВебИОПи.

После теста, ако је све функционисало како је описано, можемо се вратити на терминал и зауставити програм помоћу ЦТРЛ + Ц. Ако имате било каквих проблема са овом поставком, ударите ме путем одељка за коментаре.

Више информација о Вебиопију можете пронаћи на његовој Вики страници (хттп://вебиопи.троуцх.цом/ИНСТАЛЛ.хтмл)

Са завршеним тестом, тада смо спремни да започнемо главни пројекат.

Израда веб апликације за аутоматизацију куће Распберри Пи:

Овде ћемо уредити подразумевану конфигурацију услуге ВебИОПи и додати свој код који ће се покретати када буде позван. Прво што ћемо урадити је да на нашем рачунару инсталирамо датотеку ФилеЗилла или било који други ФТП / СЦП софтвер за копирање. Сложићете се са мном да је кодирање на пи-у преко терминала прилично стресно, тако да ће у овој фази добро доћи филезилла или било који други СЦП софтвер. Пре него што започнемо са писањем ХТМЛ, ЦСС и Јава скрипти кодова за ову веб апликацију ИоТ Хоме Аутоматион Веб и њихово премештање у Распберри Пи, направимо директоријум пројекта у коме ће бити све наше веб датотеке.

Уверите се да сте у матичном директоријуму помоћу, а затим креирајте директоријум, уђите у креирану директоријум и креирајте хтмл директоријум у директоријуму:

цд ~ мкдир вебапп цд вебапп мкдир хтмл

Направите директоријум за скрипте, ЦСС и слике унутар хтмл директоријума

мкдир хтмл / цсс мкдир хтмл / имг мкдир хтмл / скрипте

Са нашим створеним датотекама прелазимо на писање кодова на нашем рачунару, а од тада прелазимо на Пи путем филезилле.

ЈаваСцрипт код:

Први део кода који ћемо написати је јавасцрипт. Његова једноставна скрипта за комуникацију са услугом ВебИОПи.

Важно је напоменути да ће се за овај пројекат наша веб апликација састојати од четири тастера, што значи да планирамо да контролишемо само четири ГПИО пина, иако ћемо у нашој демонстрацији контролисати само два релеја. Проверите цео Видео на крају.

вебиопи (). спреман (функција () {вебиопи (). сетФунцтион (17, „оут“); вебиопи (). сетФунцтион (18, „оут“); вебиопи (). сетФунцтион (22, „оут“); вебиопи ().сетФунцтион (23, "оут"); вар цонтент, буттон; цонтент = $ ("# цонтент"); буттон = вебиопи (). цреатеГПИОБуттон (17, "Релеј 1"); цонтент.аппенд (дугме); буттон = вебиопи (). цреатеГПИОБуттон (18, "Релеј 2"); цонтент.аппенд (буттон); буттон = вебиопи (). цреатеГПИОБуттон (22, "Релаи 3"); цонтент.аппенд (буттон); буттон = вебиопи ().цреатеГПИОБуттон (23, "Релеј 4"); цонтент.аппенд (дугме);});

Горњи код се покреће када ВебИОПи буде спреман.

У наставку смо објаснили ЈаваСцрипт код:

вебиопи (). реади (фунцтион (): Ово само упућује наш систем да креира ову функцију и покрене је када вебиопи буде спреман.

вебиопи (). сетФунцтион (23, „оут“); Ово нам помаже да кажемо услузи ВебИОПи да постави ГПИО23 као излаз. Овде имамо четири дугмета, могли бисте их имати више ако примените више тастера.

садржај вар, дугме; Овај ред говори нашем систему да креира променљиву са називом садржај и да променљиву учини дугметом.

цонтент = $ ("# цонтент"); Променљива садржаја ће се и даље користити у нашим хтмл и цсс. Дакле, када се позивамо на #цонтент, ВебИОПи оквир креира све што је повезано са њим.

буттон = вебиопи (). цреатеГПИОБуттон (17, "Релеј 1"); ВебИОПи може да креира различите врсте дугмади. Горњи део кода нам помаже да кажемо услузи ВебИОПи да креира ГПИО дугме које контролише ГПИО пин у овом случају 17 са ознаком „Релеј 1“. Исто важи и за остале.

цонтент.аппенд (дугме); Додајте овај код било којем другом коду дугмета створеног у хтмл датотеци или негде другде. Може се створити више тастера и сви ће имати иста својства као ово дугме. Ово је посебно корисно када пишете ЦСС или Сцрипт.

Након креирања ЈС датотека, ми их чувамо, а затим копирамо помоћу филезилла на вебапп / хтмл / скрипте ако сте датотеке креирали на исти начин као и ја.

Када ово учинимо, прелазимо на стварање ЦСС-а. Код на крају можете преузети са везе која је дата у одељку Код.

ЦСС код:

ЦСС нам помаже да наша веб страница ИоТ Распберри Пи о кућној аутоматизацији изгледа лепо.

Желео сам да веб страница изгледа попут доње слике и зато сам морао да напишем табелу стилова смартхоме.цсс да бих је постигао.

У наставку смо објаснили ЦСС код:

ЦСС скрипта делује превише гломазно да би се овде уврстила, па ћу само одабрати део и користити их за рашчламбу. Комплетну ЦСС датотеку можете преузети одавде. ЦСС је једноставан и можете га разумети само проласком кроз ЦСС код. Можете лако скептирати овај део и одмах користити наш ЦСС код.

Први део скрипте представља табелу стилова за тело веб апликације и приказану испод;

тело {бацкгроунд-цолор: #фффффф; позадина-слика: урл ('/ имг / смарт.пнг'); позадина-понављање: без понављања; положај позадине: центар; величина позадине: поклопац; фонт: подебљано 18пк / 25пк Ариал, санс-сериф; боја: ЛигхтГраи; }

Желим да верујем да горњи код сам по себи објашњава, боју позадине постављамо као #фффффф која је бела, а затим додајемо позадинску слику која се налази на тој локацији фасцикле (Сјећате се нашег ранијег подешавања фолдера?), Осигуравамо да слика не ' т поновите постављањем својства бацкгроунд-репеат на но-репеат, а затим упутите ЦСС-у да централизира позадину. Затим прелазимо на подешавање величине позадине, фонта и боје.

Након завршетка тела, написали смо цсс како би дугмад изгледала лепо.

дугме {приказ: блок; положај: сродник; маржа: 10пк; попуњавање: 0 10пк; поравнање текста: центар; декорација текста: нема; ширина: 130пк; висина: 40пк; фонт: подебљано 18пк / 25пк Ариал, санс-сериф; боја Црна; тект-схадов: 1пк 1пк 1пк ргба (255,255,255,.22); -вебкит-радијус-границе: 30пк; -моз-радијус-границе: 30пк; радијус границе: 30 пиксела;

Да би било кратко, урађене су и све друге ствари у коду како би изгледао добро. Можете их променити да видите шта ће се догодити, мислим да се то зове учење методом покушаја и грешака, али једна добра ствар код ЦСС-а су ствари изражене на једноставном енглеском језику, што значи да их је прилично лако разумети. Други део блока дугмета садржи неколико додатака за сенку текста на дугмету и сенци дугмета. Такође има благи прелазни ефекат који му помаже да изгледа лепо и реално када се притисне дугме. Они су дефинисани одвојено за вебкит, фирефок, оперу итд. Само како би се осигурало да веб страница ради оптимално на свим платформама.

Следећи блок кода је да му ВебИОПи услуга каже да је ово улаз у услугу ВебИОПи.

и нпут {приказ: блок; ширина: 160пк; висина: 45пк; }

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

# гпио17.ЛОВ {позадина-боја: сива; боја Црна; } # гпио17.ХИГХ {бацкгроунд-цолор: Ред; боја: ЛигхтГраи; }

Горњи редови кодова једноставно мењају боју дугмета на основу његовог тренутног стања. Када је дугме искључено (ЛОВ), боја позадине дугмета постаје сива да би показала да је неактивна, а када је укључена (ХИГХ) боја позадине дугмета постаје ЦРВЕНА.

ЦСС у торбици, омогућава снимање као смартхоме.цсс, а затим га преместите преко филезилла (или било ког другог СЦП софтвера који желите да користите) у фасциклу стилова на нашој Распберри Пи и поправите последњи део, хтмл код. Не заборавите да преузмете пуни ЦСС одавде.

ХТМЛ код:

ХТМЛ код спаја све заједно, јавасцрипт и табелу стилова.

Тастер; прими сланину

Унутар хеад тага постоје неке врло важне карактеристике.

Горњи ред кода омогућава да се веб апликација сачува на мобилној радној површини користећи Цхроме или мобилни сафари. То се може урадити путем цхроме менија. Ово омогућава апликацији лак осећај покретања са мобилне радне површине или куће.

Следећи ред доњег кода даје неку врсту реакције на веб апликацију. Омогућава му да заузима екран било ког уређаја на којем је покренут.

Следећи ред кода објављује наслов приказан на насловној траци веб странице.

Следећа четири реда кодова обављају функцију повезивања хтмл кода са неколико ресурса потребних за рад по жељи.

Прва линија изнад позива главни ВебИОПи оквир ЈаваСкрипт који је тешко-кодиране у корену сервера. Ово треба позвати сваки пут када се користи ВебИОПи.

Друга линија указује ХТМЛ странице на нашем јКуери скрипти, трећег тачкама у правцу нашег стила. На крају, последњи ред помаже у постављању иконе која ће се користити на мобилној радној површини у случају да је одлучимо да користимо као веб-апликацију или као фабричку икону за веб-страницу.

Одељак тела ХТМЛ кода садржи само ознаке прекида како би се осигурало да се дугмад правилно поравнају са доњом линијом и говоре нашем ХТМЛ коду да прикаже оно што је написано у ЈаваСцрипт датотеци. ? Ид = "садржај" би требало да вас подсетим на садржај декларације за наше дугме раније под ЈаваСцрипт кода.

Вежбу, хтмл код знате као индек.хтмл и преместите се у директоријум хтмл на Пи преко филезиле. Све ЦСС, ЈС и ХТМЛ датотеке можете преузети одавде.

Уређивања ВебИОПи сервера за кућну аутоматизацију:

У овој фази смо спремни да започнемо са креирањем наших шема и тестирањем наше веб апликације, али пре тога морамо уредити конфигурациону датотеку услуге вебиопи тако да укаже на то да користи податке из наше хтмл мапе уместо конфигурационих датотека које су испоручене уз њу.

Да бисте уредили конфигурацију, покрените следеће са роот дозволом;

судо нано / етц / вебиопи / цонфиг

Потражите хттп одељак датотеке конфигурације, проверите у одељку где имате нешто попут # Користите доц-роот да бисте променили подразумевану локацију ХТМЛ и датотека датотека ресурса

Коментирајте било шта испод ње помоћу #, а онда ако је ваша фасцикла постављена попут моје, усмерите свој доц-роот на стазу ваше пројектне датотеке

доц-роот = / хоме / пи / вебапп / хтмл

Сачувај и изађи. Такође можете да промените порт са 8000, у случају да имате други сервер покренут на пи који користи тај порт. Ако не сачувајте и напустите, како идемо даље.

Важно је напоменути да лозинку услуге ВебИОПи можете променити помоћу наредбе;

судо вебиопи-пассвд

Затражиће од вас ново корисничко име и лозинку. Ово се такође може потпуно уклонити, али сигурност је важна, зар не?

На крају покрените ВебИОПи услугу издавањем наредбе испод:

судо /етц/инит.д/вебиопи старт

Статус сервера се може проверити помоћу;

судо /етц/инит.д/вебиопи статус

Може се зауставити извођење помоћу;

судо /етц/инит.д/вебиопи стоп

Да бисте подесили ВебИОПи да се покреће приликом покретања, користите;

подразумеване вредности судо упдате-рц.д вебиопи

Ако желите да вратите уназад и зауставите његово покретање при покретању, користите;

судо упдате-рц.д вебиопи уклонити

Шема и објашњење:

Када је наш софтвер постављен, сви смо спремни да започнемо са стварањем шема за овај пројекат кућних апарата који контролише Интернет.

Иако нисам могао да положим руке на релејне модуле, са којима сматрам да је лакше радити са хобистима. Дакле, овде цртам шеме за обичне самосталне појединачне 5в релеје.

Повежите свој круг као што је приказано у горњем кругу фритзинга. Имајте на уму да се ЦОМ, НО (нормално отворен) и НЦ (нормално затворен) вашег релеја могу налазити на различитим странама / тачкама. Молимо вас да га испробате милиметром. Сазнајте више о релеју овде.

Када су наше компоненте повезане, покрените сервер са веб странице, идите на ИП вашег Распберри Пи и назначите порт као што је раније описано, пријавите се својим корисничким именом и лозинком и требало би да видите веб страницу која изгледа потпуно као слика испод.

Сада можете лако да контролишете четири апликације АЦ Хоме са било ког места бежично, само кликом на дугмад. Ово ће радити са мобилног телефона, таблета итд., А можете додати још тастера и релеја за контролу више уређаја. У наставку погледајте цео видео запис.

То је то, момци, хвала што сте се задржали за овај. Ако имате питања, испустите их у поље за коментаре.