FTTH Attenuation Simulator

Standard:

Cara Melakukan Simulasi Project FTTH

Simulator ini membantu Anda memetakan topologi jaringan FTTH (Fiber to the Home) secara end-to-end dari pusat provider (OLT) ke rumah pelanggan (ONT), serta mengestimasi redaman daya optik secara langsung (real-time).

Langkah-langkah Simulasi:

Tambah Perangkat: Drag perangkat dari panel kiri (Active / Passive Devices) dan drop di kanvas workspace. Anda dapat menggeser posisi perangkat dengan men-drag kartu perangkat tersebut kapan saja.
Hubungkan Perangkat: Klik port OUT (berwarna hijau) di salah satu perangkat dan tarik garis (koneksi) menuju port IN (berwarna kuning) di perangkat tujuan. Hubungan kabel bersifat cerdas dan mendeteksi arah aliran sinyal optik secara dinamis.
Atur Parameter: Klik ikon gear (Pengaturan) pada kartu perangkat untuk menyesuaikan daya pancar (Tx Power), panjang kabel fiber optik, tipe konektor (SC/APC atau SC/UPC), rasio splitter, redaman adapter, dan ambang batas sensitivitas ONT.
Analisis Redaman & Daya:
- Arahkan kursor (hover) ke perangkat untuk melihat redaman komponen, loss kumulatif, serta daya optik masuk (Input Power) dan keluar (Output Power).
- Klik tombol (i) Informasi Detail di samping tombol pengaturan untuk menampilkan formulir kalkulasi terperinci (Loss Sheet) yang merinci secara matematis asal usul akumulasi redaman.
- Arahkan kursor ke garis koneksi untuk melihat daya optik di titik kabel tersebut beserta tipe konektor yang terpasang.
Evaluasi Status Keberhasilan: Jalur koneksi dan ONT akan secara otomatis berubah warna berdasarkan budget daya optik: Hijau (Good), Kuning (Warning), dan Merah (Critical/No Signal).
Export Blueprint: Tekan tombol Export PDF untuk mengunduh blueprint diagram jaringan dan tabel kalkulasi budget link margin dalam tata letak satu halaman A4 Landscape.

Fitur Utama & Kontrol Jaringan

Aplikasi ini dilengkapi dengan interaksi tingkat lanjut secara end-to-end untuk memudahkan analisis topologi FTTH Anda:

🖱️ Navigasi Workspace (Pan & Zoom Dinamis)

- Panning (Geser Kanvas): Klik dan tahan klik kiri mouse pada area kosong kanvas (atau garis grid latar belakang), lalu geser pointer mouse/trackpad Anda untuk berpindah tempat di area workspace tak terbatas secara leluasa.
- Zooming (Skala Kanvas): Gunakan scroll roda mouse Anda (mouse wheel) di atas area kanvas, pinch-to-zoom pada trackpad, atau geser slider zoom di status bar bagian bawah untuk mengatur skala canvas (30% hingga 200%). Fokus perbesaran/perkecilan akan secara cerdas mengikuti posisi koordinat kursor mouse Anda.

🎛️ Menu Aksi Melayang (Selected Actions Overlay)

Untuk menjaga kerapian area kerja dan mencegah teks nama perangkat terpotong, tombol aksi (Info, Pengaturan, Hapus) disembunyikan secara default. Cukup klik sekali pada kartu perangkat untuk menyeleksinya, dan panel tombol aksi yang lebih besar (ukuran ideal tombol 24px dengan ikon SVG 14px) akan muncul meluncur ke atas dari bagian bawah tubuh perangkat (body) dengan efek animasi pegas (*spring scale-up bounce*) yang dinamis.

🚥 Casing Realistis & LED Status Aktif (Live Hardware Indicators)

Setiap perangkat dirancang menyerupai bentuk fisik perangkat aslinya:

OLT: Casing metal gelap rackmount 1U lengkap dengan bracket (telinga rack) dan sekrup pemasangan di kedua sisi. Dilengkapi LED ACT yang berkedip hijau dinamis ketika ada port output yang tersambung.
SFP Module: Casing transceiver silver metalik presisi dengan deretan contact pin emas/tembaga dan tuas pengunci (latch lever) berwarna. Dirancang konsisten menggunakan warna silver/putih metalik baik di mode gelap maupun terang.
ONT: Router rumahan putih/gelap dengan ventilasi udara atas dan antena ganda yang otomatis bergerak sedikit saat didekati kursor. Dilengkapi 4 LED aktif: PWR (hijau stabil), PON (hijau saat sinyal bagus, kuning saat marginal), LOS (kedip merah cepat saat putus/loss), dan LAN (kedip hijau saat mengirimkan data).
Splitter & ODP: Desain casing kaset splitter dalam ruangan dan enclosure box ODP luar ruangan lengkap dengan visual silinder kunci pengunci.
Fiber Spool & Connector Adapter: Spul gulungan kabel dengan flange oranye, serta adapter konektor dengan pewarnaan standar industri.

