Desarrollo Front-end

Ahora es el turno de la interfaz de usuario, para esto al igual que pasos anteriores podemos iniciar con una investigación enfocada en este punto, una herramienta que no hemos utilizado es Youtube, aquí utilizaremos varias palabras clave, pero la que nos da un recurso valioso es Home Automation Ignition: https://www.youtube.com/watch?v=R17np48W83g&ab_channel=NaderChinichian

Este recurso nos da una idea de que podríamos alcanzar con Ignition en el ámbito de automatización de dispositivos inteligentes, nuestra aplicación será mucho más sencilla, pero nos da una idea para futuros proyectos.

En este caso planeamos una interfaz sencilla de control, como tenemos toda la información de las luces en etiquetas en folders separados, podemos hacer un template para el control de luces, y con controles sencillos podemos ejecutar nuestros scripts.

Con un pequeño desarollo llegamos al siguiente template:

Como podemos ver en las imágenes tenemos dos estados, uno para las luces que tiene control de color y otro para las luces que no lo tienen, esto podemos hacerlo mediante bindings en las propiedades de visible de los componentes, la imagen central también podemos cambiarla mediante un binding indirecto a la etiqueta de tipo de luz y luego aplicando una transformada para devolver la imagen necesaria según el tipo de luz, lo importante a mencionar en este proceso de desarrollo es que los bindings nos dan gran flexibilidad dentro de Ignition por lo que es importante ser creativos en su uso.

La barra de cambio de color se obtuvo de otro recurso importante de Ignition que es el Ignition Exchange, el Exchange son recursos de proyectos o proyectos completos que los usuarios pueden compartir de forma gratuita en la siguiente URL: https://inductiveautomation.com/exchange/ lo único que se requiere es una cuenta para descargar los recursos.

En este caso buscamos un selector de color y nos dio el siguiente resultado: https://inductiveautomation.com/exchange/2388/overview de este recurso obtuvimos el selector en forma de barra para el color, este cambia de 0 a 100, pero según la documentación de Philips Hue el color cambia de 0 a 65535, para esto debemos modificar un poco el recurso y sus códigos asociados obteniendo el siguiente código para convertir el resultado de la barra al valor que necesitamos.

Y por último, lo que le falta a nuestra aplicación es un formulario para que el usuario ingrese su IP y usuario, este es muy sencillo:

Finalmente, nuestra aplicación final se ve de la siguiente forma: