Configuração Visual

A Configuração Visual é a ferramenta no painel que permite customizar a aparência da marca d’água. Este guia mostra como usar cada controle para criar marcas d’água que se encaixem na sua identidade visual corporativa.

Acessando a Configuração Visual

Ao criar ou editar uma política, você encontra a seção “Configuração Visual” com:

• ✅ Controles para cada propriedade (cor, opacidade, tamanho)
• ✅ Preview ao vivo que atualiza em tempo real
• ✅ Exemplos de como fica na tela
• ✅ Valores padrão recomendados

Painel de Controles

Layout Geral

┌─────────────────────────────────┬──────────────────────┐
│ CONTROLES (Esquerda)            │ PREVIEW (Direita)    │
│                                 │                      │
│ 🎨 Cor: [_____] #FFFF00         │ ┌────────────────┐  │
│ 📊 Opacidade: [━━━■━━] 0.15     │ │                │  │
│ 📝 Tamanho: [______] 20         │ │  usuario | data│  │
│ 🔤 Tamanho Sec: [___] 15        │ │  CONFIDENCIAL  │  │
│ 🔠 Fonte: [Segoe UI ▼]          │ │                │  │
│ ⬌ Ângulo: [━━━■━] 15°           │ │ (preview live) │  │
│ ⭐ Negrito: [✓]                 │ │                │  │
│ 🔘 Habilitado: [✓]              │ └────────────────┘  │
│                                 │                      │
└─────────────────────────────────┴──────────────────────┘

Controle 1: Cor (Color Picker)

Como Usar

1. Clique no campo de cor (quadrado colorido)
2. Abre um seletor visual
3. Escolha a cor desejada
4. Ou cole um código hex direto

Formatos Aceitos

Seletor Visual (clique na cor)

┌─────────────────────┐
│ Gradiente de cores  │
│ (escolha com mouse) │
└─────────────────────┘

Código Hex (cole direto)

#FFFF00  (amarelo)
#FF0000  (vermelho)
#0000FF  (azul)

Cores Recomendadas

Dicas de Cor

✅ Cores Vibrantes (amarelo, vermelho, verde)

• Mais visíveis
• Fácil de ver em fundos claros E escuros
• Recomendado para marcas de segurança

✅ Cores Pastel (azul claro, verde claro)

• Menos invasivas
• Bom para ambientes de trabalho
• Ainda visíveis com opacidade moderada

❌ Cores Similares ao Fundo (branco em fundo branco)

• Invisível
• Use apenas em cenários especiais

Controle 2: Opacidade (Transparency)

Como Usar

Slider: [━━━●━━━━] 
         0.05 ↔ 1.00

Mova o controle ou clique no número para digitar.

O Que Significa

Recomendação

0.15 a 0.25 é o melhor range:

• Visível o suficiente para proteger
• Não atrapalha o trabalho
• Equilibra segurança e usabilidade

Controle 3: Tamanho da Fonte (Font Size)

Como Usar

Entrada: [20] pixels

Digite um número ou use + / - para aumentar/diminuir.

Tamanhos Comuns

Dica: Dois Tamanhos

Existem dois campos de tamanho:

• Tamanho: Primeira linha (ex: usuário + data) → 20px
• Tamanho Secundário: Linhas adicionais (ex: “CONFIDENCIAL”) → 15px

Isso permite hierarquia visual:

usuario | data     ← Maior (20px)
CONFIDENCIAL       ← Menor (15px)

Controle 4: Fonte (Font Family)

Como Usar

Dropdown: [Segoe UI ▼]
         ├─ Segoe UI (padrão)
         ├─ Arial
         ├─ Times New Roman
         ├─ Courier New
         └─ Verdana

Características de Cada Fonte

Dica

Segoe UI é a fonte padrão do Windows — funciona perfeitamente em qualquer máquina sem fallbacks.

Controle 5: Ângulo de Rotação (Angle)

Como Usar

Slider: [━━━●━━━━]
        -180° ↔ 180°

Ou clique no número para digitar.

Ângulos Comuns

Recomendação

15° é o padrão:

• Visível sem ser óbvio demais
• Não bloqueia leitura do conteúdo
• Profissional

Controle 6: Negrito (Bold)

Como Usar

Toggle: [✓] Ativado
        ou
        [ ] Desativado

Clique para ativar/desativar.

Efeito

Quando Desativar

❌ Raramente — negrito melhora visibilidade em qualquer situação.

Controle 7: Habilitado (Enabled)

Como Usar

Toggle: [✓] Ativado
        ou
        [ ] Desativado

Efeito

Quando Desabilitar

• ✅ Teste de configuração (design sem afetar usuários)
• ✅ Manutenção (máquinas continuam registradas, sem marca)
• ✅ Política obsoleta que não quer deletar (preserva histórico)

