Changes
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
+100
-78
@@ -1,96 +1,118 @@
|
||||
## Objetivo
|
||||
# Plano — Compartilhar tela do Quest 3 via link público
|
||||
|
||||
Adicionar um botão **"Escala"** com presets de redução (1:2, 1:4, 1:8, 1:10, 1:20, 1:33, 1:50, 1:100, 1:200) e ampliação (2:1, 4:1, 10:1), disponível tanto no Viewer 2D quanto no XR. Ao mudar a escala, o app ajusta automaticamente as ferramentas que dependem de tamanho real (medições, sensibilidade do ajuste fino, snap, hover auto-detect), mantendo todos os números exibidos em **mm reais da peça**.
|
||||
Permitir que o inspetor no Quest gere um link tipo `tracksteelxr.lovable.app/watch/AB12CD`, mande no WhatsApp/email, e até 3 espectadores assistam ao vivo (vídeo + áudio do Quest) em qualquer celular ou PC.
|
||||
|
||||
## Conceito chave
|
||||
## Como vai funcionar para o usuário
|
||||
|
||||
- "1:N" significa: o modelo é renderizado **N vezes menor** que o real (renderScale = 1/N).
|
||||
- "N:1" significa: renderizado N vezes maior (renderScale = N).
|
||||
- Os dados do modelo continuam em mm reais. Só o `scale` aplicado ao `<group>` muda.
|
||||
- **Medições, sensibilidades, indicadores e relatório PDF continuam exibindo mm REAIS** — o app multiplica/divide pelo fator quando necessário.
|
||||
**No Quest (broadcaster):**
|
||||
1. No HUD do `/xr` aparece novo botão **"Compartilhar"** (ícone Share/Cast)
|
||||
2. Ao clicar: app gera código de 6 caracteres, mostra QR + link encurtado
|
||||
3. Botões "Copiar link" e "Compartilhar" (Web Share API → abre WhatsApp/email do sistema)
|
||||
4. Indicador vermelho 🔴 LIVE fica visível enquanto transmite, com contador de viewers
|
||||
5. Botão "Encerrar" para parar
|
||||
|
||||
## Mudanças
|
||||
**No celular/PC (viewer):**
|
||||
1. Abre o link → tela cheia com vídeo da sessão XR
|
||||
2. Sem login, sem instalar nada
|
||||
3. Mostra "Aguardando inspetor…" se a sala não estiver ativa
|
||||
4. Read-only: só assiste
|
||||
|
||||
### 1. Store (`useModelStore.ts`)
|
||||
|
||||
Adicionar:
|
||||
```ts
|
||||
scaleRatio: { label: '1:1', factor: 1 } // factor = renderScale
|
||||
setScaleRatio: (r) => void
|
||||
```
|
||||
Lista de presets exportada (label + factor).
|
||||
|
||||
`fineTuning.scale` continua existindo para o gesto two-hand do XR; o novo `scaleRatio` é aplicado **por cima** (multiplicado) no grupo do modelo.
|
||||
|
||||
### 2. Cálculo de medições (`addMeasurePoint`)
|
||||
|
||||
Pontos A/B vêm em coordenadas world já escaladas. Para reportar mm reais:
|
||||
```
|
||||
distanceMM_real = distanciaWorld_mm / scaleRatio.factor
|
||||
```
|
||||
Atualizar a função `addMeasurePoint` para dividir pela escala atual antes de salvar `distanceMM`. Tooltips e PDF continuam usando o valor salvo (sem mudança).
|
||||
|
||||
### 3. Ajuste fino (`FineTuningControls` + XRHud joystick)
|
||||
|
||||
`POSITION_STEP` deve representar **1 mm real**. Aplicar:
|
||||
```
|
||||
worldStep = POSITION_STEP * scaleRatio.factor
|
||||
```
|
||||
Isso garante que clicar "+" desloca visualmente proporcional à escala (em escala 1:100, mexer "1 mm real" desloca 0,01 mm na cena — coerente).
|
||||
|
||||
Mesmo tratamento para o joystick no XR (incremento por frame multiplicado por `scaleRatio.factor`).
|
||||
|
||||
### 4. Auto-detect (hover hole/edge) e snap
|
||||
|
||||
Os limiares de detecção de furo/aresta e raio de snap são em metros world. Multiplicar pelo `scaleRatio.factor` para que continuem capturando os mesmos elementos físicos da peça.
|
||||
|
||||
### 5. ModelViewer
|
||||
|
||||
No `<group>` do modelo, multiplicar o scale final:
|
||||
```
|
||||
finalScale = fineTuning.scale * scaleRatio.factor
|
||||
```
|
||||
|
||||
### 6. UI — novo componente `ScaleSelector`
|
||||
|
||||
Botão com ícone de régua + label atual ("1:1", "1:50"…). Ao clicar abre um Popover/Sheet com grid:
|
||||
## Arquitetura técnica
|
||||
|
||||
```text
|
||||
Reduzir Ampliar
|
||||
[1:1*] [1:2] [1:4] [1:8] [2:1]
|
||||
[1:10] [1:20] [1:33] [1:50] [4:1]
|
||||
[1:100] [1:200] [10:1]
|
||||
Quest 3 (broadcaster) Lovable Cloud Viewers (celular/PC)
|
||||
┌──────────────────┐ ┌─────────────────────┐ ┌──────────────────┐
|
||||
│ /xr │ │ Supabase Realtime │ │ /watch/AB12CD │
|
||||
│ - canvas WebXR │ ──SDP──▶│ (signaling channel) │◀──SDP── │ - <video> tag │
|
||||
│ - getDisplayMedia│ │ rooms table │ │ - peer connection│
|
||||
│ - RTCPeerConn x3 │◀════════ ICE candidates ═════════════▶ │ │
|
||||
└──────────────────┘ │ viewers count │ └──────────────────┘
|
||||
║ └─────────────────────┘ ▲
|
||||
╚════════ WebRTC P2P media stream (vídeo H264) ════════════════╝
|
||||
```
|
||||
|
||||
Toast ao trocar: *"Escala 1:50 — medições e controles ajustados para mm reais"*.
|
||||
**Stack:**
|
||||
- **Lovable Cloud** (precisa habilitar): tabela `share_rooms` + canal Realtime para signaling
|
||||
- **WebRTC nativo do browser** (`RTCPeerConnection`) — sem libs pesadas
|
||||
- **Captura no Quest:** `navigator.mediaDevices.getDisplayMedia()` no browser do Quest captura a janela atual (inclui o canvas 3D). Em sessão XR imersiva, alternativa é usar `canvas.captureStream(30)` direto do canvas WebGL — funciona melhor e não precisa de prompt
|
||||
- **Sem servidor de mídia (SFU):** P2P 1→3 viewers, banda do Quest aguenta tranquilo (~2 Mbps por viewer)
|
||||
|
||||
Inserir o componente em:
|
||||
- **`ViewerControls`** (canto dos controles flutuantes do Viewer 2D)
|
||||
- **`XRHud`** (linha de ferramentas, próximo ao toggle "Escala ON/OFF" two-hand)
|
||||
## Estrutura de arquivos
|
||||
|
||||
### 7. MeasurementsList & FineTuningControls
|
||||
**Novos:**
|
||||
- `src/pages/Watch.tsx` — página pública do viewer (rota `/watch/:code`)
|
||||
- `src/components/ShareButton.tsx` — botão + dialog com QR/link no HUD
|
||||
- `src/lib/webrtc/broadcaster.ts` — lógica do lado Quest (cria offer, gerencia múltiplos peers)
|
||||
- `src/lib/webrtc/viewer.ts` — lógica do lado viewer (recebe offer, monta `<video>`)
|
||||
- `src/lib/webrtc/signaling.ts` — wrapper sobre Supabase Realtime para troca SDP/ICE
|
||||
|
||||
Adicionar pequeno badge "Escala atual: 1:50" no topo dos painéis de Medições e Ajuste Fino para o usuário lembrar que os valores exibidos são mm reais.
|
||||
**Editados:**
|
||||
- `src/App.tsx` — adicionar rota `/watch/:code` (pública, fora do layout XR)
|
||||
- `src/components/XRHud.tsx` — adicionar `<ShareButton />` na toolbar
|
||||
- `src/pages/XRSession.tsx` — botão também visível fora do HUD
|
||||
- `src/stores/useModelStore.ts` — estado `shareRoom: { code, viewerCount, isLive }`
|
||||
|
||||
## O que NÃO muda
|
||||
## Schema do banco (Lovable Cloud)
|
||||
|
||||
- Gesto two-hand de escala (`allowScale`) continua funcionando para ajuste livre — mas se o usuário usar o preset, o gesto reseta para 1.0 e o preset assume.
|
||||
- Relatório PDF: registra a escala atual no cabeçalho.
|
||||
- Grid e checklist: sem alteração.
|
||||
```sql
|
||||
create table public.share_rooms (
|
||||
code text primary key, -- 6 chars, ex: 'AB12CD'
|
||||
created_at timestamptz default now(),
|
||||
expires_at timestamptz default now() + interval '4 hours',
|
||||
is_active boolean default true,
|
||||
viewer_count int default 0
|
||||
);
|
||||
|
||||
## Arquivos tocados
|
||||
-- RLS: leitura pública (viewers precisam saber se sala existe), escrita só anon controlada
|
||||
alter table public.share_rooms enable row level security;
|
||||
create policy "anyone reads active rooms" on public.share_rooms
|
||||
for select using (is_active and expires_at > now());
|
||||
create policy "anyone creates room" on public.share_rooms
|
||||
for insert with check (true);
|
||||
create policy "anyone updates count" on public.share_rooms
|
||||
for update using (true);
|
||||
```
|
||||
|
||||
- `src/stores/useModelStore.ts` — novo estado + ajuste em `addMeasurePoint`
|
||||
- `src/components/ScaleSelector.tsx` — novo (popover com presets)
|
||||
- `src/components/ViewerControls.tsx` — incluir `<ScaleSelector />`
|
||||
- `src/components/XRHud.tsx` — incluir `<ScaleSelector />` + multiplicar passos do joystick
|
||||
- `src/components/FineTuningControls.tsx` — multiplicar passos pela escala + badge
|
||||
- `src/components/MeasurementsList.tsx` — badge da escala
|
||||
- `src/components/three/ModelViewer.tsx` — aplicar `scaleRatio.factor` no group + ajustar threshold de snap/hover
|
||||
- `src/lib/generateReport.ts` — incluir escala no cabeçalho do PDF
|
||||
Signaling propriamente dito (SDP offers/answers, ICE candidates) acontece via **Supabase Realtime broadcast channel** `room:${code}` — não persiste em tabela, é efêmero.
|
||||
|
||||
## Validação
|
||||
## STUN/TURN
|
||||
|
||||
- Carregar viga demo, medir uma aresta conhecida em 1:1 → trocar para 1:10 → remedir mesma aresta → valor em mm deve permanecer igual.
|
||||
- Em 1:50, clicar "+" no ajuste fino X uma vez → modelo desloca visualmente pouquíssimo (esperado), mas valor exibido sobe 1 mm.
|
||||
- No XR, joystick em 1:100 não "voa" o modelo a metros de distância.
|
||||
- **STUN público do Google** (`stun:stun.l.google.com:19302`) — grátis, resolve ~80% dos casos (NAT comum)
|
||||
- **TURN:** se inspetor estiver atrás de NAT simétrico (raro em fábrica), conexão falha. Para v1 deixamos só STUN. Se precisar TURN depois, integramos Twilio TURN (~$0,40/GB) ou Metered.ca (free tier 50GB/mês)
|
||||
|
||||
## Captura no Quest — detalhes importantes
|
||||
|
||||
Tem dois cenários:
|
||||
1. **Fora da sessão XR** (modo viewer 2D): `canvas.captureStream(30)` — fácil, funciona já
|
||||
2. **Dentro da sessão XR imersiva** (passthrough AR): aqui o canvas é renderizado para o display do headset, não para a tela visível. Solução: usar `XRWebGLLayer.framebuffer` e renderizar uma view extra "spectator" para um canvas offscreen que vira o stream. **Esta parte tem risco** — pode precisar fallback para `getDisplayMedia()` que pede permissão do usuário no Quest
|
||||
|
||||
Plano: começar com cenário 1 (já cobre uso fora do AR imersivo), e cenário 2 numa segunda iteração se necessário.
|
||||
|
||||
## Limitações honestas
|
||||
|
||||
- **Latência:** 200-500ms (não é instantâneo, mas serve para acompanhamento)
|
||||
- **Sem áudio do microfone do Quest** na v1 (adicionar depois com `getUserMedia({audio:true})`)
|
||||
- **Sala expira em 4h** — geração de novo código se sessão durar mais
|
||||
- **Link público:** qualquer um com a URL vê. Se vazar, código pode ser revogado pelo inspetor
|
||||
- **Não grava** — só transmissão ao vivo. Gravação seria feature separada
|
||||
|
||||
## Pré-requisito
|
||||
|
||||
Precisa **habilitar Lovable Cloud** (atualmente o projeto não tem). Vou pedir confirmação antes de habilitar, pois cria infraestrutura backend.
|
||||
|
||||
## Escopo desta implementação
|
||||
|
||||
✅ Botão "Compartilhar" no HUD do XR + tela inicial
|
||||
✅ Geração de código + QR + link curto + Web Share API
|
||||
✅ Página `/watch/:code` pública com vídeo
|
||||
✅ Signaling via Supabase Realtime
|
||||
✅ WebRTC P2P 1→3 viewers
|
||||
✅ Contador de viewers em tempo real para o broadcaster
|
||||
✅ Captura via `canvas.captureStream` (cenário fora do XR imersivo)
|
||||
❌ Captura dentro da sessão XR imersiva (segunda iteração)
|
||||
❌ Áudio do mic (segunda iteração)
|
||||
❌ Chat / interação (você optou por read-only)
|
||||
❌ TURN server (só se aparecer problema de NAT)
|
||||
❌ Gravação
|
||||
|
||||
Aprovando o plano, eu habilito o Lovable Cloud e implemento.
|
||||
|
||||
Reference in New Issue
Block a user