Desenhe gráficos de dados de sensores conectados à Internet das Coisas (IoT) com SVG

Neste artigo da série sobre representando gráficos de dados na IoT Eu explico como traçar os gráficos usando o Linguagem SVG. Como em outras ocasiões, o artigo também serve como uma breve introdução ao idioma.

Formato SVG

SVG corresponde à sigla para Scalable Vector Graphics (gráficos vetoriais escaláveis, em inglês). É um linguagem de marcação que é baseado em XML e que permite, principalmente, descrever um desenho pela geometria que o define; ao contrário do método matricial, usado por exemplo para uma fotografia, que usaria uma grade de pixels coloridos para codificá-la.

dentro de um desenho SVG Uma imagem (uma matriz de pixels) também pode ser incluída, seja referente a um documento externo ou incorporada ao próprio desenho. SVG.

A versão em idioma atual no momento da redação deste artigo é a SVG1.1 embora a definição da versão já esteja em desenvolvimento SVG2. Na medida do possível, tentarei fazer com que o que está explicado na introdução, mesmo que se refira a SVG1.1 também servir para SVG2.

Se o desenho SVG Está incluído em um documento separado e não dentro do código HTML (minha proposta nesta solução para representar dados de IoT os incorpora no código HTML) deve ser encabeçado por uma referência XML e um definição de tipo de documento (DTD).

Na primeira linha do código anterior a versão é notificada XML codificação de caracteres usada (1.0) (UTF-8) e indica se você precisa de definições externas (standalone="no") ou é um documento independente (standalone="yes"). A segunda linha expressa o definição de tipo de documento (DTD), que não será necessário na próxima versão do SVG.

O código com o qual o desenho é definido está colocado entre as etiquetas <sgv> y </sgv> o que também indica, como já mencionado ao falar sobre Código HTML que atua como um contêiner para gráficos de dados na IoT, as medidas, a parte do total representada, a proporção e também o tipo e versão.

O exemplo acima define um desenho de 500 pixels de largura por 250 pixels de altura (viewport 500x250) que será recortado com um retângulo de 460x80 (viewbox 460x80) começando nas coordenadas 20,10 usando todo o espaço disponível no container (um elemento em uma página web, em nosso caso) sem respeitar a proporção original de uso preserveAspectRatio="none". Além disso, agora você pode ver o primeiro conteúdo do documento, os comentários que estão incluídos entre <!-- y --> como em outros formatos baseados em XML.

O sistema de coordenadas escolhido por SVG Está orientado horizontalmente (eixo X) e verticalmente (eixo Y) e o sentido positivo é o da escrita ocidental, ou seja, os valores do eixo X crescem para a direita e os valores positivos do eixo Y crescem para baixo.

Defina o gráfico com SVG

Para definir os gráficos das informações armazenadas pelos nossos sensores conectados à IoT precisaremos especificar o tipo de objeto que é desenhado, sua geometria (coordenadas, dimensões...) e sua aparência (espessura, cor...) no exemplo deste artigo um gráfico de linha que pode ser feito unindo segmentos de linha com o objeto line, mais útil para plotar elementos independentes ou com uma linha multissegmentada, um objeto path, mais prático para séries de linhas conectadas.

Com o elemento path O objetivo é fazer um desenho como o da imagem abaixo, que é composto por um caminho fechado preenchido com uma cor mais clara encimado na parte superior por um caminho aberto, sem preenchimento e traçado com linha grossa.

Para descrever uma linha é usada uma expressão do tipo:

Em que X1,Y1 são as coordenadas do primeiro ponto da reta e X2,Y2 são as coordenadas do segundo. Um atributo foi usado stroke-width para definir a espessura. Existem várias maneiras de definir a aparência dos objetos SVG, com suas propriedades individuais, como a anterior, ou com a propriedade style o que os reúne e qual o método que será utilizado na proposta do artigo.

O código acima junta-se à propriedade style os valores de stroke (a cor do traço), stroke-width (a espessura da linha) e stroke-opacity (a opacidade do objeto)

A descrição de um objeto path tem a forma

O código acima usa as operações SVG M, L y Z dentro da propriedade d, que significam, respectivamente, “moveto” (mover para), “lineto” (linha para) e “closepath” (fechar caminho). Podem ser expressos em letras maiúsculas ou minúsculas para indicar um valor absoluto ou relativo, quando apropriado (no caso de Z, por exemplo, é irrelevante). Existem muitas outras operações com as quais, por exemplo, podemos desenhar curvas circulares, curvas elípticas, curvas de Bézier... que não precisaremos neste exemplo.

