Automatització domèstica controlada per web basada en IOT mitjançant raspberry pi

Hola nois, benvinguts al tutorial d'avui, una de les coses bones del Raspberry Pi és la gran capacitat i facilitat amb què us dóna l'oportunitat de connectar dispositius a Internet, especialment per a projectes relacionats amb la domòtica. Avui explorarem la possibilitat de controlar els aparells de corrent altern amb el clic de botons d’una pàgina web mitjançant internet. Mitjançant aquest sistema domòtic basat en IoT, podeu controlar els electrodomèstics des de qualsevol part del món. Aquest servidor web es pot executar des de qualsevol dispositiu que pugui executar aplicacions HTML, com ara telèfons intel·ligents, tauletes, ordinadors, etc.

Components necessaris:

Per a aquest projecte, els requisits es dividiran en dues categories: maquinari i programari:

I. Requisits de maquinari:

1. Raspberry Pi 3 (qualsevol altra versió serà bona)
2. Targeta de memòria de 8 o 16 GB amb Raspbian Jessie
3. Relleus de 5v
4. 2n222 transistors
5. Diodes
6. Jumper Wires
7. Blocs de connexió
8. LEDs per provar.
9. Llum de CA per provar
10. Cables de panell i pont
11. Resistència de 220 o 100 ohms

II. Requisits de programari:

A part del sistema operatiu Raspbian Jessie que s’executa al raspberry pi, també farem servir el treball de marcs WebIOPi, el bloc de notes ++ que s’executa al vostre PC i filezila per copiar fitxers del PC al raspberry pi, especialment els fitxers de les aplicacions web.

A més, no cal que codifiqueu a Python per a aquest projecte d’automatització domèstica, WebIOPi farà tota la feina.

Preparació del Raspberry Pi:

És un hàbit per a mi i crec que és bo, el primer que faig cada vegada que vull utilitzar el Raspberry Pi és actualitzar el PI. Per a aquest projecte, aquesta secció comprendrà els procediments d’actualització de Pi i la instal·lació del marc WebIOPi que ens ajudarà a gestionar la comunicació des de la pàgina web fins al raspberry pi. Probablement hauria d’afirmar que això també es pot fer d’una manera senzillament més senzilla mitjançant el treball del marc Python Flask, però un dels aspectes interessants del bricolatge és quan mireu sota el capó i feu el treball difícil. Aquí és on arriba tota l’alegria del bricolatge.

Per actualitzar el raspberry Pi a continuació de les ordres i reiniciar el RPi;

sudo apt-get update sudo apt-get upgrade sudo reinici

Fet això, el següent és instal·lar el framework webIOPi.

Assegureu-vos que esteu al directori inicial utilitzant;

cd ~

Utilitzeu wget per obtenir el fitxer des de la seva pàgina sourceforge;

wget

Quan finalitzeu la descàrrega, extreu el fitxer i aneu al directori;

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

En aquest moment, abans d'executar la configuració, hem d' instal·lar un pedaç ja que aquesta versió del WebIOPi no funciona amb el raspberry pi 3 que estic utilitzant i no he pogut trobar una versió del WebIOPi que funcioni expressament amb el Pi 3.

A continuació, s'utilitzen les ordres per instal·lar el pegat mentre es troba al directori WebIOPi, executeu;

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

Després podem executar la instal·lació de configuració per al WebIOPi mitjançant;

sudo./setup.sh

Seguiu dient que sí si se us demana que instal·leu dependències durant la instal·lació de la configuració. En acabar, reinicieu el pi;

sudo reiniciar

Proveu la instal·lació de WebIOPi:

Abans de saltar a esquemes i codis, amb el Raspberry Pi engegat, haurem de provar la nostra instal·lació de WebIOPi per assegurar-nos que tot funcioni bé com es desitgi.

Executeu l'ordre;

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

Després d’emetre l’ordre anterior al pi, dirigiu el navegador web de l’ordinador connectat al raspberry pi a http: // raspberrypi. mshome.net:8000 o http; // adreça IP de thepi: 8000. El sistema us demanarà un nom d’usuari i una contrasenya.

El nom d’ usuari és webiopi La contrasenya és raspberry

Aquest inici de sessió es pot eliminar més endavant si es desitja, però fins i tot el vostre sistema domòtic mereix un cert nivell de seguretat addicional per evitar que qualsevol persona que tingui els aparells de control IP i dispositius IOT a casa vostra.

