- Nödvändiga komponenter:
- Förbereda Raspberry Pi:
- Testa WebIOPi-installationen:
- Bygga webbapplikationen för Raspberry Pi Home Automation:
- WebIOPi-serverredigeringar för hemautomation:
- Kretsschema och förklaring:
Hej killar, välkommen till dagens handledning, en av de bra sakerna med Raspberry Pi är den stora förmågan och lättheten som det ger dig möjlighet att ansluta enheter till internet speciellt för hemmeautomationsrelaterade projekt. Idag ska vi utforska möjligheten att styra växelströmsapparater med ett klick på knapparna på en webbsida med hjälp av internet. Med detta IoT-baserade hemautomationssystem kan du styra dina hushållsapparater var som helst i världen. Denna webbserver kan köras från vilken enhet som helst som kan köra HTML-applikationer, som Smart Phone, surfplatta, dator etc.
Nödvändiga komponenter:
För detta projekt faller kraven under två kategorier, hårdvara och programvara:
I. Hårdvarukrav:
- Raspberry Pi 3 (någon annan version kommer att vara trevlig)
- Minneskort 8 eller 16 GB med Raspbian Jessie
- 5v-reläer
- 2n222 transistorer
- Dioder
- Bygeltrådar
- Anslutningsblock
- Lysdioder att testa.
- AC-lampa för att testa
- Brödbrädor och bygelkablar
- Motstånd 220 eller 100 ohm
II. Programvarukrav:
Förutom operativsystemet Raspbian Jessie som körs på hallon-pi, kommer vi också att använda WebIOPi-ramarbetet, notepad ++ som körs på din dator och filezila för att kopiera filer från datorn till hallon-pi, särskilt webbappfilerna.
Du behöver inte koda i Python för detta hemautomationsprojekt, WebIOPi kommer att göra allt arbete.
Förbereda Raspberry Pi:
Det är en sorts vana för mig och jag tycker att det är bra, det första jag gör varje gång jag vill använda Raspberry Pi är att uppdatera PI. För detta projekt kommer detta avsnitt att bestå av Pi-uppdateringsprocedurer och installation av WebIOPi-ramverket som hjälper oss att hantera kommunikation från webbsidan till hallon pi. Jag borde nog säga att detta också kan göras på ett förmodligen enklare sätt med python Flask-ramarbetet, men en av de intressanta sakerna med DIY är när du tittar under huven och gör det svåra arbetet. Det är där all glädje av DIY kommer.
För att uppdatera hallon Pi nedan kommandon och starta sedan om RPi;
sudo apt-get update sudo apt-get upgrade sudo reboot
När detta är gjort är nästa sak för oss att installera webIOPi-ramverket.
Se till att du använder hemkatalogen;
cd ~
Använd wget för att hämta filen från deras sourceforge-sida;
wget
När nedladdningen är klar extraherar du filen och går in i katalogen.
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Vid denna tidpunkt innan installationen körs måste vi installera en patch eftersom den här versionen av WebIOPi inte fungerar med hallon pi 3 som jag använder och jag kunde inte hitta en version av WebIOPi som fungerar uttryckligen med Pi 3.
Nedanstående kommandon används för att installera patch medan du fortfarande är i WebIOPi-katalogen, kör;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Sedan kan vi köra installationsinstallationen för WebIOPi med;
sudo./setup.sh
Fortsätt säga ja om du blir ombedd att installera beroenden under installationsinstallationen. Starta om din pi när du är klar;
omstart av sudo
Testa WebIOPi-installationen:
Innan vi hoppar in i scheman och koder, med Raspberry Pi igen, måste vi testa vår WebIOPi-installation för att vara säker på att allt fungerar bra som önskat.
Kör kommandot;
sudo webiopi -d -c / etc / webiopi / config
Efter att ha utfärdat kommandot ovan på pi, peka webbläsaren på din dator som är ansluten till hallon pi till http: // raspberrypi. mshome.net:8000 eller http; // thepi'sIP-adress: 8000. Systemet kommer att be dig om användarnamn och lösenord.
Användarnamn är webiopi Lösenordet är hallon
Denna inloggning kan tas bort senare om så önskas, men även ditt hemautomationssystem förtjänar lite extra säkerhetsnivå för att förhindra att vem som helst har IP-kontrollerande apparater och IOT-enheter i ditt hem.
Efter inloggningen, titta runt och klicka sedan på GPIO-rubriklänken.
För detta test ansluter vi en LED till GPIO 17, så fortsätt och ställ in GPIO 17 som en utgång.
När detta är gjort, anslut ledningen till din hallon pi som visas i schemat nedan.
Efter anslutningen, gå tillbaka till webbsidan och klicka på knappen 11 för att slå på eller av LED-lampan. På så sätt kan vi styra Raspberry Pi GPIO med WebIOPi.
Efter testet, om allt fungerade som beskrivet, kan vi gå tillbaka till terminalen och stoppa programmet med CTRL + C. Om du har några problem med denna inställning, slå mig upp via kommentarsektionen.
Mer information om Webiopi finns på dess Wiki-sida (http://webiopi.trouch.com/INSTALL.html)
När testet är klart är vi sedan inställda på att starta huvudprojektet.
Bygga webbapplikationen för Raspberry Pi Home Automation:
Här redigerar vi standardkonfigurationen för WebIOPi-tjänsten och lägger till vår egen kod som ska köras när den anropas. Det första vi ska göra är att få filezilla eller någon annan FTP / SCP-kopieringsprogramvara installerad på vår dator. Du håller med mig om att kodning på pi via terminalen är ganska stressande, så filezilla eller någon annan SCP-programvara kommer att vara till nytta i detta skede. Innan vi börjar skriva html-, css- och java-skriptkoder för denna IoT- hemautomationswebapplikation och flytta dem till Raspberry Pi, kan vi skapa projektmappen där alla våra webbfiler kommer att finnas.
Se till att du är i hemkatalogen och skapa sedan mappen, gå in i den skapade mappen och skapa html-mappen i katalogen:
cd ~ mkdir webapp cd webapp mkdir html
Skapa en mapp för skript, CSS och bilder i html-mappen
mkdir html / css mkdir html / img mkdir html / scripts
Med våra skapade filer kan vi gå till att skriva koder på vår dator och sedan flytta till Pi via filezilla.
JavaScript-koden:
Den första koden vi ska skriva är javaskriptet. Det är ett enkelt skript för att kommunicera med WebIOPi-tjänsten.
Det är viktigt att notera att för detta projekt kommer vår webbapp att bestå av fyra knappar, vilket innebär att vi planerar att kontrollera bara fyra GPIO-stift, även om vi bara kommer att styra två reläer i vår demonstration. Kolla hela videon i slutet.
webiopi (). klar (funktion () {webiopi (). setFunction (17, "ut"); webiopi (). setFunction (18, "ut"); webiopi (). setFunction (22, "ut"); webiopi ().setFunction (23, "ut"); var innehåll, knapp; innehåll = $ ("# innehåll"); knapp = webiopi (). createGPIOButton (17, "Relä 1"); content.append (knapp); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relä 4"); content.append (knapp);});
Koden ovan körs när WebIOPi är redo.
Nedan har vi förklarat JavaScript-koden:
webiopi (). ready (funktion (): Detta instruerar bara vårt system att skapa den här funktionen och köra den när webiopi är redo.
webiopi (). setFunction (23, "ut"); Detta hjälper oss att berätta för WebIOPi-tjänsten att ställa in GPIO23 som utdata. Vi har fyra knappar här, du kan ha mer av det om du implementerar fler knappar.
var innehåll, knapp; Den här raden säger till vårt system att skapa en variabel med namnet innehåll och göra variabeln till en knapp.
innehåll = $ ("# innehåll"); Innehållsvariabeln kommer fortfarande att användas i vår html och css. Så när vi hänvisar till #content skapar WebIOPi-ramverket allt som är associerat med det.
button = webiopi (). createGPIOButton (17, "Relä 1"); WebIOPi kan skapa olika typer av knappar. Koden ovan hjälper oss att berätta för WebIOPi-tjänsten att skapa en GPIO-knapp som styr GPIO-stiftet i detta fall 17 märkt “Relä 1”. Samma sak gäller för de andra.
content.append (knapp); Lägg till den här koden till någon annan kod för knappen som skapas antingen i html-filen eller någon annanstans. Fler knappar kan skapas och har alla samma egenskaper som den här knappen. Detta är särskilt användbart när du skriver CSS eller Script.
Efter att ha skapat JS-filerna sparar vi den och kopierar den sedan med filezilla till webapp / html / skript om du skapade dina filer på samma sätt som jag gjorde.
Med detta gjort går vi vidare till att skapa CSS. Du kan ladda ner koden helt från länken i avsnittet Kod till slut.
CSS-koden:
CSS hjälper oss att göra vår hemsida för IoT Raspberry Pi hemma automatiserad.
Jag ville att webbsidan skulle se ut som bilden nedan och var därför tvungen att skriva stilarket smarthome.css för att uppnå det.
Nedan har vi förklarat CSS-koden:
CSS-skriptet känns för skrymmande för att inkludera här så jag väljer bara en del av det och använder dem för uppdelningen. Du kan ladda ner hela CSS-filen härifrån. CSS är enkelt och du kan förstå det bara genom att gå igenom CSS-koden. Du kan enkelt hoppa över den här delen och använda vår CSS-kod direkt.
Den första delen av skriptet representerar stilarket för webbappens kropp och dess visas nedan;
kropp {bakgrundsfärg: #ffffff; bakgrundsbild: url ('/ img / smart.png'); bakgrundsupprepning: ingen upprepning; bakgrundsposition: centrum; bakgrundsstorlek: omslag; teckensnitt: fet 18px / 25px Arial, sans-serif; färg: LightGray; }
Jag vill tro att koden ovan är självförklarande, vi ställer in bakgrundsfärgen som #ffffff som är vit, sedan lägger vi till en bakgrundsbild som ligger på den där mappplatsen (kommer du ihåg vår tidigare mappkonfiguration?), Vi ser till att bilden inte ' t upprepa genom att ställa in bakgrundsupprepningsegenskapen till ingen upprepning och be sedan CSS att centralisera bakgrunden. Vi flyttar sedan för att ställa in bakgrundsstorlek, teckensnitt och färg.
Med kroppen klar skrev vi css för att knapparna skulle se snygga ut.
knapp {display: block; position: relativ; marginal: 10px; stoppning: 0 10px; textjustera: centrum; text-dekoration: ingen; bredd: 130 pixlar; höjd: 40px; teckensnitt: fet 18px / 25px Arial, sans-serif; svart färg; text-skugga: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; gränsradie: 30 pixlar;
För att hålla denna kortfattning gjordes också alla andra saker i koden för att få den att se bra ut. Du kan ändra dem och se vad som händer, jag tror att det kallas lärande via försök och fel men en bra sak med CSS är att saker uttrycks på vanlig engelska vilket betyder att de är ganska lätta att förstå. Den andra delen av knappblocket har få extrafunktioner för textskugga på knapp och knappskugga. Det har också en liten övergångseffekt som hjälper den att se snygg och realistisk ut när du trycker på knappen. Dessa definieras separat för webbkit, firefox, opera etc bara för att säkerställa att webbsidan fungerar optimalt på alla plattformar.
Nästa kodblock är för WebIOPi-tjänsten att berätta att detta är en ingång till WebIOPi-tjänsten.
i nput {display: block; bredd: 160px; höjd: 45px; }
Det sista vi vill göra är att ge någon form av indikation när knappen har tryckts. Så du kan se på skärmen och knapparnas färg så att du vet det aktuella läget. För att göra detta implementerades kodraden nedan för varje knapp.
# gpio17.LOW {bakgrundsfärg: Grå; svart färg; } # gpio17.HIGH {bakgrundsfärg: Röd; färg: LightGray; }
Kodraderna ovan ändrar helt enkelt knappens färg baserat på dess nuvarande tillstånd. När knappen är avstängd (LÅG) blir knapparnas bakgrundsfärg grå för att visa att den är inaktiv och när den är på (HÖG) blir bakgrundsfärgen på knappen RÖD.
CSS i påsen, kan spara som smarthome.css, flytta det sedan via filezilla (eller någon annan SCP-programvara du vill använda) till stilmappen på vår hallon-pi och fixa den sista biten, html-koden. Kom ihåg att ladda ner hela CSS härifrån.
HTML-kod:
HTML-koden drar ihop allt, javascript och stilarket.
Tryckknapp; ta emot bacon
Inom huvudetiketten finns några mycket viktiga funktioner.
Med kodraden ovan kan webbappen sparas på ett mobilt skrivbord med krom- eller mobilsafari. Detta kan göras via krommenyn. Detta ger appen en lätt startkänsla från det mobila skrivbordet eller hemma.
Nästa kodrad nedan ger någon form av lyhördhet för webbappen. Det gör det möjligt att uppta skärmen på vilken enhet som den lanserades på.
Nästa kodrad förklarar titeln som visas i titelraden på webbsidan.
De nästa fyra raderna med koder utför vardera funktionen att länka html-koden till flera resurser som den behöver för att fungera som önskat.
Den första raden ovan anropar det huvudsakliga WebIOPi-ramverket JavaScript som är hårdkodat i serverroten. Detta måste anropas varje gång WebIOPi ska användas.
Den andra raden pekar html-sidan till vårt jQuery-skript, den tredje pekar den i riktning mot vårt stilark. Slutligen hjälper den sista raden att ställa in en ikon som ska användas på det mobila skrivbordet om vi bestämmer oss för att använda den som en webbapp eller som ett favoritikon för webbsidan.
Kroppsavsnittet i html-koden innehåller bara bryttaggar för att säkerställa att knapparna stämmer ordentligt med raden nedan som berättar för vår html-kod att visa vad som står i JavaScript-filen. Det id =”content” bör påminna dig om innehållsdeklaration för vår knapp tidigare under JavaScript-kod.
Du känner till borren, html-koden som index.html och flyttar till html-mappen på Pi via filezilla. Du kan hämta alla CSS-, JS- och HTML-filerna härifrån.
WebIOPi-serverredigeringar för hemautomation:
I det här skedet är vi redo att börja skapa våra scheman och testa vår webbapp men innan dess måste vi redigera konfigurationsfilen för webiopi- tjänsten så det pekar på att använda data från vår html-mapp istället för de konfigurationsfiler som följde med den.
För att redigera konfigurationen kör du följande med rootbehörighet;
sudo nano / etc / webiopi / config
Leta efter http-avsnittet i konfigurationsfilen, kolla under avsnittet där du har något som, # Använd doc-root för att ändra standard HTML- och resursfiler plats
Kommentera allt under det med #, och om din mapp är inställd som min, peka din doc-root mot sökvägen till din projektfil
doc-root = / home / pi / webapp / html
Spara och avsluta. Du kan också ändra porten från 8000, om du har en annan server som kör på pi med den porten. Om inte spara och sluta när vi går vidare.
Det är viktigt att notera att du kan ändra lösenordet för WebIOPi-tjänsten med kommandot.
sudo webiopi-passwd
Det kommer att be dig om ett nytt användarnamn och lösenord. Detta kan också tas bort helt men säkerhet är viktigt, eller hur?
Slutligen kör WebIOPi-tjänsten genom att utfärda kommandot nedan:
sudo /etc/init.d/webiopi startar
Serverstatus kan kontrolleras med;
sudo /etc/init.d/webiopi-status
Det kan stoppas från att köras med;
sudo /etc/init.d/webiopi stopp
För att ställa in att WebIOPi ska köras vid start, använd;
sudo update-rc.d standardinställningar för webiopi
Om du vill vända och förhindra att den körs vid start, använd;
sudo update-rc.d webiopi ta bort
Kretsschema och förklaring:
När vår programvara är klar är vi redo att börja skapa scheman för detta webbstyrda hushållsapparatprojekt.
Även om jag inte kunde lägga händerna på relämoduler, vilket jag tycker är lättare att arbeta med för hobbyister. Så jag ritar här schemat för vanliga fristående enskilda 5v-reläer.
Anslut din krets enligt bilden ovan. Observera att COM, NO (normalt öppen) och NC (normalt nära) för ditt eget relä kan vara placerade på olika sidor / punkter. Använd en millimeter för att testa den. Läs mer om relä här.
När våra komponenter är anslutna, starta din server, från en webbsida, gå till IP-adressen för din Raspberry Pi och ange porten som beskrivits tidigare, logga in med ditt användarnamn och lösenord, och du ska se en webbsida som ser ut precis som bilden nedan.
Nu kan du enkelt styra fyra AC-hemapparater var som helst trådlöst, bara genom att klicka på knapparna. Detta fungerar från mobiltelefon, surfplatta etc. och du kan lägga till fler knappar och reläer för att styra fler enheter. Kolla hela videon nedan.
Det är det killar, tack som stannar kvar för den här. Om du har några frågor, släpp dem i kommentarfältet.