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:
