ITS MapsITS Maps Documentation

Technical Documentation

ITS Maps

Dokumentasi komprehensif untuk WebApp, Android APK, Microsoft Store Windows app, Windows Widgets, AI RF-DETR, Firebase RTDB, dan Raspberry Pi controller.

Developer: Hanifa Septhi Larasati
Publisher: Hanifa Teams
Website: https://itstelkom.web.app
Updated: 21 July 2026

Documentation

ITS Maps technical documentation

Dokumentasi ini sudah mencakup tabel fitur, link download, diagram Mermaid, rumus LaTeX, demo kode yang bisa dijalankan, screenshot/mockup, dan atlas kode baris per baris.

Buka Method GitHub Preview PDF

User download

Link aplikasi

Android

ITS Maps APK

Untuk pengguna Android yang ingin memasang aplikasi langsung.

QR APK langsung

Download APK encoded (.b64) Download APK langsung

Microsoft Store

ITS Maps Windows

Store ID: 9MWFGGW3FD2C. Deep link web tersedia setelah produk live.

QR Microsoft Store

Buka Microsoft Store app

WebApp

ITS Maps Web

Versi web/PWA berjalan langsung dari Firebase Hosting.

QR WebApp

Buka WebApp Buka Dokumentasi

Architecture

Arsitektur end-to-end

flowchart LR
  Pi["Raspberry Pi Controller"] -->|"heartbeat, traffic, GPS, snapshots"| RTDB[("Firebase RTDB")]
  RTDB --> Web["WebApp / PWA"]
  RTDB --> Android["Android APK + Widgets"]
  RTDB --> Win["Windows Desktop MSIX"]
  RTDB --> Widgets["Windows Widget Board"]
  Web --> AI["Browser RF-DETR"]
  Android --> Lock["Lock-screen Dashboard"]
  Win --> Store["Microsoft Store"]
  Widgets --> Cards["Adaptive Cards"]

Matematika dan logika

Formulasi yang dipakai kode

Status realtime

Perangkat dianggap online jika selisih waktu heartbeat masih di bawah ambang offline.

\[\Delta t=t_{now}-t_{lastSeen}\]

\[online(d)=\begin{cases}1,&\Delta t\le T_{offline}\\0,&\Delta t>T_{offline}\end{cases}\]

Total kendaraan

Tile kendaraan menampilkan jumlah kelas yang sama di WebApp, APK, dan Windows widget.

\[N=N_{mobil}+N_{motor}+N_{bus}+N_{truk}+N_{sepeda}\]

Proyeksi bounding box

AI menggambar kotak deteksi dengan skala dari frame sumber ke canvas/tampilan.

\[x'=x\cdot\frac{W_{view}}{W_{src}},\quad y'=y\cdot\frac{H_{view}}{H_{src}}\]

\[w'=w\cdot\frac{W_{view}}{W_{src}},\quad h'=h\cdot\frac{H_{view}}{H_{src}}\]

IoU dan NMS

Deteksi ganda ditekan dengan Intersection over Union agar satu objek tidak dihitung berkali-kali.

\[IoU(A,B)=\frac{|A\cap B|}{|A\cup B|}\]