🔌 Port Fisik SC Adapter & Core Glow

Port koneksi digambarkan berbentuk kotak adapter persegi menyerupai socket SC fiber asli. Inti bagian dalam port (core) akan memancarkan cahaya hijau/teal terang jika kabel berhasil terhubung (port active). Adapter menggunakan standar warna standar industri: biru tebal di sisi kiri untuk port input SC/UPC (flange datar) dan hijau tebal di sisi kanan untuk port output SC/APC (flange miring) pada perangkat konektor.

🗑️ Fitur Hapus Perangkat & Koneksi (Dinamis & Aman)

- Hapus Perangkat (Equipment): Klik sekali pada kartu perangkat untuk menampilkan panel tombol aksi melayang di bagian bawah tubuh perangkat, lalu klik tombol tempat sampah merah (Hapus), menekan tombol "Hapus Perangkat" di panel properties, atau tekan tombol Delete/Backspace di keyboard saat perangkat terseleksi. Dialog konfirmasi kustom Glassmorphism akan muncul terlebih dahulu.
- Hapus Koneksi (Kabel): Klik ganda (double-click) langsung pada garis koneksi untuk memutuskannya secara instan, atau klik sekali pada garis koneksi (hingga berwarna biru menyala) lalu tekan tombol Delete/Backspace di keyboard. Koneksi visual dan relasi daya logis akan langsung terputus, memicu kalkulasi ulang status redaman pada perangkat hilir tanpa perlu me-refresh halaman.

🧹 Reset Workspace Komprehensif

Gunakan tombol Reset di header menu atas untuk langsung menghapus seluruh perangkat dan jalur koneksi di kanvas. Fitur ini juga secara otomatis mengembalikan posisi koordinat geser (pan) ke koordinat awal (0, 0) dan mengembalikan tingkat perbesaran (zoom) ke skala normal 100% setelah dikonfirmasi via dialog popup konfirmasi kustom.

ℹ️ Lembar Rincian Kalkulasi Redaman (Loss Sheet Modal)

Fitur tombol (i) Informasi di samping tombol properti Gear membuka lembar rincian kalkulasi matematika redaman. Ini merinci seluruh penyumbang redaman (seperti redaman kabel per kilometer, redaman splitter berdasarkan rasio pembagian daya, connector loss, dan splicing loss) secara komprehensif untuk mendidik dan membimbing pengguna.

⚡ Kalkulasi Redaman Real-Time & Threshold ONT

Setiap kali Anda menambah perangkat, menyambung kabel, atau merubah konfigurasi parameter, sistem langsung melakukan kalkulasi propagation loss dari OLT ke ONT. ONT akan mengevaluasi daya terima optik (Rx Power) terhadap ambang batas sensitivitasnya:

Status Layak (Good): Berwarna hijau, Rx Power >= -24.00 dBm. Sinyal optik sangat prima dan stabil.
Status Peringatan (Warning): Berwarna kuning, Rx Power berada di antara -24.01 dBm hingga -27.00 dBm. Koneksi terhubung namun rentan fluktuasi.
Status Kritis (Critical/Loss): Berwarna merah, Rx Power < -27.00 dBm. Sinyal terlalu lemah atau di bawah sensitivitas ONT sehingga layanan internet terputus.

🌓 Tema Light & Dark Mode Terintegrasi

Ubah tema simulator secara instan menggunakan tombol matahari/bulan di pojok kanan atas. CSS Custom Variables secara mulus mengubah seluruh visual sistem termasuk bayangan grid kanvas, warna kartu perangkat, dan animasi dot konektor laser agar nyaman di mata dalam berbagai kondisi pencahayaan. Casing metalik perangkat beradaptasi dinamis mengikuti mode gelap/terang, kecuali modul SFP yang dirancang konsisten tetap silver/putih metalik. Kartu perangkat di sidebar menu juga otomatis mengikuti warna background/border tema yang aktif.

📄 Professional Landscape PDF Report

