Disegna grafici di dati da sensori connessi all'Internet delle cose (IoT) con SVG

In questo articolo della serie su rappresentare grafici di dati nell'IoT Spiego come tracciare i grafici utilizzando il file Linguaggio SVG. Come in altre occasioni, l’articolo serve anche come breve introduzione alla lingua.

Formato SVG

SVG corrisponde all'acronimo di Scalable Vector Graphics (grafica vettoriale scalabile, in inglese). È un linguaggio con marcatori che si basa su XML e che permette, principalmente, di descrivere un disegno attraverso la geometria che lo definisce; al contrario del metodo a matrice, utilizzato ad esempio per una fotografia, che utilizzerebbe una griglia di pixel colorati per codificarla.

all'interno di un disegno SVG Può essere inclusa anche un'immagine (una matrice di pixel), riferita ad un documento esterno oppure incorporata all'interno del disegno stesso. SVG.

La versione linguistica corrente al momento della stesura di questo articolo è la SVG1.1 anche se la definizione della versione è già in fase di sviluppo SVG2. Per quanto possibile, cercherò di rendere quanto spiegato nell'introduzione, anche se fa riferimento SVG1.1 servire anche per SVG2.

Se il disegno SVG È incluso in un documento separato e non all'interno del codice HTML (la mia proposta in questa soluzione per rappresentare i dati IoT lo incorpora nel codice HTML) deve essere preceduto da un riferimento XML e definizione del tipo di documento (DTD).

Nella prima riga del codice precedente viene notificata la versione XML codifica dei caratteri utilizzata (1.0) (UTF-8) e indica se sono necessarie definizioni esterne (standalone="no") o è un documento autonomo (standalone="yes"). La seconda riga esprime il definizione del tipo di documento (DTD), che non sarà necessario nella prossima versione di SVG.

Tra le etichette è racchiuso il codice con cui viene definito il disegno <sgv> y </sgv> che indicano anche, come già accennato quando si parla Codice HTML che funge da contenitore per i grafici dei dati nell'IoT, le misure, la parte del totale rappresentata, la proporzione e anche il tipo e la versione.

L'esempio sopra definisce un disegno di 500 pixel di larghezza per 250 pixel di altezza (viewport 500x250) che verrà ritagliato con un rettangolo 460x80 (viewbox 460x80) a partire dalle coordinate 20,10 utilizzando tutto lo spazio disponibile nel contenitore (un elemento su una pagina web, in nostro caso) senza rispettare la proporzione originaria da utilizzare preserveAspectRatio="none". Inoltre, ora puoi vedere il primo contenuto del documento, i commenti inclusi <!-- y --> come in altri formati basati su XML.

Il sistema di coordinate scelto da SVG È orientato orizzontalmente (asse X) e verticalmente (asse Y) e il verso positivo è quello della scrittura occidentale, cioè i valori dell'asse X crescono verso destra e i valori positivi dell'asse Y crescono verso il basso.

Definisci il grafico con SVG

Per definire la grafica delle informazioni immagazzinate dai nostri sensori connessi all'IoT dovremo specificare il tipo di oggetto che viene disegnato, la sua geometria (coordinate, dimensioni...) e il suo aspetto (spessore, colore...) esempio di questo articolo un grafico a linee che può essere realizzato unendo segmenti di linea con l'oggetto line, particolarmente utile per tracciare elementi indipendenti o, con una linea multisegmento, un oggetto path, più pratico per serie di linee collegate.

con l'elemento path Lo scopo è quello di realizzare un disegno come quello nell'immagine qui sotto, che è formato da un tracciato chiuso riempito con un colore più chiaro sormontato in alto da un tracciato aperto, senza riempimento e disegnato con una linea spessa.

Per descrivere una linea si utilizza un'espressione del tipo:

Dove X1,Y1 sono le coordinate del primo punto della retta e X2,Y2 sono le coordinate del secondo. È stato utilizzato un attributo stroke-width per definire lo spessore. Esistono diversi modi per definire l'aspetto degli oggetti SVG, con le sue singole proprietà, come il precedente, oppure con la proprietà style che li accomuna tutti e che è il metodo che verrà utilizzato nella proposta di articolo.

Il codice sopra riportato si unisce alla proprietà style i valori di stroke (il colore del tratto), stroke-width (lo spessore della linea) e stroke-opacity (l'opacità dell'oggetto)

La descrizione di un oggetto path ha la forma

Il codice precedente utilizza le operazioni SVG M, L y Z all'interno della proprietà d, che significano, rispettivamente, “moveto” (spostarsi a), “lineto” (linea a) e “closepath” (chiudere percorso). Possono essere espressi in maiuscolo o minuscolo per indicare eventualmente un valore assoluto o relativo (nel caso di Z, ad esempio, è irrilevante). Esistono molte altre operazioni con cui, ad esempio, possiamo disegnare curve circolari, curve ellittiche, curve di Bézier... di cui non avremo bisogno in questo esempio.

