Front-end: Aplicación de Angular para gestionar las secuencias
Contenido
Introducción
En esta tercera y última entrada vamos a ver una aplicación programada con Angular para la gestión de las secuencias. Se podrán crear, editar, guardar, cargar las secuencias, además de enviar a la Raspberry peticiones para gestionar su reproducción.
La primera entrada de esta serie puede consultarse aquí y la segunda aquí.
Aspecto y funcionamiento de la aplicación
Pantalla principal
Al entrar en la aplicación se muestra la siguiente pantalla:
Esta dividida en tres secciones:
- Leds selector: donde podremos definir el estado de los leds para un paso en la secuencia y el tiempo que se mantendrán los leds en ese estado.
- Sequence: un listado con los pasos que vayamos añadiendo a la secuencia. Cada paso dispone de dos opciones: borrar y editar.
- Options: una serie de opciones para ejecutar diferentes acciones como añadir, editar, guardar, … sobre los pasos y secuencias.
La sección de opciones, a su vez, tiene agrupados sus botones en dos secciones:
- Steps: acciones relacionados con los pasos de la secuencia:
- Add step: añade a la secuencia un paso con la configuración de estados actual mostrada en la sección Leds selector.
- Save step: guarda la información de un paso de la secuencia que se esté editando.
- Cancel edit: cancela la edición de un paso, sin modificar la información de la secuencia.
- Sequence: acciones relacionadas con la gestión de las secuencias.
- New: permite crear una nueva secuencia.
- Save: guarda la información de una secuencia en el local storage del navegador. Para que este disponible, previamente, se deberá haber guardado la secuencia usando Save As.
- Save As: guarda la información de una secuencia en el local storage del navegador asignándole un nombre.
- Load: abre una pantalla donde podremos cargar una de las secuencias guardadas en el local storage.
- View demo: permite ver una demostración de la secuencia, sin necesidad de enviarla a la Raspberry.
- Send sequence: Envía la secuencia a la Raspberry para su reproducción.
Editar una secuencia
Al pulsar sobre el botón Editar de cualquiera de uno de los pasos de la secuencia se cargan los datos en el Leds selector y se activan los botones Save step y Cancel edit.
Save step actualizará los datos del paso en la secuencia y Cancel edit cancelará la acción sin realizar ningún cambio en la secuencia.
Guardar secuencia
En la pantalla para guardar secuencias disponemos de un campo de texto para indicar el nombre con el que la queremos guardar y dos botones. Save, que nos permitirá guardar al secuencia en el local storage del navegador, y Back, que nos devolverá a la pantalla principal.
Cargar secuencia
La pantalla para cargar secuencia muestra una lista con las secuencias disponibles en el local storage. Al pulsar sobre alguna de ellas se activa el botón Load. Al pulsarlo, se cargará la información de la secuencia y se volverá a la pantalla inicial. El botón Back vuelve a la pantalla inicial sin realizar acción alguna.
Reproducción demostración
La pantalla del reproductor de secuencias muestra unas imágenes a modo de LEDs y dos botones, Play y Stop, para controlar la reproducción de la demostración. También dispone de un botón Back para volver a la pantalla principal.
Reproduciendo la secuencia
Al enviar una secuencia a reproducir en la Raspberry se muestra un pop-up con un botón para parar la reproducción.
En caso de producirse un error, se muestra un mensaje:
Componentes de la aplicación
La aplicación, al igual que cualquier otra creada con Angular, está formada por componentes, servicios, interfaces, …
Componentes
leds-root
Es el componente principal. Contiene un componente para mostrar el título de la aplicación y contenedor para las vistas del router.
leds-title
Este componente muestra títulos en la aplicación. Tanto de la aplicación en sí como de las diferentes opciones: guardar, cargar, …
Recibe dos parámetros:
- size: el tamaño del título, pudiendo ser grande, mediano o pequeño.
- text: el texto a mostrar en el título
leds-home
Este componente es el contenedor de todos los que forman la pantalla principal de la aplicación. Usa los siguientes componentes:
- leds-container: para mostrar los leds con los que definir el paso a añadir a la secuencia.
- leds-options: para mostrar las opciones para los pasos y secuencias.
- leds-displayer: para mostrar el listado de pasos de la secuencia y sus opciones.
- leds-pop-up: para mostrar un pop-up con mensajes y preguntas de confirmación al usuario.
- leds-loader: para mostrar el loading y el pop-up con el resultado cuando se envía una secuencia a la Raspberry.
leds-container
Este componente muestra todos los leds de un paso y, si así lo indica el parámetro correspondiente, la barra para definir el tiempo que durará el paso.
Se usa en la pantalla principal, para configurar los pasos de la secuencia, y en la pantalla de reproducción de demostración, para mostrar cómo se mostrarán los leds y sus estados durante la reproducción (en este caso no muestra la barra para definir la duración del paso).
Usa los siguientes componentes:
- leds-title: para mostrar el título de la sección.
- leds-led: este componente representa un led. Leds-container usa 8 para representar los 8 leds conectados a la Raspberry.
Recibe dos parámetros:
- title: el título de la sección. El componente lo pasará como parámetro a leds-title.
- showDelayBar: si debe mostrar o no la barra que define la duración del paso.
leds-pop-up
Este componente muestra un pop-up con un mensaje informativo o confirmación a una acción, dependiendo de un parámetro.
Recibe tres parámetros:
- title: el título del pop-up
- message: el mensaje del pop-up
- type: el tipo de pop-up a mostrar, entre alerta o confirmación
Dispone también de dos eventos:
- close: se dispara cuando se ha de cerrar el pop-up, mediante el botón cerrar de los mensajes de alerta o el botón cancelar de los mensajes de confirmación.
- confirm: se dispara cuando el usuario acepta un mensaje de confirmación.
leds-loader
Este componente muestra el pop-up que informa del resultado de enviar la secuencia a la Raspberry.
Recibe como parámetro:
- loader: una promesa sobre la petición a la Raspberry para reproducir la secuencia. La usa para mostrar el loader mientras esta cargando y esconderlo, mostrando el resultado, cuando finaliza.
Dispone de un evento:
- close: para cerrar el pop-up.
leds-options
Este componente muestra las opciones para los pasos y la secuencia. Usa el siguiente componente:
- leds-title: para mostrar el título de la sección.
leds-displayer
Este componente muestra la lista de pasos que se va añadiendo a la secuencia según se define. Usa el siguiente componente:
- leds-title: para mostrar el título de la sección.
Dispone de un evento:
- delete: se dispara al borrar un paso, para que el componente padre (leds-home) muestre un pop-up para pedir confirmación.
leds-demo-player
Este componente es el encargado de mostrar la pantalla para reproducir la demostración de la secuencia. Usa el siguiente componente:
- leds-container: para mostrar los leds con los que definir el paso a añadir a la secuencia.
leds-save
Este componente muestra la pantalla para guardar una secuencia en el local storage del navegador. Usa los siguientes componentes:
- leds-title: para mostrar el título de la pantalla.
- leds-messages-box: para informar al usuario sobre incidencias que se puedan producir al ejecutar la acción.
leds-load
Este componente muestra la pantalla para cargar una secuencia del local storage del navegador. Usa los siguientes componentes:
- leds-title: para mostrar el título de la pantalla.
leds-messages-box
Este componente muestra mensajes sobre las acciones realizadas en la pantalla para guardar secuencias. Recibe dos parámetros:
- type: el tipo de mensaje que se ha de mostrar, pudiendo ser de error o de éxito.
- message: el mensaje que se ha de mostrar.
Localización de los componentes
Rutas
La aplicación maneja cuatro rutas:
- home: es la encargada de mostrar el componente leds-home, también es la ruta que se carga por defecto.
- demos: es la encargada de mostrar el componente leds-demo-player.
- save: es la encargada de mostrar el componente leds-save.
- load: es la encargada de mostrar el componente leds-load.
Interfaces
Led
Esta interfaz define un led dentro de un paso de la secuencia. Está formada por:
- index (number): el índice del led dentro de la lista que forma el paso.
- color (string): el color que muestra el led.
- state (number): estado en el que está el led, encendido (1) o apagado (0).
LedState
Esta interfaz se usa para cambiar el estado en un led. Está formada por:
- index (number): el índice del led dentro de la lista que forma el paso.
- state (number): estado en el que está el led, encendido (1) o apagado (0).
Step
Esta interfaz se usa para almacenar un paso de la secuencia. Está formada por:
- steps (Array<Led>): una lista de interfaces de led (8 en este caso), que forman un paso.
- delay (number): el tiempo en que se mantiene en el estado el paso.
StateItem
Esta interfaz se usa para el envío de los datos de la secuencia a la Raspberry. Está formada por:
- states (Array<number>): una lista con los estados de los leds, 0 o 1, según estén apagados o encendidos.
- sleep (number): el tiempo en que se mantiene en el estado el paso.
OperationError
Esta interfaz se usa para gestionar los datos de los mensajes a mostrar al usuario al realizar operaciones con la secuencia. Está formada por:
- error (boolean): indica si el mensaje es de error o no.
- message (string): el mensaje a mostrar.
Servicios
Sequence
Este servicio se encarga de la gestión de las secuencias. Editar, guardar, cargar y enviar a la Raspberry. Dispone de los siguientes métodos:
- setOperationError: establece los valores para informar al usuario sobre el resultado de una operación.
- setName: establece el nombre de una secuencia para guardarla.
- getOperationError: recupera los valores para informar al usuario sobre el resultado de una operación.
- getName: recupera el nombre de una secuencia guardada.
- getCurrent: recupera la información del paso que se está editando.
- getDelay: recupera el valor de tiempo de espera para el paso actual.
- getSteps: recupera la lista de pasos de la secuencia actual.
- getTotalSteps: recupera el total de pasos de la secuencia actual.
- getIdxStepEdit: recupera el índice en la secuencia del paso que se esta editando.
- getListSequencesSaved: recupera una lista de todos los identificadores de la lista de secuencias guardadas en el local storage.
- getStoredSequenceName: recupera el nombre de una secuencia guardada en el local storage.
- getSendSequenceClient: recupera la promesa creada al enviar la secuencia a la Raspberry.
- newSequence: inicia una nueva secuencia.
- resetSequence: reinicia los valores para crear una nueva secuencia.
- resetOperationError: reinicia los valores del objeto usado para mostrar mensajes al usuario.
- sendSequenceToServer: envía la secuencia a la Raspberry para reproducir.
- stopSequenceInServer: envía la orden a la Raspberry para parar la reproducción.
- saveSequence: guarda la secuencia en el local storage.
- loadStoreSequence: carga una secuencia del local storage.
- updateCurrentStep: actualiza los valores del paso actual con los datos que recibe como parámetro.
- sendCurrentStep: envía un evento para indicar que los valores del paso actual se han modificado.
- addCurrentStep: añade los valores del paso actual a la secuencia.
- saveStep: guarda los datos de un paso cuando se está editando.
- deleteStep: borrar un paso de la secuencia.
- editStep: inicia la acción de editar un paso.
- cancelEditStep: cancela la acción de editar un paso.
- formatNameToKey: formatea el nombre de una secuencia para usarlo como clave y guardarla en el local storage.
- stepForCopy: serializa la información de un paso para añadirlo a la secuencia o guardarlo al editar.
Storage
Este servicio se encarga de la gestión del local storage del navegador. Dispone de los siguientes métodos:
- store: permite elegir que tipo de storage se va a usar, LOCAL o SESSION.
- setValue: guarda un valor en el storage.
- getValue: recupera un valor del storage.
- keyExists: comprueba si una clave o valor existe en el storage.
- deleteValue: elimina un valor del storage.
- getJSONValue: recupera un valor del storage en formato JSON.
- setJSONValue: guarda un objeto, con formato JSON, en el storage.
Repositorio y arranque de la aplicación
El repositorio de esta aplicación está alojado en:
Para ejecutarla basta con clonar el proyecto mediante:
git clone https://github.com/theguitxo/remote-leds-client.git
y, dentro del directorio de la aplicación, ejecutar:
ng serve
y navegar a:
http://localhost:4200
Aplicación en funcionamiento
En el siguiente video se puede ver la aplicación funcionando. El servidor Apache y los scripts de Python corren en una Raspberry Pi 3B+. La aplicación Angular se sirve desde un PC de sobremesa al que se conecta la tablet que ejecuta la aplicación.