Després de l'inici de sessió, mireu-vos al voltant i feu clic a l'enllaç de capçalera GPIO.

Per a aquesta prova, connectarem un LED a GPIO 17, així que continueu i configureu GPIO 17 com a sortida.

Fet això, connecteu el led al vostre raspberry pi tal com es mostra als esquemes següents.

Després de la connexió, torneu a la pàgina web i feu clic al botó del pin 11 per encendre o apagar el LED. D’aquesta manera podem controlar el Raspberry Pi GPIO mitjançant WebIOPi.

Després de la prova, si tot ha funcionat tal com es descriu, podem tornar al terminal i aturar el programa amb CTRL + C. Si teniu algun problema amb aquesta configuració, feu-me un cop d'ull a la secció de comentaris.

Podeu trobar més informació sobre Webiopi a la seva pàgina Wiki (http://webiopi.trouch.com/INSTALL.html)

Un cop finalitzada la prova, estem preparats per iniciar el projecte principal.

Creació de l'aplicació web per a la domòtica Raspberry Pi:

Aquí editarem la configuració predeterminada del servei WebIOPi i afegirem el nostre propi codi perquè s’executi quan se’ns cridi. El primer que farem és instal·lar filezilla o qualsevol altre programari de còpia FTP / SCP al nostre PC. Estareu d’acord amb mi que la codificació del pi a través del terminal és força estressant, de manera que filezilla o qualsevol altre programari SCP us ​​serà útil en aquesta etapa. Abans de començar a escriure els codis de script html, css i java per a aquesta aplicació web domòtica IoT i traslladar-los al Raspberry Pi, permetem crear la carpeta del projecte on es trobaran tots els nostres fitxers web.

Assegureu-vos que esteu al directori inicial mitjançant, a continuació, creeu la carpeta, aneu a la carpeta creada i creeu la carpeta html al directori:

cd ~ mkdir webapp cd webapp mkdir html

Creeu una carpeta per a scripts, CSS i imatges dins de la carpeta html

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

Amb els nostres fitxers creats, podem passar a escriure els codis al nostre PC i, a continuació, passar al Pi mitjançant filezilla.

El codi JavaScript:

El primer fragment de codi que escriurem és el del javascript. És un script senzill per comunicar-se amb el servei WebIOPi.

És important tenir en compte que per a aquest projecte, la nostra aplicació web constarà de quatre botons, cosa que significa que tenim previst controlar només quatre pins GPIO, tot i que controlarem només dos relés a la nostra demostració. Consulteu el vídeo complet al final.

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 (button); 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 (botó);});

El codi anterior s’executa quan el WebIOPi està a punt.

A continuació hem explicat el codi JavaScript:

