Platform Overview

Pythonic Control Interface

Sireum memanfaatkan bahasa Python dan framework Dash untuk mengikat komponen UI real-time dengan data turbidity yang dikirim dari bak air baku IPA Pakar. Halaman ini merinci modul apa saja yang kami gunakan.

Kembali ke Dashboard

Stack Inti

CORE UI

Dash + DBC

Membangun layout responsif dengan komponen siap pakai.

CHARTING

Plotly Graph Objects

Grafik turbidity, pH, dan water level dalam satu canvas interaktif.

DATA LAYER

Pandas + JSON

Membersihkan payload ingest sebelum diparsing ke komponen UI.

GEOSPASIAL

Dash Leaflet

Memetakan lokasi bak air baku dan reservoir cadangan.

Struktur File

  • app.py — entry point Dash & layout utama.
  • components/ — kartu sensor, badge status, kontrol manual.
  • services/ingest.py — koneksi ke syntrioncore.com/ingest.
  • utils/charting.py — helper Plotly, warna, formatter.

Seluruh folder berjalan di atas virtual environment Python 3.11 dengan manajemen dependency melalui requirements.txt.

Import Blueprint

import dash
from dash import dcc, html, Input, Output, State, callback_context, no_update
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from datetime import datetime, timedelta
import pandas as pd
import json
import requests
import dash_leaflet as dl
import random
import math

Alur Data

Dari Sensor ke Visual

  1. Sensor PTU8011, PH-300, dan level ultrasonic mengirim data setiap 2 detik.
  2. Proxy PHP menangkap data lalu meneruskan ke endpoint Dash via requests.
  3. Pandas membersihkan noise sebelum dikirim ke komponen Plotly.
  4. Callback Dash menjaga tampilan tetap hidup dengan state terakhir.