Galeria de exemplos¶
Um conjunto de apps de exemplo executáveis vive em
examples/.
Cada um expõe o mesmo contrato make_state() + view(app), então roda no
simulador Qt e no dispositivo via code-push, sem mudanças. Clique no nome
de qualquer app abaixo para ver o código-fonte — todo app.py abre com um
docstring explicando o que demonstra.
# Simulador Qt no desktop (precisa do extra `qt`; instalado por `uv sync`)
uv run python examples/<nome>/app.py
uv run tempest dev examples/<nome>/app.py # + hot reload ao salvar
# Em um dispositivo Android, via code-push por LAN (fase B5)
adb reverse tcp:8765 tcp:8765 # via USB; pule se na mesma Wi-Fi
uv run tempest serve examples/<nome>/app.py
Fundamentos¶
| App | O que mostra | Exercita |
|---|---|---|
counter |
O básico: handlers síncronos e async mutam estado e disparam um rebuild coalescido. |
Text, Button, Row/Column; update. |
stopwatch |
Loop async-first: um handler corrotina conta via asyncio.sleep sem travar a UI (stop/reset seguem tocáveis). |
Rebuilds coalescidos a partir do loop; update. |
todo |
Digite uma tarefa no Input e toque "add"; tocar alterna concluída; "clear done" remove as feitas. |
Input + chave estável; todos os child patches: insert / remove / update. |
calculator |
A grade de botões é a entrada (sem widget de texto) — vitrine de layout denso. | Row/Column aninhados, botões com chave; update no display. |
colorpicker |
Style dinâmico: swatches recolorem um preview vivo; toggles re-estilizam o texto. |
background / font_size / font_weight pelo diff. |
Componentes e shell¶
| App | O que mostra | Exercita |
|---|---|---|
shell |
Tela inteira montada dos componentes compostos: Scaffold + AppBar (com Burger/Drawer) no topo, NavBar embaixo. |
tempestroid.components reduzidos a primitivos via Component.render. |
gallery |
Widgets utilitários + estilização de input + transição implícita de Style. |
Slider/Switch/ProgressBar/Spinner/Image/Icon/ScrollView/TextArea; Input seguro + regex; Style.transition. |
Trilho E — paridade Flutter/RN¶
| App | O que mostra | Exercita |
|---|---|---|
navigation |
Os três hosts de navegação: pilha push/pop animada, abas e gaveta. | Navigator / TabView / RouteDrawer (E0). |
tabs |
Tab bar persistente troca o corpo entre 3 painéis; o estado compartilhado sobrevive à troca. | Padrão canônico de navegação por abas. |
lists |
LazyColumn de 10k itens + paginação + pull-to-refresh, e SectionList com cabeçalho fixo. |
Virtualização por janela (E1). |
overlays |
Dialog, bottom sheet, menu e toast pela API imperativa de overlay do App. |
Camada de overlay z-ordenada (E2). |
animation |
Caixa que faz ease de cor/opacidade, lista animada, Hero e Shimmer. |
AnimationController + Tween no clock de frames (E3). |
gestures |
Swipe-to-delete (Dismissible), arrastar p/ reordenar e pinça-zoom. |
Gestos avançados (E4). |
forms |
Form de FormFields com validators tipados (bloqueia submit inválido) + inputs de seleção/segmento. |
Validação em Python antes dos patches (E5). |
form |
Os inputs com valor básicos, cada um dobrando seu evento tipado de volta no estado. | Input / Checkbox / DatePicker / FilePicker + eventos tipados. |
layout |
Chips com Wrap, PageView paginado e CollapsingAppBar que encolhe ao rolar. |
Layout refinado (E6). |
media |
Desenho com Canvas, Svg, blur e clip. |
Mídia e gráficos (E7). |
platform |
Haptics, preferências reais, stream de lifecycle e KeyboardAvoidingView. |
Plataforma/sistema (E8) — roda no Qt e no device. |
theming |
Toggle dark/light (App.set_theme), locale PT↔árabe/RTL (App.set_locale) e Semantics. |
Transversais: tema/i18n/acessibilidade (E9). |
Dispositivo e multi-arquivo¶
| App | O que mostra | Exercita |
|---|---|---|
device_counter |
Contador mínimo sem import de Qt — o alvo do code-push no aparelho. | Mesmo contrato, livre de Qt (B5). |
native_caps |
Capacidades nativas sem config extra, cada uma um round-trip request/response tipado. | clipboard / storage / database (SQLite) / secure_storage / system (device-verificado). |
sysverify |
Harness de verificação on-device das capacidades que exigem hardware real. | Sensores / biometria / push (device-only). |
multifile |
Projeto multi-arquivo (main.py + pacote widgets/) — o que tempest new --template multi gera. |
Bundle do projeto inteiro no sys.path (Trilho C). |
Trilho G — dados e ML no device¶
O tempestroid roda CPython de verdade no aparelho, então a stack científica de
Python roda dentro do app (veja Dados e ML no dispositivo).
Todos são device-verificados no emulador x86_64. Os de visão
(visionspike/visionsmoke) exigem o extra [vision] + o build com
--feature vision e usam o
ort-vision-sdk pela AAR nativa
onnxruntime-android — sem OpenCV, sem wheel onnxruntime/Pillow.
| App | O que mostra | Exercita |
|---|---|---|
onnxspike |
Prova mínima: import numpy + um cálculo rodam no interpretador embarcado (tela verde "numpy OK"). |
numpy android no device (G0/G1). |
polarsspike |
import polars + group_by/agregação + round-trip por CSV (write_csv→read_csv) rodam no interpretador embarcado (tela verde "polars OK"). |
Polars (core Rust abi3) no device (G). |
sklearnspike |
import scipy + import sklearn: um LogisticRegression().fit(...).predict(...) roda no device (tela verde "sklearn OK"). |
Stack científica (scipy + scikit-learn) no device (G6). |
visionspike |
Pipeline completo: imagem real (banana.jpg) → decode nativo (BitmapFactory) → Classifier do SDK via AarBackend → top-1 + latência. Modelo embutido ou baixado (VISIONSPIKE_MODEL_URL), .onnx fp32 ou .int8.ort quantizado (VISIONSPIKE_MODEL). |
G1 (AAR) + G2 (imagem) + G3 (tempest optimize) + G4 (entrega). |
visionsmoke |
Smoke da stack de visão: import numpy + import ort_vision_sdk + um cálculo curto — a tela verde prova que a feature vision os embarcou. |
Imports que a feature vision estagia (G1). |
Trilho H — design system (M3 + API Chakra)¶
As galerias do design system mostram os componentes estilizados fase-a-fase — cada
um resolve o visual do Theme (superfícies M3 + accent do color_scheme), sem
cor escrita à mão. Rodam no simulador Qt; o storybook amarra tudo num app
navegável com toggles light/dark + LTR/RTL ao vivo.
| App | O que mostra | Fase |
|---|---|---|
h1buttons |
Variantes de Button (solid/outline/ghost/link) × tamanho × color_scheme + estados (hover/press/disabled/focus). |
H1 |
h2gallery |
Kit de ação e entrada: Button/IconButton/Input/Checkbox/Switch/Slider/Select + inputs BR. |
H2 |
h3gallery |
Superfície e layout: Card (elevated/filled/outlined)/Surface/Divider/ListTile + helpers de stack. |
H3 |
h4gallery |
Data display e feedback: Badge/Alert/Stat/ProgressStepper/ProgressBar com famílias de status (success/warning/info). |
H4 |
h5gallery |
Navegação estilizada: AppBar/Header/Tabs/NavBar/SearchBar/Breadcrumb — surfaces M3 + accent do item ativo. |
H5 |
h6gallery |
Dashboard de visão faux: DetectionOverlay + MetricCard/ConfidenceBadge + BarChart/LineChart + DataTable. |
H6 |
storybook |
O design system inteiro num app navegável: Tabs por categoria + specimen de cada H1–H6, toggles light/dark + LTR/RTL re-skinnando tudo ao vivo. |
H7 |
Conjunto de widgets atual¶
Os dois renderizadores — simulador Qt (desktop) e Compose (dispositivo) —
suportam o conjunto completo do Trilho E. Não há mais o gap antigo de "o Compose
só renderiza cinco widgets": os inputs com valor (Input / TextArea /
Checkbox / Switch / Slider / Dropdown / DatePicker / FilePicker / …)
renderizam nativamente no aparelho via Jetpack Compose e dobram seus eventos
tipados de volta no estado. A paridade é fixada pela suíte de conformância
(golden snapshots dos dois tradutores Style → Qt e Style → Compose) e foi
verificada em device ao longo de E0–E9.
Cobertura (ambos os renderizadores, salvo nota):
| Categoria | Widgets |
|---|---|
| Layout | Column / Row / Container / Stack / Wrap / ScrollView / SafeArea / AspectRatio / PageView / KeyboardAvoidingView |
| Texto e ação | Text / Button / Icon / Image (on_click) |
| Inputs com valor | Input / TextArea / Checkbox / Switch / Slider / RangeSlider / Dropdown / DatePicker / TimePicker / FilePicker / PinInput / MaskedInput / Autocomplete / Form / FormField |
| Listas virtualizadas | LazyColumn / LazyRow / LazyGrid / SectionList (+ pull-to-refresh, scroll infinito) |
| Navegação | Navigator / TabView / TabBar / RouteDrawer |
| Overlays | Dialog / BottomSheet / Menu / Popover / Toast / Tooltip / ActionSheet |
| Animação | Animated / AnimatedList / Hero / Shimmer / Skeleton |
| Gestos | GestureDetector / PanHandler / ScaleHandler / DoubleTapHandler / Draggable / DragTarget / Dismissible / ReorderableList / InteractiveViewer |
| Mídia e gráficos | Canvas / Svg / VideoPlayer / WebView / Blur / BackdropFilter / ClipPath |
| Indicadores | ProgressBar / Spinner |
Divergência de mídia/câmera (device-only)
Alguns widgets de hardware — CameraPreview / QrScanner / MapView —
renderizam só no aparelho (Compose) e aparecem como placeholder sinalizado
no Qt, não o contrário. As divergências por campo entre os dois tradutores
estão documentadas na suíte de conformância (tests/conformance/).
Os exemplos form e gallery exercitam os inputs com valor de verdade — no
simulador e no aparelho. Exemplos como calculator continuam dirigidos por
teclado numérico por design do app, não por limite do renderizador.
Handlers estáveis
Rebuilds comparam props de handler por identidade, então um lambda novo a
cada build lê como mudança de prop (limitação conhecida). Os exemplos ainda
emitem patches corretos — apenas mais que o mínimo estrito. Prefira
referências de handler estáveis em apps de produção.
Capturas no dispositivo (emulador x86_64, sem hardware físico)¶
Geradas sem aparelho físico
A maioria foi renderizada pelo renderizador Compose num emulador x86_64
headless (make emulator-verify / toolchain/validate_gallery.sh) — zero
hardware; as galerias do design system (h1buttons–h6gallery + storybook)
são capturas do simulador Qt. stopwatch (animado) fica para uma recaptura como GIF (ver
Animados).
 animation |
 brforms |
 calculator |
 colorpicker |
 counter |
 device_counter |
 form |
 forms |
 gallery |
 gestures |
 icons |
 layout |
 lists |
 media |
 multifile |
 native_caps |
 navigation |
 overlays |
 platform |
 shell |
 sysverify |
 tabs |
 theming |
 todo |
 h1buttons |
 h2gallery |
 h3gallery |
 h4gallery |
 h5gallery |
 h6gallery |
 storybook |
As galerias do design system (h1buttons–h6gallery + storybook) acompanham o
design system — veja a tabela do
Trilho H acima. O storybook também tem
capturas dark (storybook-dark.png) e RTL (storybook-rtl.png), provando que os
toggles re-skinnam o sistema inteiro.
Animados¶
Exemplos com movimento (animation, gestures, stopwatch) precisam de um
GIF — um PNG estático não mostra a animação. O harness
toolchain/capture_gif.sh captura uma rajada de frames no dispositivo e monta o
GIF (via toolchain/frames_to_gif.py). Como esses exemplos são estáticos em
repouso, dispare a animação com TAP_X/TAP_Y antes da rajada: