Cómo crear un widget personalizado para el XENEON EDGE

El XENEON EDGE es más que una pantalla secundaria. Puede convertirse en un espacio para la información que más te interesa tener a la vista. iCUE incluye un conjunto de widgets integrados, pero también puedes crear los tuyos propios. Tanto si quieres un monitor del sistema personalizado, un indicador meteorológico o algo más específico, crear un widget es más sencillo de lo que parece.

Esta guía explica cómo funcionan los widgets personalizados, dónde encontrar la referencia técnica completa y cómo las herramientas de IA pueden acelerar el proceso de forma considerable.

Los widgets personalizados se crean con HTML, CSS y JavaScript, y se ejecutan en un motor de renderizado basado en Chromium (QtWebEngine).

Desde el punto de vista estructural, cada widget es una carpeta que contiene dos archivos obligatorios:

• index.html: el punto de entrada del widget (código HTML, estilos y scripts).
• manifest.json: metadatos que describen el widget, incluyendo el nombre, la versión, los dispositivos compatibles y los complementos necesarios.

Los archivos opcionales incluyen archivos CSS y JavaScript adicionales, recursos de imagen y un archivo translation.json para la localización.

En lugar de repetir aquí toda la especificación, la referencia completa sobre el formato del manifiesto, los tipos de controles configurables por el usuario disponibles (deslizadores, selectores de color, selectores de sensores, etc.), las API de los complementos para sensores y medios, y los puntos de conexión en tiempo de ejecución para conectarse a iCUE se encuentran en la documentación oficial de Elgato. Esa es la fuente canónica y se mantiene sincronizada con el marco de trabajo a medida que este evoluciona.

• https://docs.elgato.com/icue/widgets/

CORSAIR ofrece un kit WidgetBuilder para facilitar el proceso. Consta de dos piezas:

• La CLI de WidgetBuilder (icuewidget): una herramienta de línea de comandos que crea una estructura básica para una nueva carpeta de widgets, valida el manifiesto y el código HTML, y empaqueta el resultado en un archivo .icuewidget listo para importar a iCUE.
• Una habilidad para asistentes de IA: una indicación estructurada que enseña a un modelo de IA a generar widgets válidos de iCUE.

Juntos cubren todo el ciclo: creación del andamio, generación, validación y empaquetado. A continuación encontrarás el enlace de descarga del WidgetBuilder Kit.

No hace falta ser desarrollador web para crear un widget HTML personalizado. Herramientas de IA como Claude, ChatGPT u otros modelos de lenguaje a gran escala pueden generar código de widget funcional a partir de una descripción en lenguaje natural.

Sube la habilidad del kit WidgetBuilder al asistente de IA que prefieras. Claude, ChatGPT, Gemini... cualquier asistente que admita la subida de archivos servirá. La habilidad prepara el modelo con las especificaciones de los widgets, los tamaños y resoluciones de los dispositivos para el XENEON EDGE, la pantalla LCD de la bomba y la pantalla LCD del teclado, así como las convenciones de diseño, el manifiesto y el uso de complementos.

Una vez que se haya cargado la habilidad, describe lo que quieres. Algo así como:

«Crea un widget para XENEON EDGE que muestre las temperaturas de mi CPU y mi GPU con un fondo oscuro y medidores de colores que cambien de verde a rojo según la temperatura, y que me permita personalizar los umbrales de aviso en el panel de configuración».

La IA generará los archivos index.html, manifest.json y cualquier otro archivo complementario. La Skill guía al modelo a través de un flujo de trabajo estructurado: formula preguntas aclaratorias, diseña la maquetación, genera el código y te ayuda a probar y empaquetar el resultado.

Sé específico sobre qué datos quieres que se muestren y cómo deben aparecer. Indica a qué dispositivos te diriges (XENEON EDGE, pantalla LCD del teclado, pantalla LCD de la bomba o los tres). Si deseas que haya ajustes configurables por el usuario, describe qué aspectos deben ser modificables. Y si tu widget necesita datos externos (el tiempo, cotizaciones bursátiles o cualquier dato obtenido de una API), indícalo desde el principio para que la IA pueda guiarte en la selección de la fuente.

Una vez que la IA haya generado tus archivos, procesa estos mediante la CLI de WidgetBuilder para validar el resultado y empaquetarlo en un archivo .icuewidget. Si algo no está del todo bien, indica a la IA qué debe cambiar. Se trata de un proceso iterativo que permite crear widgets sin necesidad de tener experiencia en programación.

Una vez que hayas empaquetado el widget, impórtalo a iCUE haciendo clic en el botón «+» del panel Widgets y seleccionando el archivo. También puedes hacer doble clic en el archivo .icuewidget de tu sistema. iCUE verificará el archivo y, si todo está en orden, el widget aparecerá en la lista de widgets de todos los dispositivos compatibles.

Algunas cosas que debes tener en cuenta, tanto si escribes código a mano como si generas widgets con IA:

Haz que se pueda ver de un vistazo. Los mejores widgets transmiten la información más importante en un par de segundos. Si alguien tiene que fijarse detenidamente en tu widget para entender lo que muestra, es que es demasiado complejo. Coloca los datos clave en un lugar destacado.

Diseña teniendo en cuenta múltiples situaciones. Si tu widget depende de datos de red o de lecturas de sensores, piensa en qué ocurre cuando esos datos no están disponibles. Muestra un indicador de carga mientras se inicializa el sistema, un mensaje de error claro si algo sale mal y, a ser posible, sigue mostrando los últimos datos válidos conocidos con un indicador de modo sin conexión, en lugar de dejar la pantalla en blanco.

Ten en cuenta el tamaño de la pantalla. Los espacios para widgets del XENEON EDGE van desde el tamaño Pequeño (840 x 344 píxeles en horizontal) hasta el Extra Grande (2536 x 696 píxeles en horizontal). Si tu widget está diseñado para varios tamaños, haz que el diseño sea adaptativo. No te limites a ampliarlo todo. Aprovecha el espacio adicional de los tamaños más grandes para mostrar más información o mejorar la legibilidad.

Prueba el dispositivo real. Lo que se ve bien en la vista previa del navegador puede mostrarse de forma diferente en el propio XENEON EDGE. Importa tu widget y comprueba cómo se ve en el hardware real antes de darlo por terminado.

Una vez que hayas creado algo de lo que te sientas orgulloso, tienes varias opciones para mostrárselo a otras personas. La más sencilla es exportarlo como un archivo .icuewidget y compartirlo directamente con amigos o miembros de la comunidad.

Próximamente se lanzará un portal para creadores que permitirá a los desarrolladores de widgets publicar directamente en Elgato Marketplace, con soporte tanto para widgets gratuitos como de pago. Esto ofrece a los diseñadores y desarrolladores una vía clara para llegar a la amplia comunidad de XENEON EDGE.