Menggambar grafik data dari sensor yang terhubung ke Internet of Things (IoT) dengan SVG
Dalam artikel ini di seri tentang mewakili grafik data di IoT Saya menjelaskan cara memplot grafik menggunakan bahasa SVG. Seperti pada kesempatan lain, artikel ini juga berfungsi sebagai pengenalan singkat tentang bahasa tersebut.
format SVG
SVG sesuai dengan akronim untuk Scalable Vector Graphics (grafik vektor yang dapat diskalakan, dalam bahasa Inggris). Itu sebuah bahasa markup yang didasarkan pada XML dan itu memungkinkan, terutama, untuk mendeskripsikan suatu gambar berdasarkan geometri yang mendefinisikannya; berbeda dengan metode matriks, yang digunakan misalnya untuk foto, yang akan menggunakan kisi-kisi piksel berwarna untuk menyandikannya.
di dalam sebuah gambar SVG Sebuah gambar (matriks piksel) juga dapat dimasukkan, baik mengacu pada dokumen eksternal atau tertanam dalam gambar itu sendiri. SVG.
Versi bahasa terkini pada saat artikel ini ditulis adalah SVG1.1 meskipun definisi versinya sudah dikembangkan SVG2. Sebisa mungkin saya akan berusaha membuat apa yang dijelaskan di bagian pendahuluan, meskipun mengacu pada SVG1.1 juga berfungsi untuk SVG2.
Jika gambarnya SVG Itu disertakan dalam dokumen terpisah dan bukan dalam kode HTML (proposal saya dalam solusi ini untuk mewakili data IoT menyematkannya dalam kode HTML) harus diawali dengan referensi XML dan definisi tipe dokumen (DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
Pada baris pertama kode sebelumnya, versinya diberitahukan XML digunakan (1.0) pengkodean karakter (UTF-8) dan menunjukkan apakah Anda memerlukan definisi eksternal (standalone="no") atau merupakan dokumen yang berdiri sendiri (standalone="yes"). Baris kedua mengungkapkan definisi tipe dokumen (DTD), yang tidak diperlukan di versi berikutnya SVG.
Kode yang digunakan untuk menentukan gambar terlampir di antara label <sgv> y </sgv> yang juga menunjukkan, sebagaimana telah disebutkan ketika dibicarakan Kode HTML yang bertindak sebagai wadah grafik data di IoT, ukuran, bagian dari jumlah yang diwakili, proporsi serta jenis dan versinya.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
Contoh di atas mendefinisikan gambar dengan lebar 500 piksel kali tinggi 250 piksel (area pandang 500x250) yang akan dipotong dengan persegi panjang 460x80 (kotak tampilan 460x80) mulai dari koordinat 20,10 menggunakan semua ruang yang tersedia dalam wadah (sebuah elemen pada halaman web, di kasus kami) tanpa menghormati proporsi awal yang akan digunakan preserveAspectRatio="none". Selain itu, kini Anda dapat melihat konten pertama dokumen, komentar-komentar yang disertakan di antaranya <!-- y --> seperti dalam format lain berdasarkan XML.
Sistem koordinat dipilih oleh SVG Berorientasi horizontal (sumbu X) dan vertikal (sumbu Y) dan arah positifnya sesuai tulisan Barat yaitu nilai sumbu X bertambah ke kanan dan nilai positif sumbu Y bertambah ke bawah.
Definisikan grafik dengan SVG
Untuk menentukan grafik informasi yang disimpan oleh sensor kita yang terhubung ke IoT, kita perlu menentukan jenis objek yang digambar, geometrinya (koordinat, dimensi...) dan tampilannya (ketebalan, warna...) Di contoh artikel ini grafik garis yang dapat dibuat dengan cara menggabungkan ruas-ruas garis dengan suatu benda line, paling berguna untuk memplot elemen independen, atau dengan garis multi-segmen, sebuah objek path, lebih praktis untuk rangkaian saluran yang terhubung.
Dengan elemen path Tujuannya adalah untuk membuat gambar seperti pada gambar di bawah ini, yang terdiri dari jalur tertutup yang diisi dengan warna lebih terang yang bagian atasnya ditutup dengan jalur terbuka, tanpa isian dan digambar dengan garis tebal.
Untuk mendeskripsikan garis, ekspresi tipe digunakan:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
Dimana X1,Y1 adalah koordinat titik pertama pada garis dan X2,Y2 adalah koordinat titik kedua. Atribut digunakan stroke-width untuk menentukan ketebalannya. Ada beberapa cara untuk mendefinisikan tampilan suatu objek SVG, dengan properti individualnya, seperti yang sebelumnya, atau dengan properti style yang menyatukan semuanya dan metode apa yang akan digunakan dalam proposal artikel.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Kode di atas bergabung di properti style nilai-nilai dari stroke (warna guratan), stroke-width (ketebalan garis) dan stroke-opacity (opasitas objek)
Deskripsi suatu objek path memiliki bentuk
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
Kode di atas menggunakan operasi SVG M, L y Z di dalam properti d, yang masing-masing berarti “moveto” (pindah ke), “lineto” (jalur ke) dan “closepath” (dekat jalur). Mereka dapat dinyatakan dalam huruf besar atau kecil untuk menunjukkan nilai absolut atau relatif jika sesuai (dalam kasus Z, misalnya, tidak relevan). Ada banyak operasi lain yang, misalnya, kita dapat menggambar kurva melingkar, kurva elips, kurva Bézier... yang tidak kita perlukan dalam contoh ini.
Meskipun proposal ini menggambar grafik garis yang dapat melingkupi suatu area, akan berguna jika menggambar elemen sederhana lainnya untuk menandai titik atau menyorot area. Dari yang tersedia di SVG Poligon (yang juga dapat digunakan untuk menggambar isian), persegi panjang (lebih sesuai untuk kasus tertentu), elips, dan lingkaran (sebagai kasus elips tertentu) bisa jadi menarik. Sintaks elemen-elemen tersebut dapat dilihat pada contoh kode berikut.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
|
Tampilan kode sebelumnya akan seperti gambar berikut (dengan beberapa trik agar bisa menggunakan kembali poin-poin dari contoh di atas)
Titik-titik poligon (polygon) ditunjukkan di properti points sebagai pasangan koordinat x,y yang dipisahkan oleh spasi di antara keduanya. Untuk mendefinisikan elips (ellipse) properti digunakan cx (x koordinat pusat), cy (y koordinat pusat), rx (lebar) dan ry (tinggi). Alih-alih dua nilai radius (radius horizontal dan vertikal, rx y ry) lingkaran (circle) ditentukan oleh radius dengan properti r dan koordinat pusat dengan cx y cy. Untuk mendefinisikan persegi panjang (rectangle) koordinat sudut kiri atas ditunjukkan (x e y) Lebar (width) dan yang tinggi (height)
Terakhir, untuk memasukkan teks, digunakan objek text sebagai berikut:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Posisi teks ditunjukkan dengan koordinat x dan y, font sesuai dengan properti font-family, ukuran dengan font-size dan warna dengan propertinya fill.
HTML memungkinkan Anda mengintegrasikan gambar SVG sebagai elemen lain dari halaman. Seperti objek lainnya, Anda dapat menggunakan properti tersebut ID untuk memberi mereka pengidentifikasi unik yang kemudian dapat digunakan untuk merujuk mereka JavaScript untuk memanipulasi mereka. Dari sudut pandang HTML, Sebuah Objek SVG akan memiliki bentuk berikut:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
Dengan apa yang telah kita lihat sejauh ini, jenis grafik dasar yang dicari dalam proposal ini dapat digambarkan, tetapi untuk memberikan fleksibilitas pada tampilan wadah (halaman web), proporsi grafik akan terpengaruh. (Misalnya preserveAspectRatio="none") dengan memodifikasi ukurannya untuk menyesuaikannya dengan tata letak elemen di jendela browser HTML.
Secara umum, ada dua alternatif perilaku ketika memodifikasi ukuran jendela browser yang menampilkan halaman web yang memuat bagan: (1) mempertahankan ukuran bagan SVG menyisakan ruang kosong jika ada kelebihan atau menambahkan scroll bar jika ada yang hilang atau (2) mengubah ukuran grafik SVG secara berirama untuk mengubah ukuran jendela browser yang menampilkan web. Jika Anda memilih rumus pertama, Anda dapat memprediksi besaran dan menggambar dengan pengukuran absolut, meskipun dikoreksi berdasarkan ukuran yang dipilih dan nilai grafik. Jika Anda memilih cara kedua, yang saya usulkan, besarannya selalu berupa persentase dari nilai yang diwakili. Kelebihan metode kedua adalah kemampuan beradaptasi dengan web dan kekurangannya adalah penggambaran elemen yang menyertai grafik, seperti titik atau teks.
Untuk memperbaiki deformasi yang mungkin terjadi pada ketebalan garis, digunakan efek. vector-effect="non-scaling-stroke" pada rute yang diperlukan (yang memiliki nilai stroke Selain daripada none). Untuk objeknya text Tidak ada efek yang sebanding, sehingga perlu dilakukan deformasi (bersama dengan efek yang terkait dengannya) ke arah yang berlawanan dengan arah yang dihasilkan oleh perubahan ukuran wadah.
Transformasi dalam SVG Mereka dapat diterapkan pada kelompok objek sehingga beberapa teks dan objek lain dalam grafik dapat diintegrasikan ke dalam satu kelompok dan, lebih mudahnya, melakukan transformasi untuk semuanya.
Elemen yang merupakan bagian dari grup disertakan di antara tag <g> y </g>, untuk menetapkan transformasi, properti digunakan transform dan serangkaian operasi yang, untuk kasus kami, relevan scale, yang menunjukkan faktor perbesaran horizontal dan vertikal. Jika nilai dari scale lebih besar dari satu akan memperlebar sumbu yang bersangkutan dan jika kurang dari satu maka akan terjadi pengurangan ukuran benda sepanjang sumbu tersebut.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
Pada contoh sebelumnya, teks pertama dan kedua dimodifikasi dengan mengurangi separuh pengukuran horizontalnya dan menggandakan pengukuran vertikal dengan nilai 0.5 dan 2.0 yang digunakan dalam scale(0.5,2.0)
Artikel selanjutnya dalam seri ini representasi grafik data dari sensor yang terhubung ke IoT menjelaskan cara menghasilkan atau memodifikasi grafik secara real time menggunakan JavaScript yang memungkinkan Anda melihat animasi grafik saat mewakili nilai terakhir yang dimuat dari server.
Berikut ini adalah contoh tampilan grafik yang dihasilkan menggunakan proposal ini.
Posting