Exemplos
Widgets de exemplo no monorepo para clonar, rodar localmente e empacotar como .tgz na Galeria. O código-fonte está em docs/widgets/examples/ no branch develop.
| Exemplo | O que demonstra | Fonte |
|---|---|---|
| dx-walkthrough-vue | Widget mínimo Vue 3 + TypeScript + Tailwind 960×540 para tutorial: handshake do SDK, CONFIG_UPDATE, relógio/contador com timeTick, frameEnter / frameExit. Bom ponto de partida antes do exemplo do footer. Veja o tutorial DX. | Pasta no GitHub |
| footer-clock-weather-vue | SPA Vue 3 + TypeScript para faixa 1920×200: relógio + clima ao vivo (Open-Meteo), vite-plugin-doohnut-widget, ScaleToFitView, frameDimensions.json. Empacotar com pnpm run pack. | Pasta no GitHub |
| adsb-exchange-vue | Widget Vue 1920×1080: iframe do ADS-B Exchange (tar1090) com centro, zoom, aeroporto / ICAO e flags de URL estilo kiosk; vite-plugin-doohnut-widget, Tailwind, SDK, ScaleToFitView. | Pasta no GitHub |
| sdk-debugger | Registra tráfego postMessage e campos de config em escopos de campanha / playlist / frame; Vite + vite-plugin-doohnut-widget (pnpm dev para overlay com host simulado, pnpm run pack para .tgz). | Pasta no GitHub |
Mais referências
- widgets.md (inglês) — visão geral longa que pode citar outros exemplos. Se algum caminho não existir no seu clone, use a árvore
examplesno GitHub. - Tutorial DX — fluxo guiado com dx-walkthrough-vue.
- Desenvolvimento local — plugin Vite, host simulado e empacotamento.
- SDK do widget — pacote npm e API no navegador.