index.html
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>消息： <span id="result"></span></div>
<div><input type="number" id="maxSize"/><button onclick="setMaxSize()">改变曲线最大点数</button></div>
<div><button onclick="lianjie()">连接服务</button></div>
<div><input type="number" id="number"/><button onclick="setCameraNumber()">设置摄像头编号</button></div>
<div><button onclick="openMedia()">开启摄像头</button></div>
<div><button onclick="clean()">清空曲线</button></div>
<div><button onclick="closeMedia()">停止摄像头</button></div>
<div>
<img id="showVideo" width="500" height="390" src="" style="display: none;"/>
<canvas id="myCanvas" width="500" height="390" style="border:3px double #996633;"/>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
var userId = Math.round(Math.random()*100);
var url="";
var fishCountList = [];
var maxSize = 60;
var ws1;
function setMaxSize(){
maxSize = $("#maxSize").val();
fishCountList = [];
}
function lianjie(){
$("#showVideo").show();
var wsUrl = "ws://127.0.0.1:8064/websocket/"+userId;
ws1 = new WebSocket(wsUrl);
ws1.onopen = function (){
$("#result").textContent = "服务已连接";
}
ws1.onmessage = function(message){
console.log(message);
var data = JSON.parse(message.data);
$("#showVideo").attr("src", "data:image/jpg;base64," + data.img);
addData(data.size);
drawChart();
}
ws1.onclose = function (o) {
$("#result").textContent = "服务断开";
}
}
function setCameraNumber()
{
var number = $("#number").val();
$.ajax({
type: "GET",
url: url + "/camera/setNumber/"+number,
});
}
function openMedia(){
$.ajax({
type: "GET",
url: url + "/camera/open",
async: false
});
}
function closeMedia(){
$.ajax({
type: "GET",
url: url + "/camera/close",
});
}
function clean(){
fishCountList = [];
}
function drawChart() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
var panelWidth = canvas.width;
var panelHeight = canvas.height;
var countSize = fishCountList.length;
var counts = fishCountList.slice();
var max = Math.max(...counts);
var x = 0;
var y = Math.round((counts[0] / max) * panelHeight);
var yOffset = Math.round((panelHeight/2 - y)); // 计算垂直偏移量
context.beginPath();
context.moveTo(x, y + yOffset); // 将起始点偏移
context.strokeStyle = "blue";
context.lineWidth = 2;
for (var i = 1; i < countSize; i++) {
var nextX = Math.round((panelWidth * i) / countSize);
var nextY = Math.round((counts[i] / max) * panelHeight);
context.lineTo(nextX, nextY + yOffset); // 将每个点偏移
x = nextX;
y = nextY;
}
context.stroke();
}
// 添加数据到数组
function addData(value) {
// 当数组长度达到最大值时，移除第一个数据
if (fishCountList.length >= maxSize) {
fishCountList.shift();
}
// 添加新数据到数组末尾
fishCountList.push(value);
}
</script>
</html>