Embora esta proposta desenhe gráficos de linhas que podem delimitar uma área, pode ser útil desenhar outros elementos simples para marcar pontos ou destacar áreas. Dos disponíveis em SVG Polígonos (com os quais você também pode desenhar o preenchimento), retângulos (mais convenientes para o caso específico), elipses e círculos (como um caso particular de elipses) podem ser interessantes. A sintaxe desses elementos pode ser vista no código de exemplo a seguir.

A aparência do código anterior seria como a imagem a seguir (com alguns truques para poder reaproveitar os pontos do exemplo acima)

Os pontos do polígono (polygon) são indicados na propriedade points como pares de coordenadas x,y separadas por espaços entre elas. Para definir as elipses (ellipse) propriedades são usadas cx (coordenada x do centro), cy (coordenada y do centro), rx (largura) e ry (alto). Em vez de dois valores de raio (raio horizontal e vertical, rx y ry) o circulo (circle) é definido por um raio com a propriedade r e as coordenadas do centro com cx y cy. Para definir o retângulo (rectangle) são indicadas as coordenadas do canto superior esquerdo (x e y) A largura (width) e o alto (height)

Finalmente, para incluir texto, o objeto é usado text como se segue:

A posição do texto é indicada pelas coordenadas xey, a fonte corresponde à propriedade font-family, o tamanho com font-size e a cor com a propriedade fill.

HTML permite integrar desenhos SVG como outro elemento da página. Como outros objetos, você pode usar a propriedade ID atribuir-lhes um identificador exclusivo com o qual possam ser referenciados a partir de JavaScript para manipulá-los. Do ponto de vista de HTML, um objeto SVG teria o seguinte formato:

Com o que vimos até agora, seria possível desenhar o tipo de gráfico básico que se busca nesta proposta mas, para dar flexibilidade ao aspecto do container (a página web), a proporção do gráfico será afetada (por exemplo preserveAspectRatio="none") modificando seu tamanho para adaptá-lo ao layout na janela do navegador dos elementos HTML.

Em termos gerais, existem duas alternativas para o comportamento ao modificar o tamanho da janela do navegador que exibe a página da web que contém o gráfico: (1) manter o tamanho do gráfico SVG deixar espaço em branco se houver excesso ou adicionar barras de rolagem se estiver faltando ou (2) modificar o tamanho do gráfico SVG de maneira rítmica para alterar o tamanho da janela do navegador que exibe a web. Se você escolher a primeira fórmula, poderá prever as magnitudes e desenhar com medidas absolutas, embora corrigidas com base no tamanho escolhido e nos valores do gráfico. Se você escolher a segunda forma, que é a que proponho, as magnitudes são sempre porcentagens dos valores representados. A vantagem do segundo método é a sua adaptabilidade à web e a desvantagem é o desenho dos elementos que acompanham o gráfico, como pontos ou textos.

Para corrigir a deformação que pode ocorrer na espessura das linhas, utiliza-se o efeito. vector-effect="non-scaling-stroke" nas rotas que são necessárias (aquelas que têm um valor de stroke que não seja none). Para os objetos text Não existe efeito comparável, pelo que é necessário deformá-los (juntamente com os que lhes estão associados) no sentido oposto ao produzido pela alteração do tamanho do recipiente.

As transformações em SVG Eles podem ser aplicados a grupos de objetos para que diversos textos e outros objetos de um gráfico possam ser integrados em um único grupo e, de forma mais conveniente, realizar uma transformação para todos eles.

Os elementos que fazem parte de um grupo estão incluídos entre as tags <g> y </g>, para atribuir uma transformação a propriedade é usada transform e uma série de operações que, para o nosso caso, são relevantes scale, para o qual é indicado um fator de ampliação horizontal e vertical. Se o valor de scale for maior que um amplia o eixo correspondente e se for menor que um ocorre uma redução no tamanho dos objetos ao longo desse eixo.

No exemplo anterior, o primeiro e o segundo texto são modificados reduzindo pela metade sua medida horizontal e duplicando a medida vertical pelos valores 0.5 e 2.0 usados ​​em scale(0.5,2.0)

O próximo artigo da série sobre representação de gráficos de dados de sensores conectados à IoT explica como gerar ou modificar gráficos em tempo real usando JavaScript o que permitirá ver uma animação do gráfico ao representar os últimos valores carregados do servidor.

A seguir está um exemplo de como ficariam os gráficos gerados usando esta proposta.