Automazione domestica controllata dal web basata su IOT utilizzando Raspberry Pi

Ciao ragazzi, benvenuti nel tutorial di oggi, una delle cose buone del Raspberry Pi è la grande capacità e facilità con cui vi dà l'opportunità di connettere i dispositivi a Internet, specialmente per i progetti relativi all'automazione domestica. Oggi esploreremo la possibilità di controllare gli apparecchi AC con il clic di pulsanti su una pagina Web utilizzando Internet. Utilizzando questo sistema di automazione domestica basato sull'IoT, puoi controllare i tuoi elettrodomestici da qualsiasi parte del mondo. Questo server web può essere eseguito da qualsiasi dispositivo in grado di eseguire applicazioni HTML, come smartphone, tablet, computer ecc.

Componenti richiesti:

Per questo progetto, i requisiti rientreranno in due categorie, hardware e software:

I. Requisiti hardware:

1. Raspberry Pi 3 (qualsiasi altra versione sarà carina)
2. Scheda di memoria da 8 o 16 GB con Raspbian Jessie
3. 5v relè
4. Transistor 2n222
5. Diodi
6. Cavi per ponticelli
7. Blocchi di connessione
8. LED da testare.
9. Lampada CA da testare
10. Cavi breadboard e jumper
11. Resistenza da 220 o 100 ohm

II. Requisiti software:

Oltre al sistema operativo Raspbian Jessie in esecuzione sul raspberry pi, useremo anche il frame work WebIOPi, notepad ++ in esecuzione sul tuo PC e filezila per copiare i file dal PC al raspberry pi, in particolare i file dell'app web.

Inoltre non è necessario codificare in Python per questo progetto di automazione domestica, WebIOPi farà tutto il lavoro.

Preparazione del Raspberry Pi:

È un'abitudine di qualche tipo per me e penso che sia buona, la prima cosa che faccio ogni volta che voglio usare il Raspberry Pi è aggiornare il PI. Per questo progetto, questa sezione comprenderà le procedure di aggiornamento Pi e l' installazione del framework WebIOPi che ci aiuterà a gestire la comunicazione dalla pagina web al raspberry pi. Probabilmente dovrei affermare che questo può essere fatto anche in un modo discutibilmente più semplice usando il lavoro a telaio Python Flask, ma una delle cose interessanti del fai-da-te è quando dai un'occhiata sotto il cofano e fai il lavoro difficile. È qui che arriva tutta la gioia del fai-da-te.

Per aggiornare il raspberry Pi sotto i comandi e quindi riavviare RPi;

sudo apt-get update sudo apt-get upgrade sudo riavvio

Fatto ciò, la prossima cosa da fare è installare il framework webIOPi.

Assicurati di essere nella directory home usando;

cd ~

Usa wget per ottenere il file dalla loro pagina sourceforge;

wget

Quando il download è terminato, estrai il file e vai nella directory;

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

A questo punto prima di eseguire il setup, dobbiamo installare una patch in quanto questa versione del WebIOPi non funziona con il raspberry pi 3 che sto utilizzando e non sono riuscito a trovare una versione del WebIOPi che funzioni espressamente con il Pi 3.

I seguenti comandi vengono utilizzati per installare la patch mentre si è ancora nella directory WebIOPi, eseguire;

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

Quindi possiamo eseguire l'installazione del setup per WebIOPi usando;

sudo./setup.sh

Continua a dire di sì se ti viene chiesto di installare eventuali dipendenze durante l'installazione del setup. Al termine, riavvia il tuo pi;

sudo riavvio

Prova l'installazione di WebIOPi:

Prima di passare a schemi e codici, con il Raspberry Pi riattivato, dovremo testare la nostra installazione WebIOPi per assicurarci che tutto funzioni correttamente come desiderato.

Esegui il comando;

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

Dopo aver emesso il comando sopra sul pi, punta il browser web del tuo computer connesso al raspberry pi su http: // raspberrypi. mshome.net:8000 o http; // thepi'sIPaddress: 8000. Il sistema richiederà nome utente e password.

Il nome utente è webiopi La password è lampone

Questo accesso può essere rimosso in seguito, se lo si desidera, ma anche il sistema di automazione domestica merita un ulteriore livello di sicurezza per impedire a chiunque abbia gli apparecchi di controllo IP e i dispositivi IOT nella tua casa.

Dopo il login, guardati intorno, quindi fai clic sul collegamento dell'intestazione GPIO.

