Statusgrafer for sensorer koblet til tingenes internett IoT

En av fordelene med å koble et sensornettverk til tingenes internett er å kunne analysere innhentede data. Ved å representere denne informasjonen grafisk kan en person (i motsetning til et program) mer intuitivt forstå betydningen av de overvåkede mengdene, for eksempel ved å sammenligne dem med hverandre eller følge utviklingen deres over tid.

Denne artikkelen starter en serie, som består av fire deler, som forklarer et enkelt forslag for grafisk representasjon av data innhentet av sensorer koblet til IoT. Med samme filosofi som i andre artikler, er den foreslåtte metoden perfekt funksjonell, selv om hovedmålet er didaktisk. Som den tekniske profilen til publikum som blogg polaridad.es, og denne teksten handler om elektronikk og ikke webutvikling, hver av seksjonene fungerer som en introduksjon til språkene eller teknologien som brukes: HTML, CSS, SVG y Javascript.

Artiklene i forrige serie om hvordan lagre data innhentet av enheter koblet til tingenes internett (IoT) De avsluttet med å forklare hvordan man får tilgang til informasjonen som er lagret i databasene. I eksemplene i serien, for å gjøre prosessen enklere, ble en webserver brukt som mellomledd som var ansvarlig for å motta dataene gjennom POST-forespørsler til HTTP-protokollen, lagre dem i en database og vise dem på en nettside.

Selv om hovedulempen med dette systemet er ytelsen (som kan lindres med alternativer som Node.js og MongoDB, som vil bli forklart i fremtidige artikler), gir det i bytte to store fordeler: implementeringen er veldig enkel (inkludert tilgjengeligheten av tjenester offentlige) og kan vise dataene i en nettleser, det vil si at den ikke trenger spesifikke applikasjoner (for eksempel en app for en mobilenhet) for å presentere den lagrede informasjonen som vil representere den historiske statusen til enheter koblet til Internett. Tingene.

Ved å utnytte fordelen ved å enkelt kunne presentere informasjonen som er lagret med dette systemet om statusen til enheter koblet til IoT på en nettside, forklarer denne artikkelen hvordan du grafisk viser denne informasjonen ved hjelp av formatet SVG fra Javascript for å dynamisk generere en nettside i HTML.

Det er mange bokhandlere Javascript for å løse den grafiske presentasjonen av data. Disse artiklene har ikke til hensikt å utvikle en annen; Hensikten med denne teksten er å forstå prosessen og kunne utvikle egne implementeringer; et didaktisk mål så vel som et produktivt. Hvis du er interessert i å bruke et produkt i stedet for å utvikle det selv, anbefaler jeg at du tar en titt på noen av de utmerkede bibliotekene for å generere grafikk med Javascript med gratis lisenser som Charts.js, Highcharts, Google diagramverktøy, Epoch, Raphael, Grafico (basert på Raphael), dc.js, Chartist.js, D3.js (min anbefaling), C3.js (basert på D3.js), NVD3 (gjenbrukbar grafikk for D3.js) ...

HTML-dokumentstruktur med SVG-grafikk

I denne artikkelens forslag om å presentere sensordata grafisk, består nettsiden som den vises på av:

• dokumentet som fungerer som en beholder er skrevet inn HTML,
• utseendet til siden er definert med kode CSS,
• tegningen av grafen gjøres ved bruk av språket SVG y
• Lesing av data fra serveren og visning av grafer er programmert inn Javascript

Alle elementer, spesielt koden HTML av siden, kan genereres på serveren med PHP som forklart i artikkelen om PHP programmeringsspråk fra serien om datalagring fra enheter koblet til tingenes internett.

Koden CSS y Javascript kan lastes (importeres) i kode HTML i stedet for å skrives direkte som en del av dokumentet HTML. Dette har fordelen av å kunne gjenbruke de samme dokumentene på flere sider og å kunne redigere dem mer komfortabelt; men kanskje ulempen med å ta litt lengre tid å laste avhengig av om du kan bruke koden i hurtigbufferen (lastet i tidligere bruk) eller til og med en CDN. I produksjonsfasen er det trivielt å integrere all koden fra PHP, og generere et enkelt dokument i HTML med all informasjon hvis du velger dette alternativet. Gjennom hele denne artikkelserien vurderes det for klarhetens skyld at vi jobber med separate dokumenter.

For de formål som interesserer oss, for å bruke den som en grafikkbeholder, og veldig grovt sett, innholdet i det første nivået av strukturen til et dokument HTML ville:

Den første linjen tjener til å indikere for nettleseren at dokumentet den leser er skrevet i HTML, spesielt i versjon 5 (kjent som HTML5). Tidligere versjoner av HTML, basert på SGML (Standard Generalized Markup Language), inkluderte en dokumenttypedefinisjon (DTD) der typen regler som ble brukt på språket for å beskrive dokumentet ble erklært.

