Pular para o conteúdo principal
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gerenciamento de Templates de Exibição Pública

Templates de exibição pública são a base das suas visualizações personalizadas. Eles definem o layout, a estrutura e os elementos visuais que serão aplicados às suas instalações. Este guia abrangente cobre tudo, desde a criação básica de templates até técnicas de design avançadas.

📋 Visão Geral​

O que são Templates de Exibição Pública?​

Templates servem como modelos reutilizáveis que:

  • 📐 Definem layouts visuais para suas exibições públicas
  • 🧩 Organizam blocos de conteúdo e suas posições
  • 🎨 Estabelecem consistência de design em várias instalações
  • ⚙️ Habilitam implantação rápida de visualizações padronizadas
  • 🔄 Suportam atualizações fáceis em todas as configurações vinculadas

Principais Benefícios​

BenefícioDescrição
🚀 EficiênciaCrie uma vez, use em várias instalações
🎯 ConsistênciaMantenha padrões de design uniformes
🔧 FlexibilidadeModificação fácil sem recriar do zero

🚀 Começando​

Fluxo de Trabalho do Template​

  1. 📐 Projetar Layout - Planeje sua estrutura visual
  2. 🎨 Criar Template - Construa usando o editor de templates
  3. 💾 Salvar Template - Armazene para reutilização em instalações

Pré-requisitos​

Antes de criar templates, certifique-se de que você tem:

  • ✅ Conta SmartgridX com permissões apropriadas
  • ✅ Objetivos de design claros para sua visualização
  • ✅ Requisitos de conteúdo (imagens, pontos de dados, layouts)

🎛️ Interface de Gerenciamento de Templates​

Acessando o Gerenciador de Templates​

imagem do infográfico

Passos de navegação:

  1. Faça login na sua conta SmartgridX
  2. Navegue até 'Exibições públicas' na barra lateral principal
  3. Clique no botão 'Template de Exibição Pública' na página de visão geral

Isso abre a interface de gerenciamento de templates onde você pode visualizar, criar, editar e excluir templates.

Tabela de Visão Geral dos Templates​

imagem do infográfico

Ações disponíveis:

  • ➕ Adicionar - Botão verde para iniciar a criação de templates
  • ✏️ Editar - Modificar o design do template existente
  • 🗑️ Excluir - Remover template não utilizado

🎨 Processo de Criação do Template​

Iniciando um Novo Template​

Clique no botão "Criar Novo Template" para abrir a interface do editor de templates.

Configuração do Cabeçalho do Template​

imagem do infográfico

Configurações do Título​

Título do Template:

  • Propósito: Identifica o template em listas e configurações
  • Melhores práticas: Use nomes descritivos e específicos do projeto
  • Exemplos: "Painel-KPI-Fábrica", "Layout-Monitoramento-Energético", "Display-Multi-Zona"

Configuração de Margens​

Configurações de margem definem a área segura a partir das bordas da exibição:

Deslizante de Margem (0-100px):

  • 📐 Faixa: 0 a 100 pixels da borda da exibição
  • 🎯 Propósito: Cria espaçamento seguro para evitar corte de conteúdo
  • 📱 Aplicação: Garante visibilidade em vários tipos de exibições
  • ⚙️ Recomendação: Use 10-20px para exibições padrão, 30-50px para telas de borda a borda

Impacto visual:

  • 0px de margem - O conteúdo se estende até as bordas da exibição
  • 50px de margem - O conteúdo começa 50 pixels de todas as bordas
  • 100px de margem - Área segura máxima com espaçamento significativo da borda

Funcionalidade de Salvar​

O botão 💾 Salvar (no canto superior direito) permite que você salve seu template atual.

🧩 Sistema de Layout de Blocos​

Compreendendo o Sistema de Grade​

imagem do infográfico

Fundamentos da Grade​

O editor de templates usa um sistema de grade baseado em porcentagem de 100×100:

Propriedades da Grade:

  • 📐 Dimensões: 100 unidades de largura × 100 unidades de altura
  • 📊 Unidades: Valores percentuais (1 unidade = 1% da dimensão total)
  • 🎯 Precisão: Permite posicionamento e dimensionamento exatos
  • 📱 Responsivo: Adapta-se automaticamente a diferentes tamanhos de tela

Exemplos de Layout de Bloco​

Configuração: 100 de largura × 100 de altura
Resultado: Cobertura de tela cheia
Caso de uso: Visualização grande única, imagem em tela cheia

