Automatyka domowa oparta na IoT za pomocą Raspberry Pi

Cześć wszystkim, witajcie w dzisiejszym samouczku. Jedną z dobrych rzeczy w Raspberry Pi jest ogromna możliwość i łatwość, z jaką daje możliwość podłączenia urządzeń do Internetu, szczególnie w przypadku projektów związanych z automatyką domową. Dzisiaj zamierzamy zbadać możliwość sterowania urządzeniami AC za pomocą kliknięcia przycisków na stronie internetowej za pomocą Internetu. Korzystając z tego systemu automatyki domowej opartego na IoT, możesz kontrolować swoje urządzenia domowe z dowolnego miejsca na świecie. Ten serwer sieciowy można uruchomić z dowolnego urządzenia, na którym można uruchamiać aplikacje HTML, takie jak smartfon, tablet, komputer itp.

Wymagane komponenty:

W przypadku tego projektu wymagania zostaną podzielone na dwie kategorie: sprzęt i oprogramowanie:

I. Wymagania sprzętowe:

1. Raspberry Pi 3 (każda inna wersja będzie fajna)
2. Karta pamięci 8 lub 16 GB z systemem Raspbian Jessie
3. Przekaźniki 5v
4. Tranzystory 2n222
5. Diody
6. Przewody połączeniowe
7. Bloki połączeń
8. Diody do testowania.
9. Lampa AC do przetestowania
10. Płytka prototypowa i kable rozruchowe
11. Rezystor 220 lub 100 omów

II. Wymagania Systemowe:

Oprócz systemu operacyjnego Raspbian Jessie działającego na raspberry pi, będziemy również używać ramek WebIOPi, Notatnika ++ działającego na twoim komputerze i filezila do kopiowania plików z komputera na Raspberry pi, zwłaszcza plików aplikacji internetowej.

Również nie potrzebują do kodu w Pythonie dla tej Home Automation Project, WebIOPi będzie wykonać całą pracę.

Przygotowanie Raspberry Pi:

Jest to dla mnie jakiś nawyk i myślę, że to dobry, pierwszą rzeczą, którą robię za każdym razem, gdy chcę używać Raspberry Pi, jest aktualizacja PI. W przypadku tego projektu ta sekcja będzie zawierać procedury aktualizacji Pi i instalację frameworka WebIOPi, który pomoże nam obsłużyć komunikację ze strony internetowej do raspberry pi. Powinienem prawdopodobnie stwierdzić, że można to również zrobić w prawdopodobnie łatwiejszy sposób przy użyciu ramy Pythona Flask, ale jedną z interesujących rzeczy w majsterkowaniu jest to, że zajrzysz pod maskę i wykonasz trudną pracę. Tu właśnie przychodzi cała radość z majsterkowania.

Aby zaktualizować poniższe polecenia raspberry Pi, a następnie ponownie uruchomić RPi;

sudo apt-get update sudo apt-get upgrade sudo reboot

Po wykonaniu tej czynności, następną rzeczą jest zainstalowanie frameworka webIOPi.

Upewnij się, że jesteś w katalogu domowym za pomocą;

cd ~

Użyj wget, aby pobrać plik ze strony sourceforge;

wget

Po zakończeniu pobierania wypakuj plik i przejdź do katalogu;

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

W tym momencie przed uruchomieniem instalacji musimy zainstalować poprawkę, ponieważ ta wersja WebIOPi nie działa z Raspberry pi 3, którego używam i nie mogłem znaleźć wersji WebIOPi, która działa bezpośrednio z Pi 3.

Poniższe polecenia służą do instalowania łatki, będąc nadal w katalogu WebIOPi, uruchom;

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch

Następnie możemy uruchomić instalację konfiguracyjną dla WebIOPi używając;

sudo./setup.sh

Powtarzaj tak, jeśli zostaniesz poproszony o zainstalowanie jakichkolwiek zależności podczas instalacji. Kiedy skończysz, zrestartuj swój pi;