Den andre og siste linjen inneholder koden HTML blant direktivene <html> y </html> som fungerer som henholdsvis åpning og lukking. Direktivene HTML De omslutter navnet og attributtene mellom tegnene "mindre enn" og "større enn" og danner en slags "akutt parentes"-tegn. Elementene HTML som omslutter innhold har et avsluttende direktiv som inkluderer skråstreken foran navnet som i </html>.

Egenskapene eller attributtene til elementer er atskilt med mellomrom fra navnet og fra hverandre og uttrykkes som ren tekst eller, oftere, som tekst (navnet på egenskapen) etterfulgt av et likhetstegn og en verdi omgitt av anførselstegn. Når det gjelder kodeåpningsdirektivet HTML eiendom har blitt brukt lang med motet es, lang="es" for å indikere at teksten i dokumentet HTML bruker det spanske språket.

En kommentar er inkludert etter åpningsdirektivet til HTML-koden. Kommentarene i HTML De kan oppta flere linjer og bruke koden som åpningstegn <!-- og som en avslutning -->

Koden HTML Den består av to blokker: overskriften <head> og kroppen <body>. Den første har som mål å informere om selve dokumentet, inkludert informasjon om det (metainformasjon), og den andre er å støtte innholdet i dokumentet.

I direktivet <body> et arrangement er inkludert onload for automatisk å utføre en funksjon Javascript når innholdet er lastet inn. Denne ressursen lar deg starte kjøringen av koden som skal definere de grafiske objektene og oppdatere dem etter hvert som informasjon lastes inn fra serveren om tilstanden til sensorene som representerer denne grafikken.

Av all metainformasjon som kan inkluderes i overskriften på dokumentet HTML, vi er spesielt interessert i å kjenne til den som beskrives av følgende direktiver:

• <title> som tjener til å gi en tittel til dokumentet. Det vil normalt vises i nettleservinduet eller på den tilsvarende fanen og vil hjelpe oss med å identifisere grafikken den inneholder.
• <charset> erklærer tegnsettet som brukes til å kode dokumentet. Det er spesielt viktig for "spesielle" tegn som eñes eller aksenter.
• <link> gjør det mulig å etablere et forhold mellom dokumentet HTML nåværende og andre eksterne. Det vil hjelpe oss med å laste stilarket i format CSS med utseendet til dokumentet.
• <script> inneholder et skript med kjørbar kode. Ved å bruke dette direktivet vil vi laste inn funksjonene Javascript for å generere eller endre grafikk SVG.

Som man kan se i eksempelet på HTML ovenfor, navnet (og banen, hvis aktuelt) til dokumentet med stilen CSS er angitt med attributtet href, mens det gjelder koden Javascript den er brukt src. Begge deler eierskap type med motet text/css y text/javascript henholdsvis.

Med hensyn til innholdet i dokumentet, den delen som tilsvarer elementet <body>, HTML5 Den lar deg lage spesifikke strukturer for de mest hyppige komponentene på en nettside som en bunntekst, en sidedel eller en navigasjonslinje, men det som interesserer oss er å bruke dokumentet som en grafikkbeholder. SVG er elementene <div> som fungerer som uavhengige blokker som gjør det mulig å definere en hierarkisk struktur ved å neste noen <div> i andre.

I forrige eksempel er et element brukt <div> som inneholder to andre. Dette eksemplet introduserer to svært viktige egenskaper for bruken vi ønsker å gjøre av koden. HTML: id som brukes til å tilordne en unik identifikator til et element HTML (a <div>, i dette tilfellet) og class som det er tildelt en kategori som vi vil bruke for å etablere utseendet. Kategorien, klassen, trenger ikke å være unik, faktisk ligger mye av effektiviteten i flere elementer som deler samme aspekt.

Elementet (eller taggen) <p> tjener til å definere et avsnitt som normalt vil inneholde tekst (men i HTML det er ingen begrensning i denne forbindelse). For å lage grupperinger innenfor et avsnitt (eller en <div>, det er heller ingen begrensninger) taggen brukes <span>. Med dette elementet er det for eksempel mulig å inkludere tekst i et avsnitt for å gi det et annet utseende som understreket eller fet.

Definisjonen av de grafiske egenskapene og generelt atferden som er forbundet med et element HTML Attribusjon av en klasse gjøres i koden CSS; i tilfellet med forrige eksempel i dokumentet aspecto.css.

For å optimalisere tildelingen av egenskaper CSS det er mulig at det samme elementet HTML tilhører flere klasser og har dermed utseendet eller oppførselen definert av dem. For å lage denne oppgaven, skriv navnene på de forskjellige klassene, og separer dem med komma til høyre for eiendommen. class

