Os gráficos são desenhos SVG ligados à instalação: uma planta do piso cujas lâmpadas se acendem, um esquema de aquecimento cujas bombas rodam, um fluxo de energia cujas setas correm com a potência, um plano de segurança cujos contactos de porta ficam vermelhos. São preparados na página Gráficos do painel de administração; os utilizadores colocam-nos nas suas vistas (consulte “Gráficos nas suas vistas”). A página Gráficos é uma entrada própria do grupo EDIFÍCIO na barra lateral, junto a Lógica.
Um gráfico é composto por quatro elementos:
| Elemento | O que é |
|---|---|
| O desenho | Um documento SVG: algo que desenhou ou exportou, uma imagem de fundo ou uma tela vazia que preenche com símbolos |
| Símbolos | Formas prontas da biblioteca (uma lâmpada, um estore, uma bomba, um indicador de valor…) colocadas no desenho, com associações e ações pré-configuradas |
| Associações | Regras que alteram uma forma quando um valor muda: uma cor, um texto, uma classe, uma posição, uma animação |
| Ações | O que um toque, um duplo toque ou uma pressão longa numa forma executa: comutar um dispositivo, executar um cenário, abrir uma divisão, ir para uma vista |
A página Gráficos. A tabela lista todos os gráficos com o respetivo número de associações e ações e onde está Colocado ("2 vista(s)" ou "não colocado"). Cada linha disponibiliza Editar, Duplicar, Exportar e Eliminar. Acima da tabela: Novo gráfico e Importar pacote.
⚠️ Aviso: Eliminar um gráfico colocado em vistas remove também essas colocações — a caixa de diálogo indica em quantas.
Criar um gráfico
Clique em Novo gráfico. O primeiro ecrã pergunta como o desenho começa:
| Início | O que acontece | Dimensões do gráfico |
|---|---|---|
| A partir de ficheiro SVG | O seu desenho é o gráfico. Os símbolos são colocados por cima e pode associar as formas que este já contém. | O tamanho do próprio ficheiro |
| A partir de imagem de fundo | Uma fotografia, uma planta digitalizada ou uma cena gerada torna-se o fundo. O gráfico é criado e guardado de imediato, com a imagem armazenada no servidor. Os símbolos ficam por cima. | O tamanho da imagem |
| Composição em branco | Uma tela vazia — apenas símbolos, por exemplo um logótipo. Escolha Panorâmico 16:10, Clássico 4:3, Quadrado ou largura e altura Personalizada. | O tamanho que escolher |
| Exemplos | Dois gráficos completos integrados no servidor: Fluxo de energia e Estação de bombagem. São importados como cópias editáveis; as referências dos dispositivos são correspondidas por nome. | O tamanho do exemplo |
O tamanho de um gráfico corresponde ao seu espaço de coordenadas, indicado no separador Fonte como Dimensões do gráfico. Pode alterá-lo mais tarde; todo o desenho é redimensionado em conformidade. Uma imagem de fundo define-o sempre para o tamanho próprio da imagem.
💡 Sugestão: Uma imagem clara (papel branco) necessita de traços escuros independentemente do tema da aplicação. Ao iniciar a partir de uma imagem de fundo clara, a definição Cores é alterada automaticamente para Desenho claro (consulte Testes, definições e exportação abaixo).
O editor
O editor é composto por duas colunas. À esquerda, a Pré-visualização desenha o gráfico exatamente como as aplicações o farão, com uma barra de ferramentas:
| Botão | O que faz |
|---|---|
| Inserir símbolo | Abre a biblioteca de símbolos (consulte Símbolos abaixo) |
| Mover | Modo de composição: arraste um símbolo para o mover, puxe o ponto laranja no canto para o redimensionar, clique para editar as associações, prima Delete para remover, Escape para desselecionar |
| Selecionar | Clique em qualquer forma do desenho para a selecionar e editar as respetivas associações — para formas desenhadas manualmente em vez de símbolos |
| Pan, Reduzir, Ampliar | Desloque e ajuste o zoom da pré-visualização; a roda do rato também controla o zoom; clique na percentagem para repor 100 %. O zoom afeta apenas a visualização, nada altera no gráfico |
À direita, quatro separadores:
- Fonte — o nome, Carregar SVG, as Dimensões do gráfico e o próprio texto SVG, que pode editar diretamente. Abaixo deste, o resultado do filtro de segurança: "O desenho passa no filtro sem alterações", ou a lista do que foi removido.
- Símbolos (n) — todos os símbolos colocados no desenho, mais Outros elementos para as formas próprias do desenho (consulte Símbolos abaixo).
- Testar valores — introduza valores na pré-visualização (consulte Testes, definições e exportação abaixo).
- Definições — descrição, cores, ajuste, fundo, CSS adicional e recursos de imagem (consulte Testes, definições e exportação abaixo).
O que faz o filtro de segurança. O servidor limpa todos os desenhos ao guardar: scripts, processadores de eventos, hiperligações e imagens externas são removidos; as animações ficam restritas a atributos seguros. Um desenho pode ter no máximo 2 MB. As alterações efetuadas pelo filtro são listadas sob a fonte para que nada seja eliminado sem aviso.
Guardar. Nada é enviado para as aplicações até clicar em Guardar. Se uma associação ou ação estiver incompleta — um símbolo sem dispositivo, um seletor sem correspondência — a gravação é recusada e o editor abre a linha em questão indicando o motivo.
Símbolos
Os símbolos são o método mais rápido para construir um gráfico: cada um inclui as associações e ações necessárias, pelo que posicionar uma lâmpada e escolher a respetiva iluminação é suficiente para a colocar operacional.
A biblioteca. Clique em Inserir símbolo. A caixa de diálogo está organizada por categorias, com um campo de pesquisa.
| Categoria | Símbolo | O que mostra e faz |
|---|---|---|
| Iluminação | Lâmpada | A lâmpada acende e brilha quando a luz está ligada; um toque comuta o estado |
| Climatização | Radiador | Um radiador com a respetiva temperatura; um toque abre a divisão |
| Climatização | Ventilador | Roda enquanto está em funcionamento; um toque comuta o estado |
| Vãos | Estore | Uma janela cuja cobertura acompanha a posição do estore |
| Área técnica | Bomba | Verde e em rotação quando em funcionamento; um toque comuta o estado após confirmação |
| Área técnica | Válvula | Uma válvula de duas vias com o lado aberto destacado; um toque comuta o estado |
| Área técnica | Depósito | Um depósito cujo enchimento e valor numérico acompanham o nível em percentagem |
| Energia | Painel solar | Um sistema fotovoltaico com o valor de produção |
| Energia | Bateria | Uma bateria cujo nível de enchimento acompanha o estado de carga |
| Energia | Rede elétrica | A ligação à rede, verde durante a exportação, com a indicação de potência |
| Energia | Carregador VE | Um veículo que se ilumina durante o carregamento, com a respetiva potência de carga |
| Rótulos e linhas | Linha de fluxo | Uma seta tracejada cujos traços se movem com o fluxo de energia, mais rápidos com maior potência, em sentido inverso quando o sinal se inverte |
| Rótulos e linhas | Valor analógico | Um indicador que apresenta qualquer leitura com a respetiva unidade; um toque abre o dispositivo |
| Rótulos e linhas | Texto | Um rótulo livre definido por si; dimensione e rode como qualquer símbolo |
| Rótulos e linhas | Indicador de estado | Um ponto colorido com uma palavra de estado para uma entrada digital — aberto / fechado, ligado / desligado |
| Navegação | Hotspot, Hotspot (largo) | Uma área clicável invisível para sobrepor a uma divisão da planta; um toque acede a uma divisão, categoria, vista ou dispositivo. Realçado a azul apenas no editor |
| Os meus símbolos | personalizado | Ícones carregados por si (consulte abaixo) |
Hotspots. Um Hotspot é um símbolo sem desenho próprio: um retângulo invisível cuja área total responde ao toque. Sobreponha um a cada divisão da planta, redimensione através do ponto de canto e selecione o destino na respetiva ação (Ir para uma divisão vem pré-configurado). É apresentado com um tom azul durante a edição para facilitar a localização; os utilizadores finais nunca o veem.
Posicionar e mover. A seleção de um símbolo coloca-o no centro do desenho, muda a pré-visualização para o modo Mover e abre o painel do símbolo. Arraste-o para o local pretendido, puxe o ponto de canto laranja para redimensionar ou introduza os valores em Posicionamento: X, Y, Escala e Rotação. Ajustar à tela dimensiona e centra o símbolo para preencher todo o desenho — ideal para gráficos compostos apenas por um logótipo. Um retângulo tracejado delimita a tela durante as movimentações: os elementos fora deste limite são cortados nas aplicações.
O painel do símbolo. No topo, Dispositivo direciona todas as associações e ações do símbolo para um único dispositivo numa só seleção — para a maioria dos símbolos, esta é a única configuração necessária. Abaixo do posicionamento, três subseparadores listam as Associações, Ações e Animações do símbolo, todas editáveis conforme descrito a seguir. Remover símbolo elimina-o juntamente com todas as suas linhas associadas.
Texto. O símbolo Texto apresenta as palavras introduzidas no respetivo campo Texto. Dimensione para alterar o tamanho; associe a cor ou a visibilidade da mesma forma que qualquer outro elemento.
Outros elementos. As formas originais do desenho são listadas em Outros elementos, por id — uma forma sem id não pode ser associada. Atribua identificadores às formas no separador Fonte ou clique nelas através de Selecionar; em seguida, adicione-lhes associações e ações do mesmo modo. As linhas cujo seletor seja uma classe ou um caminho em vez de um id são agrupadas em Linhas noutros seletores.
Os meus símbolos. Na categoria Os meus símbolos, a opção Carregar símbolo adiciona um ícone SVG personalizado — uma câmara, um logótipo ou um equipamento inexistente na biblioteca:
| Campo | Significado |
|---|---|
| Ficheiro SVG | O ícone, com um máximo de 256 KB. É submetido ao mesmo filtro de segurança que um desenho |
| Nome | Como surge na biblioteca |
| Cores | Uma cor redesenha o ícone na cor de texto do desenho, permitindo que uma associação o mude para verde ou vermelho. Manter cores preserva o grafismo original e permite apenas mostrar / ocultar |
| Palavras-chave | Termos pelos quais o campo de pesquisa o localiza |
Um símbolo personalizado não contém linhas pré-configuradas: adicione as associações e ações necessárias após o posicionamento. Cada gráfico que o utilize guarda a sua própria cópia; portanto, renomear ou remover o símbolo da biblioteca não afeta nenhum gráfico existente.
Associações
Uma associação altera uma forma quando um valor muda. Abra um símbolo (ou um elemento em Outros elementos) e aceda ao subseparador Associações. Cada linha é composta por quatro partes:
Seletor — a forma controlada pela associação. Nas linhas próprias de um símbolo, encontra-se pré-preenchido (#lamp_1 .body); numa forma desenhada manualmente, corresponde ao id da forma.
Origem — de onde provém o valor:
| Origem | Campos |
|---|---|
| Dispositivo | Um dispositivo e um dos seus objetos — estado de comutação da luz, potência do contador, leitura do sensor |
| Função | Uma função do motor de Lógica e uma das suas saídas (consulte “Configuração de funções e saídas”) |
| Estático | Um valor fixo introduzido — útil para testar uma regra ou forçar um estado |
O que muda — o efeito do valor na forma:
| Tipo | Efeito | Campos adicionais |
|---|---|---|
| Atributo | Define um atributo SVG (fill, stroke, opacity, width…) | o nome do atributo |
| Estilo | Define uma propriedade CSS | o nome da propriedade |
| Texto | Substitui o texto da forma pelo valor | dígitos, unidade e um modelo como {value} {unit} |
| Classe | Adiciona uma classe enquanto o valor estiver ativo; remove-a caso contrário | o nome da classe — associe a CSS adicional |
| Visibilidade | Mostra a forma quando o valor está ativo; oculta-a caso contrário | — |
| Transformação | Roda, move ou redimensiona a forma com base no valor | a operação |
| Animação | Controla uma linha de animação (consulte Animações abaixo): executar se ligado, velocidade (dur) ou direção por sinal | a animação e o modo |
| Símbolo (href) | Substitui a forma por outro #symbol do desenho | — |
Mapeamento — conversão do valor no formato necessário à forma:
| Mapeamento | O que faz | Exemplo |
|---|---|---|
| Direto | O valor é utilizado sem alterações | uma temperatura num campo de Texto |
| Ligado / desligado | Um resultado se ligado, outro se desligado | #facc15 se ligado, #64748b se desligado, para o preenchimento de uma lâmpada |
| Intervalo | Mapeia um intervalo de entrada num intervalo de saída; Limitar ao intervalo restringe aos extremos, Usar magnitude ignora o sinal | 0–100 % numa cobertura movida de −28 a 0 |
| Limiares | Patamares: até determinado valor produz um resultado, depois o seguinte, terminando em caso contrário | até 15 vermelho, até 30 laranja, caso contrário verde, para um depósito |
| Tabela de correspondência | Uma tabela de valores exatos, com caso contrário para outros valores | 1 → Aberto, 0 → Fechado, para um texto de estado |
💡 Sugestão: As linhas da biblioteca são os melhores exemplos: posicione um Indicador de estado e analise as suas três associações — preenchimento do ponto (Ligado / desligado), preenchimento do halo (Ligado / desligado) e texto de estado (Tabela de correspondência). Edite os dois termos na tabela para "Aberto" e "Fechado", ou "Armado" e "Desarmado".
Ações
Uma ação executa um comando quando uma forma recebe um toque. Abra o subseparador Ações de um símbolo ou adicione uma ação a uma forma desenhada manualmente.
| Campo | Opções |
|---|---|
| Seletor | A forma que recebe o gesto — geralmente todo o símbolo |
| Gesto | Toque, Duplo toque, Pressão longa |
| Executa | Definir valor do dispositivo (com o Valor a enviar) · Comutar dispositivo · Ajustar valor por passos · Abrir divisão do dispositivo · Abrir detalhe do dispositivo (a página aberta pelo respetivo mosaico; um dispositivo sem página abre a sua divisão) · Executar cenário · Executar automação · Comando global (iluminação ou estores, para todo o edifício, divisão ou categoria) · Ir para uma vista · Ir para uma divisão · Ir para uma categoria |
| Pedir confirmação | Uma pergunta apresentada antes da execução da ação, como Ligar a bomba?. Deixe em branco para execução imediata |
A mesma forma pode suportar várias ações com gestos distintos: no exemplo da Estação de bombagem, uma bomba comuta com um toque (após confirmação) e abre a página do dispositivo através de uma pressão longa.
📘 Nota: Os comandos de dispositivos, cenários e automações são executados no servidor, independentemente da aplicação de origem. Abrir divisão do dispositivo, Abrir detalhe do dispositivo, Comando global, Ir para uma vista, Ir para uma divisão e Ir para uma categoria são processados na aplicação onde ocorreu o toque, pelo que a pré-visualização de administração não os executa.
📘 Nota: Os utilizadores apenas têm acesso às ações autorizadas na sua conta. Um símbolo associado a um dispositivo fora das divisões e categorias atribuídas ao utilizador surge como um simples desenho; um comando global para todo o edifício está reservado aos administradores.
Animações
Uma linha de animação adiciona movimento contínuo a uma forma — um rotor em rotação, traços em movimento ao longo de uma linha, uma lâmpada intermitente — que as associações podem iniciar, parar, acelerar ou inverter.
| Campo | Significado |
|---|---|
| Alvo | A forma que se move (#pump_1 .rotor) |
| Atributo | O que é animado: transform para movimento, ou um atributo como stroke-dashoffset ou opacity |
| Transformação | Para transform: rotate, scale, translate, skewX, skewY — uma rotação é efetuada em torno do centro do símbolo |
| De, Para | Os valores inicial e final |
| Duração | Um ciclo, como 1s |
| Repetir | Uma contagem ou indefinite |
| Início | indefinite quando uma associação a inicia, load para iniciar assim que o gráfico surge, ou uma lista SMIL como pump1.click; spin.end+1s |
| Fim, Preenchimento | A condição de paragem padrão SMIL e o estado mantido quando a animação termina |
Para associar uma animação à instalação, adicione uma associação cujo campo O que muda seja Animação: executar se ligado inicia e para a animação conforme o estado, velocidade (dur) define a duração do ciclo a partir de um valor (um mapeamento por Intervalo de watts para segundos) e direção por sinal inverte o movimento para valores negativos — a Linha de fluxo utiliza os três modos.
Testes, definições e exportação
Testar valores. O separador disponibiliza um campo por cada valor associado para que possa introduzir leituras e observar o comportamento na pré-visualização. Ative Valores em tempo real para fornecer à pré-visualização as leituras reais da instalação. Testar ações (que requer Valores em tempo real) faz com que os cliques na pré-visualização executem a respetiva ação no servidor — comutando dispositivos, executando cenários e automações — permitindo validar o gráfico antes da disponibilização aos utilizadores. As ações processadas na aplicação (abrir divisões, comandos globais, navegar para vistas) são registadas mas não executadas.
Definições.
| Definição | Significado |
|---|---|
| Descrição | Uma nota apresentada na lista |
| Cores | Seguir tema da aplicação — símbolos e rótulos assumem a cor de texto da aplicação; Desenho claro — traços escuros independentemente do tema, para fundos brancos; Desenho escuro — traços claros independentemente do tema |
| Ajuste | Como o desenho preenche o cartão: contain apresenta-o por inteiro, cover preenche o cartão cortando os excedentes |
| Fundo | Uma cor por trás do desenho ou transparent |
| Altura mín. (px) | O cartão nunca terá uma altura inferior a este valor |
| CSS adicional | Uma folha de estilos aplicada ao desenho — classes para associações de Classe, keyframes, transições |
| Recursos de imagem | As imagens que o desenho pode referenciar (PNG, JPEG, WebP). Carregar imagem adiciona um ficheiro; Usar como fundo define-o como fundo do desenho e redimensiona o gráfico para o seu tamanho. Uma imagem em utilização pelo desenho é marcada como em uso e não pode ser eliminada; ao substituir o fundo, o editor sugere a eliminação do ficheiro anterior |
Exportação e importação. Exportar descarrega o gráfico como um pacote: o desenho, as respetivas linhas, definições e imagens num único ficheiro. Importar pacote na página Gráficos cria um gráfico a partir desse ficheiro. As referências a dispositivos, funções, cenários e vistas são correspondidas por nome; referências sem correspondência são ignoradas e a importação indica a quantidade. É deste modo que os dois exemplos são fornecidos e como um gráfico é transferido entre instalações.
Cópias de segurança. Os gráficos e os símbolos personalizados residem na base de dados do servidor, integrando a cópia de segurança do sistema (consulte “Cópia de segurança e restauro”). As imagens referenciadas por um gráfico são armazenadas como ficheiros e não são incluídas na cópia de segurança: exporte o gráfico como pacote para manter os ficheiros associados.