Een aangepaste widget maken voor de XENEON EDGE

De XENEON EDGE is meer dan alleen een tweede scherm. Het kan een plek worden voor de informatie die je het vaakst in beeld wilt hebben. iCUE bevat een reeks ingebouwde widgets, maar je kunt ook je eigen widgets maken. Of je nu een aangepaste systeemmonitor, een weerweergave of iets specifiekers wilt: het maken van een widget is eenvoudiger dan het lijkt.

In deze handleiding wordt uitgelegd hoe aangepaste widgets werken, waar u de volledige technische documentatie kunt vinden en hoe AI-tools het proces aanzienlijk kunnen versnellen.

Aangepaste widgets worden gebouwd met HTML, CSS en JavaScript en draaien op een op Chromium gebaseerde weergave-engine (QtWebEngine).

Op structureel niveau is elke widget een map met twee verplichte bestanden:

• index.html: het startpunt van de widget (opmaak, stijlen en scripts).
• manifest.json: metagegevens die de widget beschrijven, waaronder naam, versie, ondersteunde apparaten en vereiste plug-ins.

Tot de optionele bestanden behoren aanvullende CSS- en JavaScript-bestanden, afbeeldingen en een translation.json-bestand voor lokalisatie.

In plaats van de volledige specificatie hier nogmaals weer te geven: de volledige referentie voor het manifestformaat, de beschikbare, door de gebruiker configureerbare bedieningselementen (schuifregelaars, kleurenkiezers, sensorkiezers, enzovoort), de plug-in-API’s voor sensoren en media, en de runtime-hooks voor koppeling met iCUE zijn allemaal te vinden in de officiële documentatie van Elgato. Dat is de officiële bron en deze wordt voortdurend bijgewerkt naarmate het framework zich verder ontwikkelt.

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

CORSAIR biedt een WidgetBuilder-set aan om het proces te vergemakkelijken. Deze bestaat uit twee onderdelen:

• De WidgetBuilder CLI (icuewidget): een opdrachtregelprogramma dat een nieuwe widgetmap aanmaakt, je manifest en HTML valideert en het resultaat verpakt in een .icuewidget-bestand dat klaar is om in iCUE te worden geïmporteerd.
• Een vaardigheid voor AI-assistenten: een gestructureerde prompt waarmee een AI-model leert hoe het geldige iCUE-widgets kan genereren.

Samen vormen ze de volledige cyclus: opzetten, genereren, valideren, verpakken. Hieronder vind je de download voor de WidgetBuilder Kit.

Je hoeft geen webontwikkelaar te zijn om een aangepaste HTML-widget te maken. AI-tools zoals Claude, ChatGPT of andere grote taalmodellen kunnen werkende widgetcode genereren op basis van een beschrijving in gewone taal.

Upload de skill uit de WidgetBuilder Kit naar de AI-assistent van je keuze. Claude, ChatGPT, Gemini: alles wat het uploaden van bestanden ondersteunt, is geschikt. De skill stelt het model in op de specificaties van de widgets, de afmetingen en resoluties van de XENEON EDGE, het LCD-scherm van de Pump en het LCD-scherm van het toetsenbord, en de conventies voor lay-out, manifest en het gebruik van plug-ins.

Zodra de vaardigheid is geladen, beschrijf je wat je wilt. Bijvoorbeeld:

"Maak een widget voor de XENEON EDGE die mijn CPU- en GPU-temperaturen weergeeft op een donkere achtergrond, met gekleurde meters die afhankelijk van de temperatuur van groen naar rood veranderen, en waarbij ik de waarschuwingsdrempels kan aanpassen in het instellingenpaneel."

De AI genereert het bestand index.html, manifest.json en eventuele ondersteunende bestanden. De Skill loodst het model door een gestructureerde workflow: hij stelt verduidelijkende vragen, ontwerpt de lay-out, genereert de code en helpt je bij het testen en verpakken van het resultaat.

Geef duidelijk aan welke gegevens je wilt weergeven en hoe deze eruit moeten zien. Geef aan op welke apparaten je je richt (XENEON EDGE, toetsenbord-LCD, pomp-LCD of alle drie). Als je instellingen wilt die door de gebruiker kunnen worden aangepast, beschrijf dan wat er instelbaar moet zijn. En als je widget externe gegevens nodig heeft (weer, aandelenkoersen, of andere gegevens die via een API worden opgehaald), vermeld dat dan meteen, zodat de AI je kan helpen bij het kiezen van de juiste bron.

Zodra de AI je bestanden heeft gegenereerd, verwerk je ze via de WidgetBuilder CLI om de uitvoer te controleren en het resultaat te verpakken in een .icuewidget-bestand. Als er iets niet helemaal klopt, geef je de AI aan wat er moet worden aangepast. Het is een iteratief proces dat het maken van widgets toegankelijk maakt zonder programmeerervaring.

Zodra je widget is verpakt, importeer je deze in iCUE door op de knop "+" in het widgetpaneel te klikken en het bestand te selecteren. Je kunt ook gewoon dubbelklikken op het .icuewidget-bestand op je systeem. iCUE controleert het bestand en als alles in orde is, verschijnt je widget in de widgetlijst voor alle ondersteunde apparaten.

Een paar dingen om in gedachten te houden, of je nu zelf code schrijft of widgets genereert met AI:

Zorg ervoor dat het in één oogopslag te begrijpen is. De beste widgets geven de belangrijkste informatie binnen een paar seconden weer. Als iemand je widget moet bestuderen om te begrijpen wat er wordt weergegeven, is deze te ingewikkeld. Zet de belangrijkste gegevens centraal.

Ontwerp voor verschillende situaties. Als je widget afhankelijk is van netwerkgegevens of sensorwaarden, bedenk dan wat er gebeurt als die gegevens niet beschikbaar zijn. Geef een laadindicator weer terwijl het systeem wordt opgestart, een duidelijke foutmelding als er iets misgaat, en laat idealiter de laatst bekende correcte gegevens zien met een offline-indicator, in plaats van het scherm leeg te laten.

Houd rekening met de schermgrootte. De widgetvakken van de XENEON EDGE variëren van Klein (840x344 horizontaal) tot Extra groot (2536x696 horizontaal). Als je widget voor meerdere formaten is bedoeld, zorg dan dat de lay-out responsief is. Vergroot niet zomaar alles. Gebruik de extra ruimte bij grotere formaten om meer informatie weer te geven of de leesbaarheid te verbeteren.

Test het op het daadwerkelijke apparaat. Wat er in een browservoorbeeld goed uitziet, kan er op de XENEON EDGE zelf anders uitzien. Importeer je widget en controleer deze op echte hardware voordat je het als voltooid beschouwt.

Als je eenmaal iets hebt gemaakt waar je trots op bent, heb je een aantal mogelijkheden om het aan anderen te laten zien. De eenvoudigste manier is om het als een .icuewidget-bestand te exporteren en het direct te delen met vrienden of leden van de community.

Er komt een portaal voor makers aan waarmee ontwikkelaars van widgets rechtstreeks op de Elgato Marketplace kunnen publiceren, met ondersteuning voor zowel gratis als betaalde widgets. Dit biedt ontwerpers en ontwikkelaars een duidelijke manier om de bredere XENEON EDGE-gemeenschap te bereiken.