Comment créer un widget personnalisé pour le XENEON EDGE

Le XENEON EDGE est bien plus qu'un simple écran secondaire. Il peut devenir un espace dédié aux informations que vous souhaitez consulter le plus souvent. iCUE intègre un ensemble de widgets, mais vous pouvez également créer les vôtres. Que vous souhaitiez un moniteur système personnalisé, un affichage météo ou quelque chose de plus spécifique, créer un widget est plus simple qu'il n'y paraît.

Ce guide explique le fonctionnement des widgets personnalisés, indique où trouver la documentation technique complète et montre comment les outils d'IA peuvent considérablement accélérer le processus.

Les widgets personnalisés sont développés en HTML, CSS et JavaScript, et s'exécutent sur un moteur de rendu basé sur Chromium (QtWebEngine).

D'un point de vue structurel, chaque widget est un dossier contenant deux fichiers obligatoires :

• index.html: le point d'entrée du widget (balises, styles et scripts).
• manifest.json: métadonnées décrivant le widget, notamment son nom, sa version, les appareils pris en charge et les plugins requis.

Les fichiers facultatifs comprennent des fichiers CSS et JavaScript supplémentaires, des ressources graphiques et un fichier translation.json destiné à la localisation.

Plutôt que de reprendre ici l'intégralité de la spécification, vous trouverez dans la documentation officielle d'Elgato toutes les informations de référence concernant le format de manifeste, les types de commandes configurables par l'utilisateur (curseurs, sélecteurs de couleurs, sélecteurs de capteurs, etc.), les API des plugins pour les capteurs et les médias, ainsi que les points d'accrochage d'exécution permettant de se connecter à iCUE. Il s'agit de la source de référence, qui est mise à jour au fur et à mesure de l'évolution du framework.

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

CORSAIR propose un kit WidgetBuilder pour faciliter le processus. Il se compose de deux éléments :

• La CLI WidgetBuilder (icuewidget) : un outil en ligne de commande qui crée la structure d'un nouveau dossier de widget, valide votre manifeste et votre code HTML, puis compile le résultat dans un fichier .icuewidget prêt à être importé dans iCUE.
• Une compétence pour les assistants IA: une instruction structurée qui apprend à un modèle d'IA à générer des widgets iCUE valides.

Ensemble, ils couvrent l'ensemble du cycle : création d'un squelette, génération, validation, packaging. Vous trouverez ci-dessous le lien de téléchargement du kit WidgetBuilder.

Pas besoin d'être développeur web pour créer un widget HTML personnalisé. Des outils d'IA comme Claude, ChatGPT ou d'autres grands modèles linguistiques peuvent générer du code de widget fonctionnel à partir d'une description en langage naturel.

Importez la compétence du kit WidgetBuilder vers l'assistant IA de votre choix. Claude, ChatGPT, Gemini… tout ce qui prend en charge l'importation de fichiers fera l'affaire. La compétence configure le modèle en fonction des spécifications des widgets, des dimensions et résolutions des écrans du XENEON EDGE, de l'écran LCD de la pompe et de l'écran LCD du clavier, ainsi que des conventions relatives à la mise en page, au manifeste et à l'utilisation des plugins.

Une fois la compétence chargée, expliquez ce que vous souhaitez. Par exemple :

« Créez un widget pour XENEON EDGE qui affiche les températures de mon processeur et de ma carte graphique sur un fond sombre, avec des jauges colorées passant du vert au rouge en fonction de la température, et qui me permette de personnaliser les seuils d'alerte dans le panneau des paramètres. »

L'IA générera les fichiers index.html, manifest.json et tous les fichiers associés. La Skill guide le modèle à travers un processus structuré : elle pose des questions de clarification, conçoit la mise en page, génère le code et vous aide à tester et à packager le résultat.

Précisez clairement quelles données vous souhaitez afficher et sous quelle forme. Indiquez les appareils concernés (XENEON EDGE, écran LCD du clavier, écran LCD de la pompe ou les trois). Si vous souhaitez des paramètres configurables par l'utilisateur, décrivez les éléments qui doivent être modifiables. Et si votre widget nécessite des données externes (météo, cours de la bourse, toute information récupérée via une API), signalez-le dès le départ afin que l'IA puisse vous guider dans le choix de la source.

Une fois que l'IA a généré vos fichiers, passez-les par l'interface CLI de WidgetBuilder pour valider le résultat et le compiler dans un fichier .icuewidget. Si quelque chose ne vous convient pas, indiquez à l'IA les modifications à apporter. Il s'agit d'un processus itératif qui permet de créer des widgets sans aucune expérience en programmation.

Une fois votre widget créé, importez-le dans iCUE en cliquant sur le bouton « + » dans le panneau Widgets et en sélectionnant le fichier. Vous pouvez également double-cliquer simplement sur le fichier .icuewidget présent sur votre système. iCUE vérifie le fichier et, si tout est en ordre, votre widget apparaît dans la liste des widgets pour tous les appareils pris en charge.

Voici quelques points à garder à l'esprit, que vous écriviez du code à la main ou que vous génériez des widgets à l'aide de l'IA :

Veillez à ce qu'il soit lisible d'un seul coup d'œil. Les meilleurs widgets transmettent leurs informations les plus importantes en quelques secondes. Si un utilisateur doit scruter votre widget pour comprendre ce qu'il affiche, c'est qu'il est trop complexe. Mettez les données essentielles bien en évidence.

Concevez votre interface pour plusieurs états. Si votre widget dépend de données réseau ou de relevés de capteurs, réfléchissez à ce qui se passe lorsque ces données ne sont pas disponibles. Affichez un indicateur de chargement pendant l'initialisation, un message d'erreur clair en cas de problème et, dans l'idéal, continuez d'afficher les dernières données valides connues accompagnées d'un indicateur « hors ligne » plutôt que de laisser l'écran vide.

Tenez compte de la taille de l'écran. Les emplacements de widgets du XENEON EDGE vont de « Small » (840 × 344 pixels en largeur) à « Extra Large » (2536 × 696 pixels en largeur). Si votre widget est conçu pour plusieurs tailles, veillez à ce que sa mise en page soit adaptative. Ne vous contentez pas d'agrandir tous les éléments. Utilisez l'espace supplémentaire sur les écrans plus grands pour afficher davantage d'informations ou améliorer la lisibilité.

Testez sur l'appareil réel. Ce qui semble correct dans l'aperçu du navigateur peut s'afficher différemment sur le XENEON EDGE lui-même. Importez votre widget et vérifiez-le sur le matériel réel avant de considérer que le travail est terminé.

Une fois que vous avez créé quelque chose dont vous êtes fier, plusieurs possibilités s'offrent à vous pour le faire découvrir à d'autres personnes. La plus simple consiste à l'exporter au format .icuewidget et à le partager directement avec vos amis ou les membres de la communauté.

Un portail dédié aux créateurs est en cours de développement ; il permettra aux développeurs de widgets de publier directement sur l'Elgato Marketplace, qu'il s'agisse de widgets gratuits ou payants. Cela offre aux concepteurs et aux développeurs un moyen simple de toucher l'ensemble de la communauté XENEON EDGE.