Preview em Tempo Real

Como Funciona

Enquanto você muda qualquer controle, a marca aparece no preview à direita instantaneamente.

Você muda cor de amarelo para vermelho
    ↓ (sem delay)
Preview muda para vermelho
    ↓
Você vê o efeito final antes de salvar

O Que o Preview Mostra

┌──────────────────────────────┐
│                              │
│  usuario | data              │ ← Seu texto, com suas variáveis
│  CONFIDENCIAL                │ ← Renderizado com estilos atuais
│                              │
│  [Fundo branco simula tela]  │
│                              │
└──────────────────────────────┘

Observações do Preview

• ✅ Mostra cor, opacidade, tamanho, ângulo, fonte
• ✅ Atualiza em tempo real
• ❌ Não mostra todos os monitores (simula um monitor)
• ❌ Não mostra click-through (só na máquina real)

Workflow Prático: Criar Marca Visual

Passo 1: Comece com Padrão

Cor: #FFFF00 (amarelo)
Opacidade: 0.15
Tamanho: 20 / 15
Fonte: Segoe UI
Ângulo: 15°
Negrito: ✓
Habilitado: ✓

Passo 2: Customize Conforme Necessário

Precisa ser mais visível?
  → Aumente opacidade (0.20 ou 0.25)

Precisa menos invasiva?
  → Diminua opacidade ou ângulo

Quer destaque visual?
  → Use cor vibrante (vermelho, verde)

Quer formal/corporativo?
  → Use azul ou verde escuro, menos opacidade

Passo 3: Valide no Preview

Observe a marca no preview até gostar.

Passo 4: Escreva o Texto

Na seção de texto, defina variáveis e conteúdo.

Passo 5: Salve

Clique “Salvar Política”.

Exemplos de Configurações Prontas

Exemplo 1: Confidencial Padrão

Cor: #FFFF00
Opacidade: 0.15
Tamanho: 20 / 15
Fonte: Segoe UI
Ângulo: 15°
Negrito: ✓
Texto: {domain}\{user} | {date} / CONFIDENCIAL

Resultado: Marca amarela, leve, diagonal, bem equilibrada.

Exemplo 2: Restrito Urgente

Cor: #FF0000
Opacidade: 0.25
Tamanho: 24 / 18
Fonte: Arial
Ângulo: 30°
Negrito: ✓
Texto: RESTRITO / {user} @ {date}

Resultado: Marca vermelha, visível, acentuada, com urgência.

Exemplo 3: Auditoria Formal

Cor: #0000FF
Opacidade: 0.20
Tamanho: 18 / 14
Fonte: Courier New
Ângulo: 0°
Negrito: ✓
Texto: AUDITADO {domain}\{user} {date}

Resultado: Marca azul, horizontal, formal, técnica.

Exemplo 4: Discreto Teste

Cor: #FFFFFF
Opacidade: 0.05
Tamanho: 14 / 12
Fonte: Arial
Ângulo: 45°
Negrito: ✗
Habilitado: ✓
Texto: teste

Resultado: Quase invisível, apenas para logging/teste.

Troubleshooting Visual

Dicas de Design

✅ Boas Práticas

• ✅ Use cores vibrantes para segurança (amarelo, vermelho)
• ✅ Use opacidade 0.15-0.25 para não atrapalhar
• ✅ Use tamanho 20px para ser visível de longe
• ✅ Use ângulo 15° para ser sutil
• ✅ Use Segoe UI para compatibilidade

❌ Evite

• ❌ Cores muito próximas ao branco (invisível)
• ❌ Opacidade > 0.5 (bloqueia trabalho)
• ❌ Tamanho < 14px (ilegível de longe)
• ❌ Múltiplas cores na mesma marca (confuso)

Como o Visual Se Aplica

Após salvar a política e associar a máquinas:

1. Você configura visual (cor, tamanho, etc)
2. Clica "Salvar"
3. Máquinas fazem polling (~30s)
4. Recebem a configuração
5. Renderizam conforme especificado
6. Marca aparece na tela (~5s depois)

A configuração visual é imutável uma vez associada — mudanças requerem nova versão da política.

Resumo Rápido

COR: Escolha vibrante (amarelo, vermelho)
OPACIDADE: 0.15-0.25 (equilibrado)
TAMANHO: 20px principal, 15px secundário
FONTE: Segoe UI (padrão)
ÂNGULO: 15° (diagonal leve)
NEGRITO: ✓ (mais visível)
HABILITADO: ✓ (ativo por padrão)

Preview atualiza em tempo real.
Teste tudo antes de salvar.
Qualquer mudança = nova versão.