lance00217/ESP32
0
1<!DOCTYPE html>2<html lang="zh-Hant">3<head>4 <meta charset="UTF-8">5 <title>ESP32 即時儀表板</title>6 <!-- 引入 Bootstrap 讓排版好看一點 -->7 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">8 <!-- 引入 Firebase SDK (v8 相容版，最適合即時讀取) -->9 <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>10 <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>11 <style>12 body { background-color: #f8f9fa; padding-top: 50px; }13 .card-val { font-size: 3rem; font-weight: bold; color: #0d6efd; }14 </style>15</head>16<body>17 <div class="container">18 <h2 class="text-center mb-4">🔥 ESP32 即時監控儀表板</h2>19 <div class="row text-center">20 <!-- 溫度卡片 -->21 <div class="col-md-6 mb-3">22 <div class="card shadow p-4">23 <h3>🌡️ 溫度 (Temperature)</h3>24 <div id="tempVal" class="card-val">-- °C</div>25 </div>26 </div>27 <!-- 濕度卡片 -->28 <div class="col-md-6 mb-3">29 <div class="card shadow p-4">30 <h3>💧 濕度 (Humidity)</h3>31 <div id="humiVal" class="card-val" style="color: #198754;">-- %</div>32 </div>33 </div>34 </div>35 <div class="text-center text-muted mt-3">36 <p>最後更新資料序號: <span id="countVal">-</span></p>37 </div>38 </div>39 40 <script>41 // 1. 填入你的 Firebase 設定42 const firebaseConfig = {43 databaseURL: "https://esp32-sensor-4a5d6-default-rtdb.asia-southeast1.firebasedatabase.app"44 };45 46 // 初始化 Firebase47 firebase.initializeApp(firebaseConfig);48 const db = firebase.database();49 50 // 2. 即時監聽 /sensor_data 節點底下最新的一筆資料51 const sensorRef = db.ref('sensor_data').limitToLast(1);52 53 sensorRef.on('child_added', (snapshot) => {54 const data = snapshot.val();55 if (data) {56 // 將資料更新到網頁畫面上57 document.getElementById('tempVal').innerText = data.temperature.toFixed(1) + " °C";58 document.getElementById('humiVal').innerText = data.humidity.toFixed(1) + " %";59 document.getElementById('countVal').innerText = data.count;60 }61 });62 </script>63</body>64</html>