Nesnelerin İnterneti IoT'ye bağlı sensörlerin durum grafikleri
Bir sensör ağını Nesnelerin İnterneti'ne bağlamanın avantajlarından biri de elde edilen verilerin analiz edilebilmesidir. Bu bilgiyi grafiksel olarak temsil eden bir kişi (bir programın aksine), izlenen miktarların anlamını, örneğin bunları birbirleriyle karşılaştırarak veya zaman içindeki gelişimlerini takip ederek daha sezgisel olarak anlayabilir.
Bu makale, IoT'ye bağlı sensörler tarafından elde edilen verilerin grafiksel temsiline yönelik basit bir öneriyi açıklayan, dört bölümden oluşan bir seriye başlıyor. Diğer makalelerdekiyle aynı felsefeye sahip olan önerilen yöntem, asıl amacı didaktik olmasına rağmen tamamen işlevseldir. Kamuoyunun teknik profili olarak blog polaridad.esve bu metin web geliştirmeyle değil elektronikle ilgilidir; bölümlerin her biri kullanılan dillere veya teknolojiye giriş niteliğindedir: HTML, CSS, SVG y JavaScript.
Önceki serideki makaleler Nesnelerin İnterneti'ne (IoT) bağlı cihazlar tarafından elde edilen veriler nasıl saklanır? Veritabanlarında saklanan bilgilere nasıl erişilebileceklerini açıklayarak bitirdiler. Serinin örneklerinde, süreci kolaylaştırmak için, HTTP protokolünün POST istekleri aracılığıyla verinin alınmasından, bir veritabanında saklanmasından ve bir web sayfasında görüntülenmesinden sorumlu aracı olarak bir web sunucusu kullanıldı.
Bu sistemin ana dezavantajı performans olmasına rağmen (gelecek makalelerde açıklanacak olan Node.js ve MongoDB gibi alternatiflerle bu durum hafifletilebilir), bunun karşılığında iki büyük avantaj sağlar: Uygulanması çok basittir (kullanılabilirlik dahil). kamuya açık hizmetler) ve verileri bir tarayıcıda görüntüleyebilir; yani, internete bağlı cihazların geçmiş durumunu temsil edecek depolanan bilgileri sunmak için belirli uygulamalara (bir mobil cihaz uygulaması gibi) ihtiyaç duymaz. Şeyler.
IoT'ye bağlı cihazların durumu hakkında bu sistemde depolanan bilgilerin bir web sayfasında kolayca sunulabilmesinin avantajından yararlanan bu makale, bu bilginin formatı kullanılarak grafiksel olarak nasıl görüntüleneceğini açıklamaktadır. SVG itibaren JavaScript dinamik olarak bir web sayfası oluşturmak için HTML.
Birçok kitapçı var JavaScript Verilerin grafiksel sunumunu çözecek olan. Bu makalelerin bir başkasını geliştirme niyeti yok; Bu metnin amacı süreci anlamak ve kendi uygulamalarınızı geliştirebilmek; üretken olduğu kadar didaktik bir hedef. Bir ürünü kendiniz geliştirmek yerine kullanmakla ilgileniyorsanız, grafik oluşturmak için mükemmel kitaplıklardan bazılarına göz atmanızı öneririm. JavaScript gibi ücretsiz lisanslarla Charts.js, Highcharts, Google Grafik Araçları, Dönem, Raphael, grafik (dayalı Raphael), dc.js, Chartist.js, d3.js (tavsiyem), C3.js (dayalı d3.js), NVD3 (yeniden kullanılabilir grafikler d3.js) ...
SVG grafikleriyle HTML belge yapısı
Bu makalenin sensör verilerinin grafiksel olarak sunulmasına yönelik önerisinde, bu verilerin görüntülendiği web sayfası aşağıdakilerden oluşur:
- kap görevi gören belge şu şekilde yazılmıştır: HTML,
- sayfanın görünümü kodla tanımlanır CSS,
- grafiğin çizimi dil kullanılarak yapılır SVG y
- Sunucudan veri okumak ve grafikleri görüntülemek programlanmıştır. JavaScript
Tüm öğeler, özellikle kod HTML sayfasındaki makalede açıklandığı gibi PHP ile sunucuda oluşturulabilir. PHP programlama dili hakkındaki diziden Nesnelerin İnternetine bağlı cihazlardan veri depolama.
Kod CSS y JavaScript koda yüklenebilir (içe aktarılabilir) HTML doğrudan belgenin bir parçası olarak yazılmak yerine HTML. Bunun, aynı belgeleri birkaç sayfada yeniden kullanabilme ve bunları daha rahat düzenleyebilme avantajı vardır; ancak belki de önbellekte bulunan kodu (önceki kullanımda yüklenen) kullanıp kullanamayacağınıza bağlı olarak yüklemenin biraz daha uzun sürmesinin sakıncası olabilir. CDN. Üretim aşamasında PHP'deki tüm kodu entegre ederek tek bir belge oluşturmak önemsizdir. HTML Bu alternatifi seçerseniz tüm bilgilerle birlikte. Bu makale dizisi boyunca, netlik sağlamak adına, ayrı belgelerle çalıştığımız kabul edilmektedir.
Bizi ilgilendiren amaçlar doğrultusunda, onu bir grafik taşıyıcısı olarak kullanmak gerekirse, kabaca bir belgenin yapısının ilk düzeyinin içeriği HTML olur:
|
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>
|
İlk satır, web tarayıcısına, okuduğu belgenin yazıldığını belirtmeye yarar. HTML, özellikle sürüm 5'te (olarak bilinir) HTML5). Önceki sürümleri HTML, dayalı SGML (Standart Genelleştirilmiş İşaretleme Dili), bir belge türü tanımı içeriyordu (DTD) belgeyi tanımlamak için dilde kullanılan kuralların türünün bildirildiği yer.
İkinci ve son satırlar kodu içerir HTML direktifler arasında <html> y </html> sırasıyla açma ve kapama işlevi görür. Direktifler HTML İsim ve sıfatları "küçüktür" ve "büyüktür" işaretleri arasına alarak bir nevi "kesin parantez" işaretleri oluştururlar. Elementler HTML içeriği çevreleyenler, aşağıdaki gibi adın önünde eğik çizgiyi içeren bir kapatma yönergesine sahiptir </html>.
Öğelerin özellikleri veya nitelikleri addan ve birbirlerinden boşluklarla ayrılır ve düz metin olarak veya daha sık olarak metin (özelliğin adı) ve ardından eşittir işareti ve tırnak içine alınmış bir değer olarak ifade edilir. Kod açma direktifi durumunda HTML mülk kullanıldı lang değeri ile es, lang="es" belgenin metninin olduğunu belirtmek için HTML İspanyolca dilini kullanıyor.
HTML kodunun açılış yönergesinden sonra bir yorum eklenmiştir. İçindeki yorumlar HTML Birkaç satırı işgal edebilir ve kodu açılış işareti olarak kullanabilirler <!-- ve kapanış olarak -->
Kod HTML İki bloktan oluşur: başlık <head> ve vücut <body>. Birincisi belgenin kendisi hakkında bilgi (meta-bilgi) dahil olmak üzere bilgilendirmeyi amaçlar, ikincisi ise belgenin içeriğini desteklemektir.
Direktifte <body> bir etkinlik dahil edildi onload bir işlevin otomatik olarak yürütüleceği JavaScript içerik yüklendikten sonra. Bu kaynak, grafik nesnelerini tanımlayacak kodun yürütülmesini başlatmanıza ve bu grafikleri temsil eden sensörlerin durumu hakkında sunucudan bilgi yüklenirken bunları güncellemenize olanak tanır.
Belgenin başlığına dahil edilebilecek tüm meta bilgilerden HTML, özellikle aşağıdaki direktiflerde açıklananları bilmekle ilgileniyoruz:
-
<title>belgeye bir başlık vermeye yarar. Normalde tarayıcı penceresinde veya ilgili sekmede görünür ve içerdiği grafikleri tanımlamamıza yardımcı olur. -
<charset>belgeyi kodlamak için kullanılan karakter kümesini bildirir. Eñes veya aksan gibi "özel" işaretler için özellikle önemlidir. -
<link>belge arasında bir ilişki kurulmasını sağlar HTML mevcut ve diğer harici olanlar. Stil sayfasını formatta yüklememize yardımcı olacaktır. CSS belgenin görünümü ile. -
<script>yürütülebilir kod içeren bir komut dosyası içerir. Bu yönergeyi kullanarak işlevleri yükleyeceğiz JavaScript grafiklerin oluşturulacağı veya değiştirileceği 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>
|
Örnekte görülebileceği gibi HTML yukarıda, stile sahip belgenin adı (ve varsa yolu) CSS özelliği ile belirtilir href, kod durumunda ise JavaScript kullanılmış src. İkisi de mülkiyeti paylaşıyor type değeri ile text/css y text/javascript sırasıyla.
Belgenin içeriğine göre öğeye karşılık gelen kısım <body>, HTML5 Bir web sayfasında altbilgi, yan bölüm veya gezinme çubuğu gibi en sık kullanılan bileşenler için özel yapılar oluşturmanıza olanak tanır, ancak bizi ilgilendiren, belgeyi bir grafik kabı olarak kullanmaktır. SVG elementler mi <div> bazı blokları iç içe geçirerek hiyerarşik bir yapı tanımlamaya izin veren bağımsız bloklar olarak işlev gören <div> başkalarının içinde.
|
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>
|
Önceki örnekte bir öğe kullanıldı <div> diğer iki tanesini içeriyor. Bu örnek, kodu kullanmak istediğimiz kullanıma yönelik çok önemli iki özelliği tanıtmaktadır. HTML: id bir öğeye benzersiz bir tanımlayıcı atamak için kullanılır HTML (A <div>, bu durumda) ve class görünümü oluşturmak için kullanacağımız bir kategori atanır. Kategorinin veya sınıfın benzersiz olması gerekmez; aslında etkinliğinin büyük kısmı, aynı yönü paylaşan çeşitli unsurlarda yatmaktadır.
Öğe (veya etiket) <p> normalde metin içerecek bir paragrafı tanımlamaya yarar (her ne kadar HTML Bu konuda herhangi bir sınırlama yoktur). Bir paragraf (veya bir paragraf) içinde gruplamalar yapmak için <div>, herhangi bir sınırlama da yoktur) etiketi kullanılır <span>. Bu öğeyle, örneğin bir paragrafın içine metin ekleyerek ona altı çizili veya kalın gibi farklı bir görünüm kazandırmak mümkündür.
Grafik özelliklerinin tanımı ve genel olarak bir öğeyle ilişkili davranış HTML Bir sınıfa atıf yapılması kodda yapılır CSS; belgedeki önceki örnek durumunda aspecto.css.
Karakteristik atamasını optimize etmek için CSS aynı elementin olması mümkündür HTML çeşitli sınıflara aittir ve dolayısıyla onlar tarafından tanımlanan görünüme veya davranışa sahiptir. Bu atamayı yapmak için, farklı sınıfların adlarını, özelliğin sağına virgülle ayırarak yazın. 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>
|
Önceki örnekte eleman <div> olarak tanımlanan primer_hijo Üç sınıf atandı: aspecto_de_hijo, aspecto_raro y tipografia_grande, bunların birlikte öğenin görünümünü ve davranışını tanımlaması beklenir. Aşağıdaki makalede açıklandığı gibi IoT Sensör Grafiklerinin Web Görünümünü CSS ile Tanımlama, birden fazla sınıf kullanıldığında, yönü tanımlayan özelliklerden herhangi biri her ikisinde de tanımlanmışsa, başvurulan sonuncusu geçerli olur.
Görüldüğü gibi elementler <div> Diğer öğeler de dahil olmak üzere başka öğeler içerebilirler. <div>. Daha basit bir durum olurdu <div> metin içeriyordu. Stili tanımlayan görünüm CSS öğenin içerdiği metni de etkiler.
Karakteristik atamasını optimize etmek için CSS aynı elementin olması mümkündür HTML çeşitli sınıflara aittir ve dolayısıyla onlar tarafından tanımlanan görünüme veya davranışa sahiptir. Bu atamayı yapmak için, farklı sınıfların adlarını, özelliğin sağına virgülle ayırarak yazın. 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>
|
Önceki örnekte, ilişkili üç sınıf <div> primer_hijo Öğenin ve onu içeren metnin görünümünü tanımlarlar, örneğin yazıldığı yazı tipini büyük yapar (eğer son sınıfta adının belirttiği amaç doğruysa)
Sürüm 5'ten beri (HTML5) grafik kodunu formata dahil etmek mümkündür SVG kodun kendi içinde HTML bir unsur daha olarak. Kod bakış açısından HTML, içerik SVG bu bir element <svg> farklı grafik öğelerini içeren (çizgiler, daireler, dikdörtgenler...
|
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>
|
Her ne kadar elementlerin grafik özelliklerinin olduğu söylenmiş olsa da HTML bir tarzda tanımlanır CSS ve bir sınıf aracılığıyla onunla ilişkilendirilmiş olsa da, bunların bir kısmını doğrudan öğelere iki şekilde atamak da mümkündür. Bir yandan mülkü kullanabilirsiniz style ve nesnenin farklı grafik özelliklerini değer olarak atayın. Mantıksal olarak, yukarıda belirtilen tekniğin bir sınıfa görünüşünü atamak tercih edilir, ancak bu olasılıkla yeni bir sınıf oluşturmaya gerek kalmadan bir öğeye küçük bir düzeltme (çok özel bir istisna) ekleyebilirsiniz.
Öte yandan bazı unsurlar HTML Görünümlerini tanımlayan belirli özellikleri kullanmanıza izin verirler. Genel olarak, bu özellikler mevcut olsa bile sınıfların kullanılması tercih edilir ancak ne yazık ki tüm öğeler bu alternatifi sunmaz, bazıları ilişkili sınıfa atıfta bulunmak yerine belirli bir değerin doğrudan bu belirli özelliklerle belirtilmesini bekler. Bu tür davranışlara sahip olan unsurlardan biri de tam olarak koddur. SVGözelliklerde genişlik ve yüksekliğin yüzde değerini atamamız gereken width y heightsınıf yerine sırasıyla .
Daha ayrıntılı olarak görüleceği üzere SVG kodundan bahseden makaleÖnerilen basit yöntemi kullanmak için grafiğin boyutlarının yüzde olarak dikkate alınması tavsiye edilir. Nesnenin toplam büyüklüğü durumunda genişlik ve yükseklik değerinde %100 belirtilerek son boyutları belirleyen kap olacaktır ( <div> ile id="dibujo", önceki örnekte)
Grafiğin farklı bileşenleri durumunda SVG (çizgiler, daireler, dikdörtgenler...), 100×100 (herhangi bir birim) ölçülerinde bir alana dahil edilir ve orantı korunmadan dikdörtgen şeklinde genişler. Özellikler viewBox y preserveAspectRatio elementin SVG Bu değerlerin oluşturulmasından sorumludurlar. ilk durumda koordinat noktasından (0,0) koordinat noktasına (100,100) giden dikdörtgen bir görünüme sahiptir ve şu şekilde ifade edilir: "0 0 100 100" ve ikincisinde değerle 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>
|
Yukarıdakilerin tümü ile artık grafik taşıyıcısı görevi görecek eksiksiz bir kod tanımlayabilirsiniz. SVG oluşturulan veya değiştirilen JavaScript. Aşağıdaki örnek, şu formatı kullanan dört grafik bloğu içermektedir: HTML Kullanacağımız temsil önerisinin.
|
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 –>
|
Aşağıda, stil ile biçimlendirilmiş önceki kodun nasıl görüneceğini görebilirsiniz. CSS karşılık gelen, ile üreten JavaScript grafikler SVG IoT'ye bağlı sensörler tarafından depolanan verilerin sunucu okumaları ile. Verilerin sunucudan yüklenmemesi ve istemcide (tarayıcınız) rastgele oluşturulması dışında, kodun geri kalanı bu makale dizisinde tanımlanan teklifte kullanılacaktır.
Bu serideki bir sonraki makale açıklıyor CSS stilleri nasıl tanımlanır grafikler için kap görevi gören HTML koduna görünüm kazandırmak SVG Nesnelerin İnterneti'ne (IoT) bağlı sensörlerin durumunu temsil edecek.
1 yorum