Tegn datagrafer fra sensorer koblet til tingenes internett (IoT) med SVG

I denne artikkelen i serien om som representerer datagrafer i IoT Jeg forklarer hvordan du plotter grafene ved hjelp av SVG-språk. Som ved andre anledninger fungerer artikkelen også som en kort introduksjon til språket.

SVG-format

SVG tilsvarer akronymet for Scalable Vector Graphics (skalerbar vektorgrafikk, på engelsk). Det er en merkespråk som er basert på XML og som tillater, hovedsakelig, å beskrive en tegning ved geometrien som definerer den; i motsetning til matrisemetoden, brukt for eksempel for et fotografi, som ville bruke et rutenett med fargede piksler for å kode det.

inne i en tegning SVG Et bilde (en matrise av piksler) kan også inkluderes, enten med henvisning til et eksternt dokument eller innebygd i selve tegningen. SVG.

Språkversjonen som er gjeldende på tidspunktet for skriving av denne artikkelen er SVG 1.1 selv om definisjonen av versjonen allerede er under utvikling SVG 2. Så mye som mulig vil jeg prøve å lage det som er forklart i innledningen, selv om det viser til SVG 1.1 også tjene til SVG 2.

Hvis tegningen SVG Det er inkludert i et eget dokument og ikke innenfor koden HTML (mitt forslag i denne løsningen om å representere IoT-data legger det inn i koden HTML) må ledes av en referanse XML og en dokumenttypedefinisjon (DTD).

I den første linjen i forrige kode blir versjonen varslet XML brukt (1.0) tegnkoding (UTF-8) og indikerer om du trenger eksterne definisjoner (standalone="no") eller er det et frittstående dokument (standalone="yes"). Den andre linjen uttrykker dokumenttypedefinisjon (DTD), som ikke vil være nødvendig i neste versjon av SVG.

Koden som tegningen er definert med er vedlagt mellom etikettene <sgv> y </sgv> som også indikerer, som allerede nevnt når man snakker om HTML-kode som fungerer som en beholder for datagrafer i IoT, målene, den representerte delen av totalen, andelen og også type og versjon.

Eksemplet ovenfor definerer en tegning 500 piksler bred og 250 piksler høy (500x250 visningsport) som vil bli beskåret med et 460x80 rektangel (460x80 visningsboks) som starter ved koordinatene 20,10 og bruker all tilgjengelig plass i beholderen (et element på en nettside, i vårt tilfelle) uten å respektere den opprinnelige andelen som skal brukes preserveAspectRatio="none". I tillegg kan du nå se det første innholdet i dokumentet, kommentarene som er inkludert blant <!-- y --> som i andre formater basert på XML.

Koordinatsystemet valgt av SVG Den er orientert horisontalt (X-aksen) og vertikalt (Y-aksen) og den positive retningen er vestlig skrift, det vil si at verdiene til X-aksen vokser til høyre og de positive verdiene til Y-aksen vokser nedover.

Definer grafen med SVG

For å definere grafikken til informasjonen som er lagret av sensorene våre koblet til IoT, må vi spesifisere typen objekt som er tegnet, dens geometri (koordinater, dimensjoner...) og utseende (tykkelse, farge...) eksempel på denne artikkelen en linjegraf som kan lages ved å slå sammen linjestykker med objektet line, mest nyttig for å plotte uavhengige elementer, eller med en flersegmentlinje, et objekt path, mer praktisk for serier med tilkoblede linjer.

Med elementet path Målet er å lage en tegning som den på bildet nedenfor, som består av en lukket bane fylt med en lysere farge toppet av øverst med en åpen bane, uten fylling og tegnet med en tykk linje.

For å beskrive en linje brukes et uttrykk av typen:

I hvilke X1,Y1 er koordinatene til det første punktet på linjen og X2,Y2 er koordinatene til det andre. Et attributt ble brukt stroke-width for å definere tykkelsen. Det er flere måter å definere utseendet til objekter på SVG, med sine individuelle egenskaper, som den forrige, eller med egenskapen style som samler dem alle og som er metoden som skal brukes i artikkelforslaget.

Ovennevnte kode blir med på eiendommen style verdiene til stroke (fargen på slaget), stroke-width (tykkelsen på linjen) og stroke-opacity (opasiteten til objektet)

Beskrivelsen av et objekt path har formen

Koden ovenfor bruker operasjonene SVG M, L y Z inne på eiendommen d, som betyr henholdsvis "moveto" (flytte til), "lineto" (linje til) og "closepath" (nær bane). De kan uttrykkes med store eller små bokstaver for å indikere en absolutt eller relativ verdi der det er hensiktsmessig (i tilfelle av Zfor eksempel er irrelevant). Det er mange andre operasjoner som vi for eksempel kan tegne sirkulære kurver med, elliptiske kurver, Bézier-kurver... som vi ikke trenger i dette eksemplet.

