murmur/F1CTL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add DeviceParam_t, update css

Browse Source
This commit is contained in:
CSSC-WORK\murmur 2024-12-27 00:08:45 +08:00
parent 17876bcdfd
commit b7cded5e58
1 changed files with 183 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
Core/Html/index.html
View File

@ -6,7 +6,6 @@ R"(<!DOCTYPE html>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
@ -15,36 +14,48 @@ R"(<!DOCTYPE html>
color: #333;
text-align: center;
}
h3 {
margin: 0 0 10px 0;
color: #333;
font-size: 1.1em;
text-align: center;
}
form {
display: flex;
flex-direction: column;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px #555;
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
label {
font-weight: bold;
color: #555;
min-width: 80px;
flex: 0 0 auto;
.form-group label {
width: 120px;
text-align: right;
padding-right: 10px;
flex-shrink: 0;
}
input[type='text'] {
flex: 1;
min-width: 200px;
max-width: 100%;
padding: 8px;
.form-group input {
width: calc(100% - 130px);
height: 28px;
padding: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: consolas;
box-sizing: border-box;
}
.form-group input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
.form-group input[type="number"] {
-moz-appearance: textfield;
}
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='submit'] {
background-color: #4CAF50;
@ -56,7 +67,6 @@ R"(<!DOCTYPE html>
font-size: 16px;
margin-top: 10px;
width: 100%;
max-width: 300px;
display: block;
margin: 20px auto 0;
}
@ -69,7 +79,6 @@ R"(<!DOCTYPE html>
border-radius: 4px;
text-align: center;
width: 100%;
max-width: 600px;
margin: 20px auto;
box-sizing: border-box;
}
@ -84,39 +93,6 @@ R"(<!DOCTYPE html>
border: 1px solid #ebccd1;
}
@media screen and (max-width: 600px) {
body {
padding: 10px;
margin: 10px;
}
form {
padding: 15px;
}
.form-group {
flex-direction: column;
align-items: stretch;
}
label {
margin-bottom: 5px;
}
input[type='text'] {
width: 100%;
}
}
@media screen and (max-width: 400px) {
h2 {
font-size: 1.2rem;
}
form {
padding: 10px;
}
input[type='submit'] {
padding: 8px 16px;
font-size: 14px;
}
}
.loading {
display: none;
text-align: center;
@ -143,8 +119,7 @@ R"(<!DOCTYPE html>
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
max-width: 600px;
width: 70%;
margin: 20px auto;
}
@ -169,11 +144,7 @@ R"(<!DOCTYPE html>
background-color: #fff;
}
.status-item h3 {
margin: 0 0 10px 0;
color: #333;
font-size: 1.1em;
}
.status-value {
display: flex;
@ -204,12 +175,6 @@ R"(<!DOCTYPE html>
transition: color 0.3s ease;
}
@media screen and (max-width: 768px) {
.status-item {
flex-basis: 100%;
}
}
.status-row.device-running {
display: flex;
flex-wrap: wrap;
@ -229,127 +194,141 @@ R"(<!DOCTYPE html>
}
}
@media screen and (max-width: 899px) {
.status-row.device-running .status-item {
flex: 1 1 100%;
width: 100%;
}
.device-params {
gap: 20px;
}
.device-group {
flex: 1;
min-width: 300px;
}
.device-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.motor-params {
flex: 1;
padding: 15px;
border-radius: 5px;
border: 1px solid #ddd;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const submitBtn = form.querySelector('input[type="submit"]');
// 参数配置模板
const motorParamFields = [
{ name: 'name', label: '名称', type: 'text', maxLength: 20 },
{ name: 'id', label: 'ID', type: 'number', min: 0, max: 255 },
{ name: 'speed', label: '满速(步/秒)', type: 'number' },
{ name: 'accel', label: '加速度', type: 'number' },
{ name: 'decel', label: '减速度', type: 'number' },
{ name: 'fullCount', label: '总步数', type: 'number' },
{ name: 'offsetPos', label: '偏移位置', type: 'number' },
{ name: 'speedPercent', label: '速度百分比(%)', type: 'number', min: 0, max: 100 },
{ name: 'torque', label: '堵转力矩(%)', type: 'number', min: 0, max: 100 },
{ name: 'timeout', label: '超时时间(秒)', type: 'number' }
];
// 生成单个设备的参数表单
function generateMotorParams(deviceType, index) {
const motorDiv = document.createElement('div');
motorDiv.className = 'motor-params';
// 获取网络配置
fetch('/netconfig')
const title = document.createElement('h3');
title.textContent = `${deviceType}${index + 1}参数`;
motorDiv.appendChild(title);
motorParamFields.forEach(field => {
const formGroup = document.createElement('div');
formGroup.className = 'form-group';
const label = document.createElement('label');
label.textContent = field.label + ':';
const input = document.createElement('input');
input.type = field.type;
input.name = `${deviceType}${index + 1}_${field.name}`;
// 设置输入限制
if (field.maxLength) input.maxLength = field.maxLength;
if (field.min !== undefined) input.min = field.min;
if (field.max !== undefined) input.max = field.max;
formGroup.appendChild(label);
formGroup.appendChild(input);
motorDiv.appendChild(formGroup);
});
return motorDiv;
}
// 生成设备组的参数表单
function generateDeviceGroup(deviceType, count) {
const container = document.getElementById(`${deviceType}-container`);
container.innerHTML = ''; // 清空现有内容
for (let i = 0; i < count; i++) {
const motorParams = generateMotorParams(deviceType, i);
container.appendChild(motorParams);
}
}
// 页面加载时初始化表单
document.addEventListener('DOMContentLoaded', function() {
// 初始化泵和阀的参数表单
generateDeviceGroup('pump', 2); // 生成2个泵的参数
generateDeviceGroup('valve', 2); // 生成2个阀的参数
// 获取设备参数并填充表单
fetch('/device-params')
.then(response => response.json())
.then(data => {
// 填充MAC地址
document.querySelector('input[name="mac"]').value =
data.mac.map(x => x.toString(16).padStart(2,'0')).join(':');
// 填充IP地址
document.querySelector('input[name="ip"]').value =
data.ip.join('.');
// 填充子网掩码
document.querySelector('input[name="subnet"]').value =
data.sn.join('.');
// 填充网关
document.querySelector('input[name="gateway"]').value =
data.gw.join('.');
// 填充泵参数
data.pump.forEach((pump, index) => {
Object.keys(pump).forEach(key => {
const input = document.querySelector(`input[name="pump${index + 1}_${key}"]`);
if (input) {
if (key === 'name') {
input.value = new TextDecoder().decode(new Uint8Array(pump[key]));
} else {
input.value = pump[key];
}
}
});
});
// 填充阀参数
data.valve.forEach((valve, index) => {
Object.keys(valve).forEach(key => {
const input = document.querySelector(`input[name="valve${index + 1}_${key}"]`);
if (input) {
if (key === 'name') {
input.value = new TextDecoder().decode(new Uint8Array(valve[key]));
} else {
input.value = valve[key];
}
}
});
});
})
.catch(error => {
console.error('Failed to load network config:', error);
console.error('加载设备参数失败:', error);
});
form.addEventListener('submit', function(e) {
submitBtn.value = 'Saving...';
submitBtn.classList.add('loading');
form.classList.add('submitting');
setTimeout(function() {
if(submitBtn.classList.contains('loading')) {
submitBtn.value = 'Save Configuration';
submitBtn.classList.remove('loading');
form.classList.remove('submitting');
alert('Request timeout. Please try again.');
}
}, 5000);
});
function updateDeviceStatus() {
fetch('/status')
.then(response => {
return response.json();
})
.then(data => {
const deviceElement = document.getElementById('device-status');
deviceElement.textContent = data.deviceStatus ? '正常' : '异常';
deviceElement.className = data.deviceStatus ? 'success' : 'error';
const initStatus = ['等待', '成功', '失败'];
const initElement = document.getElementById('init-status');
initElement.textContent = initStatus[data.initStatus];
initElement.className = data.initStatus === 0 ? 'warning' : (data.initStatus === 1 ? 'success' : 'error');
const errorElement = document.getElementById('error-status');
errorElement.textContent = data.errorCode ? `Error: ${data.errorCode}` : '正常';
errorElement.className = data.errorCode ? 'error' : 'success';
const stopElement = document.getElementById('stop-status');
stopElement.textContent = data.stopStatus ? '停止' : '正常';
stopElement.className = data.stopStatus ? 'error' : 'success';
document.getElementById('valve1-angle').textContent = `${data.valves.angle1}°`;
document.getElementById('valve2-angle').textContent = `${data.valves.angle2}°`;
document.getElementById('valve1-angle').className = 'success';
document.getElementById('valve2-angle').className = 'success';
const pumpStatus = ['停止', '顺时针', '逆时针'];
document.getElementById('pump1-status').textContent =
`${pumpStatus[data.pumps.status1] || '#'} (${data.pumps.speed1}%)`;
document.getElementById('pump2-status').textContent =
`${pumpStatus[data.pumps.status2] || '#'} (${data.pumps.speed2}%)`;
document.getElementById('pump1-status').className = 'success';
document.getElementById('pump2-status').className = 'success';
const bubbleElement = document.getElementById('bubble-status');
bubbleElement.textContent = data.bubbleStatus ? '有' : '无';
bubbleElement.className = data.bubbleStatus ? 'error' : 'success';
})
.catch(error => {
console.error('Status update failed:', error);
// 修改状态值更新逻辑
const statusElements = {
'device-status': '#',
'init-status': '#',
'error-status': '#',
'stop-status': '#',
'valve1-angle': '#',
'valve2-angle': '#',
'pump1-status': '#',
'pump2-status': '#',
'bubble-status': '#'
};
// 更新所有状态值和样式
Object.entries(statusElements).forEach(([id, value]) => {
const element = document.getElementById(id);
if (element) {
element.textContent = value;
element.className = 'error'; // 应用错误样式
}
});
});
}
setInterval(updateDeviceStatus, 1000);
});
// 如果需要动态添加新的泵或阀，可以调用：
// generateDeviceGroup('pump', 新的数量);
</script>
</head><body>
<div class='device-status'>
@ -359,9 +338,9 @@ document.addEventListener('DOMContentLoaded', function() {
<!-- 设备信息行 -->
<div class='status-row'>
<div class='status-item full-width'>
<h3>设备信息</h3>
<h3>设备状态</h3>
<div class='status-value'>
<span class='status-label'>设备状态</span>
<span class='status-label'>下挂设备状态</span>
<span id='device-status'>#</span>
</div>
<div class='status-value'>
@ -404,11 +383,8 @@ document.addEventListener('DOMContentLoaded', function() {
<span id='bubble-status'>#</span>
</div>
</div>
</div>
<!-- 急停状态 -->
<div class='status-row'>
<div class='status-item full-width'>
<div class='status-item'>
<h3>急停</h3>
<div class='status-value'>
<span class='status-label'>状态</span>
@ -431,6 +407,28 @@ document.addEventListener('DOMContentLoaded', function() {
</div>
<div class='network-config'>
<h2>设备参数设置</h2>
<form method='post' action='/device-params'>
<div class='device-params'>
<div class='device-group' id='pump-group'>
<h3>泵参数设置</h3>
<div class='device-row' id='pump-container'>
<!-- 泵参数将由JS动态生成 -->
</div>
</div>
<div class='device-group' id='valve-group'>
<h3>阀参数设置</h3>
<div class='device-row' id='valve-container'>
<!-- 阀参数将由JS动态生成 -->
</div>
</div>
</div>
<input type='submit' value='保存设备参数'>
</form>
</div>
<div class='network-config'>
<h2>参数设置</h2>
<form method='post' action='/config'>