Tombol Export PDF mengonversi kanvas topologi simulasi Anda menjadi cetakan laporan PDF A4 Landscape satu halaman. Laporan ini tertata secara profesional, menyajikan diagram jaringan beresolusi tinggi di bagian atas, legenda di tengah, serta tabel terperinci perhitungan link budget (Equipment Loss & Power Budget) di bagian bawah yang siap dipresentasikan.

Interaksi Mouse & Keyboard Shortcut

Daftar lengkap semua interaksi mouse dan pintasan keyboard yang tersedia di simulator ini:

Aksi	Input	Keterangan
Tambah Perangkat	Drag & Drop	Drag dari panel perangkat kiri ke area kanvas workspace
Pindah Perangkat	Drag di kartu	Klik dan tahan kartu perangkat di kanvas, geser ke posisi baru
Seleksi Perangkat	Klik pada kartu	Klik sekali pada perangkat untuk menyeleksinya (border menyala, muncul menu aksi melayang)
Buat Koneksi Kabel	Klik OUT → IN	Klik port OUT (hijau) lalu klik port IN (kuning) di perangkat tujuan
Hapus Perangkat	Delete / Backspace	Tekan saat perangkat terseleksi; atau klik ikon 🗑️ di panel aksi melayang di bagian bawah kartu
Hapus Koneksi	Double-Click pada garis	Klik ganda langsung pada garis koneksi untuk memutuskan kabel
Hapus Koneksi (Alt)	Klik + Delete	Klik sekali pada garis (menyala biru), lalu tekan Delete/Backspace
Geser Kanvas (Pan)	Drag area kosong	Klik dan tahan di area kosong/grid, lalu geser mouse
Zoom In / Out	Scroll Wheel	Gulir roda mouse ke atas (zoom in) atau ke bawah (zoom out)
Buka Properties	Klik Gear ⚙️ / Double-Click	Klik ikon Gear pada panel aksi melayang di bawah kartu saat terpilih; atau klik ganda langsung pada kartu
Lihat Detail Redaman	Klik ikon ℹ️ Info	Klik ikon Info pada panel aksi melayang di bawah kartu saat terpilih untuk membuka Loss Sheet
Lihat Tooltip Cepat	Hover perangkat	Arahkan kursor untuk melihat ringkasan daya & redaman (auto tooltip)
Ganti Tema	Klik ikon 🌓	Toggle antara mode Light dan Dark secara instan
Reset Seluruh Kanvas	Klik tombol Reset	Hapus semua perangkat, koneksi, reset pan & zoom ke default
Export PDF	Klik tombol Export PDF	Unduh blueprint & tabel redaman dalam format A4 Landscape

Glosarium FTTH

OLT (Optical Line Terminal)

Perangkat aktif di kantor pusat provider (Central Office) sebagai permulaan transmisi sinyal optik downstream ke pelanggan. Dilengkapi casing besi rackmount 1U dan LED ACT yang berkedip hijau saat port output tersambung.

SFP Module (Transceiver)

Modul pemancar-penerima optik yang ditancapkan pada OLT untuk menyalurkan cahaya laser. Berbentuk transceiver metalik perak (silver) berkontak tembaga dengan pengait lever pengunci. Visual casing-nya dirancang konsisten putih/silver metalik di mode terang maupun gelap.

Passive Splitter

Komponen pasif pembagi daya sinyal optik (misal 1:2, 1:4, hingga 1:64) dari satu core serat menjadi beberapa core untuk disebarkan ke pelanggan. Memiliki redaman intrinsik yang cukup besar sesuai rasio pembagiannya.

ODP (Optical Distribution Point)

Kotak pelindung outdoor (biasanya dipasang di tiang listrik atau dinding) yang berisi splitter dan adapter konektor tempat drop core pelanggan disambungkan. Dilengkapi visual slot kunci pengunci.

Kabel Fiber (Feeder / Distribusi)

Kabel optik Single Mode (SM) tipe G.652 yang membentang dari OLT ke ODP. Mengalami redaman linear sebesar 0.25 dB/km pada panjang gelombang downstream 1490nm.

Kabel Drop (Drop Core)

Kabel serat optik berdiameter kecil yang ditarik dari ODP langsung menuju rumah pelanggan (ONT), umumnya memiliki jarak pendek di bawah 500 meter.

Adapter & Konektor SC

Titik terminasi/penyambungan fisik kabel optik. Tipe SC/UPC berwarna biru tebal memiliki standar loss 0.50 dB (tipe flange datar), sedangkan SC/APC berwarna hijau tebal memiliki standar loss lebih rendah yaitu 0.30 dB karena ujungnya dipoles miring 8 derajat untuk meminimalkan pantulan balik.

ONT (Optical Network Terminal) / ONU