sudo reboot

Przetestuj instalację WebIOPi:

Zanim przejdziemy do schematów i kodów, po ponownym włączeniu Raspberry Pi będziemy musieli przetestować naszą instalację WebIOPi, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami.

Uruchom polecenie;

sudo webiopi -d -c / etc / webiopi / config

Po wydaniu powyższego polecenia na pi, skieruj przeglądarkę internetową swojego komputera podłączonego do raspberry pi na http: // raspberrypi. mshome.net:8000 lub http; // thepi'sIPaddress: 8000. System poprosi o podanie nazwy użytkownika i hasła.

Nazwa użytkownika to webiopi Hasło to malina

Ten login może zostać usunięty później w razie potrzeby, ale nawet system automatyki domowej zasługuje na dodatkowy poziom bezpieczeństwa, aby uniemożliwić każdemu, kto ma w domu urządzenia sterujące IP i urządzenia IOT.

Po zalogowaniu się rozejrzyj, a następnie kliknij łącze nagłówka GPIO.

Na potrzeby tego testu podłączymy diodę LED do GPIO 17, więc kontynuuj i ustaw GPIO 17 jako wyjście.

Po wykonaniu tej czynności podłącz diodę do swojego raspberry pi, jak pokazano na schemacie poniżej.

Po podłączeniu wróć do strony internetowej i kliknij przycisk pin 11, aby włączyć lub wyłączyć diodę LED. W ten sposób możemy sterować GPIO Raspberry Pi za pomocą WebIOPi.

Po teście, jeśli wszystko działało zgodnie z opisem, możemy wrócić do terminala i zatrzymać program za pomocą CTRL + C.Jeśli masz jakiś problem z tą konfiguracją, zadzwoń do mnie przez sekcję komentarzy.