┌─────────────────────────────────┐
│                                 │
│         BLOCO CHEIO             │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulação de Blocos​

Adicionando Blocos​

Método: Clique no botão "Adicionar Bloco" (canto superior direito do editor)
Resultado: Novo bloco aparece com dimensões padrão
Próximos passos: Posicione e redimensione conforme necessário

Posicionamento de Blocos​

Arrastar e Soltar:

  • 🖱️ Clique e segure em qualquer bloco para movê-lo
  • 📍 Pré-visualização em tempo real mostra a posição enquanto arrasta
  • 🧲 Ajuste à grade ajuda com alinhamento preciso
  • 👁️ Guias visuais aparecem para ajudar com alinhamento

Redimensionando Blocos​

Manípulo de Redimensionamento:

  • 📐 Canto inferior direito mostra o manípulo de redimensionamento quando o bloco está selecionado
  • 🔧 Arraste para redimensionar largura e altura simultaneamente
  • 📊 Valores em tempo real exibem as dimensões atuais

Controles de Precisão​

imagem do infográfico

Painel de Posição do Lado Direito​

Quando um bloco está selecionado, o painel da direita fornece:

Controles de Posição:

  • 📍 Posição X - Deslocamento horizontal da borda esquerda (0-100)
  • 📍 Posição Y - Deslocamento vertical da borda superior (0-100)
  • 🎨 Z-Index - Ordem das camadas para blocos sobrepostos
  • 📏 Largura - Porcentagem da largura do bloco (1-100)
  • 📏 Altura - Porcentagem da altura do bloco (1-100)

⚙️ Configuração de Bloco​

Tipos e Propriedades de Blocos​

imagem do infográfico

Acessando a Configuração do Bloco​

Método:

  1. Selecione um bloco na tela do editor
  2. Painel de configuração aparece na parte inferior da tela
  3. O dropdown de tipo de bloco é a principal opção de configuração

Nota: Nem todos os blocos são atualmente configuráveis. Isso mudará à medida que o desenvolvimento continuar. Mais tipos de blocos serão adicionados em futuras atualizações.

Tipos de Blocos Disponíveis​

Propósito: Exibir imagens estáticas, logotipos, fundos, GIFs
Opções de configuração:

  • 📁 Fonte da imagem - Upload ou URL que será utilizado como padrão para este bloco. Você pode deixar isso vazio se quiser forçar uma imagem a ser selecionada na configuração

Casos de uso:

  • Logotipos e marcas da empresa
  • Imagens de fundo
  • Fotos de equipamentos
  • GIFs

Exemplos de Template​

imagem da infografia

Este exemplo demonstra um template bem estruturado com:

  • 📊 Organização clara dos blocos com rótulos descritivos
  • 📐 Espaçamento e alinhamento adequados
  • 🎯 Tipos de blocos funcionais para diferentes necessidades de conteúdo

Nomeação dos blocos neste exemplo:

  • Cada bloco mostra seu propósito pretendido
  • Roteamento claro ajuda na configuração
  • Organização lógica suporta a manutenção

📚 Documentação Relacionada​

Próximos Passos​

Após criar seu template:

  1. ⚙️ Configurar Instalações - Aplicar templates a instalações específicas
  2. 🎛️ Vincular Controladores - Conectar ao hardware de exibição
  3. 🚀 Guia de Introdução - Visão geral do fluxo de trabalho

Tópicos Avançados​

  • 🎨 Técnicas Avançadas de Design
  • 📊 Integração de Dados Personalizados
  • 🔄 Atualizações Automáticas de Templates
  • 👥 Colaboração em Templates para Múltiplos Usuários

💡 Resumo das Melhores Práticas​

Design de Template​

✅ Princípios de design:

  • 🎯 Mantenha simples - Foque nas informações essenciais
  • 📱 Projete responsivamente - Teste em diferentes tamanhos de tela
  • 🎨 Mantenha consistência - Use cores e layout padronizados

Gerenciamento de Template​

✅ Dicas de organização:

  • 📝 Use nomes descritivos - Facilite a localização dos templates
  • 🔄 Manutenção regular - Remova templates não utilizados
  • 👥 Compartilhe normas - Garanta a consistência na equipe

🎨 Pronto para Projetar? Com seu template criado e configurado, você está pronto para implantar visualizações impressionantes em suas instalações SmartgridX!