Referência de Widgets

Os boards do IronFlock são construídos a partir de widgets. Cada tipo de widget tem uma finalidade específica — desde exibir dados ao vivo até capturar entradas do usuário. Adicione qualquer widget arrastando-o do painel de widgets para o canvas do seu board e, em seguida, configure-o pelo painel de configurações.

Os widgets se dividem em quatro grupos: Visualização de dados para gráficos e exibições de status, Conteúdo e mídia para conteúdo estático e rico, Entrada e controle para capturar entradas e enviar comandos, e Navegação para mover-se entre as páginas do board.

Visualização de dados

Widgets que transformam dados ao vivo e históricos em gráficos, medidores e exibições de status.

Gráfico cartesiano

Exibe dados de séries temporais ou categóricos como gráficos de linhas, barras ou uma combinação. Suporta várias séries de dados no mesmo gráfico.

Quando usar: Acompanhar a evolução de valores de sensores ao longo do tempo, comparar vários sinais lado a lado, mostrar totais diários como barras.

O que você configura:

Uma ou mais séries de dados, cada uma apontando para uma coluna de dados do seu app
O tipo de gráfico por série: linha, barra ou bolha
O tipo de eixo X: baseado em tempo ou categórico
O rótulo do eixo Y e a janela de tempo (por ex. últimos 5 minutos agregados por minuto)
As cores por série

Medidor

Um medidor radial que mostra um único valor ao vivo com zonas de limite coloridas.

Quando usar: Temperatura, pressão, nível de enchimento ou qualquer valor em que você queira um status rápido com zonas verde/amarelo/vermelho.

O que você configura:

A coluna de dados a ser lida (sempre mostra o valor mais recente)
Unidade e precisão decimal
Os limites das zonas de cor (por ex. seguro: 0–60, aviso: 60–80, crítico: 80–120)
Opcional: calcular a média das últimas N leituras para suavizar o ruído

Exibição de valor

Mostra um ou mais valores individuais com rótulos e unidades. Limpo e minimalista — ótimo para blocos de KPI.

Quando usar: Mostrar temperatura atual, tempo de atividade, último evento ou qualquer métrica chave como número.

O que você configura:

Uma ou mais colunas de dados, cada uma com um rótulo e uma unidade
Precisão decimal
Cores de texto por valor

Sinal

Indicadores de status compactos — círculos ou quadrados — que mudam de cor com base no valor atual, fornecendo um painel de status rápido.

Quando usar: Painéis de dispositivos online/offline, estados OK/aviso/erro em muitos ativos, luzes de status baseadas em limites.

O que você configura:

Um ou mais sinais, cada um lendo uma coluna de dados
Regras de mapeamento de cores por sinal: correspondências exatas (por ex. ONLINE) ou comparações numéricas (por ex. >=70)
Layout (horizontal ou vertical) e forma (círculo ou quadrado)
Título e subtítulo opcionais

Gráfico de rosca

Um gráfico circular que mostra segmentos proporcionais.

Quando usar: Mostrar distribuição — por ex. dispositivos online vs offline, participação da produção por tipo de produto.

O que você configura:

Segmentos, cada um com um rótulo, uma cor e uma coluna de dados (ou valor fixo)
Tamanho do recorte (controla o diâmetro do furo interno)

Tabela

Exibe linhas de dados em formato tabular com colunas configuráveis.

Quando usar: Mostrar uma lista de máquinas, eventos recentes, registros de inspeção ou qualquer conjunto de dados estruturado.

O que você configura:

Colunas, cada uma com um cabeçalho, uma coluna de dados e um tipo de exibição
Altura da linha e tamanho da fonte do cabeçalho
Número de linhas a exibir

Tipos de exibição de coluna: texto simples, número, estado (mapeia valores para cores), booleano, imagem ou botão (link clicável).

Mapa de calor

Um mapa de calor baseado em grade para visualizar intensidade em duas dimensões.

Quando usar: Consumo de energia por hora e dia da semana, utilização de máquinas por turno, padrões de anomalias ao longo do tempo.

O que você configura:

As colunas do eixo X (por ex. hora do dia) e do eixo Y (por ex. dia da semana)
A coluna de valor para a intensidade do calor
Escala mín/máx e se deve usar um gradiente de cor contínuo ou em etapas

Histórico de estados

Uma linha do tempo horizontal mostrando quando os estados mudaram ao longo do tempo, uma linha por ativo.

Quando usar: Histórico de status de máquinas (em operação / parada / manutenção), registros de turno, linhas do tempo de eventos.

O que você configura:

Nomes dos estados e suas cores (por ex. Em operação = verde, Falha = vermelho)
As colunas de dados para data/hora, valor do estado e nome do ativo

Mapa

Exibe dados geográficos em um mapa interativo. Suporta marcadores circulares e linhas de rastreamento.

Quando usar: Mostrar localizações de dispositivos, rastreamento de veículos, posições de ativos em campo.

O que você configura:

Estilo do mapa (claro ou escuro)
Uma ou mais séries: círculos (marcadores de última posição) ou linhas (trajetos de movimento)
As colunas de dados para latitude e longitude
Uma coluna de pivô para dividir os dados por dispositivo ou ativo

SCADA

Renderiza símbolos SVG industriais interativos — bombas, válvulas, tanques, motores, tubulações, medidores — da biblioteca SCADA do ThingsBoard, com vinculações de dados ao vivo e coloração baseada em estado.

Quando usar: Diagramas de processo e telas de planta — mostrando o estado ao vivo de bombas, válvulas, tanques e fluxos em um esquema.

O que você configura:

O tipo de símbolo a exibir
Vinculações de dados que conduzem o estado do símbolo (em operação/parado, aberto/fechado, níveis de fluido)
Cores de estado (em operação, parado, aviso, crítico) e outros estilos por símbolo

