hexone2086/m20_monitor_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加云台功能控制

Browse Source
This commit is contained in:
CaoWangrenbo
2025-11-01 15:02:00 +08:00
parent b3b34b5d91
commit 9b6b0263c7
3 changed files with 151 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
templates/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,6 +13,7 @@
background-color: #f0f0f0;
min-height: 100vh;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -21,42 +23,50 @@
margin: 0 auto;
height: calc(100vh - 40px);
}
.camera-frame {
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
}
.camera-frame.main-view {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
z-index: 10;
border: 3px solid #4a90e2;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.camera-frame.main-view .camera-title {
background-color: #2c5aa0;
font-size: 1.2em;
}
.camera-frame.front-view {
grid-column: 3 / span 1;
grid-row: 1 / span 1;
}
.camera-frame.back-view {
grid-column: 3 / span 1;
grid-row: 2 / span 1;
}
.camera-frame.left-view {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
}
.camera-frame.right-view {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
}
.joystick-container {
grid-column: 3 / span 1;
grid-row: 3 / span 1;
@@ -65,8 +75,9 @@
align-items: center;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.camera-title {
background-color: #4a90e2;
color: white;
@@ -76,14 +87,17 @@
cursor: pointer;
user-select: none;
}
.camera-title:hover {
background-color: #3a7bc8;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.status-indicator {
position: absolute;
top: 5px;
@@ -93,20 +107,25 @@
border-radius: 50%;
z-index: 5;
}
virtual-joystick {
--radius: 100px;
}
virtual-joystick::part(joystick) {
background-color: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(74, 144, 226, 0.5);
}
virtual-joystick::part(joystick):before {
background-color: rgba(74, 144, 226, 0.2);
}
virtual-joystick::part(joystick):after {
background-color: #4a90e2;
border: 1px solid #2c5aa0;
}
#connection-status {
position: fixed;
top: 10px;
@@ -116,17 +135,43 @@
color: white;
font-weight: bold;
}
.connected {
background-color: #28a745;
}
.disconnected {
background-color: #dc3545;
}
</style>
</head>
<body>
<div id="connection-status" class="disconnected">未连接</div>
<div class="gimbal">
<button id="gimbal_center">云台回中</button>
<!-- <button id="gimbal_pip">画中画</button> -->
<!-- 下拉选框 -->
<select id="gimbal_pip">
<option value="0">RGB主</option>
<option value="1">仅RGB</option>
<option value="2">仅IR</option>
<option value="3">IR主</option>
</select>
<select id="ir_mode">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="container">
<div class="camera-frame main-view" data-camera="cam_gimbal">
<div class="camera-title">云台</div>
@@ -161,39 +206,62 @@
<!-- Socket.IO 客户端库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<script src="{{ url_for('static', filename='js/virtual-joystick.js') }}"></script>
<script>
// 初始化 Socket.IO 连接
const socket = io();
// 连接状态管理
const connectionStatus = document.getElementById('connection-status');
socket.on('connect', function() {
socket.on('connect', function () {
console.log('WebSocket 连接已建立');
connectionStatus.textContent = '已连接';
connectionStatus.className = 'connected';
});
socket.on('disconnect', function() {
socket.on('disconnect', function () {
console.log('WebSocket 连接已断开');
connectionStatus.textContent = '已断开';
connectionStatus.className = 'disconnected';
});
socket.on('connection_response', function(data) {
console.log('服务器响应：', data);
// socket.on('connection_response', function (data) {
// console.log('服务器响应：', data);
// });
// socket.on('data_received', function (data) {
// console.log('数据确认：', data);
// });
const button_gimbal_center = document.getElementById('gimbal_center');
// const button_gimbal_pip = document.getElementById('gimbal_pip');
const select_gimbal_pip = document.getElementById('gimbal_pip');
const select_ir_mode = document.getElementById('ir_mode');
button_gimbal_center.addEventListener('click', function () {
socket.emit('gimbal_center');
});
socket.on('data_received', function(data) {
console.log('数据确认：', data);
});
// button_gimbal_pip.addEventListener('click', function () {
// socket.emit('gimbal_pip');
// });
select_gimbal_pip.addEventListener('change', function () {
const selectedValue = select_gimbal_pip.value;
socket.emit('gimbal_pip', selectedValue);
})
select_ir_mode.addEventListener('change', function () {
const selectedValue = select_ir_mode.value;
socket.emit('gimbal_ir_mode', selectedValue);
})
// 获取摇杆元素
const joystick = document.querySelector('virtual-joystick');
// 监听摇杆移动事件
joystick.addEventListener('joystickmove', function(e) {
joystick.addEventListener('joystickmove', function (e) {
const data = {
x: parseFloat(joystick.dataset.x),
y: parseFloat(joystick.dataset.y),
@@ -203,13 +271,13 @@
hypot: parseFloat(joystick.dataset.hypot) || 0,
timestamp: Date.now()
};
// 发送数据到服务器
socket.emit('joystick_data', data);
});
// 监听摇杆抬起事件
joystick.addEventListener('joystickup', function(e) {
joystick.addEventListener('joystickup', function (e) {
// 发送停止信号
const stopData = {
x: 0,
@@ -221,10 +289,10 @@
timestamp: Date.now(),
action: 'stop'
};
socket.emit('joystick_data', stopData);
});
// 心跳检测
setInterval(() => {
if (socket.connected) {
@@ -233,4 +301,5 @@
}, 30000); // 每 30 秒发送一次心跳
</script>
</body>
</html>