\[score'=score\cdot e^{-\frac{IoU^2}{\sigma}}\]

Grafik realtime

History grafik dibatasi ke jendela data terbaru supaya widget tetap terbaca.

\[H_t=tail_k(H_{t-1}\cup\{(t,N,color,seconds)\})\]

Jarak Haversine

Dipakai untuk memperkirakan jarak user, POI, dan device pada peta.

\[a=\sin^2\frac{\Delta\phi}{2}+\cos\phi_1\cos\phi_2\sin^2\frac{\Delta\lambda}{2}\]

\[d=2R\cdot atan2(\sqrt a,\sqrt{1-a})\]

Contoh kode yang bisa dijalankan

Contoh ini menjalankan rumus kecil yang sama konsepnya dengan kode aplikasi: freshness, total kendaraan, IoU, dan durasi lampu.

const total = car + motorcycle + bus + truck + bicycle;
const green = Math.min(120, Math.max(10, 0.85 * total + 8));

Tekan salah satu tombol Run.

Pada kode WebApp, rumus ini terlihat di browserRfDetr.ts untuk bbox/IoU dan di main.ts/windows.ts untuk status realtime, chart, jarak, dan render UI.

Line-by-line source atlas

Atlas kode lintas platform

Ringkasan file tetap tersedia di halaman utama. Isi kode asli dan catatan teknis per baris dimuat hanya saat diminta agar dokumentasi cepat dibuka dan tetap dapat dipelajari secara lengkap.

File Baris Baris logika Simbol utama

web/src/main.ts 22.809 21.129

web/src/browserRfDetr.ts 1.638 1.538

web/src/browserRfDetrWorker.ts 57 49

web/src/lockScreenDetector.ts 612 578

web/src/style.css 17.574 14.706

web/sw.js 289 270

web/public/sw.js 489 456

web/firebase.json 668 667 template / konfigurasi

web/database.rules.json 174 173 template / konfigurasi

web/vite.config.ts 37 33 template / konfigurasi

web/index.html 1.808 1.179 template / konfigurasi

web/android/app/src/main/AndroidManifest.xml 165 145 template / konfigurasi

web/android/app/src/main/java/id/ac/telkomuniversity/its/MainActivity.java 405 366

web/android/app/src/main/java/id/ac/telkomuniversity/its/WidgetRealtimeService.java 474 431

web/android/app/src/main/java/id/ac/telkomuniversity/its/ChartWidgetProvider.java 842 745

web/android/app/src/main/java/id/ac/telkomuniversity/its/TrafficDetectionWidgetProvider.java 1.639 1.464

web/android/app/src/main/java/id/ac/telkomuniversity/its/MapsWidgetProvider.java 970 850

web/android/app/src/main/java/id/ac/telkomuniversity/its/AlertFullDataWidgetProvider.java 1.668 1.508

web/android/app/src/main/java/id/ac/telkomuniversity/its/LockScreenDashboardActivity.java 3.316 3.105

web/android/app/src/main/java/id/ac/telkomuniversity/its/LockScreenRenderer.java 6.898 6.282

web/android/app/src/main/java/id/ac/telkomuniversity/its/LockScreenPreferences.java 27 21

web/android/app/src/main/java/id/ac/telkomuniversity/its/ItsNotificationListenerService.java 279 249

web/android/app/src/main/java/id/ac/telkomuniversity/its/IndonesianObjectLabels.java 131 123

web/android/app/src/main/java/id/ac/telkomuniversity/its/WidgetBootReceiver.java 26 22

web/android/app/src/main/res/layout/widget_alert_full_data.xml 62 55 template / konfigurasi

web/android/app/src/main/res/layout/widget_maps.xml 77 70 template / konfigurasi

web/android/app/src/main/res/xml/widget_alert_full_data_info.xml 15 14 template / konfigurasi

web/android/app/src/main/res/xml/widget_maps_info.xml 15 14 template / konfigurasi

web/android/app/src/main/res/xml/widget_traffic_detection_info.xml 15 14 template / konfigurasi

web/android/app/build.gradle 66 57

web/capacitor.config.json 14 13 template / konfigurasi

web/package.json 304 303 template / konfigurasi

web/src/windows.ts 4.059 3.748

web/electron/main.cjs 563 514

web/electron/preload.cjs 36 34

web/windows.html 20 16 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Program.cs 136 121

web/windows-widgets/ItsMapsWidgetProvider/WidgetProvider.cs 130 113

web/windows-widgets/ItsMapsWidgetProvider/WidgetImplBase.cs 81 68

web/windows-widgets/ItsMapsWidgetProvider/ItsWidget.cs 151 134

web/windows-widgets/ItsMapsWidgetProvider/ItsWidgetDataService.cs 849 792

web/windows-widgets/ItsMapsWidgetProvider/ItsWidgetMediaRenderer.cs 699 628

web/windows-widgets/ItsMapsWidgetProvider/ItsWidgetIconRenderer.cs 215 203

web/windows-widgets/ItsMapsWidgetProvider/ItsLockScreenStatusUpdater.cs 67 58

web/windows-widgets/ItsMapsWidgetProvider/WidgetDiagnostics.cs 26 21

web/windows-widgets/ItsMapsWidgetProvider/WidgetHelper/RegistrationManager.cs 74 59

web/windows-widgets/ItsMapsWidgetProvider/WidgetHelper/WidgetProviderFactory.cs 93 74

web/windows-widgets/ItsMapsWidgetProvider/Package.appxmanifest 137 130 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/TrafficWidgetTemplate.json 69 68 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/AiWidgetTemplate.json 49 48 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/MapWidgetTemplate.json 76 75 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/DataWidgetTemplate.json 65 64 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/DataMonitorWidgetTemplate.json 58 57 template / konfigurasi

web/windows-widgets/ItsMapsWidgetProvider/Templates/DataAlertWidgetTemplate.json 68 67 template / konfigurasi

web/scripts/build-windows-msix-with-widgets.ps1 223 198

web/scripts/generate-transparent-windows-assets.ps1 86 75

web/scripts/appx-manifest-created.cjs 48 42 template / konfigurasi

web/scripts/after-pack-windows.cjs 85 76

controller/Main.scala 1.248 1.123

controller/MainWithGpio.scala 804 697

controller/TrafficLight.scala 358 309

controller/YoloDetector.scala 611 542

controller/camera-gateway.py 143 123

controller/camera-public-proxy.py 147 126

controller/gps-init-ublox.py 53 41

controller/webrtc-camera.py 410 336

controller/run-controller-public.sh 764 684 template / konfigurasi

controller/install-controller-files.sh 111 94 template / konfigurasi

controller/update-controller.sh 228 193 template / konfigurasi

controller/its-heartbeat-agent.sh 219 194 template / konfigurasi

controller/mediamtx.yml 38 37 template / konfigurasi

controller/its-controller.service 55 52 template / konfigurasi

controller/its-heartbeat-agent.service 21 18 template / konfigurasi

controller/its-controller-update.service 13 11 template / konfigurasi

web/src/main.ts 22.809 baris