Jak stworzyć niestandardowy widget dla XENEON EDGE

XENEON EDGE to coś więcej niż tylko dodatkowy wyświetlacz. Może stać się miejscem, w którym wyświetlane są informacje, które chcesz mieć na widoku najczęściej. iCUE zawiera zestaw wbudowanych widżetów, ale możesz też tworzyć własne. Niezależnie od tego, czy potrzebujesz niestandardowego monitora systemowego, wyświetlacza pogody, czy czegoś bardziej specjalistycznego, tworzenie widżetów jest łatwiejsze, niż mogłoby się wydawać.

W niniejszym przewodniku omówiono, jak działają niestandardowe widżety, gdzie można znaleźć pełną dokumentację techniczną oraz w jaki sposób narzędzia oparte na sztucznej inteligencji mogą znacznie przyspieszyć ten proces.

Niestandardowe widżety są tworzone przy użyciu HTML, CSS i JavaScript oraz działają w oparciu o silnik renderujący oparty na Chromium (QtWebEngine).

Z punktu widzenia struktury każdy widget to folder zawierający dwa obowiązkowe pliki:

• index.html: punkt wejścia widżetu (kod HTML, arkusze stylów i skrypty).
• manifest.json: metadane opisujące widżet, w tym nazwę, wersję, obsługiwane urządzenia oraz wymagane wtyczki.

Pliki opcjonalne obejmują dodatkowe pliki CSS i JavaScript, zasoby graficzne oraz plik translation.json służący do lokalizacji.

Zamiast przytaczać tutaj pełną specyfikację, kompletne informacje na temat formatu manifestu, dostępnych typów elementów sterujących konfigurowalnych przez użytkownika (suwaki, próbki kolorów, selektory czujników itp.), interfejsów API wtyczek dla czujników i multimediów oraz punktów zaczepienia środowiska uruchomieniowego służących do łączenia się z iCUE można znaleźć w oficjalnej dokumentacji Elgato. Jest to autorytatywne źródło informacji, które jest na bieżąco aktualizowane wraz z rozwojem frameworka.

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

Firma CORSAIR udostępnia zestaw WidgetBuilder Kit, który ułatwia ten proces. Składa się on z dwóch elementów:

• WidgetBuilder CLI (icuewidget): narzędzie wiersza poleceń, które tworzy szkielet nowego folderu widgetu, sprawdza poprawność pliku manifestu i kodu HTML, a następnie pakuje wynik do pliku .icuewidget gotowego do zaimportowania do iCUE.
• Umiejętność dla asystentów AI: ustrukturyzowana instrukcja, która uczy model AI generowania poprawnych widżetów iCUE.

Razem obejmują one cały cykl: tworzenie szkieletu, generowanie, walidację i pakowanie. Poniżej znajdziesz link do pobrania zestawu WidgetBuilder Kit.

Nie musisz być programistą stron internetowych, aby stworzyć własny widget HTML. Narzędzia AI, takie jak Claude, ChatGPT czy inne duże modele językowe, potrafią wygenerować działający kod widgetu na podstawie opisu napisanym prostym językiem.

Prześlij funkcję ze zestawu WidgetBuilder Kit do wybranego asystenta AI. Claude, ChatGPT, Gemini – sprawdzi się każda platforma obsługująca przesyłanie plików. Funkcja ta przygotowuje model pod kątem specyfikacji widżetów, rozmiarów i rozdzielczości ekranów urządzeń XENEON EDGE, wyświetlacza LCD pompy oraz wyświetlacza LCD klawiatury, a także zasad dotyczących układu, pliku manifestu i korzystania z wtyczek.

Po załadowaniu umiejętności opisz, czego oczekujesz. Na przykład:

„Stwórz widżet dla XENEON EDGE, który wyświetla temperatury procesora i karty graficznej na ciemnym tle, z kolorowymi wskaźnikami zmieniającymi barwę od zielonej do czerwonej w zależności od temperatury, oraz umożliwia mi dostosowanie progów ostrzegawczych w panelu ustawień”.

