Tag meter

Tag meter digunakan untuk menampilkan suatu nilai dalam bentuk yang dihias dengan indah.

Tampilan tag berupa bilah yang diisi sebagian atau seluruhnya. Bilah tersebut dapat berwarna hijau, kuning, atau merah (warna bilah tergantung pada nilai atribut, tentang hal ini akan dijelaskan nanti):

Tag meter sebaiknya digunakan, contohnya, dalam situasi berikut: Anda ingin menampilkan nilai suhu saat ini di layar, di mana suhu dapat berubah dari 0 hingga 100. Anda harus menentukan atribut-atribut berikut: atribut value harus menunjukkan nilai suhu saat ini, atribut min - nilai minimum yang mungkin (dalam kasus kami 0), atribut max - nilai maksimum yang mungkin (dalam kasus kami 100).

Tergantung pada nilai atribut value, bilah akan menjadi kecil atau besar. Jika value ditetapkan ke nilai 10, maka bilah akan kecil (karena 10 sangat dekat dengan minimum - nol), tetapi jika nilai 90 ditetapkan, maka bilah akan besar (karena 90 dekat dengan maksimum - 100). Jika nilai 100 ditetapkan - maka bilah akan memenuhi seluruh elemen (karena nilai telah mencapai maksimum).

Jika nilai yang ditetapkan lebih besar dari 100, maka bilah tetap akan memenuhi seluruh elemen. Jika 0 atau kurang ditetapkan - maka bilah tidak akan muncul sama sekali.

Contoh

Nilai atribut value kecil:

:

Contoh

Nilai atribut value besar:

:

Contoh

Nilai atribut value sedang:

:

Contoh

Nilai atribut value sama dengan maksimum:

:

Contoh

Nilai atribut value sama dengan minimum:

:

Contoh

Nilai atribut value lebih dari maksimum:

:

Contoh

Nilai atribut value kurang dari minimum:

:

Menambahkan atribut low dan high

Dalam tag meter ada 2 atribut lagi: low dan high.

Mari kita lihat cara kerjanya dengan contoh suhu. Ingatlah bahwa suhu minimum kami adalah 0, dan maksimum - 100. Sekarang misalkan kita ingin membuat rentang berikut - "suhu dingin" dari 0 hingga 20, "normal" dari 20 hingga 80 dan "panas" dari 80 hingga 100.

Untuk menetapkan suhu dingin, kita tentukan nilai atribut low sebagai angka 20. Hasilnya, dari nol (nilai atribut ini min) hingga 20 (nilai atribut low) adalah area nilai rendah kami.

Untuk menetapkan suhu panas, kita tentukan nilai atribut high sebagai angka 80. Hasilnya, dari 80 (nilai ini atribut high) hingga 100 (nilai atribut max) adalah area nilai tinggi kami.

Suhu normal akan dari 20 (nilai atribut low ini) hingga 80 (nilai atribut high). Area ini disebut area nilai normal.

Sekarang, tergantung pada area mana nilai atribut value jatuh, bilah akan diwarnai dengan warna hijau atau kuning. Hijau akan muncul jika kita masuk ke area nilai normal, dan kuning - jika masuk ke area nilai tinggi atau rendah.

Contoh

Nilai atribut value masuk ke area nilai rendah:

:

Contoh

Nilai atribut value masuk ke area nilai normal:

:

Contoh

Nilai atribut value masuk ke area nilai tinggi:

:

Menambahkan atribut optimum

Atribut optimum menentukan nilai optimal. Untuk contoh kami, suhu optimal bisa jadi suhu dingin, normal, atau panas - terserah pilihan Anda. Misalkan, Anda menentukan bahwa suhu optimal adalah dingin. Sekarang, tergantung pada nilai atribut value (yaitu suhu saat ini) warna bilah akan menjadi hijau, kuning, atau merah.

Jika suhu saat ini masuk ke area suhu optimal (dan kami telah menentukan bahwa optimal adalah dingin), maka warna bilah akan hijau. Jika suhu saat ini masuk ke rentang yang berdekatan dengan optimal (dalam kasus kami ini adalah suhu normal), maka bilah akan menjadi kuning. Jika suhu saat ini masuk ke rentang yang tidak berdekatan dengan optimal (dalam kasus kami ini adalah suhu panas), maka bilah akan menjadi merah.

Dengan cara yang sama, semuanya akan terjadi, jika suhu optimal ditetapkan sebagai panas. Dalam hal ini, jika suhu saat ini masuk ke area suhu panas - bilah akan hijau, jika masuk ke area normal - kuning, jika masuk ke area dingin - merah.

Jika optimal ditetapkan sebagai suhu normal, maka bilah hanya bisa hijau (jika suhu saat ini masuk ke normal) atau kuning (jika suhu saat ini masuk ke rentang yang berdekatan dengan normal, yaitu panas atau dingin).

Untuk menentukan rentang mana yang optimal, Anda perlu menetapkan nilai atribut optimum sebagai angka apa pun dari rentang tersebut.

Dalam contoh di bawah, nilai atribut optimum masuk ke area nilai rendah (yaitu suhu dingin).

Contoh

Nilai atribut value masuk ke area nilai rendah:

:

Contoh

Nilai atribut value masuk ke area nilai normal:

:

Contoh

Nilai atribut value masuk ke area nilai tinggi:

:

Dalam contoh di bawah, nilai atribut optimum masuk ke area nilai tinggi (yaitu suhu panas).

Contoh

Nilai atribut value masuk ke area nilai rendah:

:

Contoh

Nilai atribut value masuk ke area nilai normal:

:

Contoh

Nilai atribut value masuk ke area nilai tinggi:

:

---

Dalam contoh di bawah, nilai atribut optimum masuk ke area nilai normal (yaitu suhu normal).

Contoh

Nilai atribut value masuk ke area nilai rendah:

:

Contoh

Nilai atribut value masuk ke area nilai normal:

:

Contoh

Nilai atribut value masuk ke area nilai tinggi:

:

Browser lama

Browser lama tidak dapat menampilkan tag meter dalam bentuk yang indah dan akan menampilkan sebagai gantinya isi dari tag itu sendiri:

:

Atribut

Nilai atribut dapat berupa bilangan pecahan dan negatif.

Atribut	Keterangan
value	Menetapkan nilai saat ini. Atribut wajib.
min	Menentukan nilai minimum yang mungkin. Nilai default: 0.
max	Menentukan nilai maksimum yang mungkin. Nilai default: 1.
low	Menentukan batas area nilai rendah. Nilai rendah akan dari angka dalam atribut min hingga angka dalam atribut low.
high	Menentukan batas area nilai tinggi. Nilai tinggi akan dari angka dalam atribut high hingga angka dalam atribut max.
optimum	Menentukan area nilai optimal.

Lihat juga