Jutiklių, prijungtų prie daiktų interneto, būsenos grafikai
Vienas iš jutiklių tinklo prijungimo prie daiktų interneto privalumų yra galimybė analizuoti gautus duomenis. Grafiškai pavaizduodamas šią informaciją, žmogus (priešingai nei programa) gali intuityviai suprasti stebimų dydžių reikšmę, pavyzdžiui, lygindamas juos tarpusavyje arba stebėdamas jų raidą laikui bėgant.
Šis straipsnis pradeda seriją, sudarytą iš keturių dalių, kurioje paaiškinamas paprastas pasiūlymas grafiškai pateikti duomenis, gautus jutikliais, prijungtais prie daiktų interneto. Remiantis ta pačia filosofija kaip ir kituose straipsniuose, siūlomas metodas puikiai veikia, nors pagrindinis tikslas yra didaktinis. Kaip techninis visuomenės, kuriai tinklaraštis polaridad.es, o šis tekstas yra apie elektroniką, o ne apie interneto svetainių kūrimą, kiekvienas skyrius yra įvadas į naudojamas kalbas ar technologijas: HTML, CSS, SVG y JavaScript.
Ankstesnės serijos straipsniai apie kaip saugoti duomenis, gautus iš įrenginių, prijungtų prie daiktų interneto (IoT) Jie baigėsi paaiškinimu, kaip prieiti prie duomenų bazėse saugomos informacijos. Serijos pavyzdžiuose, siekiant palengvinti procesą, kaip tarpininkas buvo naudojamas žiniatinklio serveris, atsakingas už duomenų gavimą per HTTP protokolo POST užklausas, saugojimą duomenų bazėje ir atvaizdavimą tinklalapyje.
Nors pagrindinis šios sistemos trūkumas yra našumas (kurį būtų galima sumažinti naudojant tokias alternatyvas kaip Node.js ir MongoDB, kurios bus paaiškintos būsimuose straipsniuose), mainais ji suteikia du didelius privalumus: jos įgyvendinimas labai paprastas (įskaitant prieinamumą). viešųjų paslaugų) ir gali rodyti duomenis naršyklėje, tai yra, jai nereikia specialių programų (pvz., mobiliojo įrenginio programėlės), kad būtų pateikta saugoma informacija, kuri atspindėtų prie interneto prijungtų įrenginių istorinę būseną. Daiktai.
Šiame straipsnyje paaiškinama, kaip grafiškai pateikti šią informaciją naudojant formatą, nes išnaudojant pranašumą, nes galima lengvai pateikti tinklalapyje šioje sistemoje saugomą informaciją apie įrenginių, prijungtų prie IoT, būseną. SVG nuo JavaScript dinamiškai generuoti tinklalapį HTML.
Yra daug knygynų JavaScript kuriais galima išspręsti grafinį duomenų pateikimą. Šie straipsniai neketina kurti kito; Šio teksto tikslas – suprasti procesą ir gebėti kurti savo įgyvendinimus; didaktinis tikslas ir produktyvus. Jei norite naudoti produktą, o ne kurti patys, rekomenduoju pažvelgti į keletą puikių bibliotekų, skirtų grafikos generavimui naudojant JavaScript su nemokamomis licencijomis, pvz Charts.js, Aukštos diagramos, Google diagramos įrankiai, Epocha, Rafaelis, schema (remiantis Rafaelis), dc.js, Chartist.js, D3.js (mano rekomendacija), C3.js (remiantis D3.js), NVD3 (daugkartinio naudojimo grafika, skirta D3.js) ...
HTML dokumento struktūra su SVG grafika
Šiame straipsnyje pateiktame pasiūlyme grafiškai pateikti jutiklio duomenis tinklalapį, kuriame jie rodomi, sudaro:
- įrašytas dokumentas, kuris tarnauja kaip konteineris HTML,
- puslapio išvaizda apibrėžiama kodu CSS,
- grafiko piešimas atliekamas naudojant kalbą SVG y
- Duomenų skaitymas iš serverio ir grafikų rodymas yra užprogramuotas JavaScript
Visi elementai, ypač kodas HTML puslapio, gali būti sugeneruotas serveryje naudojant PHP, kaip paaiškinta straipsnyje apie PHP programavimo kalba iš serijos apie duomenų saugojimas iš įrenginių, prijungtų prie daiktų interneto.
Kodas CSS y JavaScript galima įkelti (importuoti) kodu HTML užuot parašyta tiesiogiai kaip dokumento dalis HTML. Tai turi pranašumą, nes tuos pačius dokumentus galima pakartotinai naudoti keliuose puslapiuose ir patogiau juos redaguoti; bet galbūt nepatogumų dėl įkėlimo užtrunka šiek tiek ilgiau, priklausomai nuo to, ar galite naudoti kodą, esantį talpykloje (įkeltą ankstesnio naudojimo metu), ar net CDN. Gamybos fazėje trivialu integruoti visą PHP kodą, sukuriant vieną dokumentą HTML su visa informacija, jei pasirinksite šią alternatyvą. Šiame straipsnių cikle, siekiant aiškumo, manoma, kad dirbame su atskirais dokumentais.
Mus dominantiems tikslams naudoti kaip grafinį konteinerį ir labai grubiai – dokumento struktūros pirmojo lygio turinį. HTML būtų:
|
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>
|
Pirmoji eilutė skirta žiniatinklio naršyklei nurodyti, kad dokumentas, kurį ji skaito, yra parašytas HTML, ypač 5 versijoje (žinoma kaip HTML5). Ankstesnės versijos HTML, remiantis SGML (Standartinė apibendrinta žymėjimo kalba), įtraukė dokumento tipo apibrėžimą (DTD), kurioje buvo deklaruotas dokumento aprašymo kalba vartojamų taisyklių tipas.
Antroje ir paskutinėje eilutėse yra kodas HTML tarp direktyvų <html> y </html> kurios veikia atitinkamai kaip atidarymas ir uždarymas. Direktyvos HTML Jie pateikia pavadinimą ir atributus tarp ženklų „mažiau nei“ ir „didesnis nei“, sudarydami savotiškus „ūmaus skliaustų“ ženklus. Elementai HTML pridedant turinį turi baigiamąją direktyvą, į kurią įtraukiamas pasvirasis brūkšnys prieš pavadinimą, kaip nurodyta </html>.
Elementų savybės arba atributai yra atskirti tarpais nuo pavadinimo ir vienas nuo kito ir išreiškiami kaip paprastas tekstas arba, dažniau, kaip tekstas (ypatybės pavadinimas), po kurio rašomas lygybės ženklas ir reikšmė kabutėse. Kodo atidarymo direktyvos atveju HTML turtas buvo naudojamas lang su verte es, lang="es" nurodyti, kad dokumento tekstas HTML vartoja ispanų kalbą.
Po HTML kodo pradžios direktyvos buvo įtrauktas komentaras. Komentarai į HTML Jie gali užimti kelias eilutes ir naudoti kodą kaip pradžios ženklą <!-- ir kaip uždarymas -->
Kodas HTML Jį sudaro du blokai: antraštė <head> ir kūnas <body>. Pirmuoju siekiama informuoti apie patį dokumentą, įskaitant informaciją apie jį (metainformaciją), o antruoju – paremti dokumento turinį.
Direktyvoje <body> buvo įtrauktas įvykis onload su kuria automatiškai vykdoma funkcija JavaScript kai turinys bus įkeltas. Šis išteklius leidžia pradėti vykdyti kodą, kuris apibrėš grafinius objektus ir juos atnaujins, kai iš serverio įkeliama informacija apie šią grafiką vaizduojančių jutiklių būseną.
Iš visos metainformacijos, kuri gali būti įtraukta į dokumento antraštę HTML, mums ypač įdomu žinoti, kas aprašyta šiose direktyvose:
-
<title>kuri padeda suteikti dokumentui pavadinimą. Paprastai jis bus rodomas naršyklės lange arba atitinkamame skirtuke ir padės mums atpažinti jame esančią grafiką. -
<charset>deklaruoja simbolių rinkinį, naudojamą dokumentui koduoti. Tai ypač svarbu „ypatingiems“ ženklams, tokiems kaip eñes ar akcentai. -
<link>leidžia nustatyti ryšį tarp dokumento HTML dabartinės ir kitos išorinės. Tai padės mums įkelti stiliaus lapą formatu CSS su dokumento išvaizda. -
<script>yra scenarijus su vykdomuoju kodu. Naudodami šią direktyvą įkelsime funkcijas JavaScript su kuria galima generuoti arba keisti grafiką 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>
|
Kaip matyti pavyzdyje HTML aukščiau – dokumento pavadinimą (ir kelią, jei taikoma) su stiliumi CSS nurodomas atributu href, o kodo atveju JavaScript jis naudojamas src. Abu nuosavybės teise type su verte text/css y text/javascript atitinkamai.
Kalbant apie dokumento turinį, elementą atitinkanti dalis <body>, HTML5 Tai leidžia jums sukurti konkrečias struktūras dažniausiai naudojamoms tinklalapio sudedamosioms dalims, pvz., poraštei, šoninei sekcijai ar naršymo juostai, tačiau mums įdomu naudoti dokumentą kaip grafikos konteinerį. SVG yra elementai <div> kurie veikia kaip nepriklausomi blokai, leidžiantys apibrėžti hierarchinę struktūrą įdėjus kai kuriuos <div> kituose.
|
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>
|
Ankstesniame pavyzdyje naudojamas elementas <div> kuriame yra dar du. Šiame pavyzdyje pateikiamos dvi labai svarbios kodo naudojimo savybės. HTML: id kuris naudojamas elementui priskirti unikalų identifikatorių HTML (A <div>, šiuo atveju) ir class su kuria jai priskiriama kategorija, kurią naudosime išvaizdai nustatyti. Kategorija, klasė, nebūtinai turi būti unikali, iš tikrųjų didžioji jos veiksmingumo dalis slypi keliuose to paties aspekto elementuose.
Elementas (arba žyma) <p> skirta apibrėžti pastraipą, kurioje paprastai bus tekstas (nors HTML šiuo atžvilgiu nėra jokių apribojimų). Norėdami sugrupuoti pastraipoje (arba a <div>, taip pat nėra jokių apribojimų) naudojama žyma <span>. Naudojant šį elementą galima, pavyzdžiui, įtraukti tekstą į pastraipą, kad ji atrodytų kitaip, pavyzdžiui, pabraukta arba paryškinta.
Grafinių charakteristikų apibrėžimas ir apskritai elgsena, susijusi su elementu HTML Klasės priskyrimas atliekamas kode CSS; ankstesnio dokumento pavyzdžio atveju aspecto.css.
Optimizuoti charakteristikų priskyrimą CSS gali būti, kad tas pats elementas HTML priklauso kelioms klasėms ir todėl turi jų apibrėžtą išvaizdą ar elgesį. Norėdami atlikti šią užduotį, parašykite skirtingų klasių pavadinimus, atskirdami juos kableliais nuosavybės dešinėje. 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>
|
Ankstesniame pavyzdyje elementas <div> kuris buvo identifikuotas kaip primer_hijo Buvo paskirtos trys klasės: aspecto_de_hijo, aspecto_raro y tipografia_grande, kurios kartu turėtų apibrėžti elemento išvaizdą ir elgesį. Kaip paaiškinta kitame straipsnyje apie IoT jutiklio grafikos žiniatinklio išvaizdos apibrėžimas naudojant CSS, kai naudojamos kelios klasės, jei kuri nors iš aspektą apibrėžiančių savybių yra apibrėžta abiejose, vyrauja paskutinė nurodyta.
Kaip matėme, elementai <div> Juose gali būti kitų elementų, įskaitant kitus <div>. Būtų paprastesnis atvejis <div> kuriame buvo tekstas. Išvaizda, kuri apibrėžia stilių CSS taip pat paveiktų elemento tekstą.
Optimizuoti charakteristikų priskyrimą CSS gali būti, kad tas pats elementas HTML priklauso kelioms klasėms ir todėl turi jų apibrėžtą išvaizdą ar elgesį. Norėdami atlikti šią užduotį, parašykite skirtingų klasių pavadinimus, atskirdami juos kableliais nuosavybės dešinėje. 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>
|
Ankstesniame pavyzdyje trys klasės, susietos su <div> primer_hijo Jie apibrėžia elemento išvaizdą ir tekstą, kuriame jis yra, pvz., padidina šriftą, kuriuo jis parašytas (jei paskutinėje klasėje jo pavadinimo nurodyta paskirtis yra teisinga).
Nuo 5 versijos (HTML5) galima įtraukti grafikos kodą formatu SVG pačiame kode HTML kaip dar vienas elementas. Kodo požiūriu HTML, turinys SVG tai elementas <svg> kuriame yra skirtingi grafiniai elementai (linijos, apskritimai, stačiakampiai...
|
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>
|
Nors buvo pasakyta, kad elementų grafinės charakteristikos HTML yra apibrėžti stiliumi CSS ir yra su juo susieti per klasę, taip pat galima kai kuriuos iš jų tiesiogiai priskirti elementams dviem būdais. Viena vertus, galite naudotis turtu style ir priskirti skirtingas objekto grafines charakteristikas kaip jo vertę. Logiškai mąstant, pageidautina naudoti anksčiau minėtą aspekto priskyrimo klasei metodą, tačiau su šia galimybe galite pridėti nedidelį elemento pataisymą (labai ypatinga išimtis) nekurdami naujos klasės.
Kita vertus, kai kurie elementai HTML Jie leidžia naudoti konkrečias savybes, kurios apibrėžia jų išvaizdą. Apskritai, net jei šios savybės egzistuoja, geriau naudoti klases, bet, deja, ne visi elementai siūlo šią alternatyvą, kai kurie tikisi, kad tam tikra reikšmė bus nurodyta tiesiogiai su tomis konkrečiomis savybėmis, o ne nuoroda į susijusią klasę. Vienas iš tokio elgesio elementų yra būtent kodas SVG, kuriam savybėse turime priskirti procentinę pločio ir aukščio reikšmę width y height, atitinkamai, vietoj klasės.
Kaip bus išsamiau matyti straipsnis, kuriame kalbama apie SVG kodą, norint naudoti siūlomą paprastą metodą, grafiko matmenis patartina laikyti procentais. Esant bendram objekto dydžiui, nurodant 100 % pločio ir aukščio vertės, tai konteineris nustato galutinius matmenis ( <div> su id="dibujo", ankstesniame pavyzdyje)
Skirtingų grafiko komponentų atveju SVG (linijos, apskritimai, stačiakampiai...), įtraukiami į sritį, kurios matmenys yra 100 × 100 (bet koks vienetas) ir išplečiamos stačiakampio formos, neišsaugant proporcijos. Savybės viewBox y preserveAspectRatio elemento SVG Jie yra atsakingi už šių vertybių nustatymą. pirmuoju atveju su stačiakampiu vaizdu, kuris eina nuo koordinačių taško (0,0) iki koordinatės taško (100,100) ir išreiškiamas kaip "0 0 100 100" o antroje su verte 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>
|
Turėdami visa tai, kas išdėstyta pirmiau, dabar galite apibrėžti visą kodą, kuris būtų naudojamas kaip grafikos konteineris. SVG sukurtas arba modifikuotas iš JavaScript. Toliau pateiktame pavyzdyje yra keturi grafiniai blokai, kuriuose naudojamas formatas HTML atstovavimo pasiūlymo, kurį ketiname naudoti.
|
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 –>
|
Žemiau galite pamatyti, kaip atrodytų ankstesnis kodas, suformatuotas pagal stilių CSS atitinkantis, generuojantis su JavaScript grafika SVG su serverio duomenų, saugomų jutiklių, prijungtų prie daiktų interneto, rodmenimis. Išskyrus tai, kad duomenys nėra įkeliami iš serverio, o generuojami atsitiktinai kliento programoje (jūsų naršyklėje), likusi kodo dalis bus naudojama pasiūlyme, apibrėžtame šioje straipsnių serijoje.
Kitame šios serijos straipsnyje paaiškinama kaip apibrėžti CSS stilius suteikti išvaizdą HTML kodui, kuris veikia kaip grafikos talpykla SVG su kuriais galima pavaizduoti prie daiktų interneto (IoT) prijungtų jutiklių būseną.
1 komentaras