Esineiden Internetiin IoT:hen yhdistettyjen antureiden tilakaaviot
Yksi anturiverkon liittämisen eduista esineiden Internetiin on kyky analysoida saatuja tietoja. Esittämällä nämä tiedot graafisesti, ihminen (toisin kuin ohjelma) voi intuitiivisemmin ymmärtää tarkkailtavien suureiden merkityksen, esimerkiksi vertaamalla niitä toisiinsa tai seuraamalla niiden kehitystä ajan myötä.
Tämä artikkeli aloittaa neljästä osasta koostuvan sarjan, joka selittää yksinkertaisen ehdotuksen IoT:hen liitettyjen antureiden keräämien tietojen graafiseen esittämiseen. Samalla filosofialla kuin muissakin artikkeleissa ehdotettu menetelmä on täysin toimiva, vaikka päätavoite on didaktinen. Kuten yleisön tekninen profiili, jolle blogi polaridad.es, ja tämä teksti koskee elektroniikkaa eikä verkkokehitystä, jokainen osio toimii johdannossa käytettyihin kieliin tai tekniikkaan: HTML, CSS, SVG y JavaScript.
Edellisen sarjan artikkelit kuinka tallentaa esineiden Internetiin (IoT) liitetyistä laitteista saatuja tietoja He päätyivät selittämällä, kuinka tietokantoihin tallennettuja tietoja voidaan käyttää. Sarjan esimerkeissä käytettiin prosessin helpottamiseksi välittäjänä web-palvelinta, joka vastasi tietojen vastaanottamisesta HTTP-protokollan POST-pyyntöjen kautta, tallentamisesta tietokantaan ja näyttämisestä web-sivulla.
Vaikka tämän järjestelmän suurin haittapuoli on suorituskyky (jota voitaisiin lievittää vaihtoehdoilla, kuten Node.js ja MongoDB, jotka selitetään tulevissa artikkeleissa), vastineeksi se tarjoaa kaksi suurta etua: sen toteutus on erittäin yksinkertainen (mukaan lukien saatavuus). palveluista julkinen) ja voi näyttää tiedot selaimessa, eli se ei vaadi erityisiä sovelluksia (kuten mobiililaitteen sovellusta) esittämään tallennettuja tietoja, jotka edustaisivat Internetiin kytkettyjen laitteiden historiallista tilaa. Asiat.
Tässä artikkelissa hyödynnetään sitä etua, että voidaan helposti esittää verkkosivulla tähän järjestelmään tallennettuja tietoja IoT:hen yhdistettyjen laitteiden tilasta. Tässä artikkelissa selitetään, kuinka nämä tiedot näytetään graafisesti muotoa käyttäen. SVG alkaen JavaScript Web-sivun luomiseen dynaamisesti HTML.
Kirjakauppoja on monia JavaScript jolla ratkaistaan tietojen graafinen esitys. Näiden artikkeleiden tarkoituksena ei ole kehittää toista; Tämän tekstin tarkoituksena on ymmärtää prosessi ja pystyä kehittämään omia toteutuksiasi; niin didaktinen kuin tuottava tavoite. Jos olet kiinnostunut käyttämään tuotetta sen sijaan, että kehität sitä itse, suosittelen, että tutustut joihinkin erinomaisiin kirjastoihin grafiikan luomiseen JavaScript ilmaisilla lisensseillä, kuten Charts.js, Highcharts, Google-kaaviotyökalut, Aikakausi, Raphael, Grafico (perustuen Raphael), dc.js, Chartist.js, D3.js (suositukseni), C3.js (perustuen D3.js), NVD3 (uudelleenkäytettävä grafiikka varten D3.js) ...
HTML-dokumenttirakenne SVG-grafiikalla
Tämän artikkelin ehdotuksessa anturitietojen esittämisestä graafisesti verkkosivu, jolla se näytetään, koostuu seuraavista:
- konttina toimiva asiakirja on kirjoitettu HTML,
- sivun ulkoasu määritellään koodilla CSS,
- graafin piirtäminen tehdään kielellä SVG y
- Tietojen lukeminen palvelimelta ja kaavioiden näyttäminen on ohjelmoitu JavaScript
Kaikki elementit, erityisesti koodi HTML sivun, voidaan luoda palvelimella PHP:llä, kuten artikkelissa on selitetty PHP ohjelmointikieli sarjasta noin tietojen tallennus esineiden Internetiin yhdistetyistä laitteista.
Koodi CSS y JavaScript voidaan ladata (tuoda) koodilla HTML sen sijaan, että se kirjoitetaan suoraan osaksi asiakirjaa HTML. Tämän etuna on, että samoja asiakirjoja voidaan käyttää uudelleen useilla sivuilla ja muokata niitä mukavammin. mutta ehkä hieman pidempään lataamiseen liittyvä vaiva riippuen siitä, voitko käyttää välimuistissa olevaa koodia (ladattu edellisessä käytössä) vai jopa CDN. Tuotantovaiheessa on triviaalia integroida kaikki PHP:n koodi ja luoda yksi dokumentti HTML kaikki tiedot, jos valitset tämän vaihtoehdon. Koko tämän artikkelisarjan ajan katsotaan selvyyden vuoksi, että työskentelemme erillisten asiakirjojen parissa.
Meitä kiinnostaviin tarkoituksiin käyttää sitä grafiikkasäiliönä ja hyvin karkeasti ottaen asiakirjan rakenteen ensimmäisen tason sisältö HTML olisi:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español –>
<head>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Ensimmäinen rivi osoittaa verkkoselaimelle, että sen lukema asiakirja on kirjoitettu HTML, erityisesti versiossa 5 (tunnetaan nimellä HTML5). Aiemmat versiot HTML, perustuen SGML (Standard Generalized Markup Language), sisälsi asiakirjatyypin määritelmän (DTD), jossa asiakirjaa kuvaavassa kielessä käytetyt säännöt on ilmoitettu.
Toinen ja viimeinen rivi sisältävät koodin HTML direktiivien joukossa <html> y </html> jotka toimivat vastaavasti avaavina ja sulkevina. Direktiivit HTML Ne sulkevat nimen ja attribuutit merkkien "pienempi kuin" ja "suurempi kuin" väliin muodostaen eräänlaisia "akuutteja sulkumerkkejä". Elementit HTML Sisällön liittävillä sisällöillä on sulkemiskäsky, joka sisältää vinoviivan nimen edessä kuten kohdassa </html>.
Elementtien ominaisuudet tai attribuutit erotetaan välilyönnillä nimestä ja toisistaan ja ilmaistaan pelkkänä tekstinä tai useammin tekstinä (omaisuuden nimi), jota seuraa yhtäläisyysmerkki ja arvo lainausmerkeissä. Koodin avausdirektiivin tapauksessa HTML omaisuutta on käytetty lang rohkeudella es, lang="es" osoittaa, että asiakirjan teksti HTML käyttää espanjan kieltä.
Kommentti on lisätty HTML-koodin avauskäskyn jälkeen. Kommentit sisään HTML Ne voivat olla useita rivejä ja käyttää koodia aloitusmerkkinä <!-- ja päätteeksi -->
Koodi HTML Se koostuu kahdesta lohkosta: otsikosta <head> ja ruumis <body>. Ensimmäisen tarkoituksena on tiedottaa itse asiakirjasta, mukaan lukien tiedot siitä (metatiedot), ja toinen on tukea asiakirjan sisältöä.
Direktiivissä <body> tapahtuma on otettu mukaan onload jolla toiminto suoritetaan automaattisesti JavaScript kun sisältö on ladattu. Tämän resurssin avulla voit käynnistää koodin suorittamisen, joka määrittelee graafiset objektit ja päivittää ne, kun palvelimelta ladataan tietoja grafiikkaa edustavien antureiden tilasta.
Kaikesta metatiedosta, joka voidaan sisällyttää asiakirjan otsikkoon HTML, olemme erityisen kiinnostuneita seuraavien direktiivien kuvaamasta:
-
<title>joka antaa asiakirjalle otsikon. Se näkyy tavallisesti selainikkunassa tai vastaavassa välilehdessä ja auttaa meitä tunnistamaan sen sisältämät grafiikat. -
<charset>ilmoittaa asiakirjan koodaamiseen käytetyn merkistön. Se on erityisen tärkeä "erityisille" merkeille, kuten eñeille tai aksenteille. -
<link>mahdollistaa yhteyden luomisen asiakirjan välille HTML nykyiset ja muut ulkoiset. Se auttaa meitä lataamaan tyylisivun muodossa CSS asiakirjan ulkonäön kanssa. -
<script>sisältää komentosarjan suoritettavalla koodilla. Lataamme funktiot käyttämällä tätä direktiiviä JavaScript jolla luodaan tai muokataan grafiikkaa SVG.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Kuten esimerkistä voidaan nähdä HTML yläpuolella asiakirjan nimi (ja polku, jos sellainen on) tyylillä CSS on merkitty attribuutilla href, kun taas koodin tapauksessa JavaScript sitä käytetään src. Molemmat osakkeenomistajat type rohkeudella text/css y text/javascript vastaavasti.
Asiakirjan sisällön osalta elementtiä vastaava osa <body>, HTML5 Sen avulla voit luoda erityisiä rakenteita verkkosivun yleisimmille komponenteille, kuten alatunnisteen, sivuosion tai navigointipalkin, mutta mikä kiinnostaa meitä, on käyttää dokumenttia grafiikkasäiliönä. SVG ovat elementtejä <div> jotka toimivat itsenäisinä lohkoina, jotka mahdollistavat hierarkkisen rakenteen määrittämisen sisäkkäisillä <div> muiden sisällä.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
</html>
|
Edellisessä esimerkissä käytetään elementtiä <div> joka sisältää kaksi muuta. Tämä esimerkki esittelee kaksi erittäin tärkeää ominaisuutta koodin käyttöön. HTML: id jota käytetään yksilöllisen tunnisteen määrittämiseen elementille HTML ( <div>, tässä tapauksessa) ja class jonka kanssa sille on määritetty luokka, jota käytämme ulkonäön määrittämiseen. Luokan, luokan, ei tarvitse olla ainutlaatuinen, itse asiassa suuri osa sen tehokkuudesta piilee useissa elementeissä, jotka jakavat saman näkökohdan.
Elementti (tai tunniste) <p> määrittää kappaleen, joka tavallisesti sisältää tekstiä (vaikka in HTML tässä suhteessa ei ole rajoituksia). Voit tehdä ryhmittelyjä kappaleen sisällä (tai a <div>, ei myöskään ole rajoituksia) -tunnistetta käytetään <span>. Tämän elementin avulla on mahdollista esimerkiksi sisällyttää tekstiä kappaleeseen, jotta se saa erilaisen ulkonäön, kuten alleviivauksen tai lihavoinnin.
Graafisten ominaisuuksien määritelmä ja yleensä elementtiin liittyvä käyttäytyminen HTML Luokan määrittäminen tapahtuu koodissa CSS; asiakirjan edellisen esimerkin tapauksessa aspecto.css.
Ominaisuuksien määrittämisen optimoimiseksi CSS on mahdollista, että sama elementti HTML kuuluu useisiin luokkiin ja on siten niiden määrittelemä ulkonäkö tai käyttäytyminen. Tätä tehtävää varten kirjoita eri luokkien nimet erottamalla ne pilkuilla kohteen oikealle puolelle. class
|
9
10
11
12
13
14
15
16
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
Edellisessä esimerkissä elementti <div> joka on tunnistettu primer_hijo Kolme luokkaa on määrätty: aspecto_de_hijo, aspecto_raro y tipografia_grande, joiden oletetaan yhdessä määrittävän elementin ulkonäön ja käyttäytymisen. Kuten seuraavassa artikkelissa kerrotaan IoT-anturin grafiikan verkkoulkomuodon määrittäminen CSS:n avulla, kun käytetään useita luokkia, jos jokin aspektin määrittävistä ominaisuuksista on määritelty molemmissa, viimeksi viitattu pätee.
Kuten on nähty, elementit <div> Ne voivat sisältää muita elementtejä, mukaan lukien muut <div>. Yksinkertaisempi tapaus olisi <div> joka sisälsi tekstiä. Tyyliä määrittelevä ilme CSS vaikuttaisi myös elementin sisältämään tekstiin.
Ominaisuuksien määrittämisen optimoimiseksi CSS on mahdollista, että sama elementti HTML kuuluu useisiin luokkiin ja on siten niiden määrittelemä ulkonäkö tai käyttäytyminen. Tätä tehtävää varten kirjoita eri luokkien nimet erottamalla ne pilkuilla kohteen oikealle puolelle. class
|
9
10
11
12
13
14
15
16
17
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
Edellisessä esimerkissä kolme luokkaa, jotka liittyvät <div> primer_hijo Ne määrittelevät elementin ulkonäön ja sen sisältävän tekstin, esimerkiksi tekemällä fontista, jolla se kirjoitetaan, suureksi (jos sen nimen viimeisessä luokassa osoittama tarkoitus on totta)
Versiosta 5 lähtien (HTML5) on mahdollista sisällyttää grafiikkakoodi muodossa SVG itse koodin sisällä HTML yhtenä lisäelementtinä. Koodin näkökulmasta HTML, sisältö SVG se on elementti <svg> joka sisältää erilaisia graafisia elementtejä (viivoja, ympyröitä, suorakulmioita...
|
9
10
11
12
13
14
15
16
17
18
19
20
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg id=“dibujo” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
</div>
</body>
|
Vaikka on sanottu, että elementtien graafiset ominaisuudet HTML määritellään tyylillä CSS ja liittyvät siihen luokan kautta, on myös mahdollista määrittää osa niistä suoraan elementteihin kahdella tavalla. Toisaalta voit käyttää omaisuutta style ja määritä kohteen erilaiset graafiset ominaisuudet sen arvoksi. Loogisesti ajatellen on parempi käyttää edellä mainittua tekniikkaa aspektin määrittämisessä luokkaan, mutta tällä mahdollisuudella voit lisätä elementtiin pienen korjauksen (erittäin erityinen poikkeus) ilman, että tarvitsee luoda uutta luokkaa.
Toisaalta joitain elementtejä HTML Niiden avulla voit käyttää tiettyjä ominaisuuksia, jotka määrittävät niiden ulkonäön. Yleisesti ottaen, vaikka nämä ominaisuudet ovat olemassa, on suositeltavaa käyttää luokkia, mutta valitettavasti kaikki elementit eivät tarjoa tätä vaihtoehtoa, jotkut odottavat, että tietty arvo ilmaistaan suoraan noilla erityisominaisuuksilla sen sijaan, että viitattaisiin siihen liittyvään luokkaan. Yksi tämäntyyppisen käyttäytymisen elementeistä on juuri koodi SVG, johon meidän on määritettävä ominaisuuksien leveyden ja korkeuden prosenttiarvo width y heightluokan sijaan.
Kuten nähdään tarkemmin artikkeli, joka puhuu SVG-koodista, jotta voidaan käyttää ehdotettua yksinkertaista menetelmää, on suositeltavaa tarkastella kaavion mittoja prosentteina. Kun kyseessä on objektin kokonaiskoko, ilmoittamalla 100 % leveyden ja korkeuden arvossa, kontti määrittää lopulliset mitat ( <div> kanssa id="dibujo", edellisessä esimerkissä)
Kuvaajan eri komponenttien tapauksessa SVG (viivat, ympyrät, suorakulmiot...), sisällytetään alueelle, jonka mitat ovat 100 × 100 (mikä tahansa yksikkö), ja ne laajenevat suorakaiteen muotoon ilman, että suhteet säilyvät. Ominaisuudet viewBox y preserveAspectRatio elementin SVG He ovat vastuussa näiden arvojen vahvistamisesta. ensimmäisessä tapauksessa suorakaiteen muotoisella näkymällä, joka kulkee koordinaattipisteestä (0,0) koordinaattipisteeseen (100,100) ja ilmaistaan "0 0 100 100" ja toisessa arvolla none.
|
14
15
16
17
18
|
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“none” width=“100%” height=“100%” id=“dibujo” class=“grafico”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
|
Kaiken edellä mainitun avulla voit nyt määrittää täydellisen koodin, joka toimisi grafiikkasäilönä. SVG luotu tai muokattu JavaScript. Alla oleva esimerkki sisältää neljä grafiikkalohkoa, jotka käyttävät muotoa HTML edustusehdotuksesta, jota aiomme käyttää.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang=“es”> <!– Inicio del documento HTML con el idioma –>
<head> <!– Cabecera del documento HTML –>
<meta charset=“utf-8”> <!– Se utiliza el juego de caracteres UTF8 –>
<title>Temperaturas Nave E1</title> <!– Título del documento y seguramente de la ventana del navegador –>
<link rel=“stylesheet” href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” type=“text/css” media=“all”> <!– Cargar el estilo “https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” guardado en la misma carpeta que este documento HTML –>
<script type=“text/javascript” src=“graficos.js”></script> <!– Cargar el código JavaScript del documento “graficos.js” guardado en la misma carpeta que este documento HTML –>
</head> <!– Final de la cabecera del documento HTML –>
<body onload=“iniciar_graficos();”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript iniciar_graficos() –>
<div id=“temperatura_frigorifico_a” class=“bloque_sensor”> <!– Bloque de datos del primer sensor –>
<div id=“titulo_temperatura_frigorifico_a” class=“bloque_titulo”>Temperatura frigorífico 01A</div> <!– Título del bloque de datos del sensor –>
<div id=“descripcion_temperatura_frigorifico_a” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01A</div> <!– Descripción del bloque de datos del sensor –>
<div id=“fecha_temperatura_frigorifico_a” class=“bloque_fecha”>Cargando emperaturas</div> <!– Fecha de la última lectura de datos del sensor. Por ahora vacío, luego se rellenará con la aplicación JavaScript –>
<div id=“bloque_temperatura_frigorifico_a” class=“bloque_grafico”> <!– Bloque con el gráfico –>
<svg id=“grafico_temperatura_frigorifico_a” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_a” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg> <!– Gráfico de los datos –>
</div> <!– Final del bloque que contiene el gráfico –>
</div> <!– Final del bloque de datos del primer sensor –>
<div id=“temperatura_frigorifico_b” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_b” class=“bloque_titulo”>Temperatura frigorífico 01B</div>
<div id=“descripcion_temperatura_frigorifico_b” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01B</div>
<div id=“fecha_temperatura_frigorifico_b” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_temperatura_frigorifico_b” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_b” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_b” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_c” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_c” class=“bloque_titulo”>Temperatura frigorífico 01C</div>
<div id=“descripcion_temperatura_frigorifico_c” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01C</div>
<div id=“fecha_temperatura_frigorifico_c” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_c” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_c” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_c” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_d” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_d” class=“bloque_titulo”>Temperatura frigorífico 01D</div>
<div id=“descripcion_temperatura_frigorifico_d” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01D</div>
<div id=“fecha_temperatura_frigorifico_d” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_d” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_d” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_d” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
</body> <!– Final del cuerpo del documento HTML –>
</html> <!– Final del documento HTML –>
|
Alta näet, miltä edellinen koodi näyttäisi tyylillä muotoiltuna CSS vastaava, luominen kanssa JavaScript grafiikkaa SVG IoT:hen kytkettyjen antureiden tallentamien tietojen palvelinlukemat. Lukuun ottamatta sitä, että tietoja ei ladata palvelimelta, vaan ne luodaan satunnaisesti asiakkaassa (selaimessasi), muuta koodia käytetään tässä artikkelisarjassa määritellyssä ehdotuksessa.
Seuraava artikkeli tässä sarjassa selittää kuinka määritellä CSS-tyylejä antaa ulkoasua HTML-koodille, joka toimii grafiikan säilönä SVG jolla voidaan kuvata esineiden Internetiin (IoT) kytkettyjen antureiden tilaa.
1 kommentti