Estilo e Temas

Cada board no IronFlock vem com uma aparência padrão, mas você tem controle total sobre sua apresentação. As configurações de estilo do painel permitem aplicar um tema, ajustar o layout da grade e controlar a aparência dos widgets — tudo a partir de um único painel de configurações. Para widgets individuais que precisam de uma aparência diferente, você pode substituir o estilo global diretamente no editor de widgets.

Temas

Um tema define o tom visual geral do seu board com um clique. O IronFlock vem com um conjunto de temas integrados — cada um define uma paleta coordenada de cores, fundos e padrões de estilo que se aplicam a todo o painel.

Para aplicar um tema:

1. Abra o painel Configurações do Board (ícone de engrenagem na barra de ferramentas superior).
2. Vá para a seção Tema.
3. Escolha um tema da lista.

Todos os widgets, fundos e cores de texto são atualizados instantaneamente para corresponder ao tema selecionado.

Os temas são um ponto de partida — não uma escolha definitiva. Após escolher um tema, você pode substituir qualquer configuração individual (cores, bordas, fundos) e essas substituições têm prioridade sobre os padrões do tema.

Layout

O canvas do board possui várias propriedades de layout que controlam como os widgets são posicionados, como o canvas se comporta em diferentes tamanhos de tela e se o board rola ou escala. Essas propriedades trabalham juntas para definir o comportamento espacial do seu painel.

Grid Snap

Quando o Grid Snap está habilitado, os widgets se encaixam na célula de grade mais próxima ao serem colocados ou movidos. A grade divide o canvas em uma matriz de linhas e colunas — os widgets sempre se alinham aos limites das células, o que mantém o layout estruturado e ordenado.

Quando o Grid Snap está desabilitado, os widgets podem ser posicionados livremente em qualquer lugar do canvas com precisão de pixel. Este é o modo a ser usado para layouts no estilo SCADA, onde os símbolos precisam ser colocados em posições exatas para corresponder a um diagrama de processo, planta baixa ou esquema de equipamentos.

Propriedades do Grid Snap:

• Columns — O número de divisões verticais no canvas. Uma contagem de colunas mais alta proporciona posicionamento horizontal mais fino. Uma contagem menor encaixa os widgets em posições mais largas.
• Rows — O número de divisões horizontais. Mais linhas significa controle vertical mais fino; menos linhas significa encaixe vertical mais grosseiro.

Dica: Para boards SCADA usando Grid Snap, configure um número alto de linhas e colunas (por exemplo, 48×32 ou mais) para obter controle refinado sobre o posicionamento de símbolos enquanto ainda se beneficia do alinhamento da grade.

Overflow X / Overflow Y

Essas propriedades controlam se o canvas se estende além do viewport visível.

• Overflow X — Quando habilitado, o canvas pode se estender além da borda direita da tela. Uma barra de rolagem horizontal aparece para que os usuários possam rolar até o conteúdo colocado fora da largura inicial do viewport. Os widgets não escalam horizontalmente quando a tela é redimensionada.
• Overflow Y — Quando habilitado, o canvas pode se estender além da borda inferior da tela. Uma barra de rolagem vertical aparece para conteúdo colocado abaixo da altura inicial do viewport. Os widgets não escalam verticalmente quando a tela é redimensionada.

O Overflow funciona com o Grid Snap ligado e desligado. Quando o overflow está ativo em uma direção, o layout se torna não responsivo nessa direção — os widgets mantêm seu tamanho em vez de esticar ou encolher com a janela. Isso é útil para diagramas SCADA grandes, fluxos de processo amplos ou esquemas de equipamentos altos, onde o layout completo não deve ser comprimido para caber na janela.

Quando ambos os overflows estão desabilitados, os widgets são restritos à área visível e escalam responsivamente com a tela.

Scale to Fit

O Scale to Fit faz com que todo o board escale proporcionalmente para preencher o espaço de tela disponível. Você define uma proporção fixa para o canvas, e o board escala para cima ou para baixo para caber na janela do navegador, mantendo essa proporção.

Propriedades do Scale to Fit:

• Aspect Ratio — A proporção largura-altura do canvas (por exemplo, 16:9, 4:3 ou um valor personalizado). O board sempre manterá essa proporção independentemente das dimensões reais da tela. Espaço vazio (letterboxing) aparece nas laterais ou em cima/embaixo se a proporção da tela não corresponder.

O Scale to Fit funciona com o Grid Snap ligado e desligado. É mutuamente exclusivo com o Overflow — quando o Scale to Fit está ativo, o canvas não rola porque todo o layout está sempre visível.

Este modo é ideal para:

