ITS MapsMetode Windows ITS Maps

Electron + MSIX + Windows Widgets

Metode Windows ITS Maps

Halaman ini membedah Microsoft Store app, Electron runtime, C# Windows Widget Provider, Adaptive Card templates, media renderer, dan identitas MSIX.

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

Electron + MSIX + Windows Widgets

Metode Windows ITS Maps

Halaman ini membedah Microsoft Store app, Electron runtime, C# Windows Widget Provider, Adaptive Card templates, media renderer, dan identitas MSIX.

Semua metode Dokumentasi utama Preview PDF

Fitur

Fitur utama yang dibahas

MSIX Microsoft Store

Identitas HanifaTeams.ITSMaps, publisher, AppX assets, location/internet capability.

Windows Widgets

4 AdaptiveCard widgets: ITS Live, Kamera AI ITS, Peta ITS, Data Full & Alert.

Desktop app

Electron shell, custom titlebar, map/camera desktop, history, PiP/fullscreen video.

Widget media

C# renderer membuat chart, map tile, icons, snapshot AI, dan bbox sebagai media card.

Diagram

Alur runtime Microsoft Store / Windows

flowchart LR
  RTDB[("Firebase RTDB")] --> C["ItsWidgetDataService.cs"]
  C --> M["ItsWidgetMediaRenderer.cs"]
  C --> T["AdaptiveCard JSON templates"]
  M --> Board["Windows Widget Board"]
  Electron["Electron Desktop"] --> Renderer["web/src/windows.ts"]
  Package["MSIX HanifaTeams.ITSMaps"] --> Board

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.

Screenshots

Gambar pendukung

Line-by-line source atlas

Atlas kode Microsoft Store / Windows

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/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

web/package.json 304 baris