Per questo test, collegheremo un LED a GPIO 17, quindi vai avanti e imposta GPIO 17 come uscita.

Fatto ciò, collega il led al tuo raspberry pi come mostrato negli schemi seguenti.

Dopo la connessione, torna alla pagina web e fai clic sul pulsante del pin 11 per accendere o spegnere il LED. In questo modo possiamo controllare il GPIO Raspberry Pi utilizzando WebIOPi.

Dopo il test, se tutto ha funzionato come descritto, possiamo tornare al terminale e interrompere il programma con CTRL + C.Se hai qualche problema con questa configurazione, contattami tramite la sezione commenti.

Maggiori informazioni su Webiopi possono essere trovate sulla sua pagina Wiki (http://webiopi.trouch.com/INSTALL.html)

Una volta completato il test, siamo quindi pronti per avviare il progetto principale.

Creazione dell'applicazione Web per l'automazione domestica Raspberry Pi:

Qui modificheremo la configurazione predefinita del servizio WebIOPi e aggiungeremo il nostro codice da eseguire quando viene chiamato. La prima cosa che faremo è installare filezilla o qualsiasi altro software di copia FTP / SCP installato sul nostro PC. Sarai d'accordo con me sul fatto che la codifica sul pi tramite il terminale è piuttosto stressante, quindi filezilla o qualsiasi altro software SCP tornerà utile in questa fase. Prima di iniziare a scrivere i codici html, css e java script per questa applicazione Web di automazione domestica IoT e spostarli sul Raspberry Pi, creiamo la cartella del progetto dove saranno tutti i nostri file web.

Assicurati di essere nella directory home utilizzando, quindi crea la cartella, vai nella cartella creata e crea la cartella html nella directory:

cd ~ mkdir webapp cd webapp mkdir html

Crea una cartella per script, CSS e immagini all'interno della cartella html

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

Con i nostri file creati passiamo alla scrittura dei codici sul nostro PC e da lì passiamo al Pi tramite filezilla.

Il codice JavaScript:

Il primo pezzo di codice che scriveremo è quello del javascript. È un semplice script per comunicare con il servizio WebIOPi.

È importante notare che per questo progetto, la nostra app web sarà composta da quattro pulsanti, il che significa che abbiamo in programma di controllare solo quattro pin GPIO, anche se controlleremo solo due relè nella nostra dimostrazione. Guarda il video completo alla fine.

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 (pulsante); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (pulsante); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (pulsante);});

Il codice sopra viene eseguito quando WebIOPi è pronto.

Di seguito abbiamo spiegato il codice JavaScript:

