Módulo Sense
5.3.1 Diseño esquemático de la interfaz
La pá gina principal, cuya representació n puede verse en la Figura 5.22 , pretende tener la misma función que el menúprincipal de una aplicació n, permitiendo seleccionar entre las cinco secciones del frontend : Figura 5.22: Boceto de la pantalla principal del frontend
De la Figura 5.22 cabe destacar los siguientes elementos:
‑ El logo, situado en la esquina superior izquierda, está pensado para mostrar el logotipo de la institución o empresa que emplee el sistema.
‑ Por otra parte, el logo del sistema, ubicado en el lateral derecho del menú principal, tiene como objetivo mostrar el logotipo comercial del sistema.
Para simpli氀icar la gestió n del sistema, todas las secciones se han planteado con una disposició n similar:
Figura 5.23: Boceto de una sección genérica recogidos por los sensores
En la Figura 5.23 se pueden observar las siguientes caracterı́sticas:
‑ En el banner superior se ubican el nombre del sistema, un posible logotipo de la empresa y el botón de cierre de sesión.
‑ El botó n de cierre de sesió n (“Cerrar sesió n”) se encuentra en la esquina superior derecha, separado del menúprincipal (en el lateral izquierdo), para evitar ser pulsado accidentalmente.
‑ En el lateral izquierdo se muestra una barra que hace la funció n de menú de navegación de la pá gina. Este menú muestra botones a las diferentes secciones de la web, incluyendo un botón extra que permite regresar a la pantalla de inicio.
‑ El resto del espacio, que supone la mayor parte del á rea disponible, queda dedicado al contenido de las secciones.
Con este esquema gené rico para todas las secciones, se pretende crear un entorno que resulte familiar y que permita que el usuario pueda ubicarse fácilmente en cualquiera de ellas.
Además, puesto que en todas las secciones se presenta una lista de elementos, los cuerpos de las mismas tambié n compartirá n una estructura similar. Dicha estructura constará de un tı́tulo con el nombre de la secció n, junto a un botó n para añ adir nuevos elementos, y una lista con entradas para cada uno de los elementos de la correspondiente secció n que se encuentren almacenados en la base de datos. Cada una de estas entradas dispondrá a su vez de botones para editarlas, bloquearlas/deshabilitarlas o eliminarlas. La disposició n de estos elementos puede verse en la Figura 5.24 : Figura 5.24: Boceto de una lista genérica del frontend
Estas entradas podrá n mostrar só lo texto o incluir elementos diná micos embebidos como enlaces y mapas. Ademá s, en funció n de las caracterı́ sticas del elemento o de los permisos del usuario, algunas entradas de la lista no mostrarán todos los botones mencionados.
Respecto al conjunto de la secció n, todos los elementos de la misma permanecerá n está ticos a excepción de la lista, a travé s de la cual se podrá realizar un desplazamiento vertical cuando el número de entradas sobrepase el tamaño de la página.
También se han diseñ ado sendos formularios para cada uno de los cuatro tipos de datos que es posible administrar: nodos, sensores, alertas y usuarios.
En primer lugar, en la Figura 5.25 , se muestra la estructura del formulario para la creació n y edición de nodos y coordinadores: Figura 5.25: Boceto del formulario de nodos
Este formulario permite modi氀icar en cualquier momento el identi氀icador del nodo (ID), el cual se corresponde con la direcció n de 64 bits usada por los mó dulos XBee para transmitir. El motivo de esto es que dicha direcció n podrı́ a cambiar en caso de ser necesario sustituir al módulo debido a un fallo, averı́a o cambios en el diseño hardware de los nodos.
Por otra parte, junto al campo del identi氀icador del nodo (ID) se incluye un botó n (“?”) cuyo objetivo es mostrar, a modo de ayuda, una imagen indicando donde se ubica la direcció n MAC, o de 64 bits, del módulo XBee.
Respecto a la lista de sensores, só lo deberá mostrarse si el elemento registrado no está marcado como coordinador, ya que estos no poseen sensores.
En la Figura 5.26 se muestran los campos del formulario de los sensores:
Figura 5.26: Boceto del formulario de sensores
Este formulario permite de氀inir el identi氀icador del sensor só lo la primera vez, en sucesivas modi氀icaciones no se mostrará este campo. Dicho identi氀icador debe ademá s coincidir con el que se especi氀ique en los módulos Sense.
Por otra parte, el campo “URL Informació n” pretende ser utilizado para incluir un enlace al datasheet del sensor, siempre que é ste se encuentre disponible, o en su defecto a una pá gina informativa sobre las caracterı́sticas del sensor.
El formulario para crear y modi氀icar alertas se ha diseñ ado tal y como puede verse en la Figura 5.27 : Figura 5.27: Boceto del formulario de alertas
La lista de sensores, que se muestra en el lateral derecho de este formulario, mostrará únicamente al conjunto de sensores instalados en el nodo seleccionado mediante el desplegable que se encuentra justo encima de la misma.
Del mismo modo, la lista de usuarios en el lado izquierdo del formulario, referenciada como “Noti氀icar a”, tan só lo mostraráa aquellos usuarios que no se encuentren dados de baja en el sistema.
Por ú ltimo, en la Figura 5.28 se presenta el formulario para la creació n y modi氀icació n de los datos de los usuarios: Figura 5.28: Boceto del formulario de usuarios
Al igual que el campo ID del formulario de sensores, el nombre de usuarios só lo podrá de氀inirse la primera vez.
Respecto al listado de permisos que se muestran desglosados en el conjunto de casillas que aparecen en la parte inferior de este formulario, estos pretenden hacer referencia a las cinco secciones: datos, nodos, sensores, alertas y usuarios, y a cada uno de los tres tipos de acciones que se pueden llevar a cabo sobre ellas: creación, modi氀icación y eliminación de elementos.