Selv om dette forslaget tegner linjegrafer som kan omslutte et område, kan det være nyttig å tegne andre enkle elementer for å markere punkter eller markere områder. Av de som er tilgjengelige i SVG Polygoner (som du også kan tegne fyllingen med), rektangler (mer praktisk for det spesifikke tilfellet), ellipser og sirkler (som et spesielt tilfelle av ellipser) kan være interessante. Syntaksen til disse elementene kan sees i følgende eksempelkode.

Utseendet til den forrige koden ville være som det følgende bildet (med et triks for å kunne gjenbruke punktene fra eksemplet ovenfor)

Poengene til polygonet (polygon) er angitt i eiendommen points som par av x,y-koordinater atskilt med mellomrom mellom dem. For å definere ellipsene (ellipse) egenskaper brukes cx (x-koordinaten til midten), cy (y-koordinaten til sentrum), rx (bredde) og ry (høy). I stedet for to radiusverdier (horisontal og vertikal radius, rx y ry) sirkelen (circle) er definert av en radius med egenskapen r og koordinatene til sentrum med cx y cy. For å definere rektangelet (rectangle) koordinatene til øvre venstre hjørne er indikert (x e y) Bredden (width) og den høye (height)

Til slutt, for å inkludere tekst, brukes objektet text som følger:

Posisjonen til teksten er angitt med x- og y-koordinatene, skrifttypen tilsvarer egenskapen font-family, størrelsen med font-size og fargen med eiendommen fill.

HTML lar deg integrere tegninger SVG som et annet element på siden. Som andre objekter kan du bruke eiendommen ID å tildele dem en unik identifikator som de deretter kan refereres til fra Javascript å manipulere dem. Fra synspunktet til HTML, en gjenstand SVG vil ha følgende form:

Med det vi har sett så langt, ville det være mulig å tegne den typen grunnleggende graf som søkes i dette forslaget, men for å gi fleksibilitet til utseendet til beholderen (nettsiden), vil andelen av grafen bli påvirket (for eksempel preserveAspectRatio="none") ved å endre størrelsen for å tilpasse den til oppsettet i nettleservinduet til elementene HTML.

Grovt sett er det to alternativer til oppførselen når du endrer størrelsen på nettleservinduet som viser diagrammets nettside: (1) opprettholde størrelsen på diagrammet SVG la det være tomt hvis det er overflødig eller legge til rullefelt hvis det mangler eller (2) endre størrelsen på grafen SVG på en rytmisk måte for å endre størrelsen på nettleservinduet som viser nettet. Hvis du velger den første formelen, kan du forutsi størrelsene og tegne med absolutte mål, men korrigert basert på den valgte størrelsen og verdiene til grafen. Hvis du velger den andre måten, som er den jeg foreslår, er størrelsene alltid prosenter av verdiene som er representert. Fordelen med den andre metoden er dens tilpasningsevne til nettet, og ulempen er tegningen av elementene som følger med grafen, for eksempel punkter eller tekster.

For å korrigere deformasjonen som kan oppstå i tykkelsen på linjene, brukes effekten. vector-effect="non-scaling-stroke" på rutene som er nødvendige (de som har en verdi på stroke annet enn none). For gjenstandene text Det er ingen sammenlignbar effekt, så det er nødvendig å deformere dem (sammen med de som er knyttet til dem) i motsatt retning av den som produseres av endringen i beholderstørrelse.

Transformasjonene i SVG De kan brukes på grupper av objekter slik at flere tekster og andre objekter i en grafikk kan integreres i en enkelt gruppe og, mer praktisk, utføre en transformasjon for dem alle.

Elementer som er en del av en gruppe er inkludert blant taggene <g> y </g>, for å tilordne en transformasjon brukes egenskapen transform og en rekke operasjoner som for vårt tilfelle er relevante scale, som en horisontal og vertikal forstørrelsesfaktor er indikert til. Hvis verdien av scale er større enn én utvider den tilsvarende aksen, og hvis den er mindre enn én, oppstår en reduksjon i størrelsen på objekter langs den aksen.

I det forrige eksemplet blir den første og andre teksten modifisert ved å halvere deres horisontale størrelse og doble den vertikale størrelsen med verdiene 0.5 og 2.0 brukt i scale(0.5,2.0)

Den neste artikkelen i serien om representasjon av datagrafer fra sensorer koblet til IoT forklarer hvordan du genererer eller endrer grafer i sanntid ved hjelp av Javascript som lar deg se en animasjon av grafen når du representerer de siste verdiene lastet fra serveren.

Følgende er et eksempel på hvordan grafene som er generert ved hjelp av dette forslaget, vil se ut.