Aplikasi web pada alat monitor air.
Antar muka visual data.
Halaman ini menjelaskan secara rinci antarmuka web alat monitoring aliran air. Anda akan mempelajari tata letak dan fungsi setiap elemen visual—mulai dari Address Bar hingga gauge dan form data—untuk membantu Anda memantau dan mengelola penggunaan air secara real-time.
1. Aplikasi Web Monitoring Air
Caption : Gambar aplikasi web monitor air
Antarmuka pengguna, berupa dashboard web yang berfungsi sebagai jendela visual untuk data sensor. Halaman web ini secara dinamis menyajikan data konsumsi air (debit, suhu, volume, dan status) dalam bentuk numerik dan visual interaktif, memastikan pengguna mendapatkan informasi yang akurat dan terkini.
Fitur-fitur Web :
Gauge (Meteran):
Fitur ini memberikan visualisasi yang jelas dan mudah dipahami mengenai penggunaan air. Melalui antarmuka web, dua gauge menampilkan data Debit Air dan Suhu Air secara visual, memungkinkan pengguna memantau konsumsi air yang sedang terjadi.
Form Data Informasi :
Form Data menyajikan ringkasan numerik yang rinci, meliputi Debit Air (contoh: 5 L/min), Suhu Air (25∘C), dan Volume Pemakaian Total (contoh: 150 L). Formulir ini juga menyertakan Keterangan Pemakaian ("Normal" atau "Tidak Ada Aliran") yang sangat berguna untuk melacak dan mengelola konsumsi air secara efektif.
2 Address Bar Sebagai Alamat IP ESP
Caption : Gambar address bar
Address Bar adalah tempat pengguna mengetikkan alamat IP unik perangkat untuk mengakses dashboard monitoring. Alamat IP ini berfungsi sebagai penunjuk lokasi perangkat di jaringan lokal, yang memungkinkan peramban menampilkan data konsumsi air secara langsung.
Lokasi address bar .Address Bar terletak di bagian paling atas jendela, tepat di bawah bilah tab. Ini adalah kolom panjang dan horizontal tempat Anda dapat melihat, mengetik, atau mengedit alamat web (URL) dari halaman yang sedang Anda kunjungi.
Alamat IP yang Anda masukkan untuk mengakses perangkat monitor air akan muncul di bilah ini. Ini adalah cara peramban Anda mengetahui ke mana harus mengirimkan permintaan untuk mendapatkan data dari server perangkat.
3. Panel Gauge Debit Air
Caption : Gambar gauge debit air
Gauge Debit Air berfungsi sebagai indikator visual (mirip meteran analog) yang menyajikan laju aliran air (LPM) secara real-time. Data akan diperbarui otomatis, memudahkan pengguna memantau kecepatan aliran air dalam satu pandangan instan.
Daftar isi panel gauge beserta fungsinya:
1. Judul Panel
Judul Gauge memberikan label yang jelas dan ringkas untuk data yang ditampilkan. Fungsinya adalah untuk memastikan pengguna langsung tahu informasi apa yang sedang mereka lihat di dalam gauge tersebut.
2. Visual Gauge
Elemen Visual Gauge Ini adalah bagian grafis utama dari gauge. Fungsinya adalah untuk menyajikan data secara visual dan intuitif, memungkinkan pengguna untuk cepat menilai laju aliran air hanya dengan melihat posisi jarum atau tingkat isian visual.
3. Informasi Satuan
Informasi Satuan Elemen ini menampilkan satuannya (LPM - Liter per Menit). Fungsinya adalah memberikan konteks pada nilai numerik, melengkapi visualisasi, dan memastikan pengguna memahami data.
4. Panel Gauge Suhu Celcius
Caption : Gambar gauge suhu air
Gauge Suhu Air adalah elemen visual yang menampilkan kondisi suhu air saat itu juga dalam satuan ∘C. Tampilannya yang mudah dipahami memungkinkan pengguna memantau perubahan suhu secara real-time tanpa refresh, melengkapi data konsumsi air untuk gambaran kondisi yang lebih lengkap.
Daftar isi panel gauge beserta fungsinya:
1. Judul Gauge
Judul Gauge ("Suhu Air") berfungsi memberikan label yang jelas pada data yang ditampilkan. Tujuannya adalah memastikan pengguna segera memahami jenis informasi suhu air yang disajikan oleh panel.
2. Visual Gauge.
Elemen Visual Gauge Ini adalah bagian grafis utama dari gauge. Fungsinya adalah untuk menyajikan data suhu secara visual dan intuitif, memungkinkan pengguna untuk cepat menilai kondisi suhu air hanya dengan melihat posisi jarum atau tingkat isian visual.
3. Informasi Satuan
Informasi Satuan Elemen ini menampilkan satuannya (Celcius -Suhu Air ). Fungsinya adalah memberikan konteks pada nilai numerik, melengkapi visualisasi, dan memastikan pengguna memahami data.
5. Form Informasi Data Perangkat
Caption : Gambar form informasi nilai sensor
Form ini berfungsi sebagai ringkasan data numerik yang detail. Anda dapat melihat informasi utama Debit Air (LPM), Suhu (°C), dan Volume total (Liter).
Berbeda dengan Gauge yang menampilkan data secara visual untuk pembacaan cepat, form ini menyajikan data dalam format numerik yang lebih rinci dan akurat. Jika gauge ideal untuk pemantauan sekilas, form ini memberikan detail angka yang spesifik, termasuk total volume air yang terakumulasi.
Jadi, sementara gauge memberikan gambaran umum, form ini berfungsi sebagai laporan data yang lebih lengkap, penting untuk melacak penggunaan air secara terperinci dari waktu ke waktu.
Rincian setiap data yang ditampilkan:
1. Debit Air.
Debit Air: Menunjukkan laju aliran air yang sedang terjadi pada saat itu. Data ini disajikan dalam satuan LPM (Liter per Menit).
2. Suhu Air.
Suhu: Menunjukkan suhu air yang diukur oleh sensor. Nilai ini disajikan dalam satuan Celcius. Contoh pada gambar menunjukkan suhu air sebesar 27.50 Celcius.
3. Volume penggunan Air.
Volume: Menunjukkan total volume air yang telah digunakan secara kumulatif. Data ini sangat penting untuk melacak total konsumsi dari waktu ke waktu dan disajikan dalam satuan Liter.
4. Keterangan penggunaan Air.
Status: Menyajikan keterangan sederhana mengenai kondisi aliran air saat itu. Keterangan ini memberikan konfirmasi visual yang mudah dipahami.
Secara keseluruhan, form ini sangat berguna karena mengubah data teknis menjadi informasi yang mudah diakses dan dipahami, sehingga mempermudah pengguna dalam memantau, melacak, dan mengelola konsumsi air di rumah tangga secara real-time.
Tidak ada komentar