Como criar um widget personalizado para o XENEON EDGE

O XENEON EDGE é mais do que um ecrã secundário. Pode tornar-se um espaço para as informações que mais deseja ter à vista. O iCUE inclui um conjunto de widgets integrados, mas também pode criar os seus próprios. Quer pretenda um monitor de sistema personalizado, uma visualização meteorológica ou algo mais especializado, criar um widget é mais fácil do que possa parecer.

Este guia explica como funcionam os widgets personalizados, onde encontrar a referência técnica completa e como as ferramentas de IA podem acelerar significativamente o processo.

Os widgets personalizados são criados com HTML, CSS e JavaScript e funcionam num motor de renderização baseado no Chromium (QtWebEngine).

A nível estrutural, cada widget é uma pasta que contém dois ficheiros obrigatórios:

• index.html: o ponto de entrada do widget (código de marcação, estilos e scripts).
• manifest.json: metadados que descrevem o widget, incluindo nome, versão, dispositivos compatíveis e plug-ins necessários.

Os ficheiros opcionais incluem CSS e JavaScript adicionais, recursos de imagem e um ficheiro translation.json para localização.

Em vez de repetir aqui todas as especificações, a referência completa sobre o formato do manifesto, os tipos de controlos configuráveis pelo utilizador disponíveis (controlos deslizantes, seletores de cor, seletores de sensores, etc.), as APIs de plug-ins para sensores e meios de comunicação, bem como os ganchos de tempo de execução para ligação ao iCUE, encontram-se todos na documentação oficial da Elgato. Essa é a fonte canónica e mantém-se em sincronia com a evolução da estrutura.

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

A CORSAIR disponibiliza um kit WidgetBuilder para facilitar o processo. Este kit é composto por duas peças:

• A CLI do WidgetBuilder (icuewidget): uma ferramenta de linha de comandos que cria uma estrutura para uma nova pasta de widgets, valida o seu manifesto e o código HTML e empacota o resultado num ficheiro .icuewidget pronto para ser importado para o iCUE.
• Uma funcionalidade para assistentes de IA: um prompt estruturado que ensina um modelo de IA a gerar widgets iCUE válidos.

Juntos, cobrem todo o ciclo: estrutura, geração, validação e empacotamento. Encontre o link para descarregar o WidgetBuilder Kit abaixo.

Não é preciso ser um programador web para criar um widget HTML personalizado. Ferramentas de IA como o Claude, o ChatGPT ou outros modelos de linguagem de grande escala podem gerar código de widget funcional a partir de uma descrição em linguagem simples.

Carregue a Skill do WidgetBuilder Kit para o seu assistente de IA preferido. Claude, ChatGPT, Gemini — qualquer um que aceite o carregamento de ficheiros servirá. A Skill prepara o modelo com as especificações do widget, os tamanhos e resoluções dos dispositivos para o XENEON EDGE, o LCD da bomba e o LCD do teclado, bem como as convenções relativas ao layout, ao manifesto e à utilização de plugins.

Assim que a Skill estiver carregada, descreva o que pretende. Algo do tipo:

«Crie um widget para o XENEON EDGE que mostre as temperaturas da minha CPU e GPU com um fundo escuro, indicadores coloridos que variem do verde ao vermelho consoante a temperatura e que me permita personalizar os limites de aviso no painel de configurações.»

A IA irá gerar os ficheiros index.html, manifest.json e quaisquer ficheiros de apoio. A Skill orienta o modelo através de um fluxo de trabalho estruturado: faz perguntas de esclarecimento, concebe o layout, gera o código e ajuda-o a testar e a empacotar o resultado.

Seja específico quanto aos dados que pretende apresentar e ao aspeto que estes devem ter. Indique quais os dispositivos a que se destina (XENEON EDGE, ecrã LCD do teclado, ecrã LCD da bomba ou os três). Se pretender definições configuráveis pelo utilizador, descreva o que deve ser ajustável. E se o seu widget necessitar de dados externos (previsão meteorológica, cotações da bolsa, qualquer informação obtida através de uma API), mencione isso desde o início para que a IA o possa orientar na seleção da fonte.

Assim que a IA gerar os seus ficheiros, processe-os através da CLI do WidgetBuilder para validar o resultado e compilar o resultado num ficheiro .icuewidget. Se algo não estiver bem, indique à IA o que deve alterar. Trata-se de um processo iterativo que torna a criação de widgets acessível mesmo sem experiência em programação.

Depois de o seu widget estar empacotado, importe-o para o iCUE clicando no botão «+» no painel Widgets e selecionando o ficheiro. Também pode simplesmente clicar duas vezes no ficheiro .icuewidget no seu sistema. O iCUE verifica o ficheiro e, se tudo estiver em ordem, o seu widget aparecerá na lista de widgets para todos os dispositivos compatíveis.

Algumas coisas a ter em conta, quer esteja a escrever código manualmente ou a gerar widgets com IA:

Certifique-se de que seja fácil de perceber à primeira vista. Os melhores widgets transmitem as informações mais importantes em poucos segundos. Se alguém tiver de analisar o seu widget para perceber o que está a mostrar, é porque é demasiado complexo. Coloque os dados essenciais em destaque.

Conceba o design para vários estados. Se o seu widget depender de dados de rede ou de leituras de sensores, pense no que acontece quando esses dados não estão disponíveis. Mostre um estado de carregamento enquanto o sistema se inicializa, uma mensagem de erro clara se algo correr mal e, idealmente, continue a mostrar os últimos dados válidos conhecidos com um indicador de modo offline, em vez de deixar o ecrã em branco.

Respeite o tamanho do ecrã. Os espaços para widgets do XENEON EDGE variam entre Pequeno (840x344 na horizontal) e Extra Grande (2536x696 na horizontal). Se o seu widget for compatível com vários tamanhos, crie um layout adaptável. Não se limite a ampliar tudo. Aproveite o espaço extra nos tamanhos maiores para mostrar mais informações ou melhorar a legibilidade.

Teste no próprio dispositivo. O que parece estar bem na pré-visualização do navegador pode ser apresentado de forma diferente no próprio XENEON EDGE. Importe o seu widget e verifique-o em hardware real antes de considerar o trabalho concluído.

Depois de criar algo de que se orgulha, tem várias opções para o mostrar a outras pessoas. A mais simples é exportá-lo como um ficheiro .icuewidget e partilhá-lo diretamente com amigos ou membros da comunidade.

Está a caminho um portal para criadores que permitirá aos criadores de widgets publicar diretamente no Elgato Marketplace, com suporte tanto para widgets gratuitos como pagos. Isto oferece aos designers e programadores uma forma clara de chegar à comunidade mais ampla do XENEON EDGE.