426 lines
11 KiB
HTML
426 lines
11 KiB
HTML
R"(<!DOCTYPE html>
|
|
<html><head>
|
|
<meta charset="UTF-8">
|
|
<title>W5500 Configuration</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
form {
|
|
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;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
color: #555;
|
|
min-width: 80px;
|
|
flex: 0 0 auto;
|
|
}
|
|
input[type='text'] {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-family: consolas;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type='submit'] {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
display: block;
|
|
margin: 20px auto 0;
|
|
}
|
|
input[type='submit']:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.status {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.connected {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
border: 1px solid #d6e9c6;
|
|
}
|
|
.disconnected {
|
|
background-color: #f2dede;
|
|
color: #a94442;
|
|
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;
|
|
padding: 10px;
|
|
color: #666;
|
|
}
|
|
|
|
.loading.active {
|
|
display: block;
|
|
}
|
|
|
|
form.submitting input {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type='submit'].loading {
|
|
background-color: #cccccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.device-status,.network-config {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.status-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.status-item {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.status-item h3 {
|
|
margin: 0 0 10px 0;
|
|
color: #333;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.status-value {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.status-label {
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
|
|
.error {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.success {
|
|
color: #28a745;
|
|
}
|
|
|
|
.warning {
|
|
color: #ffc107;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.status-item {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
.status-row.device-running {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.status-row.device-running .status-item {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
@media screen and (min-width: 900px) {
|
|
.status-row.device-running .status-item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
width: calc(33.33% - 10px);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 899px) {
|
|
.status-row.device-running .status-item {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('form');
|
|
const submitBtn = form.querySelector('input[type="submit"]');
|
|
|
|
// 获取网络配置
|
|
fetch('/netconfig')
|
|
.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('.');
|
|
})
|
|
.catch(error => {
|
|
console.error('Failed to load network config:', 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}°`;
|
|
|
|
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}%)`;
|
|
|
|
const bubbleElement = document.getElementById('bubble-status');
|
|
bubbleElement.textContent = data.bubbleStatus ? '有' : '无';
|
|
bubbleElement.className = data.bubbleStatus ? 'error' : 'success';
|
|
})
|
|
.catch(error => {
|
|
|
|
console.error('Status update failed:', error);
|
|
});
|
|
}
|
|
|
|
setInterval(updateDeviceStatus, 1000);
|
|
});
|
|
</script>
|
|
</head><body>
|
|
<div class='device-status'>
|
|
<h2>状态信息</h2>
|
|
|
|
<div class='status-group'>
|
|
<!-- 设备信息行 -->
|
|
<div class='status-row'>
|
|
<div class='status-item full-width'>
|
|
<h3>Device Information</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Device Status:</span>
|
|
<span id='device-status'>#</span>
|
|
</div>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Init Status:</span>
|
|
<span id='init-status'>#</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备运行状态行 -->
|
|
<div class='status-row device-running'>
|
|
<div class='status-item'>
|
|
<h3>Valve Status</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Valve 1 Angle:</span>
|
|
<span id='valve1-angle'>#</span>
|
|
</div>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Valve 2 Angle:</span>
|
|
<span id='valve2-angle'>#</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='status-item'>
|
|
<h3>Pump Status</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Pump 1:</span>
|
|
<span id='pump1-status'>#</span>
|
|
</div>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Pump 2:</span>
|
|
<span id='pump2-status'>#</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='status-item'>
|
|
<h3>Sensor Status</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Bubble Status:</span>
|
|
<span id='bubble-status'>#</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 急停状态 -->
|
|
<div class='status-row'>
|
|
<div class='status-item full-width'>
|
|
<h3>Emergency Stop</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Stop Status:</span>
|
|
<span id='stop-status'>#</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 错误状态行 -->
|
|
<div class='status-row'>
|
|
<div class='status-item full-width'>
|
|
<h3>Error Status</h3>
|
|
<div class='status-value'>
|
|
<span class='status-label'>Error Code:</span>
|
|
<span id='error-status'>#</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='network-config'>
|
|
<h2>参数设置</h2>
|
|
<form method='post' action='/config'>
|
|
<div class='form-group'>
|
|
<label>MAC:</label>
|
|
<input type='text' name='mac' value='#:#:#:#:#:#'>
|
|
</div>
|
|
<div class='form-group'>
|
|
<label>IP:</label>
|
|
<input type='text' name='ip' value='#.#.#.#'>
|
|
</div>
|
|
<div class='form-group'>
|
|
<label>Subnet:</label>
|
|
<input type='text' name='subnet' value='#.#.#.#'>
|
|
</div>
|
|
<div class='form-group'>
|
|
<label>Gateway:</label>
|
|
<input type='text' name='gateway' value='#.#.#.#'>
|
|
</div>
|
|
<input type='submit' value='Save Configuration'>
|
|
</form>
|
|
</div>
|
|
|
|
</body></html>)" |