TKK_E32230273/flowchart_alat.html

119 lines
4.6 KiB
HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowchart Alat ESP32 Identia</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
@media print {
@page {
size: portrait;
margin: 10mm;
}
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
background: #fff;
padding: 20px;
margin-bottom: 30px;
width: 100%;
max-width: 1400px;
overflow-x: auto;
}
h1, h2 {
text-align: center;
color: #000;
}
</style>
</head>
<body>
<h1>Flowchart Sistem Alat (ESP32)</h1>
<div class="card">
<div class="mermaid">
flowchart TD
Mulai([Mulai / Alat Dinyalakan]) --> Init[Inisialisasi Sistem & Koneksi WiFi]
Init --> Standby[Layar Utama / Standby<br>SCR_MAIN]
%% Dua jalur utama saat di layar Standby
Standby -->|Tempelkan Jari| BacaJari[Sensor Membaca Sidik Jari]
Standby -->|Sentuh Layar| Menu[Layar Daftar Menu<br>SCR_MENU_LIST]
%% Alur Validasi Sidik Jari (Akses Masuk)
BacaJari --> Validasi{Cek ID Jari<br>Aktif & Terdaftar?}
Validasi -->|Benar| AksesBuka[Pintu Terbuka]
Validasi -->|Salah| AksesTolak[Tampilkan Layar Akses Ditolak<br>Buzzer Bunyi Gagal]
AksesTolak --> Standby
AksesBuka --> Sinkronisasi[Kirim Laporan Absensi ke Server<br>Sync Task]
Sinkronisasi --> StatusKoneksi{Apakah Koneksi<br>Internet Ada?}
StatusKoneksi -->|Online| QRReport[Tampilkan Layar QR Laporan<br>SCR_QR_REPORT]
StatusKoneksi -->|Offline| FormOffline[Tampilkan Formulir Aktivitas Offline<br>SCR_ACTIVITY_FORM]
QRReport --> SelesaiAbsen([Selesai])
FormOffline --> SimpanOffline[Simpan Log di Memori Alat<br>NVS]
SimpanOffline --> SelesaiAbsen
SelesaiAbsen -->|Timeout/Tutup Pintu| Standby
%% Alur Navigasi Menu
Menu --> PilihDaftar[Pilih: Registrasi Baru]
Menu --> PilihHelpdesk[Pilih: Bantuan / Helpdesk]
Menu --> PilihDarurat[Pilih: Keadaan Darurat]
%% Alur Bantuan
PilihHelpdesk --> LayarHelpdesk[Tampilkan Info Bantuan<br>SCR_HELPDESK]
LayarHelpdesk -->|Kembali| Menu
%% Alur Keadaan Darurat
PilihDarurat --> LayarDarurat[Tampilkan Peringatan Darurat<br>SCR_EMERGENCY]
LayarDarurat --> InputDarurat[Input Nomor HP/PIN Darurat<br>SCR_EMERGENCY_HP]
InputDarurat --> CekDarurat{Verifikasi PIN/HP<br>Darurat}
CekDarurat -->|Benar| AksesBuka
CekDarurat -->|Salah| AksesTolak
%% Alur Pendaftaran Baru (Enrollment)
PilihDaftar --> MenuDaftar[Layar Menu Pendaftaran<br>SCR_REGISTER_MENU]
MenuDaftar --> InputData[Ketik Keyboard Data Diri:<br>Nama, NIK, No HP, PIN]
InputData --> AmbilFoto[Layar QR Code Untuk Foto<br>SCR_QR_REG_FOTO]
AmbilFoto --> DaftarJari[Layar Pendaftaran Sidik Jari<br>SCR_REG_FINGER]
DaftarJari --> RekamJari[Tempel Jari 2x ke Sensor]
RekamJari --> CekRekam{Perekaman<br>Berhasil?}
CekRekam -->|Gagal| DaftarJari
CekRekam -->|Sukses| KirimData[Kirim Data Registrasi ke Server]
KirimData --> SelesaiDaftar([Selesai Pendaftaran])
SelesaiDaftar --> Standby
%% Tambahan Kondisi Akun
Validasi -->|Akun Diblokir| AkunMati[Layar Akun Dinonaktifkan<br>SCR_ACCESS_DEACTIVATED]
AkunMati --> Standby
</div>
</div>
<script>
mermaid.initialize({
startOnLoad: true,
theme: 'base',
securityLevel: 'loose',
themeVariables: {
lineColor: '#000000',
textColor: '#000000',
primaryColor: '#ffffff',
primaryBorderColor: '#000000',
edgeLabelBackground: '#ffffff'
}
});
</script>
</body>
</html>