Nod
Nod
Nod
net/publication/298214426
CITATIONS READS
0 520
1 author:
Raquel Sedó
University Carlos III de Madrid
1 PUBLICATION 0 CITATIONS
SEE PROFILE
All content following this page was uploaded by Raquel Sedó on 14 March 2016.
Autora:
Dña. Raquel Sedó Sánchez
Director:
Dr. D. Vicente Arévalo Espejo
12 de julio de 2014
“Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo.”
Benjamin Franklin
Agradecimientos
Quisiera además dar las gracias a todas aquellas personas que me han
acompañado y apoyado a lo largo de mi experiencia en la universidad, haciendo
de ella una etapa inolvidable, en especial:
A Alberto, mi compañero y mejor amigo, porque sin ti nada hubiera sido posible.
Por último, a mis padres Jorge y Marcela, por su esfuerzo y dedicación todos
estos años y por la confianza que han depositado en mí.
ii
Resumen del Contenido
iii
Índice general
Agradecimientos II
Índice General V
1. Introducción 1
1.1. Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2. Objetivos Generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3. Estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . 3
2. Descripción de la problemática 5
2.1. Estado actual de la domótica . . . . . . . . . . . . . . . . . . . . . . 5
2.2. Otros proyectos similares . . . . . . . . . . . . . . . . . . . . . . . . . 7
iv
3.6.1. Descripción General . . . . . . . . . . . . . . . . . . . . . . . 26
3.6.2. Especificaciones de la Interfaz web . . . . . . . . . . . . . . . 27
3.6.3. Diseño previo de la interfaz web de usuario . . . . . . . . . . . 28
3.6.4. Diseño Responsive . . . . . . . . . . . . . . . . . . . . . . . . 31
3.6.5. Software para la implementación de la interfaz . . . . . . . . . 33
3.6.6. Herramientas empleadas para la edición . . . . . . . . . . . . 36
3.6.7. Seguridad de la interfaz web . . . . . . . . . . . . . . . . . . . 37
3.6.8. Estructura de la aplicación . . . . . . . . . . . . . . . . . . . . 37
3.6.9. Resultados del diseño de la interfaz web de usuario . . . . . . 39
Bibliografía y referencias 54
vi
3.25. Página de inicio de la interfaz desde un teléfono móvil . . . . . . . . . 42
3.26. Consulta y modificación del estado de las estancias desde un
ordenador portátil . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.27. Consulta y modificación del estado de las estancias desde un teléfono
móvil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.28. Apagado de todas las estancias desde un ordenador portátil . . . . . 44
3.29. Apagado de todas las estancias desde un teléfono móvil . . . . . . . . 44
3.30. Configuración de la alarma y la bocina de aviso desde un ordenador
portátil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.31. Configuración de la alarma y la bocina de aviso desde un teléfono móvil 45
3.32. Configuración de las estancias desde un ordenador portátil . . . . . . 46
3.33. Configuración de las estancias desde un teléfono móvil . . . . . . . . . 46
3.34. Modificación del nombre de las estancias desde un ordenador portátil 47
3.35. Modificación del nombre de las estancias desde un teléfono móvil . . . 47
3.36. Configuración de las notificaciones desde un ordenador portátil . . . . 48
3.37. Configuración de las notificaciones desde un teléfono móvil . . . . . . 48
3.38. Aviso de detección de intruso desde un ordenador portátil . . . . . . . 49
3.39. Aviso de detección de intruso desde un teléfono móvil . . . . . . . . . 49
3.40. Notificación del sistema de alarma recibida en el correo electrónico . . 50
Capítulo 1
Introducción
1.1. Contexto
Como consecuencia de esta situación, cada vez surgen más proyectos de tipo
open-source/open-hardware que tratan de aportar soluciones apoyándose en la
utilización de dispositivos electrónicos de bajo coste [3]. Un ejemplo de esto son
el empleo del microcontrolador Arduino [4], o en el caso concreto de este proyecto,
el de Raspberry Pi.
Con todo esto, el principal objetivo de este trabajo no deja de ser el fomentar el
empleo de la tecnología en el hogar, y acercar ésta de una forma muy económica a
todo aquel que esté interesado en ella.
plantean.
Cabe añadir que al final de este proyecto se encontrarán los anexos con el código
empleado para el desarrollo de esta aplicación.
Descripción de la problemática
X10 [6]. Utiliza la línea eléctrica para transmitir señales de control entre los
equipos de automatización del hogar en formato digital. Los dispositivos X10
que se comercializan son solo para uso individual y en entornos domésticos de
hasta 250 m2, dada su limitación en ancho de banda y en el número máximo
de dispositivos a controlar (256).
KNX [7]. Define varios medios de comunicación física como TP1 (Par
trenzado), PL110 (Powerline, esto es la red eléctrica), RF (Radio frecuencia) y
Ethernet (IP). Pese a las posibilidades que ofrece, el medio de transmisión
más empleado es el par trenzado, con lo que requiere un bus de control
independiente al que se conectan todos los dispositivos requeridos.
Por otro lado, en muchos sistemas domóticos complejos, con gran cantidad de
características y funcionalidades, se elaboran interfaces complicadas de manejar con
demasiados detalles, asumiendo de este modo, que los usuarios que accedan a ella
tienen cierto conocimiento previo de este tipo de tecnologías. Con lo cual, se acaba
perdiendo la idea de accesibilidad para el diseño de este tipo de sistemas.
Por otro lado, fijando como objetivo el realizar sistemas accesibles a cualquier
tipo de usuario, aparecen proyectos en distintas convenciones o conferencias que
A partir del año 2006 se realizaron varios diseños y prototipos de este dispositivo
en la Universidad de Cambridge, Reino Unido. Aunque no fue hasta febrero de
2012 cuando se lanzó de forma comercial Raspberry Pi. Para entonces, ya se habían
desbordado las expectativas de ventas, convirtiéndose en una herramienta ideal para
el desarrollo de todo tipo de proyectos, no sólo de carácter didáctico sino también
en el ámbito empresarial y personal a un precio que no supera los 45e (35£ [14]).
Cabe añadir que el diseño no incluye disco duro ni unidad de estado sólido para
el almacenamiento permanente, para ello se hace uso de la ranura para las tarjetas
de memoria. En la tarjeta de memoria se debe realizar la instalación del sistema
operativo que deseamos que gestione la Raspberry Pi. A través de la página web
oficial se puede acceder a distintas distribuciones : Raspbian, Pidora, OpenElec,
ArchLinux Pi. . .
Además, Raspberry Pi cuenta con dos puertos USB 2.0, un conector HDMI para
salida de vídeo en alta definición, un conector de 3,5 mm para salida de audio, una
ranura para tarjetas de memoria SD/MMC, un puerto Ethernet 10/100 y un cabezal
de 26 pines para conexión de periféricos de bajo nivel (GPIO, I2C, SPI y UART). A
lo que habría que añadir la posibilidad de desarrollar software utilizando lenguajes de
alto nivel como Python o C++, características que lo hacen especialmente atractivo
en comparación con otras plataformas como podría ser Arduino.
Desarrollar una interfaz web que posibilite al usuario conocer el estado del
sistema domótico, así como interactuar con éste.
A continuación se describirá éste a grandes rasgos, para poder mostrar así una
visión general del sistema implementado y su funcionamiento; posteriormente, se
dedicarán diferentes secciones a profundizar y detallar la solución técnica proyectada.
como es que los pines funcionan a 3.3V, no tolerando 5V, con lo cual se debería
añadir una protección contra el alto voltaje para evitar de este modo, daños sobre
el dispositivo Raspberry Pi.
4 interruptores táctiles.
8 entradas digitales.
8 indicadores LED.
Por otro lado, cabe mencionar que el uso de la placa de expansión PiFace ha
sido útil durante el proceso de desarrollo, gracias a sus interruptores integrados
que permiten simular eventos tales como la presencia de un intruso, el encendido
y apagado de las luces, etc. . . En una hipotética versión comercial de este sistema
se podría obviar perfectamente su inclusión, reduciendo el coste del dispositivo en
aproximadamente 30e [15].
Se conectan además los pines de VCC, GND y OUT del sensor PIR según se
muestra a continuación. Por otro lado, este sensor permite ajustar el tiempo de
respuesta y la distancia de alcanza a través de dos potenciómetros.
Esto es lo que se conoce comúnmente como un entorno LAMP [18], que emplea
las siguientes tecnologías en conjunto, todas ellas de software libre:
Cabe añadir, que el envío de estos correos se lleva a cabo siempre y cuando hayan
pasado al menos cinco minutos desde la última notificación por correo, intentando
evitar así, el inundar la bandeja de entrada de correos del propietario. Además, el
apagado de la bocina lo realiza manualmente el usuario a través de la interfaz web.
Estancias
Semáforos
Los datos bocina, alarma e email indican el estado en que se encuentran los
Usar diseño visual para mejorar y no para definir la interacción del aplicación
web. Los elementos gráficos empleados están preparados para ayudar a
clarificar los objetivos de la aplicación y no como adornos para rellenar espacio.
Se propone un diseño intuitivo para simplificar la experiencia de uso.
El diseño web responsive o diseño web adaptativo es una técnica de diseño web
que prioriza la correcta visualización de una misma página en función de la resolución
de la pantalla del visitante. De este modo, se puede adaptar el contenido del diseño
original a diferentes dispositivos, ya sean ordenadores de escritorio, tablets o móviles,
sin necesidad de tener múltiples sitios web separados. Con ello, se consigue mejorar
la experiencia del usuario a través de una interfaz adaptable, además de facilitar en
gran medida el desarrollo del diseño de la interfaz web.
JQuery: librería Javascript que, entre otras cosas, nos permite abstraer de
forma sencilla la técnica AJAX antes mencionada.
PHP
SQL
MySQL
HTML
CSS
Las hojas de Estilo en Cascada (Cascading Style Sheets) [35], son un mecanismo
simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se
va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese
documento a través de un dispositivo de lectura HTML para invidentes. Se utiliza
para dar estilo a documentos HTML y XML, separando de esta forma la capa de
contenido de la capa de presentación. Cualquier cambio en el estilo marcado para
un elemento en el CSS afectará a todas las páginas vinculadas a dicho CSS en las
que aparezca ese elemento.
CSS funciona conforme a reglas; las hojas de estilo están compuestas por una
o más de dichas reglas aplicadas a un documento HTML o XML. Cada regla tiene
dos partes: un selector y una declaración. A su vez, la declaración está compuesta
por una propiedad y el valor que se le asigne (tamaño, color, etc).
clases ya predefinidas en el mismo de forma muy sencilla, tales como cajas, botones,
menús,. . . así como la nomenclatura necesaria para que nuestro diseño sea responsive.
JavaScript
Para la creación de los scripts PHP y JavaScript, así como para el código HTML
y CSS, se ha empleado un editor de texto, de código libre, denominado NotePad++.
Archivo Descripción
Este fichero se encarga del enrutado de
index.php las peticiones web hacia su fichero .php
correspondiente.
Este archivo controla el código HTML de
header.php encabezado de todas las secciones, así como la
selección del menú activo en cada momento.
Una vez generado el contenido de cada sección
este fichero cierra las etiquetas que hayan podido
footer.php
quedar abiertas en el header.php, e inyecta los
ficheros .js para el funcionamiento de la aplicación.
Este es el fichero de la sección inicial de la
home.php web, donde se realiza la bienvenida e indican las
instrucciones de uso de la misma.
Desde esta sección se realiza la gestión de las
estancias.php
distintas estancias del sistema domótico.
Este fichero gestiona los tres apartados de
configuración disponibles: nombre de las estancias,
configuracion.php activación y desactivación de alarma y bocina
y configuración de las notificaciones por correo
electrónico.
Este archivo se encarga de las actualizaciones
parciales del contenido dinámico de la interfaz,
modificando colores, iconos, botones, etc,
ajax.php
dependiendo de los nuevos valores de la tabla de
datos que modifica el usuario en su interacción
con las distintas partes de la aplicación.
En él se definen elementos de diseño CSS que se
custom.css
necesitan y que no ofrece el framework Bootstrap.
En este fichero se definen las diferentes funciones
Javascript que controlan la interactividad del
custom.js
usuario con la aplicación; en particular, desde aquí
se realizan las peticiones AJAX al fichero ajax.php
a tiempo real del sistema domótico de la vivienda; todo ello, empleando únicamente
herramientas de código libre.
Una vez el usuario introduce de forma correcta estos datos, accede a la página
principal de la aplicación, pudiendo iniciar ya la gestión domótica de su hogar.
Figura 3.26: Consulta y modificación del estado de las estancias desde un ordenador
portátil
Figura 3.27: Consulta y modificación del estado de las estancias desde un teléfono
móvil
Figura 3.34: Modificación del nombre de las estancias desde un ordenador portátil
Figura 3.35: Modificación del nombre de las estancias desde un teléfono móvil
Por último, se muestra, a modo de ejemplo, una captura del mensaje que el
propietario de la vivienda recibe en su correo electrónico en caso de producirse una
detección de intrusos.
Desde un punto de vista más personal, considero que este Trabajo Fin de
Grado me ha aportado, además de nuevos conocimientos sobre tecnologías antes
desconocidas para mí, una grata experiencia personal y profesional en el ámbito
de las ciencias de la computación, la electrónica y la automática. Por ello, creo
apropiado comentar que, pese a haber encontrado al comienzo ciertas dificultades
como principiante en el empleo de lenguajes tales como Pyhton, PHP, HTML,
etc, el enfrentarme a una situación de este tipo ha fomentado en mí la capacidad
de aprendizaje de estas nuevas tecnologías, así como el conocimiento de nuevas
herramientas realmente útiles para su desarrollo.
Además, sería muy sencillo extender las funcionalidades del software para
controlar la temperatura, el nivel de humedad del hogar o detectar humos a través
del uso de diferentes sensores; o también se podría controlar el funcionamiento de
otro tipo de dispositivos domésticos, como por ejemplo la subida o bajada de las
persianas de la vivienda mediante un motor.
Se podría instalar también una cámara en alguna estancia del domicilio que
se desee vigilar para, además de ofrecer al usuario la posibilidad de monitorizar el
estado de su vivienda, poder tomar una fotografía en caso de detección de intrusos
facilitando su identificación posterior.
54
[16] adafruit.com, Sensor PIR.
[29] Georg Richter, Damien Seguy y otros. Manual de PHP (Licencia CC).
57