webiopi (). ready (function (): només indica al nostre sistema que creï aquesta funció i que l'executi quan el webiopi estigui a punt.

webiopi (). setFunction (23, "out"); Això ens ajuda a dir al servei WebIOPi que estableixi GPIO23 com a sortida. Aquí tenim quatre botons, en podríeu tenir més si implementeu més botons.

contingut var, botó; Aquesta línia indica al nostre sistema que creï una variable anomenada contingut i que faci de la variable un botó.

content = $ ("# content"); La variable de contingut encara s’utilitzarà a tots els nostres html i css. Per tant, quan ens referim a #content, el marc WebIOPi crea tot allò que s’hi associa.

button = webiopi (). createGPIOButton (17, "Relé 1"); WebIOPi pot crear diferents tipus de botons. El fragment de codi anterior ens ajuda a indicar al servei WebIOPi que creï un botó GPIO que controli el pin GPIO en aquest cas 17 etiquetat com a "Relé 1". El mateix passa amb les altres.

content.append (botó); Afegiu aquest codi a qualsevol altre codi per al botó creat al fitxer html o en qualsevol altre lloc. Es poden crear més botons i tots tindran les mateixes propietats d’aquest botó. Això és especialment útil a l’hora d’escriure CSS o Script.

Després de crear els fitxers JS, els desem i després els copiem amb filezilla a webapp / html / scripts si heu creat els vostres fitxers de la mateixa manera que ho vaig fer jo.

Fet això, passem a crear el CSS. Podeu descarregar completament el codi des de l’enllaç que apareix a la secció Codi al final.

El codi CSS:

El CSS ens ajuda a fer que la nostra pàgina web d’automatització domèstica IoT Raspberry Pi quedi bonica.

Volia que la pàgina web s’assemblés a la imatge següent i, per tant, havia d’escriure el full d’estil smarthome.css per aconseguir-ho.

A continuació hem explicat el codi CSS:

L'escriptura CSS se sent massa voluminosa per incloure-la aquí, així que només en triaré una part i les utilitzaré per a la distribució. Podeu descarregar el fitxer CSS complet des d’aquí. CSS és fàcil i ho podeu entendre només mitjançant el codi CSS. Podeu canviar fàcilment aquesta part i utilitzar el nostre codi CSS immediatament.

La primera part de l'script representa el full d'estil del cos de l'aplicació web i es mostra a continuació;

cos {color de fons: #ffffff; imatge de fons: url ('/ img / smart.png'); background-repeat: no-repeat; posició de fons: centre; mida de fons: portada; font: negreta 18px / 25px Arial, sans-serif; color: Gris clar; }

Vull creure que el codi anterior s’explica per si mateix, definim el color de fons com #ffffff que és blanc i, a continuació, afegim una imatge de fons ubicada a la ubicació de la carpeta (recordeu la configuració de la carpeta anterior?), Ens assegurem que la imatge no No repetiu configurant la propietat background-repeat a no-repeat i, a continuació, demaneu al CSS que centralitzi el fons. A continuació, ens desplacem per definir la mida del fons, el tipus de lletra i el color.

Amb el cos fet, vam escriure el css perquè els botons quedessin bonics.

botó {display: block; posició: relativa; marge: 10 px; encoixinat: 0 10 px; text-align: centre; decoració de text: cap; amplada: 130 px; alçada: 40 px; font: bold 18px / 25px Arial, sans-serif; color: negre; text-ombra: 1px 1px 1px rgba (255.255.255,.22); -webkit-border-radius: 30 px; -moz-border-radi: 30 px; radi de la vora: 30 px;

Per fer aquest resum, també es van fer totes les altres coses del codi perquè quedés bé. Podeu canviar-los per veure què passa, crec que es diu aprenentatge mitjançant proves i errors, però una cosa bona de CSS és que s’expressen en anglès senzill, cosa que significa que són bastant fàcils d’entendre. L’altra part del bloc de botons té pocs extres per a ombres de text al botó i a l’ombra del botó. També té un lleuger efecte de transició que l’ajuda a tenir un aspecte agradable i realista quan es prem el botó. Es defineixen per separat per a webkit, firefox, opera, etc. només per garantir que la pàgina web tingui un rendiment òptim en totes les plataformes.

El següent bloc de codi és que el servei WebIOPi li digui que és una entrada al servei WebIOPi.

i nput {display: block; amplada: 160 px; alçada: 45 px; }

L'últim que volem fer és donar una mena d'indicació quan s'ha premut el botó. De manera que podeu mirar la pantalla i el color dels botons per informar-vos de l’estat actual. Per fer-ho, es va implementar la línia de codi següent per a cada botó.

# gpio17.LOW {color de fons: gris; color: negre; } # gpio17.HIGH {color de fons: vermell; color: Gris clar; }

Les línies de codis anteriors simplement canvien el color del botó en funció del seu estat actual. Quan el botó està apagat (BAIX), el color de fons dels botons es torna gris per mostrar el seu inactiu i quan està activat (ALT) el color de fons del botó es torna VERMELL.

CSS a la bossa, permet guardar-lo com a smarthome.css i, a continuació, moure’l mitjançant filezilla (o qualsevol altre programari SCP que vulgueu utilitzar) a la carpeta d’estils del nostre raspberry pi i corregir la peça final, el codi html. Recordeu-vos de descarregar CSS complet des d’aquí.

Codi HTML:

El codi html combina tot, javascript i el full d’estil.

Polsador; rebre cansalada

Dins de l' etiqueta de capçalera hi ha algunes funcions molt importants.

La línia de codi anterior permet que l’aplicació web es pugui desar en un escriptori mòbil mitjançant un safari Chrome o mòbil. Això es pot fer a través del menú Chrome. Això proporciona a l’aplicació una sensació de llançament fàcil des de l’escriptori mòbil o des de casa.

La següent línia de codi següent proporciona un tipus de resposta a l’aplicació web. Li permet ocupar la pantalla de qualsevol dispositiu en què s'hagi llançat.

La següent línia de codi declara el títol que es mostra a la barra de títol de la pàgina web.

Les quatre línies següents de codis realitzen cadascuna la funció d’enllaçar el codi html a diversos recursos que necessita per funcionar segons es desitgi.

La primera línia anterior crida al marc principal WebIOPi JavaScript, que està codificat de manera dura a l'arrel del servidor. Cal trucar-ho cada vegada que s’ha d’utilitzar el WebIOPi.

La segona línia apunta la pàgina html al nostre script jQuery, la tercera la dirigeix ​​cap al nostre full d'estil. Finalment, l’última línia ajuda a configurar una icona per utilitzar-la a l’escriptori mòbil en cas que decidim utilitzar-la com a aplicació web o com a favicon per a la pàgina web.

La secció del cos del codi html només conté etiquetes de trencament per garantir que els botons estiguin alineats correctament amb la línia següent que indica al nostre codi html que mostri el que està escrit al fitxer JavaScript. L' identificador = "contingut" us recorda la declaració de contingut del nostre botó anterior al codi JavaScript.

Coneixeu el drill, el codi html com a index.html i aneu a la carpeta html del Pi mitjançant filezilla. Podeu descarregar tots els fitxers CSS, JS i HTML des d’aquí.

Edicions del servidor WebIOPi per a la domòtica:

En aquesta etapa, estem preparats per començar a crear els nostres esquemes i provar la nostra aplicació web, però abans hem d’ editar el fitxer de configuració del servei webiopi, de manera que s’hagi d’utilitzar les dades de la nostra carpeta html en lloc dels fitxers de configuració que s’inclouen amb ell..

Per editar la configuració, executeu el següent amb permís root;

sudo nano / etc / webiopi / config

Cerqueu la secció http del fitxer de configuració, marqueu a la secció on teniu alguna cosa així, #Use doc-root per canviar la ubicació predeterminada dels fitxers de recursos i HTML.

Comenteu qualsevol cosa que hi ha a sota mitjançant # i, si la vostra carpeta està configurada com la meva, apunteu el document doc-root al camí del fitxer del projecte

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

Guardar i sortir. També podeu canviar el port a partir del 8000, per si teniu un altre servidor que s’executa al pi amb aquest port. Si no, deseu i deixeu de fer-ho, a mesura que avancem.

És important tenir en compte que podeu canviar la contrasenya del servei WebIOPi mitjançant l'ordre;

sudo webiopi-passwd

Us demanarà un nou nom d’usuari i contrasenya. Això també es pot eliminar totalment, però la seguretat és important, oi?

Per últim, executeu el servei WebIOPi mitjançant l'ordre següent:

sudo /etc/init.d/webiopi start

Es pot comprovar l'estat del servidor mitjançant;

estat sudo /etc/init.d/webiopi

Es pot deixar d'executar amb;

sudo /etc/init.d/webiopi stop

Per configurar WebIOPi perquè s’executi a l’arrencada, utilitzeu;

per defecte sudo update-rc.d webiopi

Si voleu invertir i evitar que s'executi a l'arrencada, utilitzeu;

sudo update-rc.d webiopi eliminar

Diagrama del circuit i explicació:

Un cop acabat el nostre programari, estem preparats per començar a crear els esquemes d’aquest projecte d’electrodomèstics controlat per web.

Tot i que no podia posar les mans als mòduls de relés, que crec que són més fàcils de treballar per als aficionats. Així que estic dibuixant aquí els esquemes per a relés individuals de 5v independents.

Connecteu el circuit com es mostra al circuit de fritzing anterior. Heu de tenir en compte que COM, NO (normalment obert) i NC (normalment tancat) del vostre propi relé poden estar situats a diferents costats / punts. Utilitzeu un mil·límetre per provar-lo. Obteniu més informació sobre el relleu aquí.

Amb els nostres components connectats, engegueu el servidor des d’una pàgina web, aneu a la IP del vostre Raspberry Pi i indiqueu el port tal com s’ha descrit anteriorment, inicieu la sessió amb el vostre nom d’usuari i contrasenya i hauríeu de veure una pàgina web que s’assembla exactament a la imatge següent..

Ara podeu controlar fàcilment quatre electrodomèstics AC AC des de qualsevol lloc sense fils, només fent clic als botons. Això funcionarà des de telèfons mòbils, tauletes, etc. i podeu afegir més botons i relés per controlar més dispositius. Consulteu el vídeo complet a continuació.

Això és tot nois, gràcies per això. Si teniu cap pregunta, poseu-les al quadre de comentaris.