Så här skapar du en anpassad widget för XENEON EDGE

XENEON EDGE är mer än bara en extra skärm. Den kan bli en plats för den information du vill ha framför ögonen oftast. iCUE innehåller en uppsättning inbyggda widgets, men du kan också skapa dina egna. Oavsett om du vill ha en anpassad systemövervakning, en väderdisplay eller något mer specialiserat är det enklare än man kan tro att skapa en widget.

Den här guiden beskriver hur anpassade widgets fungerar, var du hittar den fullständiga tekniska referensen och hur AI-verktyg kan påskynda processen avsevärt.

Anpassade widgets byggs med HTML, CSS och JavaScript och körs på en Chromium-baserad renderingsmotor (QtWebEngine).

Strukturellt sett är varje widget en mapp som innehåller två obligatoriska filer:

• index.html: widgetens startpunkt (markup, stilmallar och skript).
• manifest.json: metadata som beskriver widgeten, inklusive namn, version, enheter som stöds och nödvändiga tillägg.

Tillvalen omfattar ytterligare CSS- och JavaScript-filer, bildresurser samt en translation.json-fil för lokalisering.

I stället för att här återge hela specifikationen finns den fullständiga referensen för manifestformatet, de tillgängliga kontrolltyperna som användaren kan konfigurera (skjutreglage, färgväljare, sensorväljare och så vidare), plugin-API:erna för sensorer och media samt runtime-hooks för anslutning till iCUE i Elgatos officiella dokumentation. Det är den officiella källan och den hålls uppdaterad i takt med att ramverket utvecklas.

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

CORSAIR tillhandahåller ett WidgetBuilder-kit för att underlätta processen. Det består av två delar:

• WidgetBuilder CLI (icuewidget): ett kommandoradsverktyg som skapar en ny widgetmapp, validerar ditt manifest och din HTML-kod samt paketerar resultatet i en .icuewidget-fil som är redo att importeras till iCUE.
• En funktion för AI-assistenter: en strukturerad prompt som lär en AI-modell att generera giltiga iCUE-widgets.

Tillsammans täcker de hela processen: bygga upp, generera, validera, paketera. Nedan hittar du länken för nedladdning av WidgetBuilder Kit.

Du behöver inte vara webbutvecklare för att skapa en anpassad HTML-widget. AI-verktyg som Claude, ChatGPT eller andra stora språkmodeller kan generera fungerande widgetkod utifrån en beskrivning i klartext.

Ladda upp funktionen från WidgetBuilder Kit till den AI-assistent du föredrar. Claude, ChatGPT, Gemini – alla som stöder filuppladdning fungerar. Funktionen förbereder modellen med information om widgetens specifikationer, enhetsstorlekar och upplösningar för XENEON EDGE, Pump LCD och Keyboard LCD, samt riktlinjer för layout, manifest och användning av plugins.

När funktionen har laddats beskriver du vad du vill göra. Till exempel:

"Skapa en widget för XENEON EDGE som visar temperaturen på min CPU och GPU mot en mörk bakgrund, med färgade mätare som skiftar från grönt till rött beroende på temperaturen, och låt mig anpassa varningsgränserna i inställningspanelen."

AI-systemet skapar filerna index.html, manifest.json och eventuella tillhörande filer. Funktionen leder modellen genom ett strukturerat arbetsflöde: den ställer förtydligande frågor, utformar layouten, genererar koden och hjälper dig att testa och paketera resultatet.

Var tydlig med vilka data du vill visa och hur de ska se ut. Ange vilka enheter du riktar dig till (XENEON EDGE, tangentbordets LCD-skärm, pumpens LCD-skärm eller alla tre). Om du vill ha inställningar som användaren kan anpassa, beskriv vad som ska gå att justera. Och om din widget behöver extern data (väder, aktiekurser eller annat som hämtas från ett API), ange det redan från början så att AI:n kan guida dig genom valet av datakälla.

När AI:n har genererat dina filer kör du dem genom WidgetBuilder CLI för att kontrollera utdata och paketera resultatet i en .icuewidget-fil. Om något inte stämmer helt, berättar du för AI:n vad som ska ändras. Det är en iterativ process som gör det möjligt att skapa widgetar utan programmeringserfarenhet.

När din widget är packad importerar du den till iCUE genom att klicka på ”+”-knappen i widgetpanelen och välja filen. Du kan också helt enkelt dubbelklicka på .icuewidget-filen på din dator. iCUE kontrollerar filen, och om allt ser bra ut visas din widget i widgetlistan för alla enheter som stöds.

Några saker att tänka på, oavsett om du skriver kod för hand eller skapar komponenter med hjälp av AI:

Se till att den är lättöverskådlig. De bästa widgetarna förmedlar den viktigaste informationen på bara några sekunder. Om man måste studera din widget för att förstå vad den visar är den för komplicerad. Placera de viktigaste uppgifterna i förgrunden.

Utforma för olika tillstånd. Om din widget är beroende av nätverksdata eller sensorvärden bör du fundera på vad som händer när dessa data inte är tillgängliga. Visa en laddningsindikator medan initialiseringen pågår, ett tydligt felmeddelande om något går fel, och helst fortsätt att visa de senaste kända korrekta uppgifterna tillsammans med en offline-indikator istället för att skärmen blir tom.

Ta hänsyn till skärmstorleken. Widgetplatserna på XENEON EDGE sträcker sig från Small (840x344 horisontellt) till Extra Large (2536x696 horisontellt). Om din widget är avsedd för flera storlekar bör du göra layouten responsiv. Skala inte bara upp allt. Utnyttja det extra utrymmet på större storlekar för att visa mer information eller förbättra läsbarheten.

Testa på den faktiska enheten. Det som ser bra ut i en förhandsgranskning i webbläsaren kan visas annorlunda på själva XENEON EDGE. Importera din widget och kontrollera den på riktig hårdvara innan du anser att den är klar.

När du har skapat något du är stolt över finns det flera sätt att visa upp det för andra. Det enklaste är att exportera det som en .icuewidget-fil och dela den direkt med vänner eller andra i communityn.

En portal för utvecklare är på väg, som gör det möjligt för widgetutvecklare att publicera direkt på Elgato Marketplace, med stöd för både gratis och betalda widgets. Det ger designers och utvecklare en enkel väg att nå ut till den bredare XENEON EDGE-gemenskapen.