Perangkat akhir di rumah pelanggan yang mengubah cahaya optik menjadi sinyal data Ethernet/Wi-Fi. Memiliki sensitivitas Rx batas minimal -27 dBm dan dilengkapi 4 lampu LED (PWR, PON, LOS, LAN) untuk pemantauan status koneksi secara real-time.

LED Indikator Status (Live LEDs)

Lampu status interaktif pada perangkat yang merespons kalkulasi redaman simulasi secara real-time. Lampu ACT (pada OLT) dan PON / LAN / LOS (pada ONT) menyala atau berkedip sesuai kondisi daya terima (Rx Power) dan konektivitas kabel.

Panel Aksi Melayang (Selected Actions Overlay)

Menu overlay melayang kontekstual yang muncul meluncur dengan animasi pegas di atas/bawah perangkat saat perangkat dipilih. Berisi tombol pintas cepat seperti Info Detail (ℹ️), Pengaturan Properti (⚙️), dan Hapus Perangkat (🗑️).

Standar Parameter Redaman (ITU-T & IEEE)

Simulator ini menghitung redaman secara real-time berdasarkan nilai standar industri berikut:

Komponen Jaringan	Tipe / Parameter	Standar Loss (dB)
Kabel Fiber (1490nm)	Per Kilometer (km)	0.25 dB / km
Kabel Fiber (1310nm)	Per Kilometer (km)	0.35 dB / km
Splice (Sambungan Fusion)	Per Joint / Titik Las	0.10 dB
Konektor SC/APC	Warna Hijau (Miring)	0.30 dB
Konektor SC/UPC	Warna Biru (Datar)	0.50 dB
Passive Splitter Loss	Splitter 1:2	3.50 dB
	Splitter 1:4	7.00 dB
	Splitter 1:8	10.50 dB
	Splitter 1:16	14.00 dB
	Splitter 1:32	17.50 dB
	Splitter 1:64	21.00 dB
Sensitivitas ONT (GPON)	Batas Sinyal Minimum	-27.00 dBm

Catatan: Budget Link Margin yang ideal adalah > 3 dB di atas sensitivitas ONT untuk menjamin stabilitas koneksi terhadap fluktuasi cuaca atau tekukan kabel (bending).

Tentang FTTH Attenuation Simulator

Simulator ini adalah aplikasi web interaktif berbasis HTML5, CSS3, dan JavaScript murni (Vanilla JS) yang dirancang untuk membantu teknisi, mahasiswa, dan perencana jaringan telekomunikasi memahami dan mensimulasikan topologi jaringan FTTH secara visual dan edukatif.

🏗️ Arsitektur Sistem

Aplikasi ini berjalan sepenuhnya di sisi klien (client-side) tanpa memerlukan server backend atau database. Seluruh logika kalkulasi redaman, rendering koneksi SVG, dan interaksi kanvas ditangani langsung oleh browser menggunakan modul JavaScript terpisah:

equipment-data.js — Definisi parameter perangkat FTTH
calculator.js — Engine kalkulasi redaman & power budget
canvas.js — Pan, zoom, dan manajemen kanvas workspace
connections.js — Rendering koneksi SVG & animasi laser dot
drag-drop.js — Drag-and-drop perangkat dari panel ke kanvas
tooltip.js — Tooltip otomatis saat hover perangkat
app.js — Orkestrator utama, modal, tema, dan event binding

🎨 Desain & UI/UX

Antarmuka menggunakan pendekatan Glassmorphism modern dengan efek kaca transparan (backdrop-filter), CSS Custom Properties (variabel warna), transisi halus, dan mode gelap/terang terintegrasi. Grid kanvas menampilkan pola dot-grid yang adaptif terhadap tema aktif.

📐 Standar Referensi

Seluruh parameter redaman dan kalkulasi mengacu pada standar industri telekomunikasi internasional:

ITU-T G.984 — Gigabit-capable Passive Optical Networks (GPON)
ITU-T G.652 — Characteristics of a single-mode optical fibre cable
IEEE 802.3ah — Ethernet in the First Mile (EPON)

🔒 Privasi & Keamanan

Tidak ada data yang dikirim ke server manapun. Seluruh simulasi berjalan secara lokal di perangkat browser Anda. Data topologi tidak disimpan secara permanen — saat halaman ditutup atau di-refresh, kanvas akan kembali kosong.

FTTH NETWORK SIMULATION BLUEPRINT

1. Topology & Connection Map

2. Equipment Loss & Power Budget

Properties

Detail Estimasi Redaman

Konfirmasi

Panduan FTTH & Glosarium