- Необходими компоненти:
- Подготовка на Raspberry Pi:
- Тествайте инсталирането на WebIOPi:
- Изграждане на уеб приложение за домашна автоматизация на Raspberry Pi:
- Редакции на сървър WebIOPi за домашна автоматизация:
- Електрическа схема и обяснение:
Здравейте, добре дошли в днешния урок, едно от хубавите неща за Raspberry Pi е страхотната способност и лекота, с които ви дава възможност да свързвате устройства към интернет, особено за проекти, свързани с домашна автоматизация. Днес ще проучим възможността за управление на променливотокови уреди с едно щракване на бутони на уеб страница с помощта на интернет. Използвайки тази система за домашна автоматизация, базирана на IoT, можете да управлявате домашните си уреди от всяка точка на света. Този уеб сървър може да се стартира от всяко устройство, което може да изпълнява HTML приложения, като Smart Phone, таблет, компютър и т.н.
Необходими компоненти:
За този проект изискванията ще попаднат в две категории, Хардуер и Софтуер:
I. Хардуерни изисквания:
- Raspberry Pi 3 (Всяка друга версия ще бъде приятна)
- Карта с памет 8 или 16 GB, работеща с Raspbian Jessie
- 5v релета
- 2n222 транзистори
- Диоди
- Джъмперни проводници
- Блокове за свързване
- Светодиоди за тестване.
- AC лампа за тест
- Макети и джъмпери
- 220 или 100 ома резистор
II. Софтуерни изисквания:
Освен операционната система Raspbian Jessie, работеща на Raspberry Pi, ние също ще използваме работата на FrameI WebIOPi, Notepad ++, работеща на вашия компютър и filezila, за да копираме файлове от компютъра в Raspberry Pi, особено файловете на уеб приложенията.
Също така не е необходимо да кодирате в Python за този проект за автоматизация на дома, WebIOPi ще свърши цялата работа.
Подготовка на Raspberry Pi:
Това е някакъв навик за мен и мисля, че е добър, първото нещо, което правя всеки път, когато искам да използвам Raspberry Pi, е да актуализирам PI. За този проект този раздел ще включва процедури за актуализиране на Pi и инсталиране на рамката WebIOPi, която ще ни помогне да се справим с комуникацията от уеб страницата до малиновия pi. Вероятно трябва да заявя, че това може да се направи и по един безспорно по-лесен начин, като се използва рамковата работа на python Flask, но едно от интересните неща за „Направи си сам“ е, когато погледнете под капака и направите трудната работа. Точно там идва цялата радост от „Направи си сам“.
За да актуализирате малиновите Pi команди по-долу и след това рестартирайте RPi;
sudo apt-get актуализация sudo apt-get надстройка sudo рестартиране
След това следващото нещо е да инсталираме рамката webIOPi.
Уверете се, че сте в домашната директория, като използвате;
cd ~
Използвайте wget, за да вземете файла от страницата им sourceforge;
wget
Когато изтеглянето приключи, извлечете файла и отидете в директорията;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
На този етап, преди да стартираме настройката, трябва да инсталираме кръпка, тъй като тази версия на WebIOPi не работи с Raspberry Pi 3, който използвам, и не можах да намеря версия на WebIOPi, която работи изрично с Pi 3.
По-долу се използват команди за инсталиране на корекция, докато все още сте в директорията WebIOPi, стартирайте;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch кръпка -p1 -i webiopi-pi2bplus.patch
След това можем да стартираме инсталационната инсталация за WebIOPi, използвайки;
sudo./setup.sh
Продължавайте да казвате „да“, ако бъдете помолени да инсталирате някакви зависимости по време на инсталационната инсталация. Когато сте готови, рестартирайте вашия pi;
sudo рестартиране
Тествайте инсталирането на WebIOPi:
Преди да преминем към схеми и кодове, С включването на Raspberry Pi отново ще трябва да тестваме нашата инсталация WebIOPi, за да сме сигурни, че всичко работи добре, както желаете.
Изпълнете командата;
sudo webiopi -d -c / etc / webiopi / config
След като издадете командата по-горе на pi, насочете уеб браузъра на вашия компютър, свързан към Raspberry Pi, към http: // raspberrypi. mshome.net:8000 или http; // thepi'sIPaddress: 8000. Системата ще ви подкани за потребителско име и парола.
Потребителското име е webiopi Паролата е малина
Това влизане може да бъде премахнато по-късно, ако желаете, но дори вашата система за домашна автоматизация заслужава допълнително ниво на сигурност, за да предотврати всеки, който има IP контролиращи уреди и IOT устройства във вашия дом.
След влизането се огледайте и след това кликнете върху връзката за заглавие GPIO.
За този тест ще свържем светодиод към GPIO 17, така че продължете и задайте GPIO 17 като изход.
С това свържете led към вашия малинов пи, както е показано в схемите по-долу.
След връзката се върнете към уеб страницата и щракнете върху бутона 11, за да включите или изключите светодиода. По този начин можем да контролираме Raspberry Pi GPIO с помощта на WebIOPi.
След теста, ако всичко е работило, както е описано, тогава можем да се върнем в терминала и да спрем програмата с CTRL + C. Ако имате някакъв проблем с тази настройка, тогава ме ударете чрез раздела за коментари.
Повече информация за Webiopi можете да намерите на неговата Wiki страница (http://webiopi.trouch.com/INSTALL.html)
След завършване на теста, ние сме готови да започнем основния проект.
Изграждане на уеб приложение за домашна автоматизация на Raspberry Pi:
Тук ще редактираме конфигурацията по подразбиране на услугата WebIOPi и ще добавим собствен код, който да се изпълнява при извикване. Първото нещо, което ще направим, е да получим filezilla или друг FTP / SCP софтуер за копиране, инсталиран на нашия компютър. Ще се съгласите с мен, че кодирането на pi чрез терминала е доста стресиращо, така че filezilla или друг SCP софтуер ще ви бъде от полза на този етап. Преди да започнем да пишем кодовете на html, css и java за това уеб приложение за IoT Home Automation Web и да ги преместваме в Raspberry Pi, нека създадем папката на проекта, където ще бъдат всичките ни уеб файлове.
Уверете се, че сте в домашната директория с помощта, след това създайте папката, влезте в създадената папка и създайте html папка в директорията:
cd ~ mkdir webapp cd webapp mkdir html
Създайте папка за скриптове, CSS и изображения в папката html
mkdir html / css mkdir html / img mkdir html / скриптове
Със създадените от нас файлове позволява да се премине към писане на кодове на нашия компютър и оттам да се премине към Pi чрез filezilla.
Кодът на JavaScript:
Първият код, който ще напишем, е този на javascript. Това е прост скрипт за комуникация с услугата WebIOPi.
Важно е да се отбележи, че за този проект нашето уеб приложение ще се състои от четири бутона, което означава, че планираме да контролираме само четири GPIO щифта, въпреки че ще демонстрираме само две релета. Проверете пълното видео в края.
webiopi (). готов (функция () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "Relay 1"); content.append (бутон); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (бутон);});
Кодът по-горе се изпълнява, когато WebIOPi е готов.
По-долу сме обяснили JavaScript кода:
webiopi (). Готов (функция (): Това просто инструктира нашата система да създаде тази функция и да я стартира, когато webiopi е готова.
webiopi (). setFunction (23, "out"); Това ни помага да кажем на услугата WebIOPi да зададе GPIO23 като изход. Тук имаме четири бутона, можете да имате повече от тях, ако прилагате повече бутони.
var съдържание, бутон; Този ред казва на нашата система да създаде променлива с име на съдържание и да направи променливата бутон.
съдържание = $ ("# съдържание"); Променливата за съдържание все още ще се използва в нашите html и css. Така че, когато се позоваваме на #content, рамката WebIOPi създава всичко, свързано с него.
button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi може да създава различни видове бутони. Кодът по-горе ни помага да кажем на услугата WebIOPi да създаде GPIO бутон, който контролира GPIO щифта в този случай 17 с надпис „Relay 1“. Същото важи и за останалите.
content.append (бутон); Добавете този код към всеки друг код за бутона, създаден или в html файла, или другаде. Могат да бъдат създадени още бутони и всички те ще имат същите свойства като този бутон. Това е особено полезно, когато пишете CSS или Script.
След създаването на JS файловете, ние го запазваме и след това го копираме с помощта на filezilla в webapp / html / скриптове, ако сте създали вашите файлове по същия начин, както аз моите.
С това се преминава към създаването на CSS. Можете да изтеглите целия код от връзката, дадена в раздела Код в края.
Кодът на CSS:
CSS ни помага да направим нашата уеб страница за домашна автоматизация на IoT Raspberry Pi да изглежда красива.
Исках уеб страницата да изглежда като изображението по-долу и по този начин трябваше да напиша листа със стилове smarthome.css , за да го постигна.
По-долу сме обяснили CSS кода:
CSS скриптът се чувства твърде обемист, за да се включи тук, така че просто ще избера част от него и ще ги използвам за разбивка. Можете да изтеглите пълния CSS файл от тук. CSS е лесен и можете да го разберете само като преминете през CSS кода. Можете лесно да скитирате тази част и веднага да използвате нашия CSS код.
Първата част на скрипта представлява таблицата със стилове за тялото на уеб приложението и показаната по-долу;
тяло {background-color: #ffffff; фоново изображение: url ('/ img / smart.png'); background-repeat: no-repeat; фон-позиция: център; размер на фона: корица; шрифт: удебелен 18px / 25px Arial, без засечки; цвят: LightGray; }
Искам да вярвам, че горният код е обяснителен, ние задаваме цвета на фона като #ffffff, който е бял, след това добавяме фоново изображение, намиращо се в това местоположение на папката (Спомняте ли си по-ранната настройка на папката?), Гарантираме, че изображението не се t повторете, като зададете свойството background-repeat на no-repeat, след което инструктирайте CSS да централизира фона. След това се преместваме, за да зададем размера на фона, шрифта и цвета.
След като завършихме тялото, написахме CSS за бутони, за да изглеждаме красиво.
бутон {дисплей: блок; позиция: относителна; марж: 10px; подплата: 0 10px; подравняване на текст: център; декорация на текст: няма; ширина: 130px; височина: 40px; шрифт: удебелен 18px / 25px Arial, без засечки; цвят черен; text-shadow: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-граница-радиус: 30px; граница-радиус: 30px;
За да се запази това кратко, всяко друго нещо в кода също беше направено, за да изглежда добре. Можете да ги промените, за да видите какво се случва, мисля, че това се нарича обучение чрез проби и грешки, но едно добро нещо в CSS е, че нещата са изразени на обикновен английски, което означава, че са доста лесни за разбиране. Другата част от блока с бутони има няколко екстри за сянка на текст върху бутона и сянката на бутона. Той също така има лек ефект на преход, който му помага да изглежда добре и реалистично при натискане на бутона. Те се дефинират отделно за webkit, firefox, opera и т.н., само за да се гарантира, че уеб страницата работи оптимално на всички платформи.
Следващият блок код е услугата WebIOPi да му каже, че това е вход към услугата WebIOPi.
i nput {дисплей: блок; ширина: 160px; височина: 45px; }
Последното нещо, което искаме да направим, е да дадем някаква индикация, когато е натиснат бутон. Така че можете да погледнете екрана и цветът на бутоните да ви уведоми за текущото състояние. За да направите това, редът на кода по-долу е реализиран за всеки един бутон.
# gpio17.LOW {background-color: Сив; цвят черен; } # gpio17.HIGH {background-color: Червен; цвят: LightGray; }
Редовете от кодове по-горе просто променят цвета на бутона въз основа на текущото му състояние. Когато бутонът е изключен (LOW), цветът на фона на бутоните става сив, за да покаже неактивен, а когато е включен (HIGH), цветът на фона на бутона става ЧЕРВЕН.
CSS в чантата, позволява да запишете като smarthome.css, след това го преместете чрез filezilla (или друг SCP софтуер, който искате да използвате) в папката със стилове в нашата малинова пи и фиксирайте последното парче, html кода. Не забравяйте да изтеглите пълен CSS от тук.
HTML код:
HTML кодът събира всичко заедно, javascript и таблицата със стилове.
Натисни бутона; получи бекон
В рамките на тага head има някои много важни функции.
Линията с код по-горе позволява на уеб приложението да бъде запазено на мобилен работен плот, използвайки хром или мобилно сафари. Това може да стане чрез хромираното меню. Това дава на приложението лесно усещане за стартиране от мобилния десктоп или дома.
Следващият ред от кода по-долу дава някаква реакция на уеб приложението. Това му позволява да заема екрана на всяко устройство, на което е стартирано.
Следващият ред код декларира заглавието, показано в заглавната лента на уеб страницата.
Следващите четири реда кодове изпълняват функцията на свързване на html кода с няколко ресурси, които са му необходими, за да работи по желание.
На първа линия над повиквания основната рамка WebIOPi JavaScript, който е твърдо кодирана в корена на сървъра. Това трябва да се извиква всеки път, когато WebIOPi трябва да се използва.
На втория ред посочва страницата с HTML в нашия JQuery скрипт, третите точки го по посока на нашия стил лист. И накрая, последният ред помага да се настрои икона, която да се използва на мобилния работен плот, в случай че решим да я използваме като уеб приложение или като знак за уеб страницата.
Разделът с основния текст на html кода просто съдържа маркери за прекъсване, за да се гарантира, че бутоните са правилно подравнени с реда по-долу, казващ на нашия html код да показва написаното в JavaScript файла. The ID = "съдържание" трябва да ви напомня на съдържание декларацията за нашия бутон по-рано в рамките на кода JavaScript.
Познавате тренировката, html кода като index.html и се премествате в папката html на Pi чрез filezilla. Можете да изтеглите всички CSS, JS и HTML файлове от тук.
Редакции на сървър WebIOPi за домашна автоматизация:
На този етап сме готови да започнем да създаваме нашите схеми и да тестваме нашето уеб приложение, но преди това трябва да редактираме конфигурационния файл на услугата webiopi, така че е посочено да използва данни от нашата папка html вместо конфигурационните файлове, които идват с нея.
За да редактирате конфигурацията, изпълнете следното с разрешение на root;
sudo nano / etc / webiopi / config
Потърсете секцията http на конфигурационния файл, проверете в секцията, където имате нещо като, # Използвайте doc-root, за да промените местоположението по подразбиране на HTML и файлове с ресурси
Коментирайте всичко под него с помощта на #, а след това, ако вашата папка е настроена като моята, насочете вашия doc-root към пътя на вашия файл на проекта
doc-root = / home / pi / webapp / html
Запази и излез. Можете също да промените порта от 8000, в случай че имате друг сървър, работещ на pi, използващ този порт. Ако не запишете и напуснете, докато продължаваме.
Важно е да се отбележи, че можете да промените паролата на услугата WebIOPi, като използвате командата;
sudo webiopi-passwd
Той ще ви подкани за ново потребителско име и парола. Това също може да бъде премахнато напълно, но сигурността е важна, нали?
Накрая стартирайте услугата WebIOPi, като издадете команда по-долу:
sudo /etc/init.d/webiopi старт
Състоянието на сървъра може да се провери с помощта на;
sudo /etc/init.d/webiopi статус
Може да бъде спряно от работа с използване;
sudo /etc/init.d/webiopi стоп
За да настроите WebIOPi да се стартира при зареждане, използвайте;
по подразбиране sudo update-rc.d webiopi
Ако искате да обърнете и спрете да работи при зареждане, използвайте;
sudo update-rc.d webiopi премахване
Електрическа схема и обяснение:
След като нашият софтуер е настроен, всички сме готови да започнем да създаваме схемите за този проект за домашен уред, контролиран от мрежата.
Въпреки че не можех да сложа ръце върху релейни модули, с които смятам, че по-лесно работят с любителите. Така че тук рисувам схемите за обикновени самостоятелни единични 5v релета.
Свържете вашата верига, както е показано в схемата за фризиране по-горе. Трябва да имате предвид, че COM, NO (нормално отворен) и NC (нормално затворен) на вашето собствено реле може да са разположени от различни страни / точки. Моля, използвайте милиметър, за да го изпробвате. Научете повече за релето тук.
Когато нашите компоненти са свързани, задействайте сървъра си от уеб страница, отидете на IP адреса на вашия Raspberry Pi и посочете порта, както е описано по-рано, влезте с потребителското си име и парола и трябва да видите уеб страница, която изглежда точно като изображението по-долу.
Сега можете лесно да управлявате четири приложения AC Home от всяко място безжично, само като кликнете върху бутоните. Това ще работи от мобилен телефон, таблет и т.н. и можете да добавите още бутони и релета за управление на повече устройства. Вижте пълното видео по-долу.
Това е, момчета, благодаря за това. Ако имате въпроси, пуснете ги в полето за коментари.