Statusdiagram över sensorer anslutna till Internet of Things IoT

En av fördelarna med att ansluta ett sensornätverk till Internet of Things är att kunna analysera den data som erhålls. Genom att grafiskt representera denna information kan en person (i motsats till ett program) mer intuitivt förstå innebörden av de övervakade storheterna, till exempel genom att jämföra dem med varandra eller följa deras utveckling över tid.

Den här artikeln inleder en serie, som består av fyra delar, som förklarar ett enkelt förslag för grafisk representation av data som erhålls av sensorer anslutna till IoT. Med samma filosofi som i andra artiklar är den föreslagna metoden perfekt funktionell även om huvudsyftet är didaktiskt. Som den tekniska profilen för allmänheten till vilken blogg polaridad.es, och den här texten handlar om elektronik och inte webbutveckling, var och en av avsnitten fungerar som en introduktion till språken eller tekniken som används: html, CSS, SVG y JavaScript.

Artiklarna i föregående serie om hur man lagrar data som erhållits av enheter anslutna till Internet of Things (IoT) De avslutade med att förklara hur man kommer åt informationen som lagras i databaserna. I exemplen i serien, för att underlätta processen, användes en webbserver som mellanhand som ansvarade för att ta emot data via POST-förfrågningar av HTTP-protokollet, lagra dem i en databas och visa dem på en webbsida.

Även om den största nackdelen med detta system är prestanda (som skulle kunna lindras med alternativ som Node.js och MongoDB, som kommer att förklaras i framtida artiklar), ger det i utbyte två stora fördelar: dess implementering är mycket enkel (inklusive tillgängligheten offentliga tjänster) och kan visa data i en webbläsare, det vill säga att den inte behöver specifika applikationer (som en app för en mobil enhet) för att presentera den lagrade informationen som skulle representera den historiska statusen för enheter som är anslutna till Internet. Saker.

Utnyttja fördelen med att enkelt kunna presentera på en webbsida informationen som har lagrats med detta system om status för enheter anslutna till IoT, förklarar den här artikeln hur man grafiskt visar denna information med formatet SVG från JavaScript för att dynamiskt generera en webbsida i html.

Det finns många bokhandlar JavaScript för att lösa den grafiska presentationen av data. Dessa artiklar har inte för avsikt att utveckla ytterligare en; Syftet med denna text är att förstå processen och kunna utveckla dina egna implementeringar; ett didaktiskt mål såväl som ett produktivt. Om du är intresserad av att använda en produkt istället för att utveckla den själv rekommenderar jag att du tar en titt på några av de utmärkta biblioteken för att skapa grafik med JavaScript med gratis licenser som Charts.js, Highcharts, Googles diagramverktyg, Epok, Raphaël, Grafico (baserat på Raphaël), dc.js, Chartist.js, d3.js (min rekommendation), C3.js (baserat på d3.js), NVD3 (återanvändbar grafik för d3.js) ...

HTML-dokumentstruktur med SVG-grafik

I denna artikels förslag att grafiskt presentera sensordata består webbsidan på vilken den visas av:

• dokumentet som fungerar som en behållare skrivs in html,
• sidans utseende definieras med kod CSS,
• ritningen av grafen görs med hjälp av språket SVG y
• Läsa data från servern och visa grafer programmeras in JavaScript

Alla element, speciellt koden html på sidan, kan genereras på servern med PHP som förklaras i artikeln om PHP programmeringsspråk från serien om datalagring från enheter anslutna till Internet of Things.

Koden CSS y JavaScript kan laddas (importeras) i kod html istället för att skrivas direkt som en del av dokumentet html. Detta har fördelen av att kunna återanvända samma dokument på flera sidor och att kunna redigera dem mer bekvämt; men kanske besväret med att det tar lite längre tid att ladda beroende på om du kan använda koden som finns i cachen (laddad vid tidigare användning) eller till och med en CDN. I produktionsfasen är det trivialt att integrera all kod från PHP och generera ett enda dokument i html med all information om du väljer detta alternativ. Genom hela denna artikelserie anses det för tydlighetens skull att vi arbetar med separata dokument.

För de syften som intresserar oss, för att använda den som en grafisk behållare, och mycket grovt, innehållet i den första nivån av strukturen för ett dokument html skulle:

Den första raden tjänar till att indikera för webbläsaren att dokumentet den läser är skrivet i html, specifikt i version 5 (känd som HTML5). Tidigare versioner av html, baserat på SGML (Standard Generalized Markup Language), inkluderade en definition av dokumenttyp (DTD) där den typ av regler som används på språket för att beskriva dokumentet deklarerades.

