Rita datagrafer från sensorer anslutna till Internet of Things (IoT) med SVG

I den här artikeln i serien om representerar datagrafer i IoT Jag förklarar hur man ritar graferna med hjälp av SVG-språk. Liksom vid andra tillfällen fungerar artikeln också som en kort introduktion till språket.

SVG-format

SVG motsvarar akronymen för Scalable Vector Graphics (skalbar vektorgrafik, på engelska). Det är en markeringsspråk som bygger på XML och som huvudsakligen tillåter att beskriva en ritning med den geometri som definierar den; i motsats till matrismetoden, använd till exempel för ett fotografi, som skulle använda ett rutnät av färgade pixlar för att koda det.

inuti en ritning SVG En bild (en matris av pixlar) kan också inkluderas, antingen hänvisande till ett externt dokument eller inbäddad i själva ritningen. SVG.

Språkversionen som är aktuell när denna artikel skrivs är SVG 1.1 även om definitionen av versionen redan håller på att utvecklas SVG 2. Så mycket som möjligt ska jag försöka göra det som förklaras i inledningen, även om det hänvisar till SVG 1.1 även tjäna till SVG 2.

Om ritningen SVG Det ingår i ett separat dokument och inte i koden html (mitt förslag i den här lösningen att representera IoT-data bäddar in det i koden html) måste ha en referens XML och en dokumenttypsdefinition (DTD).

I den första raden i föregående kod meddelas versionen XML använd (1.0) teckenkodning (UTF-8) och anger om du behöver externa definitioner (standalone="no") eller är det ett fristående dokument (standalone="yes"). Den andra raden uttrycker dokumenttypsdefinition (DTD), som inte kommer att behövas i nästa version av SVG.

Koden med vilken ritningen definieras är omsluten mellan etiketterna <sgv> y </sgv> som också indikerar, som redan nämnts när man talar om HTML-kod som fungerar som en behållare för datagrafer i IoT, måtten, den representerade delen av totalen, andelen och även typ och version.

Exemplet ovan definierar en ritning 500 pixlar bred och 250 pixlar hög (500x250 viewport) som kommer att beskäras med en 460x80 rektangel (460x80 viewbox) som börjar vid koordinaterna 20,10 och använder allt tillgängligt utrymme i behållaren (ett element på en webbsida, i vårt fall) utan att respektera den ursprungliga proportionen att använda preserveAspectRatio="none". Dessutom kan du nu se det första innehållet i dokumentet, de kommentarer som ingår bland <!-- y --> som i andra format baserat på XML.

Koordinatsystemet valt av SVG Den är orienterad horisontellt (X-axeln) och vertikalt (Y-axeln) och den positiva riktningen är västerländsk skrift, det vill säga värdena på X-axeln växer till höger och de positiva värdena på Y-axeln växer nedåt.

Definiera grafen med SVG

I exempel på denna artikel ett linjediagram som kan göras genom att sammanfoga linjesegment med objektet line, mest användbart för att plotta oberoende element, eller med en linje med flera segment, ett objekt path, mer praktiskt för serier av anslutna linjer.

Med elementet path Syftet är att göra en ritning som den på bilden nedan, som är uppbyggd av en sluten bana fylld med en ljusare färg toppad upptill av en öppen bana, utan fyllning och ritad med en tjock linje.

För att beskriva en linje används ett uttryck av typen:

I vilka X1,Y1 är koordinaterna för den första punkten på linjen och X2,Y2 är koordinaterna för den andra. Ett attribut användes stroke-width för att definiera tjockleken. Det finns flera sätt att definiera utseendet på objekt SVG, med dess individuella egenskaper, som den föregående, eller med egenskapen style som samlar dem alla och som är den metod som kommer att användas i artikelförslaget.

Ovanstående kod ansluter till fastigheten style värdena för stroke (färgen på slaget), stroke-width (linjens tjocklek) och stroke-opacity (objektets opacitet)

Beskrivningen av ett objekt path har formen

Ovanstående kod använder operationerna SVG M, L y Z inne i fastigheten d, som betyder "moveto" (flytta till), "lineto" (linje till) respektive "closepath" (stäng väg). De kan uttryckas med stora eller små bokstäver för att indikera ett absolut eller relativt värde där så är lämpligt (i fallet med Zt.ex. är irrelevant). Det finns många andra operationer med vilka vi till exempel kan rita cirkulära kurvor, elliptiska kurvor, Bézier-kurvor... som vi inte kommer att behöva i det här exemplet.

