index.html
4.0 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
130
131
132
133
134
135
136
137
138
<!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);
if('{}' != message.data && undefined != message.data)
{
var data = JSON.parse(message.data);
if('{}' != data.frame && undefined != data.frame)
{
$("#showVideo").attr("src", "data:image/jpg;base64," + data.frame);
}
if(null != data.size && undefined != data.size)
{
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>