<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Motor Diagnostic Scanner</title>
<style>
/* CSS Dasar untuk Tampilan Scanner */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #222;
}
.scanner-container {
width: 350px;
height: auto; /* Dibuat otomatis agar semua elemen muat */
background-color: #111;
border: 10px solid #333;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
padding: 15px;
color: #00ff00;
font-family: 'Courier New', monospace;
}
.header {
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #00ff00;
margin-bottom: 15px;
}
.header h3 {
margin: 0;
font-size: 1.2em;
}
.data-live {
padding: 10px 0;
border-bottom: 1px dashed #00ff00;
}
.data-live p {
margin: 5px 0;
font-size: 1.1em;
}
.dtc-area {
margin-top: 15px;
background-color: #222;
padding: 10px;
border: 1px solid #00ff00;
min-height: 50px; /* Dibuat lebih kecil */
}
.dtc-area h4 {
margin-top: 0;
color: #ff0000;
}
.input-area {
margin-top: 15px;
display: flex;
gap: 5px; /* Jarak antar input/tombol */
}
.input-area input {
flex-grow: 1;
padding: 8px;
background-color: #333;
border: 1px solid #00ff00;
color: #00ff00;
font-family: 'Courier New', monospace;
}
.input-area button {
background-color: #00ff00;
color: #111;
border: none;
padding: 8px 10px;
cursor: pointer;
font-weight: bold;
}
/* CSS untuk Kontrol Aktuator */
.actuator-controls {
margin-top: 15px;
padding: 10px;
background-color: #0d0d0d;
border: 1px solid #00ff00;
display: grid;
grid-template-columns: 1fr 1fr; /* Membagi tombol menjadi 2 kolom */
gap: 8px;
}
.actuator-controls h4 {
grid-column: 1 / 3; /* Membuat header mencakup 2 kolom */
margin: 0 0 5px 0;
text-align: center;
}
.actuator-controls button {
width: 100%;
padding: 8px 5px;
background-color: #008000;
color: #fff;
border: none;
cursor: pointer;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="scanner-container">
<div class="header">
<h3>DIAGNOSTIK SURYO_GARAGE</h3>
<span id="status-koneksi">STATUS: ✅ KONEKSI BERHASIL</span>
</div>
<div class="data-live">
<p>1. RPM MESIN: <span id="rpm">800</span> RPM</p>
<p>2. THROTTLE POS: <span id="tps">0</span> %</p>
<p>3. SUHU MESIN: <span id="suhu">60</span> °C</p>
</div>
<div class="dtc-area">
<h4>KODE KERUSAKAN (DTC):</h4>
<p id="dtc-display">
**ECU OK. TIDAK ADA KERUSAKAN TERSIMPAN.**
</p>
</div>
<div class="input-area">
<input type="text" id="input-dtc" placeholder="Simulasi Input Kode DTC (e.g., 12)">
<button onclick="simulasiDTC()">SET DTC</button>
</div>
<div class="actuator-controls">
<h4>KONTROL AKTIVASI AKTUAOR:</h4>
<button onclick="toggleFuelPump()" id="btn-fuel">FUEL PUMP: OFF</button>
<button onclick="toggleInjector()" id="btn-inj">INJEKTOR: IDLE</button>
<button onclick="toggleFan()" id="btn-fan">KIPAS RAD: OFF</button>
<button onclick="toggleISC()" id="btn-isc">ISC VALVE: IDLE</button>
</div>
</div>
<script>
// --- VARIABEL STATUS GLOBAL ---
let isFuelPumpOn = false;
let isFanOn = false;
// --- FUNGSI AKTIVASI AKTUAOR ---
function toggleFuelPump() {
isFuelPumpOn = !isFuelPumpOn;
const button = document.getElementById('btn-fuel');
if (isFuelPumpOn) {
button.innerText = "FUEL PUMP: ON (Berjalan)";
button.style.backgroundColor = '#ff4500';
} else {
button.innerText = "FUEL PUMP: OFF";
button.style.backgroundColor = '#008000';
}
}
function toggleInjector() {
const button = document.getElementById('btn-inj');
// Simulasi hanya satu kali semprot (Test Pulse)
button.innerText = "INJEKTOR: ⛽ SEMPROT!";
button.style.backgroundColor = '#ffc300';
setTimeout(() => {
button.innerText = "INJEKTOR: IDLE";
button.style.backgroundColor = '#008000';
}, 500);
}
function toggleFan() {
isFanOn = !isFanOn;
const button = document.getElementById('btn-fan');
if (isFanOn) {
button.innerText = "KIPAS RAD: 🌪️ ON (Berputar Keras)";
button.style.backgroundColor = '#1e90ff';
} else {
button.innerText = "KIPAS RAD: OFF";
button.style.backgroundColor = '#008000';
}
}
function toggleISC() {
const button = document.getElementById('btn-isc');
// Simulasi gerakan ISC (buka-tutup)
button.innerText = "ISC VALVE: ⚙️ GERAK (Kalibrasi)";
button.style.backgroundColor = '#8a2be2';
setTimeout(() => {
button.innerText = "ISC VALVE: IDLE";
button.style.backgroundColor = '#008000';
}, 1500);
}
// --- SIMULASI DATA HIDUP (LIVE DATA) ---
function updateLiveData() {
document.getElementById('rpm').innerText = (Math.random() * 8200 + 800).toFixed(0);
document.getElementById('tps').innerText = (Math.random() * 100).toFixed(0);
document.getElementById('suhu').innerText = (Math.random() * 45 + 50).toFixed(0);
}
// Interval 1 detik untuk update data
setInterval(updateLiveData, 1000);
// --- SIMULASI KODE KERUSAKAN (DTC) ---
function simulasiDTC() {
const inputDTC = document.getElementById('input-dtc').value.trim();
const dtcDisplay = document.getElementById('dtc-display');
let pesanDTC = "";
if (!inputDTC) {
dtcDisplay.innerHTML = "**ECU OK. TIDAK ADA KERUSAKAN TERSIMPAN.**";
return;
}
switch(inputDTC) {
case '12': pesanDTC = "DTC 12: Crankshaft Position Sensor (CKP) Error"; break;
case '13': pesanDTC = "DTC 13: Intake Air Pressure Sensor (MAP/IAP) Error"; break;
case '14': pesanDTC = "DTC 14: Throttle Position Sensor (TPS) Error"; break;
case '46': pesanDTC = "DTC 46: Charging System Malfunction (Error Pengisian)"; break;
default: pesanDTC = `DTC ${inputDTC}: Kode tidak dikenali/Error lainnya.`;
}
dtcDisplay.innerHTML = `<span style="color:red;">⚠️ **ERROR DETECTED**</span><br>${pesanDTC}`;
document.getElementById('input-dtc').value = '';
}
// Jalankan sekali saat halaman dimuat
updateLiveData();
</script>
</body>
</html>
0 Comments