# 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 `suhuLimit` tunggal (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 1. **Model & state** (`sensor_model.dart`, `control_state.dart`, `control_notifier.dart`) — koordinasikan dulu kontrak data dengan backend, terutama untuk poin 4 & 5. 2. **`isometric_transform.dart`** — fondasi matematika, harus benar sebelum painter apa pun dibangun di atasnya. 3. **3 layer painter** (§1) → gabung di `kumbung_map_page.dart`. 4. **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 validasi `RangeSlider` (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 `RangeSlider` min & maks, simpan, verifikasi indikator status berubah dinamis di dashboard. - **Debit air:** simulasikan nilai via data mock/sensor, verifikasi angka & indikator visual pada kartu dashboard.