Även om detta förslag ritar linjediagram som kan omsluta ett område, kan det vara användbart att rita andra enkla element för att markera punkter eller markera områden. Av de som finns i SVG Polygoner (med vilka du också kan rita fyllningen), rektanglar (bekvämt för det specifika fallet), ellipser och cirklar (som ett särskilt fall av ellipser) kan vara intressanta. Syntaxen för dessa element kan ses i följande exempelkod.

Utseendet på den tidigare koden skulle se ut som följande bild (med något knep för att kunna återanvända punkterna från exemplet ovan)

Polygonens punkter (polygon) anges i fastigheten points som par av x,y-koordinater åtskilda av mellanrum mellan dem. För att definiera ellipserna (ellipse) egenskaper används cx (x-koordinaten för mitten), cy (y-koordinat för mitten), rx (bredd) och ry (hög). Istället för två radievärden (horisontell och vertikal radie, rx y ry) cirkeln (circle) definieras av en radie med egenskapen r och koordinaterna för centrum med cx y cy. För att definiera rektangeln (rectangle) koordinaterna för det övre vänstra hörnet anges (x e y) Bredden (width) och den långa (height)

Slutligen, för att inkludera text, används objektet text som följer:

Textens position anges med x- och y-koordinaterna, typsnittet motsvarar egenskapen font-family, storleken med font-size och färgen med fastigheten fill.

html låter dig integrera ritningar SVG som ett annat element på sidan. Precis som andra objekt kan du använda fastigheten ID att tilldela dem en unik identifierare med vilken de sedan kan hänvisas till JavaScript att manipulera dem. Ur synvinkel html, ett objekt SVG skulle ha följande form:

Med vad vi har sett hittills skulle det vara möjligt att rita den typ av grundläggande graf som eftersträvas i detta förslag, men för att ge flexibilitet åt utseendet på behållaren (webbsidan) kommer andelen av grafen att påverkas (till exempel preserveAspectRatio="none") genom att ändra dess storlek för att anpassa den till layouten i webbläsarfönstret för elementen html.

I stort sett finns det två alternativ till beteendet när du ändrar storleken på webbläsarfönstret som visar diagrammets webbsida: (1) bibehåll diagrammets storlek SVG lämna tomt utrymme om det finns överskott eller lägga till rullningslister om det saknas eller (2) ändra storleken på grafen SVG på ett rytmiskt sätt för att ändra storleken på webbläsarfönstret som visar webben. Om du väljer den första formeln kan du förutsäga storleken och rita med absoluta mått, även om det korrigeras baserat på den valda storleken och grafens värden. Om du väljer det andra sättet, vilket är det jag föreslår, är storleken alltid procentsatser av de representerade värdena. Fördelen med den andra metoden är dess anpassningsförmåga till nätet och nackdelen är ritningen av de element som följer med grafen, såsom punkter eller texter.

För att korrigera den deformation som kan uppstå i linjernas tjocklek används effekten. vector-effect="non-scaling-stroke" på de rutter som är nödvändiga (de som har ett värde av stroke Förutom none). För föremålen text Det finns ingen jämförbar effekt, så det är nödvändigt att deformera dem (tillsammans med de som är förknippade med dem) i motsatt riktning mot den som produceras av förändringen i behållarstorleken.

Förvandlingarna i SVG De kan appliceras på grupper av objekt så att flera texter och andra objekt i en grafik kan integreras i en enda grupp och, mer bekvämt, utföra en transformation för dem alla.

Element som ingår i en grupp ingår bland taggarna <g> y </g>, för att tilldela en transformation används egenskapen transform och en serie operationer som, för vårt fall, är relevanta scale, till vilken en horisontell och vertikal förstoringsfaktor indikeras. Om värdet av scale är större än en vidgar motsvarande axel och om den är mindre än en uppstår en minskning av storleken på objekt längs den axeln.

I det föregående exemplet modifieras den första och andra texten genom att halvera deras horisontella mått och dubbla det vertikala måttet med värdena 0.5 och 2.0 som används i scale(0.5,2.0)

Nästa artikel i serien om representation av datagrafer från sensorer anslutna till IoT förklarar hur man genererar eller modifierar grafer i realtid med hjälp av JavaScript vilket gör att du kan se en animering av grafen när du representerar de senaste värdena som laddats från servern.

Följande är ett exempel på hur de grafer som genereras med detta förslag skulle se ut.