Więcej informacji na temat Webiopi można znaleźć na stronie Wiki (http://webiopi.trouch.com/INSTALL.html)

Po zakończeniu testu możemy rozpocząć główny projekt.

Tworzenie aplikacji internetowej dla automatyki domowej Raspberry Pi:

Tutaj będziemy edytować domyślną konfigurację usługi WebIOPi i dodać własny kod, który będzie uruchamiany po wywołaniu. Pierwszą rzeczą, którą zrobimy, jest zainstalowanie na naszym komputerze filezilla lub innego oprogramowania do kopiowania FTP / SCP. Zgodzisz się ze mną, że kodowanie na pi za pośrednictwem terminala jest dość stresujące, więc na tym etapie przyda się filezilla lub inne oprogramowanie SCP. Zanim zaczniemy pisać kody skryptów html, css i java dla tej aplikacji internetowej automatyzacji IoT Home i przenosząc je do Raspberry Pi, stwórzmy folder projektu, w którym będą znajdować się wszystkie nasze pliki internetowe.

Upewnij się, że jesteś w katalogu domowym, a następnie utwórz folder, przejdź do utworzonego folderu i utwórz folder html w katalogu:

cd ~ mkdir webapp cd webapp mkdir html

Utwórz folder na skrypty, CSS i obrazy w folderze html

mkdir html / css mkdir html / img mkdir html / scripts

Po utworzeniu naszych plików przejdźmy do pisania kodów na naszym komputerze, a następnie przejdź do Pi przez filezilla.

Kod JavaScript:

Pierwszy fragment kodu, który napiszemy, to kod javascript. Jest to prosty skrypt do komunikacji z usługą WebIOPi.

Należy zauważyć, że w tym projekcie nasza aplikacja internetowa będzie składać się z czterech przycisków, co oznacza, że ​​planujemy sterować tylko czterema pinami GPIO, chociaż w naszej demonstracji będziemy sterować tylko dwoma przekaźnikami. Sprawdź cały film na końcu.

webiopi (). ready (function () {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 (przycisk); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Przekaźnik 4"); content.append (przycisk);});

Powyższy kod działa, gdy WebIOPi jest gotowe.

Poniżej wyjaśniliśmy kod JavaScript:

webiopi (). ready (function (): To po prostu instruuje nasz system, aby utworzył tę funkcję i uruchomił ją, gdy webiopi będzie gotowe.

webiopi (). setFunction (23, „out”); Pomaga nam to powiedzieć usłudze WebIOPi, aby ustawić GPIO23 jako wyjście. Mamy tutaj cztery przyciski, możesz mieć ich więcej, jeśli zaimplementujesz więcej przycisków.

zawartość var, przycisk; Ta linia mówi naszemu systemowi, aby utworzył zmienną o nazwie content i uczynił ją przyciskiem.

content = $ ("# treść"); Zmienna content będzie nadal używana w naszym html i css. Więc kiedy odnosimy się do #content, framework WebIOPi tworzy wszystko, co z nim związane.

button = webiopi (). createGPIOButton (17, "Przekaźnik 1"); WebIOPi może tworzyć różne rodzaje przycisków. Powyższy fragment kodu pomaga nam powiedzieć usłudze WebIOPi, aby utworzyła przycisk GPIO, który steruje pinem GPIO, w tym przypadku 17 oznaczonym jako „Relay 1”. To samo dotyczy pozostałych.

content.append (przycisk); Dołącz ten kod do dowolnego innego kodu przycisku utworzonego w pliku html lub w innym miejscu. Można utworzyć więcej przycisków i wszystkie będą miały takie same właściwości tego przycisku. Jest to szczególnie przydatne podczas pisania CSS lub skryptu.

Po utworzeniu plików JS zapisujemy je, a następnie kopiujemy za pomocą filezilla do webapp / html / scripts, jeśli tworzyłeś swoje pliki tak samo, jak ja.

Po wykonaniu tej czynności przechodzimy do tworzenia CSS. Możesz w całości pobrać kod z linku podanego w sekcji Kod na końcu.

Kod CSS:

CSS pomaga nam sprawić, że nasza strona automatyki domowej IoT Raspberry Pi wygląda ładnie.

Chciałem, aby strona wyglądała jak na poniższym obrazku i dlatego musiałem napisać arkusz stylów smarthome.css , aby to osiągnąć.

Poniżej wyjaśniliśmy kod CSS:

Skrypt CSS wydaje się zbyt obszerny, aby go tu uwzględnić, więc po prostu wybiorę jego część i użyję ich do podziału. Możesz pobrać pełny plik CSS stąd. CSS jest łatwy i możesz go zrozumieć, po prostu przeglądając kod CSS. Możesz łatwo zeskoczyć tę część i od razu użyć naszego kodu CSS.

Pierwsza część skryptu przedstawia arkusz stylów dla treści aplikacji internetowej i jest pokazany poniżej;

body {background-color: #ffffff; background-image: url ('/ img / smart.png'); background-repeat: bez powtórzeń; background-position: center; background-size: okładka; czcionka: pogrubiona 18px / 25px Arial, sans-serif; kolor: LightGray; }

Chcę wierzyć, że powyższy kod jest oczywisty, ustawiamy kolor tła na #ffffff, który jest biały, a następnie dodajemy obraz tła znajdujący się w tej lokalizacji folderu (Pamiętasz naszą wcześniejszą konfigurację folderu?), Upewniamy się, że obraz nie działa t Powtórz, ustawiając właściwość background-repeat na no-repeat, a następnie poinstruuj CSS, aby scentralizował tło. Następnie przechodzimy do ustawienia rozmiaru, czcionki i koloru tła.

Po ukończeniu treści napisaliśmy css, aby przyciski wyglądały ładnie.

przycisk {wyświetlacz: blok; pozycja: względna; margines: 10px; wypełnienie: 0 10px; wyrównywanie tekstu: do środka; dekoracja tekstu: brak; szerokość: 130px; wysokość: 40px; czcionka: pogrubiona 18px / 25px Arial, sans-serif; czarny kolor; text-shadow: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;

Krótko mówiąc, każda inna rzecz w kodzie została również zrobiona, aby wyglądał dobrze. Możesz je zmienić, zobacz, co się stanie, myślę, że nazywa się to uczeniem się metodą prób i błędów, ale jedną dobrą rzeczą w CSS jest to, że rzeczy są wyrażane prostym angielskim, co oznacza, że ​​są dość łatwe do zrozumienia. Druga część bloku przycisku ma kilka dodatków do cienia tekstu na przycisku i cieniu przycisku. Ma również niewielki efekt przejścia, który pomaga ładnie i realistycznie wyglądać po naciśnięciu przycisku. Są one definiowane oddzielnie dla webkit, firefox, opera itp., Aby zapewnić optymalne działanie strony internetowej na wszystkich platformach.

Następny blok kodu jest przeznaczony dla usługi WebIOPi, aby poinformować ją, że jest to dane wejściowe do usługi WebIOPi.

i nput {display: block; szerokość: 160px; wysokość: 45px; }

Ostatnią rzeczą, jaką chcemy zrobić, jest wskazanie, kiedy przycisk został naciśnięty. Możesz więc spojrzeć na ekran, a kolor przycisków informuje o aktualnym stanie. Aby to zrobić, poniższy wiersz kodu został zaimplementowany dla każdego przycisku.

# gpio17.LOW {background-color: Gray; czarny kolor; } # gpio17.HIGH {kolor tła: czerwony; kolor: LightGray; }

Linie kodów powyżej po prostu zmieniają kolor przycisku na podstawie jego aktualnego stanu. Gdy przycisk jest wyłączony (LOW), kolor tła przycisku staje się szary, aby pokazać jego nieaktywność, a kiedy jest włączony (HIGH), kolor tła przycisku zmienia się na CZERWONY.

CSS w torbie, zapiszmy jako smarthome.css, a następnie przenieś go przez filezilla (lub inne oprogramowanie SCP, którego chcesz użyć) do folderu stylów na naszym raspberry pi i napraw ostatni element, kod HTML. Pamiętaj, aby pobrać pełny CSS stąd.

Kod HTML:

Kod html łączy wszystko razem, javascript i arkusz stylów.

Naciśnij przycisk; otrzymać boczek

W tagu head istnieje kilka bardzo ważnych funkcji.

Powyższy wiersz kodu umożliwia zapisanie aplikacji internetowej na pulpicie mobilnym przy użyciu przeglądarki Chrome lub Mobile Safari. Można to zrobić za pomocą menu Chrome. Dzięki temu aplikacja łatwo uruchamia się z pulpitu mobilnego lub w domu.

Następny wiersz kodu poniżej zapewnia pewien rodzaj reakcji na aplikację internetową. Pozwala to zajmować ekran dowolnego urządzenia, na którym jest uruchomiony.

Następna linia kodu deklaruje tytuł wyświetlany na pasku tytułu strony internetowej.

Kolejne cztery wiersze kodów pełnią funkcję łączenia kodu html z kilkoma zasobami, które muszą działać zgodnie z oczekiwaniami.

Pierwsza linia powyżej połączeń głównym WebIOPi ramy JavaScript, który jest zakodowany w katalogu głównym serwera. Należy to wywołać za każdym razem, gdy ma być używany WebIOPi.

Druga linia wskazuje stronę html do naszego skryptu jQuery, trzecie punkty go w kierunku naszego arkusza stylów. Wreszcie ostatnia linia pomaga ustawić ikonę, która będzie używana na pulpicie mobilnym na wypadek, gdybyśmy zdecydowali się użyć jej jako aplikacji internetowej lub jako ikony ulubionych dla strony internetowej.

Sekcja treści kodu html zawiera tylko tagi przerwania, aby zapewnić prawidłowe wyrównanie przycisków z wierszem poniżej, informującym nasz kod HTML, aby wyświetlał to, co jest zapisane w pliku JavaScript. Id =”content” należy przypomnieć o zawartości deklaracji dla naszego przycisku wcześniejszym kodem JavaScript.

Znasz ćwiczenie, kod html jako index.html i przejdź do folderu html na Pi przez filezilla. Możesz pobrać cały plik CSS, JS i HTML stąd.

Edycje serwera WebIOPi dla automatyki domowej:

Na tym etapie jesteśmy gotowi, aby rozpocząć tworzenie naszych schematów i przetestować naszą aplikację internetową, ale przedtem musimy edytować plik konfiguracyjny usługi webiopi, aby wskazywało na użycie danych z naszego folderu html zamiast plików konfiguracyjnych, które zostały z nią dostarczone.

Aby edytować konfigurację, wykonaj następujące czynności z uprawnieniami administratora;

sudo nano / etc / webiopi / config

Poszukaj sekcji http w pliku konfiguracyjnym, sprawdź w sekcji, w której masz coś takiego, jak # Użyj doc-root, aby zmienić domyślną lokalizację HTML i plików zasobów

Skomentuj wszystko, co znajduje się pod nim, używając #, a następnie jeśli twój folder jest skonfigurowany jak mój, skieruj swój katalog główny na ścieżkę do pliku projektu

doc-root = / home / pi / webapp / html

Zapisz i wyjdź. Możesz także zmienić port z 8000, jeśli masz inny serwer działający na pi za pomocą tego portu. Jeśli nie, zapisz i wyjdź, jak idziemy dalej.

Ważne jest, aby pamiętać, że możesz zmienić hasło usługi WebIOPi za pomocą polecenia;

sudo webiopi-passwd

Poprosi Cię o podanie nowej nazwy użytkownika i hasła. Można to również całkowicie usunąć, ale bezpieczeństwo jest ważne, prawda?

Na koniec uruchom usługę WebIOPi, wydając poniższe polecenie:

sudo /etc/init.d/webiopi start

Stan serwera można sprawdzić za pomocą;

sudo /etc/init.d/webiopi status

Można go zatrzymać przed uruchomieniem za pomocą;

sudo /etc/init.d/webiopi stop

Aby skonfigurować WebIOPi do uruchamiania podczas rozruchu, użyj;

sudo update-rc.d wartości domyślne webiopi

Jeśli chcesz cofnąć i zatrzymać działanie podczas rozruchu, użyj;

sudo update-rc.d webiopi remove

Schemat obwodu i wyjaśnienie:

Po skonfigurowaniu naszego oprogramowania jesteśmy gotowi rozpocząć tworzenie schematów dla tego projektu urządzeń domowych sterowanych przez Internet.

Chociaż nie mogłem położyć rąk na modułach przekaźników, które moim zdaniem są łatwiejsze w obsłudze dla hobbystów. Więc rysuję tutaj schematy zwykłych samodzielnych pojedynczych przekaźników 5v.

Podłącz obwód, jak pokazano na powyższym obwodzie zamarzania. Należy pamiętać, że COM, NO (normalnie otwarty) i NC (normalnie zamknięty) własnego przekaźnika mogą znajdować się po różnych stronach / punktach. Prosimy o użycie milimetra, aby to sprawdzić. Dowiedz się więcej o przekaźniku tutaj.

Po podłączeniu naszych komponentów uruchom serwer, ze strony internetowej, przejdź do adresu IP swojego Raspberry Pi i wskaż port, jak opisano wcześniej, zaloguj się za pomocą swojej nazwy użytkownika i hasła, a powinieneś zobaczyć stronę internetową, która wygląda dokładnie tak, jak na poniższym obrazku.

Teraz możesz łatwo sterować czterema urządzeniami AC Home z dowolnego miejsca bezprzewodowo, po prostu klikając przyciski. Będzie działać z telefonu komórkowego, tabletu itp. I możesz dodać więcej przycisków i przekaźników, aby sterować większą liczbą urządzeń. Sprawdź pełny film poniżej.

To jest to, dzięki, że zostaniecie przy tym. Jeśli masz jakieś pytania, umieść je w polu komentarza.