6.1 KiB
Rencana Implementasi: Revisi Aplikasi JTA
Dokumen ini memuat rencana kerja untuk 5 revisi utama pada aplikasi monitoring kumbung jamur JTA, berdasarkan masukan dosen pembimbing.
Ringkasan Revisi
| # | Revisi | Pendekatan Singkat |
|---|---|---|
| 1 | Interior 3D lumbung + posisi sensor | Isometrik 2.5D via CustomPainter (bukan engine 3D) |
| 2 | Heatmap suhu & kelembapan | Radial gradient overlay di atas peta isometrik |
| 3 | Dashboard referensi budidaya | Panel edukasi statis di halaman peta/monitoring |
| 4 | Pengukuran debit air | Field baru di SensorModel + kartu dashboard |
| 5 | Rentang batas suhu (min-max) | RangeSlider menggantikan slider tunggal |
1. Interior 3D Lumbung & Posisi Sensor
Pendekatan: Isometrik 2.5D dengan CustomPainter + transformasi matriks — menghindari library 3D berat (Unity/OpenGL) yang sebelumnya membuat APK membengkak.
Visual: Denah box transparan, rak baglog sebagai balok 3D, koridor, dan pin sensor melayang dengan animasi pulsing glow menunjukkan posisi di dalam rak.
Arsitektur painter — dipisah 3 layer agar performa terjaga:
| Layer | Isi | Repaint saat |
|---|---|---|
| Struktur statis | Grid lantai, dinding, balok rak | Kamera/zoom berubah (bungkus RepaintBoundary) |
| Heatmap overlay | Radial gradient per sensor | Data sensor update / toggle suhu-kelembapan |
| Pin sensor + animasi | Pin melayang, pulsing glow, tag pembacaan | Tiap frame animasi (AnimationController) |
Layer paling murah (pin) yang repaint terus-menerus, bukan seluruh scene rak — ini krusial supaya animasi pulsing tidak memicu redraw grid/rak 60x/detik.
Perlu diputuskan sebelum coding UI: posisi sensor (X, Y, Z, radius) disimpan di backend (persist antar device) atau local config saja?
2. Heatmap Suhu & Kelembapan
Pendekatan: Lapisan radial gradient semi-transparan di sekitar posisi sensor pada peta isometrik.
Skala warna:
- Suhu: Biru (dingin) → Hijau (optimal) → Merah/Oranye (panas)
- Kelembapan: Kuning/Oranye (kering) → Hijau (cukup) → Biru tua/Sian (basah)
Toggle UI untuk berpindah mode.
Perhatian teknis: jika area coverage antar sensor overlap, perlu logika blending (ambil nilai maksimum atau rata-rata terbobot di titik pertemuan) agar transisi warna halus — bukan sekadar menumpuk gradient satu-satu.
3. Dashboard Referensi Budidaya Jamur
Pendekatan: Panel edukasi di bawah peta kumbung / halaman monitoring utama.
Isi:
- Rentang ideal: suhu 22°C–28°C, kelembapan 80%–90%
- Waktu penyiraman terbaik: pagi 06:00–08:00, sore 16:00–18:00
Catatan: nilai-nilai ini sebaiknya dibuat dapat dikonfigurasi (backend/local settings), bukan hardcode di UI — supaya mudah diubah jika jenis jamur atau rekomendasi berubah nanti.
4. Pengukuran Debit Air
Pendekatan: Menambahkan waterFlow (L/menit) dan waterVolume (Liter) ke SensorModel dan ApiIotService, terintegrasi dengan flow meter ESP32.
UI: Kartu status "Debit Air" bergradien biru di dashboard utama.
Prasyarat: pastikan flow meter sudah terpasang dan datanya terbaca di firmware ESP32 — tanpa ini, verifikasi hanya bisa dengan data mock, belum data sensor asli.
5. Rentang Batas Suhu (Min-Max)
Pendekatan: Slider tunggal (suhuLimit) → RangeSlider dengan batas minimum & maksimum (contoh: 22°C–28°C). Status/otomatisasi penyiraman berubah warna (kuning/merah) jika suhu keluar rentang.
Dependensi penting — bukan cuma perubahan UI:
- Endpoint API/backend harus disesuaikan untuk menerima & menyimpan dua nilai (
suhuMin,suhuMax), bukan satu. - Perlu strategi migrasi untuk data lama yang masih pakai
suhuLimittunggal (misal fallback:suhuMinLimit = suhuLimit - offset). - Validasi
RangeSlider: batas bawah tidak boleh melebihi batas atas, termasuk saat data dari API ternyata invalid/null.
Proposed Changes
Data Model & Network Layer
| File | Perubahan |
|---|---|
[MODIFY] sensor_model.dart |
+ waterFlow (double, L/min), waterVolume (double, L) |
[MODIFY] control_state.dart |
+ suhuMinLimit, suhuMaxLimit (menggantikan suhuLimit) |
[MODIFY] control_notifier.dart |
saveThreshold menerima suhuMin & suhuMax; sinkronisasi parsing respon API |
UI Components
| File | Perubahan |
|---|---|
[NEW] kumbung_map_page.dart |
Peta isometrik, toggle heatmap, panel referensi, pengaturan koordinat sensor |
[NEW] isometric_kumbung_painter.dart |
3 CustomPainter terpisah: struktur statis, heatmap, pin sensor (lihat §1) |
[NEW] isometric_transform.dart |
Utility konversi koordinat world (X,Y,Z) → screen 2D — dipakai oleh ketiga painter di atas |
[MODIFY] sensor_limit_card.dart |
Slider suhu tunggal → RangeSlider |
[MODIFY] home_page.dart |
+ Kartu "Debit Air", info waktu penyiraman otomatis |
[MODIFY] main_page.dart |
Aktifkan tab Peta (KumbungMapPage) di BottomNavigationBar |
Urutan Eksekusi yang Disarankan
- Model & state (
sensor_model.dart,control_state.dart,control_notifier.dart) — koordinasikan dulu kontrak data dengan backend, terutama untuk poin 4 & 5. isometric_transform.dart— fondasi matematika, harus benar sebelum painter apa pun dibangun di atasnya.- 3 layer painter (§1) → gabung di
kumbung_map_page.dart. - UI pendukung:
sensor_limit_card.dart,home_page.dart,main_page.dart.
Membangun UI di atas kontrak data yang masih berubah-ubah berisiko menyebabkan rework.
Verification Plan
Automated Tests
flutter analyze— memastikan tidak ada warning/error.- Build APK lokal — memastikan kompilasi berhasil.
- Tambahan disarankan: unit test untuk
isometric_transform.dart(bug transformasi koordinat sulit dilacak dari tampilan visual saja), widget test untuk validasiRangeSlider(batas min < max).
Manual Verification
- Peta 3D: ubah koordinat sensor via pengaturan, toggle heatmap on/off, pastikan pin berpindah sesuai posisi baru.
- Rentang suhu: geser
RangeSlidermin & maks, simpan, verifikasi indikator status berubah dinamis di dashboard. - Debit air: simulasikan nilai via data mock/sensor, verifikasi angka & indikator visual pada kartu dashboard.