So erstellen Sie ein benutzerdefiniertes Widget für den XENEON EDGE

Der XENEON EDGE ist mehr als nur ein Zweitbildschirm. Er kann zu einem Ort für die Informationen werden, die Sie am häufigsten im Blick haben möchten. iCUE enthält eine Reihe integrierter Widgets, aber Sie können auch Ihre eigenen erstellen. Ganz gleich, ob Sie einen benutzerdefinierten Systemmonitor, eine Wetteranzeige oder etwas Spezielleres wünschen – die Erstellung eines Widgets ist einfacher, als es vielleicht scheint.

In diesem Leitfaden erfahren Sie, wie benutzerdefinierte Widgets funktionieren, wo Sie die vollständige technische Referenz finden und wie KI-Tools den Prozess erheblich beschleunigen können.

Benutzerdefinierte Widgets werden mit HTML, CSS und JavaScript erstellt und laufen auf einer Chromium-basierten Rendering-Engine (QtWebEngine).

Strukturell gesehen ist jedes Widget ein Ordner, der zwei erforderliche Dateien enthält:

• index.html: Der Einstiegspunkt des Widgets (Markup, Stile und Skripte).
• manifest.json: Metadaten, die das Widget beschreiben, darunter Name, Version, unterstützte Geräte und erforderliche Plugins.

Zu den optionalen Dateien gehören zusätzliche CSS- und JavaScript-Dateien, Bilddateien sowie eine „translation.json“-Datei für die Lokalisierung.

Anstatt die vollständige Spezifikation hier erneut aufzuführen, finden Sie die umfassende Dokumentation zum Manifestformat, zu den verfügbaren, vom Benutzer konfigurierbaren Steuerelementtypen (Schieberegler, Farbauswahlfelder, Sensorauswahlfelder usw.), zu den Plugin-APIs für Sensoren und Medien sowie zu den Laufzeit-Hooks für die Anbindung an iCUE in der offiziellen Elgato-Dokumentation. Diese stellt die maßgebliche Quelle dar und wird im Zuge der Weiterentwicklung des Frameworks stets auf dem neuesten Stand gehalten.

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

CORSAIR stellt ein WidgetBuilder-Kit zur Verfügung, um den Vorgang zu vereinfachen. Es besteht aus zwei Teilen:

• Die WidgetBuilder-CLI (icuewidget): ein Befehlszeilentool, das einen neuen Widget-Ordner erstellt, Ihr Manifest und Ihre HTML-Datei überprüft und das Ergebnis in eine .icuewidget-Datei verpackt, die direkt in iCUE importiert werden kann.
• Eine Funktion für KI-Assistenten: eine strukturierte Eingabeaufforderung, die einem KI-Modell beibringt, wie man gültige iCUE-Widgets generiert.

Zusammen decken sie den gesamten Zyklus ab: Scaffold, Generieren, Validieren, Paketieren. Den Download für das WidgetBuilder Kit finden Sie unten.

Man muss kein Webentwickler sein, um ein individuelles HTML-Widget zu erstellen. KI-Tools wie Claude, ChatGPT oder andere große Sprachmodelle können anhand einer Beschreibung in einfacher Sprache funktionierenden Widget-Code generieren.

Laden Sie das Skill aus dem WidgetBuilder Kit auf den KI-Assistenten Ihrer Wahl hoch. Claude, ChatGPT, Gemini – alles, was Datei-Uploads unterstützt, ist geeignet. Das Skill bereitet das Modell auf die Widget-Spezifikationen, die Gerätegrößen und Auflösungen für das XENEON EDGE, das Pump-LCD und das Keyboard-LCD sowie auf die Konventionen für Layout, Manifest und Plugin-Nutzung vor.

Sobald die Funktion geladen ist, beschreibe, was du möchtest. Etwa so:

„Erstelle ein Widget für XENEON EDGE, das meine CPU- und GPU-Temperaturen auf dunklem Hintergrund anzeigt, mit farbigen Anzeigen, die je nach Temperatur von grün nach rot wechseln, und bei dem ich die Warnschwellenwerte im Einstellungsfenster anpassen kann.“