Den andra och sista raden innehåller koden html bland direktiven <html> y </html> som fungerar som öppning respektive stängning. Direktiven html De omsluter namnet och attributen mellan tecknen "mindre än" och "större än" och bildar ett slags "akut parentes"-tecken. Elementen html som bifogar innehåll har ett avslutande direktiv som inkluderar snedstrecket framför namnet som i </html>.

Egenskaper eller attribut för element separeras med mellanslag från namnet och från varandra och uttrycks som vanlig text eller, oftare, som text (namnet på egenskapen) följt av ett likhetstecken och ett värde inom citattecken. När det gäller kodöppningsdirektivet html egendom har använts lang med värdet es, lang="es" att ange att texten i dokumentet html använder spanska språket.

En kommentar har inkluderats efter öppningsdirektivet för HTML-koden. Kommentarerna i html De kan uppta flera rader och använda koden som öppningsskylt <!-- och som en avslutning -->

Koden html Den består av två block: rubriken <head> och kroppen <body>. Det första syftar till att informera om själva dokumentet, inklusive information om det (metainformation) och det andra är att stödja innehållet i dokumentet.

I direktivet <body> ett evenemang har inkluderats onload för att automatiskt utföra en funktion JavaScript när innehållet har laddats. Denna resurs låter dig starta exekveringen av koden som kommer att definiera de grafiska objekten och uppdatera dem när information laddas från servern om tillståndet för sensorerna som representerar dessa bilder.

Av all metainformation som kan inkluderas i dokumentets rubrik html, vi är särskilt intresserade av att känna till den som beskrivs av följande direktiv:

• <title> som tjänar till att ge en titel till handlingen. Det kommer normalt att visas i webbläsarfönstret eller på motsvarande flik och hjälper oss att identifiera grafiken som den innehåller.
• <charset> deklarerar teckenuppsättningen som används för att koda dokumentet. Det är särskilt viktigt för "speciella" tecken som eñes eller accenter.
• <link> gör det möjligt att upprätta en relation mellan dokumentet html nuvarande och andra externa. Det hjälper oss att ladda stilmallen i format CSS med dokumentets utseende.
• <script> innehåller ett skript med körbar kod. Med hjälp av detta direktiv kommer vi att ladda funktionerna JavaScript för att generera eller ändra grafik SVG.

Som kan ses i exemplet på html ovan, namnet (och sökvägen, om tillämpligt) för dokumentet med stilen CSS anges med attributet href, medan det gäller koden JavaScript den används src. Båda delar ägandet type med värdet text/css y text/javascript respektive.

Med avseende på innehållet i dokumentet, den del som motsvarar elementet <body>, HTML5 Det låter dig skapa specifika strukturer för de vanligaste komponenterna på en webbsida som en sidfot, en sidosektion eller ett navigeringsfält, men det som intresserar oss är att använda dokumentet som en grafisk behållare. SVG är elementen <div> som fungerar som oberoende block som gör det möjligt att definiera en hierarkisk struktur genom att kapsla några <div> inom andra.

I föregående exempel används ett element <div> som innehåller två andra. Detta exempel introducerar två mycket viktiga egenskaper för den användning vi vill göra av koden. html: id som används för att tilldela en unik identifierare till ett element html (a <div>, i det här fallet) och class med vilken den tilldelas en kategori som vi kommer att använda för att fastställa utseendet. Kategorien, klassen, behöver inte vara unik, i själva verket ligger mycket av dess effektivitet i att flera delar delar samma aspekt.

Elementet (eller taggen) <p> tjänar till att definiera ett stycke som normalt innehåller text (men i html det finns ingen begränsning i detta avseende). Att göra grupperingar inom ett stycke (eller en <div>, det finns heller inga begränsningar) taggen används <span>. Med detta element är det till exempel möjligt att inkludera text i ett stycke för att ge det ett annat utseende som understruken eller fetstil.

Definitionen av de grafiska egenskaperna och i allmänhet beteendet som är förknippat med ett element html Att tillskriva en klass görs i koden CSS; i fallet med föregående exempel i dokumentet aspecto.css.

För att optimera tilldelningen av egenskaper CSS det är möjligt att samma element html tillhör flera klasser och har alltså det utseende eller beteende som definieras av dem. För att göra denna uppgift, skriv namnen på de olika klasserna, separera dem med kommatecken till höger om fastigheten. class