Anche se questa proposta disegna grafici a linee che possono racchiudere un'area, può essere utile disegnare altri semplici elementi per contrassegnare punti o evidenziare aree. Di quelli disponibili in SVG Possono essere interessanti i poligoni (con cui si può disegnare anche il riempimento), i rettangoli (più comodi nel caso specifico), le ellissi ed i cerchi (come caso particolare delle ellissi). La sintassi di questi elementi può essere vista nel seguente codice di esempio.

L'aspetto del codice precedente sarebbe come l'immagine seguente (con qualche trucco per poter riutilizzare i punti dell'esempio sopra)

I punti del poligono (polygon) sono indicati nella proprietà points come coppie di coordinate x,y separate da spazi tra loro. Per definire le ellissi (ellipse) vengono utilizzate le proprietà cx (coordinata x del centro), cy (coordinata y del centro), rx (larghezza) e ry (alto). Invece di due valori di raggio (raggio orizzontale e verticale, rx y ry) il cerchio (circle) è definito da un raggio con la proprietà r e le coordinate del centro con cx y cy. Per definire il rettangolo (rectangle) sono indicate le coordinate dell'angolo in alto a sinistra (x e y) La larghezza (width) e quello alto (height)

Infine, per includere il testo, viene utilizzato l'oggetto text come segue:

La posizione del testo è indicata con le coordinate xey, il font corrisponde alla proprietà font-family, la dimensione con font-size e il colore con la proprietà fill.

HTML consente di integrare i disegni SVG come un altro elemento della pagina. Come altri oggetti, puoi utilizzare la proprietà ID per assegnare loro un identificatore univoco con cui poter poi fare riferimento JavaScript per manipolarli. Dal punto di vista di HTML, un oggetto SVG avrebbe la seguente forma:

Con quanto visto finora sarebbe possibile tracciare la tipologia di grafico base ricercata in questa proposta ma, per dare flessibilità all'aspetto del contenitore (la pagina web), la proporzione del grafico verrà modificata (Per esempio preserveAspectRatio="none") modificandone le dimensioni per adattarlo alla disposizione nella finestra del browser degli elementi HTML.

In generale, ci sono due alternative al comportamento quando si modifica la dimensione della finestra del browser che visualizza la pagina web contenente il grafico: (1) mantenere la dimensione del grafico SVG lasciando uno spazio vuoto se è in eccesso o aggiungendo barre di scorrimento se manca oppure (2) modificare la dimensione del grafico SVG in modo ritmico per modificare la dimensione della finestra del browser che visualizza il web. Se si sceglie la prima formula è possibile prevedere le magnitudini e disegnare con misure assolute, anche se corrette in base alla grandezza scelta e ai valori del grafico. Se si sceglie la seconda strada, che è quella che propongo, le grandezze sono sempre percentuali dei valori rappresentati. Il vantaggio del secondo metodo è la sua adattabilità al web mentre lo svantaggio è il disegno degli elementi che accompagnano il grafico, come punti o testi.

Per correggere la deformazione che potrebbe verificarsi nello spessore delle linee, viene utilizzato l'effetto. vector-effect="non-scaling-stroke" sui percorsi che sono necessari (quelli che hanno un valore di stroke non lo è none). Per gli oggetti text Non esiste un effetto paragonabile, quindi è necessario deformarli (insieme a quelli ad essi associati) nella direzione opposta a quella prodotta dal cambiamento delle dimensioni del contenitore.

Le trasformazioni in SVG Possono essere applicati a gruppi di oggetti in modo che più testi e altri oggetti di un grafico possano essere integrati in un unico gruppo e, più convenientemente, eseguire una trasformazione per tutti loro.

Tra i tag vengono inclusi gli elementi che fanno parte di un gruppo <g> y </g>, per assegnare una trasformazione viene utilizzata la proprietà transform e una serie di operazioni che, nel nostro caso, sono rilevanti scale, a cui è indicato un fattore di ingrandimento orizzontale e verticale. Se il valore di scale è maggiore di uno allarga l'asse corrispondente e se è minore di uno si verifica una riduzione delle dimensioni degli oggetti lungo quell'asse.

Nell'esempio precedente, il primo e il secondo testo vengono modificati dimezzando la loro misura orizzontale e raddoppiando la misura verticale dei valori 0.5 e 2.0 utilizzati in scale(0.5,2.0)

Il prossimo articolo della serie su rappresentazione di grafici di dati provenienti da sensori collegati all'IoT spiega come generare o modificare grafici in tempo reale utilizzando JavaScript che ti permetterà di vedere un'animazione del grafico quando rappresentano gli ultimi valori caricati dal server.

Quello che segue è un esempio di come apparirebbero i grafici generati utilizzando questa proposta.