Die KI erstellt die Dateien „index.html“, „manifest.json“ sowie alle erforderlichen Begleitdateien. Der Skill führt das Modell durch einen strukturierten Arbeitsablauf: Er stellt klärende Fragen, entwirft das Layout, generiert den Code und unterstützt Sie beim Testen und Verpacken des Ergebnisses.

Geben Sie genau an, welche Daten angezeigt werden sollen und wie diese aussehen sollen. Geben Sie an, auf welche Geräte Sie abzielen (XENEON EDGE, Tastatur-LCD, Pumpen-LCD oder alle drei). Wenn Sie vom Benutzer konfigurierbare Einstellungen wünschen, beschreiben Sie, was einstellbar sein soll. Und falls Ihr Widget externe Daten benötigt (Wetter, Aktienkurse, alles, was über eine API abgerufen wird), geben Sie dies bitte im Voraus an, damit die KI Sie bei der Auswahl der Datenquelle unterstützen kann.

Sobald die KI Ihre Dateien generiert hat, führen Sie diese über die WidgetBuilder-CLI aus, um die Ausgabe zu überprüfen und das Ergebnis in einer .icuewidget-Datei zu verpacken. Sollte etwas nicht ganz stimmen, teilen Sie der KI mit, was geändert werden soll. Dieser iterative Prozess macht die Erstellung von Widgets auch ohne Programmierkenntnisse möglich.

Sobald Ihr Widget gepackt ist, importieren Sie es in iCUE, indem Sie im Widget-Fenster auf die Schaltfläche „+“ klicken und die Datei auswählen. Sie können auch einfach auf die .icuewidget-Datei auf Ihrem System doppelklicken. iCUE überprüft die Datei, und wenn alles in Ordnung ist, erscheint Ihr Widget in der Widget-Liste für alle unterstützten Geräte.

Ein paar Dinge, die du beachten solltest, egal ob du Code von Hand schreibst oder Widgets mit KI generierst:

Achte darauf, dass es auf einen Blick verständlich ist. Die besten Widgets vermitteln ihre wichtigsten Informationen innerhalb weniger Sekunden. Wenn jemand dein Widget erst genau studieren muss, um zu verstehen, was es anzeigt, ist es zu komplex. Stelle die wichtigsten Daten in den Mittelpunkt.

Entwerfen Sie für verschiedene Zustände. Wenn Ihr Widget auf Netzwerkdaten oder Sensorwerten basiert, sollten Sie bedenken, was passiert, wenn diese Daten nicht verfügbar sind. Zeigen Sie während der Initialisierung einen Ladezustand an, bei Fehlern eine eindeutige Fehlermeldung, und zeigen Sie im Idealfall weiterhin die zuletzt bekannten korrekten Daten mit einem Offline-Symbol an, anstatt den Bildschirm leer zu lassen.

Berücksichtigen Sie die Bildschirmgröße. Die Widget-Slots des XENEON EDGE reichen von „Small“ (840 × 344 Pixel in der Breite) bis „Extra Large“ (2536 × 696 Pixel in der Breite). Wenn Ihr Widget für mehrere Größen ausgelegt ist, gestalten Sie das Layout responsiv. Vergrößern Sie nicht einfach alles. Nutzen Sie den zusätzlichen Platz bei größeren Formaten, um mehr Informationen anzuzeigen oder die Lesbarkeit zu verbessern.

Testen Sie auf dem eigentlichen Gerät. Was in der Browser-Vorschau gut aussieht, kann auf dem XENEON EDGE selbst anders dargestellt werden. Importieren Sie Ihr Widget und überprüfen Sie es auf der tatsächlichen Hardware, bevor Sie es als fertig betrachten.

Sobald du etwas erstellt hast, auf das du stolz bist, hast du mehrere Möglichkeiten, es anderen zu zeigen. Am einfachsten ist es, es als .icuewidget-Datei zu exportieren und direkt mit Freunden oder Community-Mitgliedern zu teilen.

In Kürze wird ein Entwicklerportal verfügbar sein, über das Widget-Entwickler ihre Widgets direkt im Elgato Marketplace veröffentlichen können – sowohl kostenlose als auch kostenpflichtige Widgets. Damit erhalten Designer und Entwickler eine einfache Möglichkeit, die breite XENEON EDGE-Community zu erreichen.