• Displays de sala de controle — O painel preenche qualquer monitor de forma limpa, sem rolagem ou distorção
• Telas de quiosque — Um layout fixo que se adapta automaticamente a diferentes tamanhos de tela
• Painéis de apresentação — Aparência consistente em laptops, projetores e telas montadas na parede

Tamanho Fixo do Widget

Cada widget possui propriedades opcionais de Fixed Width e Fixed Height que podem ser alternadas individualmente. Quando ativadas, o widget não será redimensionado nessa direção quando a tela for redimensionada — ele se torna não responsivo nesse eixo enquanto o restante do layout do board permanece fluido.

Isso é útil quando certos elementos precisam de um tamanho estável, independentemente das dimensões da tela. Por exemplo, uma barra lateral de navegação contendo rótulos de texto deve manter uma largura fixa para que o texto permaneça legível, mesmo que o restante do board escale responsivamente.

Para definir tamanho fixo em um widget:

1. Selecione o widget no canvas.
2. Abra o Editor de Widget.
3. Habilite Fixed Width e/ou Fixed Height.

Símbolos SCADA e Tamanho Fixo

Quando símbolos SCADA são colocados em um board, eles recebem Fixed Width e Fixed Height ativados por padrão. Os ícones destacados na barra de ferramentas do widget indicam as restrições de tamanho fixo ativas:

Os símbolos SCADA representam equipamentos físicos e elementos de processo — eles precisam manter suas proporções e posições relativas para representar com precisão um layout do mundo real. No modo Grid Snap responsivo, isso só é possível quando as dimensões dos símbolos são fixas. Sem tamanho fixo, o redimensionamento responsivo distorceria os símbolos e os deslocaria do alinhamento.

Consulte as Opções de Layout do Board SCADA para uma visão geral de como esses modos de layout se aplicam especificamente aos painéis SCADA.

Resumo dos Modos de Layout

Para configurar propriedades de layout:

1. Abra o painel Configurações do Board.
2. Encontre a seção Layout.
3. Alterne o Grid Snap e defina linhas/colunas, ou desabilite-o e configure Overflow ou Scale to Fit com a proporção desejada.

Estilo Global de Widgets

Além do tema, você pode ajustar finamente a aparência de todos os widgets nas configurações de estilo do painel. Essas configurações se aplicam globalmente — cada widget no board as herda, a menos que sejam substituídas individualmente.

O que você pode personalizar:

• Bordas — Controle a largura e a cor da borda ao redor dos widgets. Defina como zero para uma aparência sem bordas, ou torne-as proeminentes para separar visualmente os widgets.
• Arredondamento de cantos — Ajuste o raio da borda para ir de cantos retangulares afiados a cartões totalmente arredondados.
• Fundos — Defina a cor de fundo do widget ou torne os widgets transparentes para deixar o fundo do board aparecer.

Para definir estilos globais de widgets:

1. Abra o painel Configurações do Board.
2. Vá para a seção Estilo.
3. Ajuste bordas, arredondamento de cantos e configurações de fundo conforme necessário.

Essas alterações se aplicam imediatamente a todos os widgets no board.

Substituições de Estilo por Widget

Às vezes, um único widget precisa se destacar — um indicador de status com fundo colorido, um cartão de cabeçalho sem borda ou um gráfico com preenchimento extra. Em vez de alterar o estilo global, você pode substituí-lo para esse widget específico.

Para substituir estilos em um único widget:

1. Clique no widget no canvas para selecioná-lo.
2. Abra o Editor de Widget (o painel de configurações do widget).
3. Encontre as configurações de estilo ou aparência dentro do editor de widget.
4. Ajuste bordas, arredondamento de cantos ou fundo apenas para esse widget.

As configurações por widget têm prioridade sobre o estilo global do painel. Se você alterar posteriormente o estilo global ou trocar de tema, os widgets com substituições mantêm sua aparência personalizada.

Dica: Use estilos globais para definir uma linha de base consistente e, em seguida, use substituições por widget com moderação para elementos que precisam de tratamento especial.

Resumo

Um fluxo de trabalho típico de estilização é assim:

1. Escolha um tema que corresponda à identidade visual do seu projeto.
2. Ajuste a grade se precisar de controle mais preciso sobre o posicionamento dos widgets.
3. Defina estilos globais de widgets para bordas, cantos e fundos para ajustar finamente o tema.
4. Substitua widgets individuais no editor de widgets onde elementos específicos precisam de uma aparência diferente.

Essa abordagem em camadas — tema → estilos globais → substituições por widget — mantém seus boards consistentes enquanto ainda oferece flexibilidade total onde importa.