I forrige eksempel, elementet <div> som er identifisert som primer_hijo Tre klasser er tildelt: aspecto_de_hijo, aspecto_raro y tipografia_grande, som sammen skal definere utseendet og oppførselen til elementet. Som forklart i den følgende artikkelen om Definere IoT Sensor Graphics Web Appearance med CSS, når du bruker flere klasser, hvis noen av egenskapene som definerer aspektet er definert i begge, gjelder den sist refererte.

Som har blitt sett, elementene <div> De kan inneholde andre elementer, inkludert andre <div>. En enklere sak ville vært <div> som inneholdt tekst. Utseendet som definerer stilen CSS vil også påvirke teksten i elementet.

For å optimalisere tildelingen av egenskaper CSS det er mulig at det samme elementet HTML tilhører flere klasser og har dermed utseendet eller oppførselen definert av dem. For å lage denne oppgaven, skriv navnene på de forskjellige klassene, og separer dem med komma til høyre for eiendommen. class

I det forrige eksemplet, de tre klassene knyttet til <div> primer_hijo De vil definere utseendet til elementet og teksten som inneholder det, for eksempel gjøre fonten det er skrevet i stor (hvis formålet som er angitt med navnet i den siste klassen er sant)

Siden versjon 5 (HTML5) er det mulig å inkludere grafikkkoden i format SVG i selve koden HTML som ett element til. Fra et kodesynspunkt HTML, innholdet SVG det er et element <svg> som inneholder de forskjellige grafiske elementene (linjer, sirkler, rektangler...

Selv om det har blitt sagt at de grafiske egenskapene til elementene HTML er definert i en stil CSS og er knyttet til det gjennom en klasse, er det også mulig å tilordne noen av dem direkte til elementene på to måter. På den ene siden kan du bruke eiendommen style og tilordne de forskjellige grafiske egenskapene til objektet som dets verdi. Logisk sett er det å foretrekke å bruke den nevnte teknikken for å tilordne aspektet til en klasse, men med denne muligheten kan du legge til en liten korreksjon til et element (et veldig spesielt unntak) uten å måtte opprette en ny klasse.

På den annen side, noen elementer HTML De lar deg bruke spesifikke egenskaper som definerer utseendet deres. Generelt, selv om disse egenskapene eksisterer, er det å foretrekke å bruke klasser, men dessverre er det ikke alle elementer som tilbyr dette alternativet, noen forventer at en viss verdi indikeres direkte med de spesifikke egenskapene i stedet for å referere til den tilknyttede klassen. Et av elementene som har denne typen oppførsel er nettopp koden SVG, som vi må tilordne prosentverdien av bredden og høyden i egenskapene width y height, henholdsvis i stedet for klassen.

Som vil bli sett mer detaljert i artikkel som snakker om SVG-kode, for å bruke den enkle metoden som er foreslått, er det tilrådelig å vurdere dimensjonene til grafen som prosenter. Når det gjelder den totale størrelsen på objektet, ved å angi 100 % i bredde- og høydeverdien, vil det være beholderen som setter de endelige dimensjonene (den <div> med id="dibujo", i forrige eksempel)

Når det gjelder de forskjellige komponentene i grafen SVG (linjer, sirkler, rektangler...), er inkludert i et område som måler 100×100 (en hvilken som helst enhet) og utvider seg i en rektangulær form uten å bevare proporsjonen. Eiendommene viewBox y preserveAspectRatio av elementet SVG De er ansvarlige for å etablere disse verdiene. i det første tilfellet med et rektangulært syn som går fra koordinatpunktet (0,0) til koordinatpunktet (100,100) og uttrykkes som "0 0 100 100" og i den andre med verdien none.

Med alt det ovennevnte kan du nå definere en komplett kode som vil fungere som en grafikkbeholder. SVG generert eller modifisert fra Javascript. Eksemplet nedenfor inneholder fire grafikkblokker som bruker formatet HTML av representasjonsforslaget som vi skal bruke.

Nedenfor kan du se hvordan den forrige koden ville se ut, formatert med stilen CSS tilsvarende, generere med Javascript grafikken SVG med serveravlesninger av data lagret av sensorer koblet til IoT. Bortsett fra at dataene ikke lastes fra serveren, men genereres tilfeldig i klienten (din nettleser), er resten av koden det som skal brukes i forslaget som er definert i denne artikkelserien.

Den neste artikkelen i denne serien forklarer hvordan definere CSS-stiler for å gi utseende til HTML-koden som fungerer som en beholder for grafikken SVG som skal representere tilstanden til sensorene koblet til tingenes internett (IoT).