Grafik status sensor yang terhubung ke Internet of Things IoT
Salah satu kelebihan menghubungkan jaringan sensor ke Internet of Things adalah mampu menganalisis data yang diperoleh. Dengan merepresentasikan informasi ini secara grafis, seseorang (sebagai lawan dari suatu program) dapat lebih memahami secara intuitif arti dari besaran yang dipantau, misalnya dengan membandingkannya satu sama lain atau mengikuti perkembangannya dari waktu ke waktu.
Artikel ini memulai seri, terdiri dari empat bagian, yang menjelaskan proposal sederhana untuk representasi grafis dari data yang diperoleh oleh sensor yang terhubung ke IoT. Dengan filosofi yang sama seperti pada artikel lain, metode yang disarankan berfungsi sempurna meskipun tujuan utamanya adalah didaktik. Sebagai profil teknis masyarakat yang menjadi sasaran blog polaridad.es, dan teks ini membahas tentang elektronik dan bukan pengembangan web, setiap bagian berfungsi sebagai pengenalan bahasa atau teknologi yang digunakan: HTML, CSS, SVG y JavaScript.
Artikel-artikel di seri sebelumnya tentang cara menyimpan data yang diperoleh perangkat yang terhubung ke Internet of Things (IoT) Mereka mengakhirinya dengan menjelaskan cara mengakses informasi yang disimpan dalam database. Dalam contoh rangkaian, untuk mempermudah prosesnya, server web digunakan sebagai perantara yang bertanggung jawab untuk menerima data melalui permintaan POST protokol HTTP, menyimpannya dalam database dan menampilkannya di halaman web.
Meskipun kelemahan utama sistem ini adalah kinerja (yang dapat diatasi dengan alternatif seperti Node.js dan MongoDB, yang akan dijelaskan di artikel mendatang), sistem ini memberikan dua keuntungan besar: implementasinya sangat sederhana (termasuk ketersediaan layanan publik) dan dapat menampilkan data di browser, yaitu tidak memerlukan aplikasi khusus (seperti aplikasi untuk perangkat seluler) untuk menyajikan informasi tersimpan yang akan mewakili status historis perangkat yang terhubung ke Internet Hal-hal.
Memanfaatkan keuntungan karena dapat dengan mudah menyajikan pada halaman web informasi yang telah disimpan dengan sistem ini tentang status perangkat yang terhubung ke IoT, artikel ini menjelaskan cara menampilkan informasi ini secara grafis menggunakan format SVG dari JavaScript untuk menghasilkan halaman web secara dinamis HTML.
Ada banyak toko buku JavaScript yang dapat digunakan untuk memecahkan penyajian data secara grafis. Artikel-artikel ini tidak bermaksud mengembangkan artikel lain; Tujuan dari teks ini adalah untuk memahami proses dan mampu mengembangkan implementasi Anda sendiri; tujuan didaktik sekaligus produktif. Jika Anda tertarik untuk menggunakan suatu produk daripada mengembangkannya sendiri, saya sarankan Anda melihat beberapa perpustakaan luar biasa untuk menghasilkan grafik dengan JavaScript dengan lisensi gratis seperti Grafik.js, Highcharts, Alat Bagan Google, Jaman, Raphael, grafik (berdasarkan Raphael), dc.js, Chartist.js, D3.js (rekomendasi saya), C3.js (berdasarkan D3.js), NVD3 (grafik yang dapat digunakan kembali untuk D3.js) ...
Struktur dokumen HTML dengan grafik SVG
Dalam proposal artikel ini untuk menyajikan data sensor secara grafis, halaman web yang menampilkannya terdiri dari:
- dokumen yang berfungsi sebagai wadah dituliskan HTML,
- tampilan halaman ditentukan dengan kode CSS,
- penggambaran grafik dilakukan dengan menggunakan bahasa SVG y
- Membaca data dari server dan menampilkan grafik diprogram JavaScript
Semua elemen, terutama kode HTML halaman tersebut, dapat dihasilkan di server dengan PHP seperti yang dijelaskan dalam artikel di bahasa pemrograman PHP dari seri tentang penyimpanan data dari perangkat yang terhubung ke Internet of Things.
Kode CSS y JavaScript dapat dimuat (diimpor) dalam kode HTML alih-alih ditulis langsung sebagai bagian dari dokumen HTML. Keuntungannya adalah dapat menggunakan kembali dokumen yang sama di beberapa halaman dan dapat mengeditnya dengan lebih nyaman; tapi mungkin ketidaknyamanan karena membutuhkan waktu lebih lama untuk memuat tergantung pada apakah Anda dapat menggunakan kode yang terdapat dalam cache (dimuat pada penggunaan sebelumnya) atau bahkan CDN. Pada tahap produksi, sangatlah mudah untuk mengintegrasikan semua kode dari PHP, menghasilkan satu dokumen HTML dengan semua informasi jika Anda memilih alternatif ini. Sepanjang rangkaian artikel ini, untuk kejelasan, dianggap bahwa kami sedang mengerjakan dokumen terpisah.
Untuk tujuan yang kami minati, untuk menggunakannya sebagai wadah grafis, dan secara kasar, konten struktur dokumen tingkat pertama HTML akan:
|
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>
|
Baris pertama berfungsi untuk menunjukkan kepada browser web bahwa dokumen yang sedang dibaca ditulis HTML, khususnya di versi 5 (dikenal sebagai HTML5). Versi sebelumnya dari HTML, berdasarkan SGML (Bahasa Markup Umum Standar), termasuk definisi tipe dokumen (DTD) yang menyatakan jenis aturan yang digunakan dalam bahasa untuk mendeskripsikan dokumen.
Baris kedua dan terakhir berisi kode HTML di antara arahan <html> y </html> yang masing-masing berfungsi sebagai pembuka dan penutup. Arahannya HTML Mereka mengapit nama dan atribut di antara tanda "kurang dari" dan "lebih besar dari" sehingga membentuk semacam tanda "tanda kurung lancip". Elemen-elemen HTML yang menyertakan konten memiliki arahan penutup yang menyertakan garis miring di depan nama seperti pada </html>.
Properti atau atribut elemen dipisahkan dengan spasi dari nama dan satu sama lain dan dinyatakan sebagai teks biasa atau, lebih sering, sebagai teks (nama properti) diikuti dengan tanda sama dengan dan nilai yang diapit tanda kutip. Dalam hal arahan pembukaan kode HTML properti telah digunakan lang dengan nilai es, lang="es" untuk menunjukkan bahwa teks dokumen HTML menggunakan bahasa Spanyol.
Sebuah komentar telah disertakan setelah arahan pembuka kode HTML. Komentar di HTML Mereka dapat menempati beberapa baris dan menggunakan kode sebagai tanda pembuka <!-- dan sebagai penutup -->
Kode HTML Itu terdiri dari dua blok: header <head> dan tubuh <body>. Yang pertama bertujuan untuk menginformasikan tentang dokumen itu sendiri, termasuk informasi tentangnya (meta-informasi) dan yang kedua adalah untuk mendukung isi dokumen.
Dalam arahan <body> sebuah acara telah disertakan onload yang dapat digunakan untuk menjalankan suatu fungsi secara otomatis JavaScript setelah konten dimuat. Sumber daya ini memungkinkan Anda untuk memulai eksekusi kode yang akan menentukan objek grafik dan memperbaruinya saat informasi dimuat dari server tentang status sensor yang mewakili grafik ini.
Dari semua metainformasi yang dapat dimasukkan dalam header dokumen HTML, kami secara khusus tertarik untuk mengetahui hal yang dijelaskan oleh arahan berikut:
-
<title>yang berfungsi untuk memberi judul pada dokumen. Biasanya ini akan muncul di jendela browser atau di tab yang sesuai dan akan membantu kami mengidentifikasi grafik yang dikandungnya. -
<charset>mendeklarasikan kumpulan karakter yang digunakan untuk menyandikan dokumen. Hal ini sangat penting untuk tanda-tanda "khusus" seperti eñes atau aksen. -
<link>memungkinkan membangun hubungan antar dokumen HTML saat ini dan eksternal lainnya. Ini akan membantu kita memuat style sheet dalam format CSS dengan tampilan dokumen tersebut. -
<script>berisi skrip dengan kode yang dapat dieksekusi. Dengan menggunakan arahan ini kita akan memuat fungsinya JavaScript yang dapat digunakan untuk menghasilkan atau memodifikasi 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>
|
Seperti yang dapat dilihat pada contoh HTML di atas, nama (dan jalur, jika ada) dokumen dengan gaya CSS ditunjukkan dengan atributnya href, sedangkan dalam hal kode JavaScript itu digunakan src. Keduanya berbagi kepemilikan type dengan nilai text/css y text/javascript masing-masing.
Sehubungan dengan isi dokumen, bagian yang sesuai dengan unsurnya <body>, HTML5 Ini memungkinkan Anda membuat struktur spesifik untuk komponen yang paling sering muncul di halaman web seperti footer, bagian samping, atau bilah navigasi, tetapi yang menarik bagi kami adalah menggunakan dokumen tersebut sebagai wadah grafis. SVG adalah elemennya <div> yang berfungsi sebagai blok independen yang memungkinkan pendefinisian struktur hierarki dengan menyusun beberapa blok <div> dalam diri orang lain.
|
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>
|
Dalam contoh sebelumnya sebuah elemen digunakan <div> yang berisi dua lainnya. Contoh ini memperkenalkan dua properti yang sangat penting untuk penggunaan kode yang ingin kita buat. HTML: id yang digunakan untuk menetapkan pengidentifikasi unik ke suatu elemen HTML (A <div>, dalam hal ini) dan class yang dengannya ia diberi kategori yang akan kita gunakan untuk menentukan tampilannya. Kategori, kelas, tidak harus unik, bahkan efektivitasnya sebagian besar terletak pada beberapa elemen yang memiliki aspek yang sama.
Elemen (atau tag) <p> berfungsi untuk mendefinisikan paragraf yang biasanya berisi teks (walaupun dalam HTML tidak ada batasan dalam hal ini). Untuk membuat pengelompokan dalam satu paragraf (atau a <div>, juga tidak ada batasan) tag yang digunakan <span>. Dengan elemen ini dimungkinkan, misalnya, untuk memasukkan teks ke dalam paragraf untuk memberikan tampilan yang berbeda seperti bergaris bawah atau tebal.
Definisi karakteristik grafis dan secara umum perilaku yang dikaitkan dengan suatu elemen HTML Mengatribusikan kelas dilakukan dalam kode CSS; dalam kasus contoh sebelumnya dalam dokumen aspecto.css.
Untuk mengoptimalkan penugasan karakteristik CSS ada kemungkinan bahwa elemen yang sama HTML milik beberapa kelas dan dengan demikian memiliki penampilan atau perilaku yang ditentukan oleh mereka. Untuk membuat tugas ini, tuliskan nama kelas-kelas yang berbeda, pisahkan dengan koma di sebelah kanan properti. 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>
|
Pada contoh sebelumnya, elemen <div> yang telah diidentifikasi sebagai primer_hijo Tiga kelas telah ditugaskan: aspecto_de_hijo, aspecto_raro y tipografia_grande, yang seharusnya bersama-sama menentukan tampilan dan perilaku elemen. Seperti yang dijelaskan pada artikel berikut di Mendefinisikan Tampilan Web Grafik Sensor IoT dengan CSS, saat menggunakan beberapa kelas, jika salah satu properti yang menentukan aspek ditentukan di keduanya, properti yang terakhir direferensikan akan berlaku.
Seperti yang telah terlihat, unsur-unsurnya <div> Mereka mungkin mengandung unsur lain, termasuk unsur lainnya <div>. Kasus yang lebih sederhana adalah <div> yang berisi teks. Tampilan yang mendefinisikan gaya CSS juga akan mempengaruhi teks yang terkandung dalam elemen.
Untuk mengoptimalkan penugasan karakteristik CSS ada kemungkinan bahwa elemen yang sama HTML milik beberapa kelas dan dengan demikian memiliki penampilan atau perilaku yang ditentukan oleh mereka. Untuk membuat tugas ini, tuliskan nama kelas-kelas yang berbeda, pisahkan dengan koma di sebelah kanan properti. 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>
|
Pada contoh sebelumnya, tiga kelas terkait dengan <div> primer_hijo Mereka akan menentukan tampilan elemen dan teks yang memuatnya, misalnya, membuat font penulisannya menjadi besar (jika tujuan yang ditunjukkan oleh namanya di kelas terakhir benar)
Sejak versi 5 (HTML5) dimungkinkan untuk memasukkan kode grafik dalam format SVG dalam kode itu sendiri HTML sebagai satu elemen lagi. Dari sudut pandang kode HTML, isinya SVG itu elemen <svg> yang berisi berbagai elemen grafis (garis, lingkaran, persegi panjang...
|
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>
|
Meskipun telah dikatakan bahwa karakteristik grafis dari elemen-elemen tersebut HTML didefinisikan dalam suatu gaya CSS dan dikaitkan dengannya melalui sebuah kelas, dimungkinkan juga untuk menetapkan beberapa di antaranya secara langsung ke elemen dengan dua cara. Di satu sisi, Anda dapat menggunakan properti tersebut style dan menetapkan karakteristik grafis yang berbeda dari objek sebagai nilainya. Logikanya, lebih baik menggunakan teknik menugaskan aspek ke kelas yang disebutkan di atas, tetapi dengan kemungkinan ini Anda dapat menambahkan sedikit koreksi pada elemen (pengecualian khusus) tanpa harus membuat kelas baru.
Di sisi lain, beberapa elemen HTML Mereka memungkinkan Anda untuk menggunakan properti tertentu yang menentukan penampilannya. Secara umum, bahkan jika properti ini ada, lebih baik menggunakan kelas tetapi, sayangnya, tidak semua elemen menawarkan alternatif ini, beberapa mengharapkan nilai tertentu untuk ditunjukkan secara langsung dengan properti spesifik tersebut daripada merujuk ke kelas terkait. Salah satu elemen yang memiliki perilaku seperti ini adalah kodenya SVG, yang mana kita harus menetapkan nilai persentase lebar dan tinggi di properti width y height, masing-masing, bukan kelasnya.
Seperti yang akan dilihat lebih detail pada artikel yang membahas tentang kode SVG, untuk menggunakan metode sederhana yang diusulkan, disarankan untuk mempertimbangkan dimensi grafik sebagai persentase. Dalam hal ukuran total suatu benda, dengan menunjukkan 100% pada nilai lebar dan tinggi, maka wadahlah yang menentukan dimensi akhir ( <div> dengan id="dibujo", pada contoh sebelumnya)
Dalam kasus komponen grafik yang berbeda SVG (garis, lingkaran, persegi panjang...), termasuk dalam luas berukuran 100×100 (satuan apa pun) dan diperluas dalam bentuk persegi panjang tanpa mempertahankan proporsinya. Properti viewBox y preserveAspectRatio elemen SVG Mereka bertanggung jawab untuk menetapkan nilai-nilai ini. dalam kasus pertama dengan tampilan persegi panjang yang dimulai dari titik koordinat (0,0) ke titik koordinat (100,100) dan dinyatakan sebagai "0 0 100 100" dan yang kedua dengan nilainya 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>
|
Dengan semua hal di atas, kini Anda dapat menentukan kode lengkap yang akan berfungsi sebagai wadah grafis. SVG dihasilkan atau dimodifikasi dari JavaScript. Contoh di bawah ini berisi empat blok grafis yang menggunakan format tersebut HTML dari proposal representasi yang akan kita gunakan.
|
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 –>
|
Di bawah ini Anda dapat melihat seperti apa tampilan kode sebelumnya, yang diformat dengan gaya CSS sesuai, menghasilkan dengan JavaScript grafiknya SVG dengan pembacaan data server yang disimpan oleh sensor yang terhubung ke IoT. Kecuali datanya tidak dimuat dari server tetapi dihasilkan secara acak di klien (browser Anda), kode lainnya akan digunakan dalam proposal yang ditentukan dalam rangkaian artikel ini.
Artikel selanjutnya dalam seri ini menjelaskan cara mendefinisikan gaya CSS untuk memberikan tampilan pada kode HTML yang berfungsi sebagai wadah grafis SVG yang dapat digunakan untuk mewakili keadaan sensor yang terhubung ke Internet of Things (IoT).
komentar 1