webiopi (). ready (function (): Questo istruisce il nostro sistema a creare questa funzione ed eseguirla quando il webiopi è pronto.

webiopi (). setFunction (23, "out"); Questo ci aiuta a dire al servizio WebIOPi di impostare GPIO23 come output. Abbiamo quattro pulsanti qui, potresti averne di più se implementi più pulsanti.

var contenuto, pulsante; Questa riga dice al nostro sistema di creare una variabile denominata content e di rendere la variabile un pulsante.

contenuto = $ ("# contenuto"); La variabile di contenuto verrà ancora utilizzata nel nostro html e css. Quindi, quando ci riferiamo a #content, il framework WebIOPi crea tutto ciò che è associato ad esso.

button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi può creare diversi tipi di pulsanti. La parte di codice sopra ci aiuta a dire al servizio WebIOPi di creare un pulsante GPIO che controlla il pin GPIO in questo caso 17 etichettato "Relè 1". Lo stesso vale per gli altri.

content.append (pulsante); Aggiungi questo codice a qualsiasi altro codice per il pulsante creato nel file html o altrove. È possibile creare più pulsanti e tutti avranno le stesse proprietà di questo pulsante. Ciò è particolarmente utile quando si scrive il CSS o lo script.

Dopo aver creato i file JS, lo salviamo e poi lo copiamo usando filezilla su webapp / html / scripts se hai creato i tuoi file nello stesso modo in cui ho fatto il mio.

Fatto ciò, passiamo alla creazione del CSS. Puoi scaricare completamente il codice dal link fornito nella sezione Codice alla fine.

Il codice CSS:

Il CSS ci aiuta a rendere bella la nostra pagina web di automazione domestica IoT Raspberry Pi.

Volevo che la pagina web assomigliasse all'immagine qui sotto e quindi ho dovuto scrivere il foglio di stile smarthome.css per ottenerlo.

Di seguito abbiamo spiegato il codice CSS:

Lo script CSS sembra troppo ingombrante per essere incluso qui, quindi ne selezionerò solo una parte e li userò per l'analisi. Puoi scaricare il file CSS completo da qui. CSS è facile e puoi capirlo semplicemente passando attraverso il codice CSS. Puoi facilmente riprodurre questa parte e utilizzare subito il nostro codice CSS.

La prima parte dello script rappresenta il foglio di stile per il corpo dell'app Web e viene mostrato di seguito;

body {background-color: #ffffff; immagine di sfondo: url ('/ img / smart.png'); background-repeat: nessuna ripetizione; background-position: center; dimensione dello sfondo: copertina; carattere: grassetto 18px / 25px Arial, sans-serif; colore: LightGray; }

Voglio credere che il codice sopra sia autoesplicativo, impostiamo il colore di sfondo come #ffffff che è bianco, quindi aggiungiamo un'immagine di sfondo situata in quella posizione della cartella (ricordi la nostra precedente configurazione della cartella?), Assicuriamo che l'immagine non lo sia t ripetere impostando la proprietà background-repeat su no-repeat, quindi istruire il CSS a centralizzare lo sfondo. Passiamo quindi a impostare la dimensione, il carattere e il colore dello sfondo.

Con il corpo fatto, abbiamo scritto il css affinché i pulsanti sembrassero belli.

pulsante {display: blocca; posizione: relativa; margine: 10px; imbottitura: 0 10px; text-align: center; decorazione del testo: nessuna; larghezza: 130px; altezza: 40px; carattere: grassetto 18px / 25px Arial, sans-serif; colore nero; text-shadow: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;

Per mantenere questo breve, anche ogni altra cosa nel codice è stata fatta per farlo sembrare buono. Puoi cambiarli per vedere cosa succede, penso che si chiami apprendimento tramite tentativi ed errori, ma una cosa buona dei CSS è che le cose sono espresse in un inglese semplice, il che significa che sono abbastanza facili da capire. L'altra parte del blocco dei pulsanti ha pochi extra per l'ombreggiatura del testo sul pulsante e l'ombra del pulsante. Ha anche un leggero effetto di transizione che lo aiuta a sembrare bello e realistico quando si preme il pulsante. Questi sono definiti separatamente per webkit, firefox, opera ecc solo per garantire che la pagina web funzioni in modo ottimale su tutte le piattaforme.

Il blocco di codice successivo è per il servizio WebIOPi per dirgli che si tratta di un input per il servizio WebIOPi.

i nput {display: block; larghezza: 160 px; altezza: 45px; }

L'ultima cosa che vogliamo fare è dare una sorta di indicazione quando il pulsante è stato premuto. Quindi puoi guardare lo schermo e il colore dei pulsanti ti consente di conoscere lo stato corrente. Per fare ciò, la riga di codice sottostante è stata implementata per ogni singolo pulsante.

# gpio17.LOW {background-color: Gray; colore nero; } # gpio17.HIGH {background-color: Red; colore: LightGray; }

Le righe di codice sopra cambiano semplicemente il colore del pulsante in base al suo stato corrente. Quando il pulsante è spento (BASSO), il colore di sfondo del pulsante diventa grigio per mostrare il suo inattivo e quando è acceso (ALTO) il colore di sfondo del pulsante diventa ROSSO.

CSS nella borsa, salviamo come smarthome.css, quindi spostalo tramite filezilla (o qualsiasi altro software SCP che desideri utilizzare) nella cartella styles sul nostro raspberry pi e aggiusta il pezzo finale, il codice html. Ricordati di scaricare il CSS completo da qui.

Codice HTML:

Il codice html riunisce tutto, JavaScript e il foglio di stile.

Premi il bottone; ricevere pancetta

All'interno del tag head esistono alcune caratteristiche molto importanti.

La riga di codice sopra consente di salvare l'app Web su un desktop mobile utilizzando Chrome o Safari mobile. Questo può essere fatto tramite il menu Chrome. Ciò conferisce all'app un facile avvio dal desktop mobile o da casa.

La riga di codice successiva di seguito fornisce una sorta di reattività all'app Web. Consente di occupare lo schermo di qualsiasi dispositivo su cui è stato lanciato.

La riga di codice successiva dichiara il titolo mostrato sulla barra del titolo della pagina web.

Le successive quattro righe di codice svolgono ciascuna la funzione di collegare il codice html a diverse risorse di cui ha bisogno per funzionare come desiderato.

La prima riga sopra richiama il JavaScript del framework WebIOPi principale che è hardcoded nella root del server. Questo deve essere chiamato ogni volta che si utilizza WebIOPi.

La seconda riga punta la pagina html al nostro script jQuery, la terza la punta nella direzione del nostro foglio di stile. Infine l'ultima riga aiuta a impostare un'icona da utilizzare sul desktop mobile nel caso in cui decidessimo di usarla come app web o come favicon per la pagina web.

La sezione del corpo del codice html contiene solo tag di interruzione per garantire che i pulsanti siano allineati correttamente con la riga sottostante che dice al nostro codice html di visualizzare ciò che è scritto nel file JavaScript. L' id = "content" dovrebbe ricordarti la dichiarazione del contenuto per il nostro pulsante in precedenza sotto il codice JavaScript.

Conosci il trapano, il codice html come index.html e passa alla cartella html sul Pi tramite filezilla. Puoi scaricare tutti i file CSS, JS e HTML da qui.

Modifiche al server WebIOPi per l'automazione domestica:

In questa fase, siamo pronti per iniziare a creare i nostri schemi e testare la nostra app web, ma prima di allora dobbiamo modificare il file di configurazione del servizio webiopi in modo che sia indicato di utilizzare i dati dalla nostra cartella html invece dei file di configurazione forniti con esso.

Per modificare la configurazione eseguire quanto segue con i permessi di root;

sudo nano / etc / webiopi / config

Cerca la sezione http del file di configurazione, controlla nella sezione in cui hai qualcosa come #Usa doc-root per cambiare l'HTML predefinito e la posizione dei file di risorse

Commenta tutto ciò che c'è sotto usando # quindi se la tua cartella è configurata come la mia, punta il tuo doc-root al percorso del tuo file di progetto

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

Salva ed esci. Puoi anche cambiare la porta da 8000, nel caso in cui tu abbia un altro server in esecuzione sul pi usando quella porta. In caso contrario, salva ed esci, mentre andiamo avanti.

È importante notare che è possibile modificare la password del servizio WebIOPi utilizzando il comando;

sudo webiopi-passwd

Ti chiederà un nuovo nome utente e password. Questo può anche essere rimosso totalmente, ma la sicurezza è importante, giusto?

Infine, esegui il servizio WebIOPi immettendo il comando seguente:

sudo /etc/init.d/webiopi start

Lo stato del server può essere verificato utilizzando;

sudo /etc/init.d/webiopi status

Può essere interrotto dall'esecuzione utilizzando;

sudo /etc/init.d/webiopi stop

Per configurare WebIOPi in modo che venga eseguito all'avvio, utilizzare;

sudo update-rc.d webiopi predefiniti

Se vuoi invertire e impedirne l'esecuzione all'avvio, usa;

sudo update-rc.d webiopi remove

Schema del circuito e spiegazione:

Una volta completata la configurazione del software, siamo pronti per iniziare a creare gli schemi per questo progetto di elettrodomestico controllato dal Web.

Anche se non ho potuto mettere le mani sui moduli relè, con cui ritengo sia più facile lavorare per gli hobbisti. Quindi sto disegnando qui gli schemi per i normali relè 5v singoli indipendenti.

Collega il tuo circuito come mostrato nel circuito sopra. Si noti che COM, NO (normalmente aperto) e NC (normalmente chiuso) del proprio relè possono trovarsi su lati / punti diversi. Si prega di utilizzare un millimetro per provarlo. Scopri di più sul relay qui.

Con i nostri componenti collegati, avvia il tuo server, da una pagina web, vai all'IP del tuo Raspberry Pi e indica la porta come descritto in precedenza, accedi con il tuo nome utente e password e dovresti vedere una pagina web che assomiglia esattamente all'immagine qui sotto.

Ora puoi controllare facilmente quattro applicazioni AC Home da qualsiasi luogo in modalità wireless, semplicemente facendo clic sui pulsanti. Funzionerà da cellulare, tablet ecc. E puoi aggiungere più pulsanti e relè per controllare più dispositivi. Guarda il video completo qui sotto.

Questo è tutto ragazzi, grazie per questo. In caso di domande, inseriscile nella casella dei commenti.