Sztuczna inteligencja wygeneruje pliki index.html, manifest.json oraz wszelkie pliki pomocnicze. Funkcja Skill prowadzi użytkownika przez ustrukturyzowany proces: zadaje pytania wyjaśniające, projektuje układ, generuje kod oraz pomaga przetestować i spakować wynik.

Proszę dokładnie określić, jakie dane mają być wyświetlane i jak powinny wyglądać. Proszę wskazać, na jakie urządzenia ma być skierowany widget (XENEON EDGE, wyświetlacz klawiatury, wyświetlacz pompy czy wszystkie trzy). Jeśli chcesz, aby użytkownik mógł dostosowywać ustawienia, opisz, jakie parametry powinny być regulowane. A jeśli widget wymaga danych zewnętrznych (prognoza pogody, notowania giełdowe, dane pobierane z API), poinformuj o tym z góry, aby sztuczna inteligencja mogła pomóc Ci w wyborze źródła.

Gdy sztuczna inteligencja wygeneruje pliki, przetwórz je za pomocą interfejsu CLI WidgetBuilder, aby sprawdzić poprawność wyników i spakować je do pliku .icuewidget. Jeśli coś nie jest w porządku, po prostu powiedz sztucznej inteligencji, co należy zmienić. Jest to proces iteracyjny, dzięki któremu tworzenie widżetów jest dostępne nawet dla osób bez doświadczenia w programowaniu.

Po skompilowaniu widżetu zaimportuj go do programu iCUE, klikając przycisk „+” w panelu Widżety i wybierając odpowiedni plik. Możesz też po prostu dwukrotnie kliknąć plik .icuewidget w systemie. Program iCUE zweryfikuje plik, a jeśli wszystko będzie w porządku, widżet pojawi się na liście widżetów dla wszystkich obsługiwanych urządzeń.

Oto kilka kwestii, o których warto pamiętać, niezależnie od tego, czy piszesz kod ręcznie, czy generujesz widżety za pomocą sztucznej inteligencji:

Zadbaj o przejrzystość. Najlepsze widżety przekazują najważniejsze informacje w ciągu kilku sekund. Jeśli ktoś musi się w nie wpatrywać, żeby zrozumieć, co pokazują, to znaczy, że są zbyt skomplikowane. Najważniejsze dane umieść w centralnym miejscu.

Zaprojektuj interfejs z uwzględnieniem różnych scenariuszy. Jeśli Twój widget opiera się na danych sieciowych lub odczytach czujników, zastanów się, co się stanie, gdy dane te będą niedostępne. Podczas inicjalizacji wyświetlaj komunikat o ładowaniu, a w razie błędu – jasny komunikat o błędzie. Najlepiej byłoby wyświetlać ostatnie znane poprawne dane wraz ze wskaźnikiem trybu offline, zamiast pozostawiać ekran pusty.

Należy uwzględnić rozmiar ekranu. Rozmiary miejsc na widżety w XENEON EDGE wahają się od małego (840x344 w poziomie) do bardzo dużego (2536x696 w poziomie). Jeśli dany widżet jest przeznaczony dla wielu rozmiarów, należy zapewnić responsywny układ. Nie wystarczy po prostu powiększyć wszystkich elementów. Dodatkową przestrzeń w większych rozmiarach należy wykorzystać do wyświetlenia większej ilości informacji lub poprawy czytelności.

Przetestuj na rzeczywistym urządzeniu. To, co wygląda dobrze w podglądzie przeglądarki, może wyświetlać się inaczej na samym XENEON EDGE. Zaimportuj swój widget i sprawdź go na prawdziwym sprzęcie, zanim uznasz projekt za ukończony.

Gdy już stworzysz coś, z czego jesteś dumny, masz kilka możliwości, by pokazać to innym. Najprostszym sposobem jest wyeksportowanie tego jako pliku .icuewidget i udostępnienie go bezpośrednio znajomym lub członkom społeczności.

Wkrótce zostanie uruchomiony portal dla twórców, który umożliwi autorom widżetów publikowanie ich bezpośrednio w serwisie Elgato Marketplace – zarówno tych bezpłatnych, jak i płatnych. Dzięki temu projektanci i programiści zyskają prosty sposób na dotarcie do szerszej społeczności użytkowników XENEON EDGE.