modified: static/css/sensor-2.css

modified:   static/css/sensor-3.css
	modified:   static/css/sensor-4.css
	modified:   static/js/sensor-1.js
	modified:   static/js/sensor-2.js
	modified:   static/js/sensor-3.js
	modified:   static/js/sensor-4.js
	modified:   templates/sensor-2.html
	modified:   templates/sensor-3.html
	modified:   templates/sensor-4.html

static/css/sensor-2.css

@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}

static/css/sensor-3.css

@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}

static/css/sensor-4.css

@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}

static/js/sensor-1.js

@@ -8,8 +8,9 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                temperatures = data.temperatures.slice(-200); // 只保留最新的200个温度数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    temperatures = data.temperatures.slice(-maxDataPoints);
 
                 updateChart();
             });
@@ -51,4 +52,4 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // 每5秒获取最新的数据
     setInterval(fetchLatestData, 1000);
-});
+});

static/js/sensor-2.js

@@ -86,8 +86,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                humidities = data.humidities.slice(-200); // 只保留最新的200个湿度数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    humidities = data.humidities.slice(-maxDataPoints);
+                
 
                 updateChart();
             });

static/js/sensor-3.js

@@ -87,8 +87,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                co2 = data.co2.slice(-200); // 只保留最新的200个CO2数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    co2 = data.co2.slice(-maxDataPoints);
+                
 
                 updateChart();
             });

static/js/sensor-4.js

@@ -88,9 +88,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                pressure = data.pressure.slice(-200); // 只保留最新的200个压力数据
-
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                timestamps = data.timestamps.slice(-maxDataPoints);
+                pressure = data.pressure.slice(-maxDataPoints);
+                
                 updateChart();
             });
     }

templates/sensor-2.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-2.css">
 </head>

templates/sensor-3.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-3.css">
 </head>

templates/sensor-4.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-4.css">
 </head>