From dd8be0829301c0ac4dd70438970953b9485d8993 Mon Sep 17 00:00:00 2001
From: DogKing <dogking@DESKTOP-35DN20C.>
Date: Sat, 16 Aug 2025 22:28:07 +0800
Subject: Add client side webpage

---
 client/ws_client.html | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 client/ws_client.html

(limited to 'client/ws_client.html')

diff --git a/client/ws_client.html b/client/ws_client.html
new file mode 100644
index 0000000..62cf70c
--- /dev/null
+++ b/client/ws_client.html
@@ -0,0 +1,68 @@
+<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js'></script>
+<title>CSI Motion Detection</title>
+<div id='chart' style='width: 1200px; height: 800px;'></div>
+<script type="text/javascript">
+    var chart = echarts.init(document.getElementById('chart'));
+    var option = {
+    title: {
+    text: '实时数据',
+    backgroundColor: 'rgb(128,128,128)',
+    textStyle:{fontSize:48},
+    left: 'right'
+    },
+    tooltip: {
+    trigger: 'axis'
+    },
+    xAxis: {
+    type: 'category',
+    data: [] // 这里用于存放X轴数据
+    },
+    yAxis: {
+    type: 'value',
+    min:0,
+    max:1
+    },
+    series: [{
+    data: [], // 这里用于存放Y轴数据
+    type: 'line'
+    }]
+    };
+    chart.setOption(option);
+
+    function updateChart(data) {
+        
+        option.xAxis.data.push(data.t);
+        option.series[0].data.push(data.x); 
+        if (option.xAxis.data.length >= 20){
+            option.xAxis.data.shift();
+            option.series[0].data.shift();
+        }
+        
+        if (data.x > 0.5){
+            option.title.text='Motion Detected';
+            option.title.backgroundColor='rgb(0,200,0)';
+        }
+        else {
+            option.title.text='No Motion';
+            option.title.backgroundColor='rgb(128,128,128)';
+        }
+
+        chart.setOption(option); 
+    }
+
+
+    var socket = new WebSocket("ws://localhost:4200"); // 替换为你的WebSocket服务器地址
+    socket.onopen = function(event) {
+    console.log('WebSocket connected');
+    };
+    socket.onmessage = function(event) {
+    var data = JSON.parse(event.data); // 假设服务器发送的数据是JSON格式的字符串
+    updateChart(data); // 调用函数更新图表数据
+    };
+    socket.onclose = function(event) {
+    console.log('WebSocket closed');
+    };
+    socket.onerror = function(error) {
+    console.log('WebSocket error: ' + error);
+    };
+</script>
\ No newline at end of file
-- 
cgit v1.2.3