Para criar telas de processo completas, consulte SCADA.

Conteúdo e mídia

Widgets para conteúdo estático e rico — imagens, texto formatado e páginas web incorporadas.

Imagem

Exibe uma imagem estática a partir de uma URL. Útil para logotipos, diagramas ou gráficos instrutivos.

Sobreposição de imagem

Coloca valores de dados ao vivo sobre uma imagem de fundo — ótimo para plantas baixas, diagramas ou esquemas.

Quando usar: Sobrepor temperaturas em uma planta de fábrica, mostrar níveis de enchimento no diagrama de um tanque.

O que você configura:

URL da imagem de fundo
Pinos de sobreposição: barras de progresso ou rótulos de texto posicionados em coordenadas relativas na imagem
Coluna de dados para cada pino (valor ao vivo ou fixo)

Markdown

Renderiza Markdown (CommonMark e GitHub Flavored Markdown) com blocos de código com realce de sintaxe e interpolação de variáveis ao vivo.

Quando usar: Painéis de documentação, instruções ou notas dinâmicas que combinam texto formatado com valores de dados ao vivo.

O que você configura:

O texto fonte em Markdown
Variáveis referenciadas no texto via {{variableName}}, cada uma vinculada a uma coluna de dados ou valor fixo

Rótulo

Exibe um único rótulo de texto configurável com controle total sobre tipografia e alinhamento.

Quando usar: Títulos de seção, legendas, anotações estáticas ou um único valor dinâmico renderizado como texto.

O que você configura:

O texto a exibir (quebras de linha são preservadas)
Tamanho, cor, peso e estilo da fonte
Alinhamento horizontal e vertical, e cor de fundo

Incorporação

Incorpora conteúdo web externo em um iframe isolado — uma única página ou várias dispostas em uma grade responsiva.

Quando usar: Integrar dashboards de terceiros, documentação, ferramentas externas ou qualquer página acessível pela web dentro de um board.

O que você configura:

A URL a incorporar (o site de destino deve permitir incorporação via iframe)
Um título opcional exibido acima do conteúdo
Modo de múltipla incorporação: várias URLs dispostas em uma grade, com espaçamento configurável

Entrada e controle

Widgets que capturam entradas do usuário ou enviam comandos e filtros de volta à plataforma.

Formulário

Um formulário de entrada de dados configurável que grava a entrada do usuário no backend de dados do seu app.

Quando usar: Captura manual de dados — registros de inspeção, logs de manutenção, entrada de operador, pontos de ajuste de parâmetros.

O que você configura:

Campos de formulário de vários tipos: texto, número, caixa de seleção, área de texto, lista suspensa, data/hora
Opções por campo: rótulo, obrigatório, valor padrão, validação, mín/máx e coluna de dados de destino
Título, subtítulo opcionais e se o formulário abre em um diálogo

Interruptor

Um ou mais interruptores de alternância Material Design que refletem um valor ao vivo e acionam uma ação no dispositivo quando ativados.

Quando usar: Ligar/desligar equipamentos, alternar configurações binárias de dispositivos, enviar comandos de controle a partir do dashboard.

O que você configura:

Um ou mais interruptores, cada um lendo uma coluna de dados
Mapeamento de estado para LIGADO/DESLIGADO: valores exatos ou comparações numéricas (por ex. >50)
O app, dispositivo e tópico de ação de destino acionado ao alternar
Rótulo e cores de valor por interruptor

Lista suspensa de filtro

Uma lista suspensa de opções predefinidas que publica o valor selecionado como parâmetro de filtro para outros widgets consumirem.

Quando usar: Permitir que os usuários filtrem um board inteiro por tipo de dispositivo, linha, localização ou qualquer categoria.

O que você configura:

O rótulo exibido acima da lista suspensa
A chave de parâmetro que outros widgets referenciam em suas consultas de dados
A lista de opções, cada uma com um rótulo e um valor

Calendário de filtro

Um seletor de intervalo de data/hora — data única ou intervalo — que armazena os timestamps selecionados como parâmetros de filtro para outros widgets.

Quando usar: Dashboards de séries temporais, análise histórica e relatórios com uma janela de tempo selecionável pelo usuário.

O que você configura:

As chaves de parâmetro de início e fim (use uma para o modo de data única, ambas para um intervalo)
O número de meses exibidos de uma vez (1–3)
O rótulo de entrada

Navegação

Widgets para mover-se entre as páginas e seções de um board de várias páginas.

Barra de navegação

Uma barra de navegação superior horizontal com um título ou marca clicável e vários itens roteados.

Quando usar: Navegação de nível superior entre as páginas de um board de várias páginas.

O que você configura:

O texto do título/marca e sua rota de destino
Itens de navegação, cada um com um rótulo, ícone Material e rota
Tamanho, peso e cores da fonte
Segmentos de rota dinâmicos via substituição de {{variable}}

Botão de navegação

Um único botão clicável que redireciona para outra página ou realiza navegação de volta no navegador.

Quando usar: Botões de voltar, links de chamada para ação ou saltar para uma visualização específica do board.

O que você configura:

O rótulo do botão e um ícone Material opcional
A rota de destino (deixe em branco para navegação automática de volta)
Tamanho e cores da fonte
Segmentos de rota dinâmicos via substituição de {{variable}}

Navegação lateral

Um menu lateral vertical com ícones Material e realce baseado em rota do item ativo.

Quando usar: Navegação lateral persistente para dashboards com várias seções ou visualizações.

O que você configura:

Um título com uma rota opcional
Itens de navegação, cada um com um rótulo, ícone Material e rota
Realce do item ativo com base na rota atual
Tamanho, peso e cores da fonte