Automatización del hogar controlada por web basada en iot usando raspberry pi

Hola chicos, bienvenidos al tutorial de hoy, una de las cosas buenas de Raspberry Pi es la gran capacidad y facilidad con la que les brinda la oportunidad de conectar dispositivos a Internet, especialmente para proyectos relacionados con la automatización del hogar. Hoy vamos a explorar la posibilidad de controlar los aparatos de CA con el clic de botones en una página web usando Internet. Con este sistema de automatización del hogar basado en IoT, puede controlar sus electrodomésticos desde cualquier parte del mundo. Este servidor web se puede ejecutar desde cualquier dispositivo que pueda ejecutar aplicaciones HTML, como teléfonos inteligentes, tabletas, computadoras, etc.

Componentes requeridos:

Para este proyecto, los requisitos se dividirán en dos categorías, hardware y software:

Requisitos de hardware:

1. Raspberry Pi 3 (cualquier otra versión será buena)
2. Tarjeta de memoria de 8 o 16GB con Raspbian Jessie
3. Relés 5v
4. Transistores 2n222
5. Diodos
6. Cables de puente
7. Bloques de conexión
8. LED para probar.
9. Lámpara de CA para probar
10. Cables de puente y placa de pruebas
11. Resistencia de 220 o 100 ohmios

II. Requisitos de Software:

Además del sistema operativo Raspbian Jessie que se ejecuta en la raspberry pi, también usaremos el marco de trabajo WebIOPi, notepad ++ que se ejecuta en su PC y filezila para copiar archivos desde la PC a la raspberry pi, especialmente los archivos de la aplicación web.

Además, no necesita codificar en Python para este Proyecto de automatización del hogar, WebIOPi hará todo el trabajo.

Preparando la Raspberry Pi:

Es un hábito de algún tipo para mí y creo que es bueno, lo primero que hago cada vez que quiero usar la Raspberry Pi es actualizar el PI. Para este proyecto, esta sección comprenderá los procedimientos de actualización de Pi y la instalación del marco WebIOPi que nos ayudará a manejar la comunicación desde la página web a la raspberry pi. Probablemente debería decir que esto también se puede hacer de una manera posiblemente más fácil usando el marco de trabajo de Python Flask, pero una de las cosas interesantes sobre el bricolaje es cuando miras debajo del capó y haces el trabajo difícil. Ahí es donde viene toda la alegría del bricolaje.

Para actualizar la raspberry Pi a continuación, reinicie el RPi;

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

Una vez hecho esto, lo siguiente que debemos hacer es instalar el marco webIOPi.

Asegúrese de estar en el directorio de inicio usando;

cd ~

Utilice wget para obtener el archivo de su página sourceforge;

wget

Cuando finalice la descarga, extraiga el archivo y vaya al directorio;

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

En este punto, antes de ejecutar la configuración, necesitamos instalar un parche, ya que esta versión de WebIOPi no funciona con la raspberry pi 3 que estoy usando y no pude encontrar una versión de WebIOPi que funcione expresamente con Pi 3..

Los siguientes comandos se utilizan para instalar el parche mientras aún se encuentra en el directorio WebIOPi, ejecutar;

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

Luego podemos ejecutar la instalación de configuración para WebIOPi usando;

sudo./setup.sh

Continúe diciendo que sí si se le pide que instale cualquier dependencia durante la instalación. Cuando termine, reinicie su pi;

sudo reiniciar

Pruebe la instalación de WebIOPi:

Antes de saltar a esquemas y códigos, con la Raspberry Pi nuevamente encendida, tendremos que probar nuestra instalación de WebIOPi para asegurarnos de que todo funcione bien como se desea.

Ejecute el comando;

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

Después de emitir el comando anterior en el pi, apunte el navegador web de su computadora conectada al raspberry pi a http: // raspberrypi. mshome.net:8000 o http; // thepi'sIPaddress: 8000. El sistema le pedirá nombre de usuario y contraseña.

El nombre de usuario es webiopi La contraseña es frambuesa

Este inicio de sesión se puede eliminar más tarde si lo desea, pero incluso su sistema de automatización del hogar merece un nivel adicional de seguridad para evitar que cualquiera tenga los dispositivos de control de IP y los dispositivos IOT en su hogar.