I föregående exempel, elementet <div> som har identifierats som primer_hijo Tre klasser har tilldelats: aspecto_de_hijo, aspecto_raro y tipografia_grande, som tillsammans ska definiera elementets utseende och beteende. Som förklaras i följande artikel om Definiera IoT Sensor Graphics Web Appearance med CSS, när du använder flera klasser, om någon av egenskaperna som definierar aspekten är definierade i båda, råder den sist refererade.

Som har setts, elementen <div> De kan innehålla andra element, inklusive andra <div>. Ett enklare fall vore <div> som innehöll text. Utseendet som definierar stilen CSS skulle också påverka texten i elementet.

För att optimera tilldelningen av egenskaper CSS det är möjligt att samma element html tillhör flera klasser och har alltså det utseende eller beteende som definieras av dem. För att göra denna uppgift, skriv namnen på de olika klasserna, separera dem med kommatecken till höger om fastigheten. class

I det föregående exemplet, de tre klasserna associerade med <div> primer_hijo De skulle definiera utseendet på elementet och texten som innehåller det, till exempel, vilket gör teckensnittet i vilket det är skrivet stort (om syftet som anges med dess namn i den sista klassen är sant)

Sedan version 5 (HTML5) är det möjligt att inkludera grafikkoden i format SVG i själva koden html som ytterligare ett element. Ur kodsynpunkt html, innehållet SVG det är ett element <svg> som innehåller de olika grafiska elementen (linjer, cirklar, rektanglar...

Även om det har sagts att de grafiska egenskaperna hos elementen html definieras i en stil CSS och är associerade med det genom en klass, är det också möjligt att tilldela några av dem direkt till elementen på två sätt. Å ena sidan kan du använda fastigheten style och tilldela objektets olika grafiska egenskaper som dess värde. Logiskt sett är det att föredra att använda den tidigare nämnda tekniken att tilldela aspekten till en klass, men med denna möjlighet kan du lägga till en liten korrigering till ett element (ett mycket speciellt undantag) utan att behöva skapa en ny klass.

Å andra sidan, vissa element html De låter dig använda specifika egenskaper som definierar deras utseende. I allmänhet, även om dessa egenskaper finns, är det att föredra att använda klasser, men tyvärr erbjuder inte alla element detta alternativ, vissa förväntar sig att ett visst värde indikeras direkt med de specifika egenskaperna istället för att referera till den associerade klassen. Ett av de element som har den här typen av beteende är just koden SVG, som vi måste tilldela det procentuella värdet av bredden och höjden i egenskaperna width y height, respektive istället för klassen.

Som kommer att framgå mer i detalj i artikel som talar om SVG-kod, för att använda den enkla metoden som föreslagits, är det tillrådligt att betrakta diagrammets dimensioner i procent. När det gäller den totala storleken på objektet, genom att ange 100 % i bredd- och höjdvärdet, kommer det att vara behållaren som anger de slutliga måtten (den <div> med id="dibujo", i föregående exempel)

När det gäller de olika komponenterna i grafen SVG (linjer, cirklar, rektanglar...), ingår i ett område som mäter 100×100 (valfri enhet) och expanderar i en rektangulär form utan att bevara proportionen. Fastigheterna viewBox y preserveAspectRatio av elementet SVG De är ansvariga för att fastställa dessa värderingar. i det första fallet med en rektangulär vy som går från koordinatpunkten (0,0) till koordinatpunkten (100,100) och uttrycks som "0 0 100 100" och i den andra med värdet none.

Med allt ovanstående kan du nu definiera en komplett kod som skulle fungera som en grafikbehållare. SVG genereras eller modifieras från JavaScript. Exemplet nedan innehåller fyra grafikblock som använder formatet html av det representationsförslag som vi ska använda.

Nedan kan du se hur den tidigare koden skulle se ut, formaterad med stilen CSS motsvarande, genererande med JavaScript grafiken SVG med serveravläsningar av data som lagras av sensorer anslutna till IoT. Förutom att data inte laddas från servern utan genereras slumpmässigt i klienten (din webbläsare), är resten av koden vad som kommer att användas i förslaget som definieras i denna artikelserie.

Nästa artikel i den här serien förklarar hur man definierar CSS-stilar för att ge HTML-koden som fungerar som en behållare för grafiken ett utseende SVG för att representera tillståndet för de sensorer som är anslutna till Internet of Things (IoT).