Produtos
Nem toda visualização se encaixa em um modelo. O HTML Canvas é o widget amigável para desenvolvedores da Ubidotsque permite escrever seu próprio HTML, CSS e JavaScript para criar exatamente os gráficos, visualizações e interações que seu projeto exige — sem concessões.
Benefícios
Os widgets padrão atendem à maioria dos casos de uso, mas não a todos. O HTML Canvas elimina as limitações do que é possível, permitindo que você crie e programe visualizações que correspondam exatamente às suas necessidades funcionais e estéticas.
Escreva seu próprio HTML, CSS e JavaScript diretamente no Ubidots. Não é necessário criar um front-end separado nem contornar limitações da plataforma — sua lógica personalizada reside junto com seus dados IoT .
O HTML Canvas suporta bibliotecas externas, permitindo que você importe suas ferramentas de gráficos, frameworks de interface do usuário ou scripts personalizados preferidos e os renderize perfeitamente em seu dashboard.
Com configurações integradas, como carregamento lento e pré-carregamento de dados dashboard , seus widgets personalizados são otimizados para desempenho sem exigir trabalho adicional de engenharia da sua parte.
IoT em ação
Como funciona
O HTML Canvas oferece aos desenvolvedores um ambiente de codificação integrado para criar, testar e exibir widgets personalizados diretamente na plataforma — sem a necessidade de ferramentas externas ou implantações separadas.
Principais características
Crie widgets personalizados com HTML, CSS, JS ou React. Expanda dashboards Ubidots além das opções nativas usando codificação assistida por IA.
Um editor integrado com abas dedicadas para cada linguagem — mantendo o código do seu widget organizado sem que você precise sair da plataforma.
Importe qualquer biblioteca JavaScript hospedada em CDN — jQuery, Highcharts, Plotly, Mapbox, React e muito mais.
Acesse as variáveis e o token do seu dispositivo Ubidots diretamente do código do widget usando métodos integrados — sem necessidade de configuração adicional da API.
Os widgets são renderizados somente quando entram na área visível da tela, mantendo dashboards rápidos mesmo com conteúdo personalizado complexo.
Disponibilize todos os dados dashboard no momento do carregamento para que os widgets sejam renderizados instantaneamente — sem necessidade de callbacks assíncronos.
Ajuste a aparência do seu widget além do editor de código com CSS adicional através da opção Estilo Personalizado.
Escreva HTML, CSS e JavaScript padrão — o mesmo código que você usaria para construir um site, sem nada de novo para aprender.
Quantify Environmental utiliza sensores IoT sem fio e dashboards Ubidots para transformar dados de serviços públicos em insights em tempo real, ajudando clientes industriais a monitorar o uso de água, energia e gás, detectar ineficiências e agir antes que os custos aumentem.
$Economia anual superior a através da otimização do consumo de água, eletricidade e gás.
Milhões de litros de água doce foram conservados e toneladas de emissões de CO₂ foram evitadas, gerando resultados mensuráveis em termos de sustentabilidade.
Melhoria na supervisão operacional com visibilidade em tempo real do consumo de energia e do desempenho dos equipamentos.
História de sucesso
Casos de uso
Tom Ulanowski
Cofundador
UbidotsUbidotsUbidotsUbidots utiliza UbidotsUbidotsUbidotsUbidots para monitorar serviços públicos em diversas instalações, ajudando os clientes a reduzir custos por meio de dados e alertas em tempo real.
Resultados:
Steve Barker
Fundador e CEO
A Prospect Control utiliza Ubidots para fornecer monitoramento remoto do nível de tanques para clientes industriais, substituindo configurações complexas de PLC/SCADA por uma solução IoT escalável e baseada na web.
Resultados:
Darryl Schembri
Director Geral
A AIS Technology utiliza Ubidots para monitorar o consumo de eletricidade, água e gás em edifícios com múltiplos inquilinos, permitindo visibilidade em tempo real, faturamento automatizado e resposta mais rápida a ineficiências.
Resultados:
Onofre Tamargo
CEO e cofundador
A S4IoT utiliza Ubidots para monitorar remotamente sistemas de irrigação em jardins urbanos, ajudando os clientes a reduzir custos de manutenção, evitar a perda de plantas e migrar de operações manuais para um modelo escalável baseado em assinatura.
Resultados:
Ajuda e suporte
Tem dúvidas sobre Ubidots? Aqui estão algumas das perguntas mais frequentes para ajudar você a começar.
O HTML Canvas é um widget da Ubidotsfácil de usar para desenvolvedores, que permite escrever HTML, CSS e JavaScript personalizados diretamente em um dashboard. Ele foi projetado para casos em que os widgets padrão não atendem a requisitos funcionais ou estéticos específicos, permitindo que você crie gráficos, indicadores, tabelas, animações ou qualquer visualização personalizada que seu projeto exija, renderizada ao vivo junto com seus outros widgets.
O HTML Canvas é compatível com HTML, CSS e JavaScript padrão — incluindo React. Você também pode importar bibliotecas de terceiros hospedadas em CDN, como frameworks de gráficos e kits de ferramentas de interface do usuário, diretamente nas configurações do widget. Não há sintaxe proprietária para aprender; se funciona em um navegador, funciona dentro do HTML Canvas.
O HTML Canvas oferece métodos integrados que permitem ao seu código acessar diretamente as variáveis do dispositivo e seus valores a partir do editor de widgets. Você também pode ativar a opção "Pré-carregar dados Dashboard " para disponibilizar todas as variáveis dashboard assim que o widget for carregado, eliminando a necessidade de chamadas de API separadas ou lógica externa de busca de dados.
Use o Canvas HTML quando um widget padrão Ubidots não atender às suas necessidades exatas — seja um tipo de gráfico personalizado, uma exibição com a marca da sua empresa e estilo específico, um elemento de interface interativo ou uma visualização que dependa de lógica não disponível nos widgets nativos. É a escolha certa sempre que a biblioteca integrada cobre os dados, mas não a apresentação.