Después del inicio de sesión, mire a su alrededor y luego haga clic en el enlace del encabezado GPIO.

Para esta prueba, conectaremos un LED a GPIO 17, así que continúe y configure GPIO 17 como salida.

Una vez hecho esto, conecte el led a su raspberry pi como se muestra en los esquemas a continuación.

Después de la conexión, regrese a la página web y haga clic en el botón del pin 11 para encender o apagar el LED. De esta forma podemos controlar la Raspberry Pi GPIO usando WebIOPi.

Después de la prueba, si todo funcionó como se describe, entonces podemos volver al terminal y detener el programa con CTRL + C. Si tiene algún problema con esta configuración, entonces contácteme a través de la sección de comentarios.

Puede encontrar más información sobre Webiopi en su página Wiki (http://webiopi.trouch.com/INSTALL.html)

Con la prueba completa, estamos listos para comenzar el proyecto principal.

Creación de la aplicación web para la automatización del hogar Raspberry Pi:

Aquí editaremos la configuración predeterminada del servicio WebIOPi y agregaremos nuestro propio código para que se ejecute cuando se llame. Lo primero que haremos será instalar filezilla o cualquier otro software de copia FTP / SCP en nuestra PC. Estará de acuerdo conmigo en que codificar en el pi a través del terminal es bastante estresante, por lo que filezilla o cualquier otro software SCP será útil en esta etapa. Antes de comenzar a escribir los códigos de script html, css y java para esta aplicación web de automatización del hogar de IoT y moverlos a la Raspberry Pi, creemos la carpeta del proyecto donde estarán todos nuestros archivos web.

Asegúrese de estar en el directorio de inicio usando, luego cree la carpeta, vaya a la carpeta creada y cree la carpeta html en el directorio:

cd ~ mkdir aplicación web cd aplicación web mkdir html

Cree una carpeta para scripts, CSS e imágenes dentro de la carpeta html

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

Con nuestros archivos creados, pasemos a escribir los códigos en nuestra PC y luego a la Pi a través de filezilla.

El código JavaScript:

El primer fragmento de código que escribiremos es el de JavaScript. Es un script simple para comunicarse con el servicio WebIOPi.

Es importante tener en cuenta que para este proyecto, nuestra aplicación web constará de cuatro botones, lo que significa que planeamos controlar solo cuatro pines GPIO, aunque controlaremos solo dos relés en nuestra demostración. Mira el video completo 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 (botón); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (botón); button = webiopi ().createGPIOButton (23, "Relevo 4"); content.append (botón);});

El código anterior se ejecuta cuando WebIOPi está listo.

A continuación, explicamos el código JavaScript:

webiopi (). ready (function (): Esto solo indica a nuestro sistema que cree esta función y la ejecute cuando webiopi esté listo.

webiopi (). setFunction (23, "fuera"); Esto nos ayuda a decirle al servicio WebIOPi que configure GPIO23 como salida. Tenemos cuatro botones aquí, podría tener más si está implementando más botones.

var contenido, botón; Esta línea le dice a nuestro sistema que cree una variable llamada contenido y haga de la variable un botón.

contenido = $ ("# contenido"); La variable de contenido todavía se utilizará en nuestro html y css. Entonces, cuando nos referimos a #content, el marco WebIOPi crea todo lo asociado a él.

button = webiopi (). createGPIOButton (17, "Relé 1"); WebIOPi puede crear diferentes tipos de botones. El fragmento de código anterior nos ayuda a decirle al servicio WebIOPi que cree un botón GPIO que controle el pin GPIO en este caso 17 etiquetado como “Relé 1”. Lo mismo ocurre con los demás.

content.append (botón); Agregue este código a cualquier otro código para el botón creado en el archivo html o en otro lugar. Se pueden crear más botones y todos tendrán las mismas propiedades que este botón. Esto es especialmente útil al escribir CSS o Script.

Después de crear los archivos JS, lo guardamos y luego lo copiamos usando filezilla a webapp / html / scripts si creó sus archivos de la misma manera que yo hice el mío.

Una vez hecho esto, pasamos a la creación del CSS. Puede descargar el código completo desde el enlace que se proporciona en la sección Código al final.

El código CSS:

El CSS nos ayuda a hacer que nuestra página web de automatización del hogar IoT Raspberry Pi se vea bonita.

Quería que la página web se pareciera a la imagen de abajo y, por lo tanto, tuve que escribir la hoja de estilo smarthome.css para lograrlo.

A continuación, explicamos el código CSS:

El script CSS parece demasiado voluminoso para incluirlo aquí, por lo que solo elegiré parte de él y lo usaré para el desglose. Puede descargar el archivo CSS completo desde aquí. CSS es fácil y puedes entenderlo con solo revisar el código CSS. Puede omitir fácilmente esta parte y utilizar nuestro código CSS de inmediato.

La primera parte del script representa la hoja de estilo para el cuerpo de la aplicación web y se muestra a continuación;

cuerpo {color de fondo: #ffffff; imagen de fondo: url ('/ img / smart.png'); repetición de fondo: no repetición; posición de fondo: centro; tamaño de fondo: cubierta; fuente: negrita 18px / 25px Arial, sans-serif; color: LightGray; }

Quiero creer que el código anterior se explica por sí mismo, configuramos el color de fondo como #ffffff, que es blanco, luego agregamos una imagen de fondo ubicada en esa ubicación de carpeta (¿Recuerda nuestra configuración de carpeta anterior?), Nos aseguramos de que la imagen no lo haga. t repita estableciendo la propiedad background-repeat en no-repeat, luego indique al CSS que centralice el fondo. Luego pasamos a establecer el tamaño, la fuente y el color del fondo.

Con el cuerpo hecho, escribimos el CSS para que los botones se vean bonitos.

botón {pantalla: bloquear; posición: relativa; margen: 10px; relleno: 0 10px; alineación de texto: centro; decoración de texto: ninguna; ancho: 130px; altura: 40px; fuente: negrita 18px / 25px Arial, sans-serif; de color negro; sombra de texto: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; radio del borde: 30px;

Para ser breve, todo lo demás en el código también se hizo para que se vea bien. Puede cambiarlos para ver qué sucede, creo que se llama aprendizaje mediante prueba y error, pero una cosa buena de CSS es que las cosas se expresan en inglés simple, lo que significa que son bastante fáciles de entender. La otra parte del bloque de botones tiene algunos extras para la sombra del texto en el botón y la sombra del botón. También tiene un ligero efecto de transición que ayuda a que se vea agradable y realista cuando se presiona el botón. Estos se definen por separado para webkit, firefox, opera, etc. solo para garantizar que la página web funcione de manera óptima en todas las plataformas.

El siguiente bloque de código es para que el servicio WebIOPi le diga que esta es una entrada al servicio WebIOPi.

i nput {display: block; ancho: 160px; altura: 45px; }

Lo último que queremos hacer es dar algún tipo de indicación cuando se presiona el botón. De modo que puede mirar la pantalla y el color de los botones le permite conocer el estado actual. Para hacer esto, se implementó la línea de código a continuación para cada botón.

# gpio17.LOW {color de fondo: gris; de color negro; } # gpio17.HIGH {color de fondo: rojo; color: LightGray; }

Las líneas de códigos de arriba simplemente cambian el color del botón según su estado actual. Cuando el botón está apagado (BAJO), el color de fondo de los botones se vuelve gris para mostrar que está inactivo y cuando está encendido (ALTO) el color de fondo del botón se vuelve ROJO.

CSS en la bolsa, guarde como smarthome.css, luego muévalo a través de filezilla (o cualquier otro software SCP que desee usar) a la carpeta de estilos en nuestra raspberry pi y arregle la pieza final, el código html. Recuerde descargar CSS completo desde aquí.

Código HTML:

El código html reúne todo, javascript y la hoja de estilo.

Presionar el botón; recibir tocino

Dentro de la etiqueta de la cabeza existen algunas características muy importantes.

La línea de código anterior permite guardar la aplicación web en un escritorio móvil utilizando Chrome o Mobile Safari. Esto se puede hacer a través del menú de Chrome. Esto le da a la aplicación una sensación de inicio fácil desde el escritorio móvil o desde el hogar.

La siguiente línea de código a continuación ofrece algún tipo de capacidad de respuesta a la aplicación web. Le permite ocupar la pantalla de cualquier dispositivo en el que se lance.

La siguiente línea de código declara el título que se muestra en la barra de título de la página web.

Cada una de las siguientes cuatro líneas de códigos realiza la función de vincular el código html a varios recursos que necesita para funcionar como se desea.

La primera línea de arriba llama al JavaScript del framework WebIOPi principal, que está codificado en la raíz del servidor. Esto debe llamarse cada vez que se va a utilizar WebIOPi.

La segunda línea apunta la página html a nuestro script jQuery, la tercera apunta en la dirección de nuestra hoja de estilo. Por último, la última línea ayuda a configurar un icono que se utilizará en el escritorio móvil en caso de que decidamos utilizarlo como aplicación web o como favicon para la página web.

La sección del cuerpo del código html solo contiene etiquetas de ruptura para garantizar que los botones se alineen correctamente con la línea de abajo que indica a nuestro código html que muestre lo que está escrito en el archivo JavaScript. El id = ”content” debería recordarle la declaración de contenido de nuestro botón anteriormente bajo el código JavaScript.

Conoce el ejercicio, el código html como index.html y se mueve a la carpeta html en el Pi a través de filezilla. Puede descargar todos los archivos CSS, JS y HTML desde aquí.

Ediciones del servidor WebIOPi para la automatización del hogar:

En esta etapa, estamos listos para comenzar a crear nuestros esquemas y probar nuestra aplicación web, pero antes de eso, necesitamos editar el archivo de configuración del servicio webiopi, por lo que apunta a usar datos de nuestra carpeta html en lugar de los archivos de configuración que vienen con él..

Para editar la configuración, ejecute lo siguiente con permiso de root;

sudo nano / etc / webiopi / config

Busque la sección http del archivo de configuración, verifique en la sección donde tiene algo como, #Use doc-root para cambiar la ubicación predeterminada de los archivos de recursos y HTML

Comente cualquier cosa debajo usando # luego, si su carpeta está configurada como la mía, apunte su doc-root a la ruta de su archivo de proyecto

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

Guardar y Salir. También puede cambiar el puerto de 8000, en caso de que tenga otro servidor ejecutándose en el pi usando ese puerto. Si no guarda y salga, a medida que avanzamos.

Es importante tener en cuenta que puede cambiar la contraseña del servicio WebIOPi usando el comando;

sudo webiopi-passwd

Le pedirá un nuevo nombre de usuario y contraseña. Esto también se puede eliminar por completo, pero la seguridad es importante, ¿verdad?

Por último, ejecute el servicio WebIOPi emitiendo el siguiente comando:

sudo /etc/init.d/webiopi start

El estado del servidor se puede verificar usando;

sudo /etc/init.d/webiopi estado

Se puede detener su ejecución usando;

sudo /etc/init.d/webiopi stop

Para configurar WebIOPi para que se ejecute en el arranque, use;

sudo update-rc.d valores predeterminados de webiopi

Si desea revertir y detener su ejecución en el arranque, use;

sudo update-rc.d webiopi eliminar

Diagrama de circuito y explicación:

Con nuestro software configurado, estamos listos para comenzar a crear los esquemas para este proyecto de electrodomésticos controlados por la web.

Si bien no pude poner mis manos en los módulos de relé, creo que es más fácil trabajar con los aficionados. Así que estoy dibujando aquí los esquemas para relés de 5v individuales independientes ordinarios.

Conecte su circuito como se muestra en el circuito fritzing de arriba. Debe tener en cuenta que COM, NO (normalmente abierto) y NC (normalmente cerrado) de su propio relé pueden estar ubicados en diferentes lados / puntos. Por favor, utilice un milímetro para probarlo. Obtenga más información sobre el relevo aquí.

Con nuestros componentes conectados, encienda su servidor, desde una página web, vaya a la IP de su Raspberry Pi e indique el puerto como se describió anteriormente, inicie sesión con su nombre de usuario y contraseña, y debería ver una página web que se ve exactamente como la imagen de abajo.

Ahora puede controlar fácilmente cuatro electrodomésticos AC Home desde cualquier lugar de forma inalámbrica, simplemente haciendo clic en los botones. Esto funcionará desde el teléfono móvil, tableta, etc. y puede agregar más botones y relés para controlar más dispositivos. Mira el video completo a continuación.

Eso es todo chicos, gracias por quedarse por este. Si tiene alguna pregunta, colóquela en el cuadro de comentarios.