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

pref: 优化云台控制视觉样式

Browse Source
This commit is contained in:
CaoWangrenbo
2025-11-01 19:36:05 +08:00
parent 9b6b0263c7
commit 21ed6782a0
2 changed files with 6177 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6046
static/js/socket.io.js Normal file
View File

File diff suppressed because it is too large Load Diff

130
templates/index.html
View File

@@ -118,7 +118,7 @@
} }
virtual-joystick::part(joystick):before { virtual-joystick::part(joystick):before {
background-color: rgba(74, 144, 226, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
virtual-joystick::part(joystick):after { virtual-joystick::part(joystick):after {
@@ -143,21 +143,126 @@
.disconnected { .disconnected {
background-color: #dc3545; background-color: #dc3545;
} }
.gimbal-controls {
position: fixed;
top: 10px;
left: 10px;
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.gimbal-controls .control-group {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
background-color: #f8f9fa;
border-radius: 6px;
border: 1px solid #dee2e6;
}
.gimbal-controls label {
font-weight: 600;
color: #495057;
font-size: 14px;
white-space: nowrap;
}
.gimbal-controls button {
background-color: #4a90e2;
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
min-width: 100px;
}
.gimbal-controls button:hover {
background-color: #3a7bc8;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}
.gimbal-controls button:active {
transform: translateY(0);
}
.gimbal-controls select {
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
background-color: white;
font-size: 14px;
cursor: pointer;
min-width: 120px;
transition: border-color 0.2s ease;
}
.gimbal-controls select:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}
.gimbal-controls select:hover {
border-color: #4a90e2;
}
@media (max-width: 1200px) {
.gimbal-controls {
position: static;
margin-bottom: 15px;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
.gimbal-controls button:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.gimbal-controls button:disabled:hover {
background-color: #6c757d;
transform: none;
box-shadow: none;
}
</style> </style>
</head> </head>
<body> <body>
<div id="connection-status" class="disconnected">未连接</div> <div id="connection-status" class="disconnected">未连接</div>
<div class="gimbal">
<div class="gimbal-controls">
<div class="control-group">
<button id="gimbal_center">云台回中</button> <button id="gimbal_center">云台回中</button>
<!-- <button id="gimbal_pip">画中画</button> --> </div>
<!-- 下拉选框 -->
<div class="control-group">
<label for="gimbal_pip">画中画模式:</label>
<select id="gimbal_pip"> <select id="gimbal_pip">
<option value="0">RGB主</option> <option value="0">RGB主</option>
<option value="1">仅RGB</option> <option value="1">仅RGB</option>
<option value="2">仅IR</option> <option value="2">仅IR</option>
<option value="3">IR主</option> <option value="3">IR主</option>
</select> </select>
</div>
<div class="control-group">
<label for="ir_mode">IR模式:</label>
<select id="ir_mode"> <select id="ir_mode">
<option value="0">0</option> <option value="0">0</option>
<option value="1">1</option> <option value="1">1</option>
@@ -171,6 +276,7 @@
<option value="9">9</option> <option value="9">9</option>
</select> </select>
</div> </div>
</div>
<div class="container"> <div class="container">
<div class="camera-frame main-view" data-camera="cam_gimbal"> <div class="camera-frame main-view" data-camera="cam_gimbal">
@@ -204,7 +310,8 @@
</div> </div>
<!-- Socket.IO 客户端库 --> <!-- Socket.IO 客户端库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js "></script> -->
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<script src="{{ url_for('static', filename='js/virtual-joystick.js') }}"></script> <script src="{{ url_for('static', filename='js/virtual-joystick.js') }}"></script>
<script> <script>
@@ -226,16 +333,7 @@
connectionStatus.className = 'disconnected'; connectionStatus.className = 'disconnected';
}); });
// 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_center = document.getElementById('gimbal_center');
// const button_gimbal_pip = document.getElementById('gimbal_pip');
const select_gimbal_pip = document.getElementById('gimbal_pip'); const select_gimbal_pip = document.getElementById('gimbal_pip');
const select_ir_mode = document.getElementById('ir_mode'); const select_ir_mode = document.getElementById('ir_mode');
@@ -243,10 +341,6 @@
socket.emit('gimbal_center'); socket.emit('gimbal_center');
}); });
// button_gimbal_pip.addEventListener('click', function () {
// socket.emit('gimbal_pip');
// });
select_gimbal_pip.addEventListener('change', function () { select_gimbal_pip.addEventListener('change', function () {
const selectedValue = select_gimbal_pip.value; const selectedValue = select_gimbal_pip.value;
socket.emit('gimbal_pip', selectedValue); socket.emit('gimbal_pip', selectedValue);