web配置页面基本框架完成
This commit is contained in:
@@ -36,7 +36,7 @@ async def error(request, code, reason):
|
|||||||
await request.write(str(reason))
|
await request.write(str(reason))
|
||||||
|
|
||||||
|
|
||||||
async def send_file(request, filename, segment=64, binary=True):
|
async def send_file(request, filename, segment=512, binary=True):
|
||||||
try:
|
try:
|
||||||
with open(filename, "rb" if binary else "r") as f:
|
with open(filename, "rb" if binary else "r") as f:
|
||||||
while True:
|
while True:
|
||||||
@@ -91,7 +91,8 @@ class Nanoweb:
|
|||||||
handler = (request.url, handler)
|
handler = (request.url, handler)
|
||||||
|
|
||||||
if isinstance(handler, str):
|
if isinstance(handler, str):
|
||||||
await write(request, "HTTP/1.1 200 OK\r\n\r\n")
|
await write(request, "HTTP/1.1 200 OK\r\n")
|
||||||
|
await write(request, "Cache-Control: max-age=3600\r\n\r\n")
|
||||||
await send_file(request, handler)
|
await send_file(request, handler)
|
||||||
elif isinstance(handler, tuple):
|
elif isinstance(handler, tuple):
|
||||||
await write(request, "HTTP/1.1 200 OK\r\n\r\n")
|
await write(request, "HTTP/1.1 200 OK\r\n\r\n")
|
||||||
|
|||||||
1
src/rom/www/css/micro.min.css
vendored
Normal file
1
src/rom/www/css/micro.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.card,body{padding:20px}.card,h1{margin-bottom:20px}.form-control,.table{width:100%;font-size:14px}.btn,.form-control,.table{font-size:14px}.list,.progress{overflow:hidden}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.5;background:#f8f9fa;color:#333;max-width:800px;margin:0 auto}.card{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05);border:1px solid #e9ecef}h1{font-size:24px;color:#2c3e50}h2{font-size:20px;margin:15px 0;color:#34495e}h3{font-size:16px;margin:10px 0;color:#7f8c8d}.btn{display:inline-block;padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;text-decoration:none;transition:background .2s;margin:2px}.btn:hover{background:#2980b9}.btn:active{transform:translateY(1px)}.btn-success{background:#27ae60}.btn-success:hover{background:#219653}.btn-danger{background:#e74c3c}.btn-danger:hover{background:#c0392b}.btn-warning{background:#f39c12}.btn-warning:hover{background:#d68910}.btn-outline{background:0 0;border:1px solid #3498db;color:#3498db}.badge-info,.btn-outline:hover{background:#3498db;color:#fff}.list-item:hover,.table th,.table tr:hover,.table-striped tr:nth-child(2n){background:#f8f9fa}.form-group{margin-bottom:15px}.form-label{display:block;margin-bottom:5px;font-weight:500;color:#555}.form-control{padding:10px;border:1px solid #ddd;border-radius:4px;transition:border .2s}.alert,.list-item{padding:12px 15px}.form-control:focus{outline:0;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.form-control:disabled{background:#f8f9fa;cursor:not-allowed}.checkbox,.radio{display:flex;align-items:center;margin:5px 0;cursor:pointer}.alert,.table{margin:10px 0}.checkbox input,.radio input{margin-right:8px}.table{border-collapse:collapse}.table td,.table th{padding:10px;text-align:left;border-bottom:1px solid #eee}.table th{font-weight:600;color:#555}.list{list-style:none;border:1px solid #eee;border-radius:4px}.list-item{border-bottom:1px solid #eee;background:#fff}.list-item:last-child{border-bottom:none}.alert{border-radius:4px;border-left:4px solid}.alert-success{background:#d4edda;border-left-color:#27ae60;color:#155724}.alert-warning{background:#fff3cd;border-left-color:#f39c12;color:#856404}.alert-error{background:#f8d7da;border-left-color:#e74c3c;color:#721c24}.alert-info{background:#d1ecf1;border-left-color:#3498db;color:#0c5460}.badge{display:inline-block;padding:3px 8px;font-size:12px;border-radius:20px;background:#e9ecef;color:#495057;margin:0 2px}.badge-success{background:#27ae60;color:#fff}.badge-warning{background:#f39c12;color:#fff}.badge-danger{background:#e74c3c;color:#fff}.progress{height:20px;background:#f0f0f0;border-radius:10px;margin:10px 0}.progress-bar{height:100%;background:#3498db;transition:width .3s;border-radius:10px}.row{display:flex;flex-wrap:wrap;margin:0 -10px}.col{flex:1;padding:0 10px;min-width:200px}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:#6c757d}.mt-1{margin-top:5px}.mt-2{margin-top:10px}.mt-3{margin-top:20px}.mb-1{margin-bottom:5px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:20px}.p-1{padding:5px}.p-2{padding:10px}.p-3{padding:20px}.hidden{display:none!important}@media (max-width:768px){body{padding:10px}.card{padding:15px}.row{flex-direction:column}.col{width:100%}}
|
||||||
@@ -1,571 +1,307 @@
|
|||||||
<!doctype html>
|
<!doctype html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WS2桌面气象站</title><link rel="stylesheet" href="./css/micro.min.css" /><style>
|
||||||
<html>
|
.header {
|
||||||
<head>
|
display: flex;
|
||||||
<meta charset="UTF-8" />
|
justify-content: space-between;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
align-items: center;
|
||||||
<title>WS2桌面气象站</title>
|
margin-bottom: 20px;
|
||||||
<link rel="stylesheet" href="./css/micro.css" />
|
}
|
||||||
<style>
|
.nav-tabs {
|
||||||
/* 只保留micro.css中没有的特殊样式 */
|
display: flex;
|
||||||
.header {
|
border-bottom: 1px solid #ddd;
|
||||||
display: flex;
|
margin-bottom: 20px;
|
||||||
justify-content: space-between;
|
}
|
||||||
align-items: center;
|
.nav-tab {
|
||||||
margin-bottom: 20px;
|
padding: 10px 15px;
|
||||||
}
|
cursor: pointer;
|
||||||
.nav-tabs {
|
border-bottom: 2px solid transparent;
|
||||||
display: flex;
|
}
|
||||||
border-bottom: 1px solid #ddd;
|
.nav-tab.active {
|
||||||
margin-bottom: 20px;
|
border-bottom-color: #3498db;
|
||||||
}
|
font-weight: bold;
|
||||||
.nav-tab {
|
}
|
||||||
padding: 10px 15px;
|
.tab-content {
|
||||||
cursor: pointer;
|
display: none;
|
||||||
border-bottom: 2px solid transparent;
|
}
|
||||||
}
|
.tab-content.active {
|
||||||
.nav-tab.active {
|
display: block;
|
||||||
border-bottom-color: #3498db;
|
}
|
||||||
font-weight: bold;
|
.status-grid {
|
||||||
}
|
display: grid;
|
||||||
.tab-content {
|
grid-template-columns: 1fr 1fr;
|
||||||
display: none;
|
gap: 15px;
|
||||||
}
|
}
|
||||||
.tab-content.active {
|
.gauge-container {
|
||||||
display: block;
|
text-align: center;
|
||||||
}
|
margin: 20px 0;
|
||||||
.status-grid {
|
}
|
||||||
display: grid;
|
</style></head><body><div class="card"><div class="header"><h1>WS2桌面气象站</h1></div><div
|
||||||
grid-template-columns: 1fr 1fr;
|
class="alert"
|
||||||
gap: 15px;
|
style="
|
||||||
}
|
position: fixed;
|
||||||
.gauge-container {
|
top: 25px;
|
||||||
text-align: center;
|
left: 50%;
|
||||||
margin: 20px 0;
|
transform: translateX(-50%);
|
||||||
}
|
z-index: 1000;
|
||||||
</style>
|
display: none;
|
||||||
</head>
|
"
|
||||||
<body>
|
id="message"
|
||||||
<div class="card">
|
></div><div class="nav-tabs"><div class="nav-tab active" data-tab="status">设备状态</div><div class="nav-tab" data-tab="display">屏幕显示</div><div class="nav-tab" data-tab="config">系统配置</div><div class="nav-tab" data-tab="about">关于</div></div><div id="status-tab" class="tab-content active"><div class="gauge-container"><div id="memory-gauge"></div></div><h3 class="mt-3">系统信息</h3><div class="status-grid"><div><strong>时间:</strong><span data-bind="time">-</span></div><div><strong>运行时间:</strong><span data-bind="uptime">-</span></div><div><strong>可用内存:</strong><span data-bind="mem_free">-</span></div><div><strong>UUID:</strong><span data-bind="uuid">-</span></div><div><strong>平台:</strong><span data-bind="platform">-</span></div><div><strong>版本:</strong><span data-bind="version">-</span></div></div></div><div id="display-tab" class="tab-content"><h3>LCD显示设置</h3><div class="form-group"><div
|
||||||
<div class="header">
|
style="
|
||||||
<h1>WS2桌面气象站</h1>
|
display: flex;
|
||||||
</div>
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
<div
|
"
|
||||||
class="alert"
|
><label class="form-label mb-0">显示状态</label><span
|
||||||
style="
|
id="lcd-ready-badge"
|
||||||
position: fixed;
|
class="badge badge-warning"
|
||||||
top: 25px;
|
></span></div></div><div class="form-group"><label class="form-label">屏幕亮度</label><div style="display: flex; align-items: center"><input
|
||||||
left: 50%;
|
type="range"
|
||||||
transform: translateX(-50%);
|
id="brightness-slider"
|
||||||
z-index: 1000;
|
min="0"
|
||||||
display: none;
|
max="100"
|
||||||
"
|
class="form-control"
|
||||||
id="message"
|
style="margin-right: 10px; padding: 10px 0"
|
||||||
></div>
|
/><span id="brightness-value">-</span>%
|
||||||
|
</div></div><div class="form-group"><label class="form-label">UI类型</label><select id="ui-type-select" class="form-control"><option value="default">太空人天气时钟</option><option value="album">电子相册</option></select></div><button class="btn btn-success" id="apply-display-btn">
|
||||||
<!-- 导航选项卡 -->
|
应用设置
|
||||||
<div class="nav-tabs">
|
</button><h3 class="mt-3">LCD数据内容</h3><table class="table" id="lcd-data-table"><tr><th>属性</th><th>值</th></tr></table></div><div id="config-tab" class="tab-content"><h3>天气站配置</h3><div class="form-group"><label class="form-label">城市</label><input
|
||||||
<div class="nav-tab active" data-tab="status">设备状态</div>
|
type="text"
|
||||||
<div class="nav-tab" data-tab="display">屏幕显示</div>
|
id="city-input"
|
||||||
<div class="nav-tab" data-tab="config">系统配置</div>
|
class="form-control"
|
||||||
<div class="nav-tab" data-tab="about">关于</div>
|
placeholder="例如：北京"
|
||||||
</div>
|
/><small class="text-muted">
|
||||||
|
可输入城市名称或城市ID（<a
|
||||||
<!-- 设备状态选项卡 -->
|
href="https://mapopen-website-wiki.cdn.bcebos.com/cityList/weather_district_id.csv"
|
||||||
<div id="status-tab" class="tab-content active">
|
target="_blank"
|
||||||
<div class="gauge-container">
|
>查看城市ID列表</a
|
||||||
<div id="memory-gauge"></div>
|
>）
|
||||||
</div>
|
</small></div><div class="form-group"><label class="form-label">自动熄屏时间</label><input
|
||||||
|
type="time"
|
||||||
<h3 class="mt-3">系统信息</h3>
|
id="screen-timeout-input"
|
||||||
<div class="status-grid">
|
class="form-control"
|
||||||
<div>
|
/><small class="text-muted">留空表示不自动熄屏</small></div><button class="btn btn-success" id="save-config-btn">
|
||||||
<strong>时间:</strong> <span data-bind="time">-</span>
|
保存配置
|
||||||
</div>
|
</button><h3 class="mt-3">当前配置</h3><table class="table" id="current-config"><tr><th>配置项</th><th>值</th></tr></table></div><div id="about-tab" class="tab-content"><h3>关于</h3><p>
|
||||||
<div>
|
WS2是一款基于ESP8266的桌面气象站，能够实时显示天气信息、环境数据和时间。
|
||||||
<strong>运行时间:</strong>
|
</p><div class="row"><div class="col"><h3 class="mt-3">硬件规格</h3><div class="list"><div class="list-item"><strong>硬件平台:</strong> ESP8266
|
||||||
<span data-bind="uptime">-</span>
|
<span class="badge badge-info">WiFi</span></div><div class="list-item"><strong>显示屏:</strong> LCD 240x240
|
||||||
</div>
|
<span class="badge badge-info">彩色</span></div><div class="list-item"><strong>环境参数:</strong>
|
||||||
<div>
|
温度、湿度、PM2.5、气压、AQI
|
||||||
<strong>可用内存:</strong>
|
</div></div></div><div class="col"><h3 class="mt-3">软件信息</h3><div class="list"><div class="list-item"><strong>固件:</strong><a
|
||||||
<span data-bind="mem_free">-</span>
|
href="https://iot.foresh.com/git/kicer/ws2"
|
||||||
</div>
|
target="_blank"
|
||||||
<div>
|
>
|
||||||
<strong>UUID:</strong> <span data-bind="uuid">-</span>
|
ws2-v1.3.0
|
||||||
</div>
|
</a><span class="badge badge-success">开源</span></div><div class="list-item"><strong>协议:</strong> HTTP REST API
|
||||||
<div>
|
</div><div class="list-item"><strong>更新频率:</strong> 每小时
|
||||||
<strong>平台:</strong>
|
</div></div></div></div><h3 class="mt-3">开放源码</h3><a
|
||||||
<span data-bind="platform">-</span>
|
href="https://github.com/kicer/ws2"
|
||||||
</div>
|
target="_blank"
|
||||||
<div>
|
class="btn btn-outline"
|
||||||
<strong>版本:</strong>
|
>
|
||||||
<span data-bind="version">-</span>
|
kicer@Github: ws2
|
||||||
</div>
|
</a><a
|
||||||
</div>
|
href="https://iot.foresh.com/git/kicer/ws2"
|
||||||
</div>
|
target="_blank"
|
||||||
|
class="btn btn-outline"
|
||||||
<!-- 屏幕显示选项卡 -->
|
>
|
||||||
<div id="display-tab" class="tab-content">
|
kicer@Foresh: ws2（国内访问）</a
|
||||||
<h3>LCD显示设置</h3>
|
><h3 class="mt-3">软件许可</h3><p>本项目采用MIT许可证开源，欢迎自由使用和修改。</p></div></div><script src="./js/micro.min.js"></script><script>
|
||||||
<div class="form-group">
|
// 全局变量
|
||||||
<div
|
let currentConfig = {};// 页面加载完成后执行
|
||||||
style="
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
display: flex;
|
initTabSwitching();
|
||||||
justify-content: space-between;
|
initEventHandlers();
|
||||||
align-items: center;
|
refreshStatus();
|
||||||
"
|
});// 初始化选项卡切换
|
||||||
>
|
function initTabSwitching() {
|
||||||
<label class="form-label mb-0">显示状态</label>
|
mw.$$(".nav-tab").forEach((tab) => {
|
||||||
<span
|
mw.on(tab, "click", function () {
|
||||||
id="lcd-ready-badge"
|
const tabName = mw.attr(this, "data-tab");
|
||||||
class="badge badge-warning"
|
showTab(tabName);
|
||||||
></span>
|
});
|
||||||
</div>
|
});
|
||||||
</div>
|
}// 初始化事件处理器
|
||||||
|
function initEventHandlers() {
|
||||||
<div class="form-group">
|
// 亮度滑块
|
||||||
<label class="form-label">屏幕亮度</label>
|
mw.on(mw.$("#brightness-slider"), "input", function () {
|
||||||
<div style="display: flex; align-items: center">
|
mw.text(mw.$("#brightness-value"), mw.val(this));
|
||||||
<input
|
});// 应用显示设置按钮
|
||||||
type="range"
|
mw.on(
|
||||||
id="brightness-slider"
|
mw.$("#apply-display-btn"),
|
||||||
min="0"
|
"click",
|
||||||
max="100"
|
applyDisplaySettings,
|
||||||
class="form-control"
|
);// 保存配置按钮
|
||||||
style="margin-right: 10px; padding: 10px 0"
|
mw.on(mw.$("#save-config-btn"), "click", saveConfig);
|
||||||
/>
|
}// 更新LCD状态徽章
|
||||||
<span id="brightness-value">-</span>%
|
function updateLcdBadges(isReady) {
|
||||||
</div>
|
const badge = mw.$("#lcd-ready-badge");if (isReady) {
|
||||||
</div>
|
mw.text(badge, "正常");
|
||||||
|
mw.replaceClass(badge, "badge-warning", "badge-success");
|
||||||
<div class="form-group">
|
} else {
|
||||||
<label class="form-label">UI类型</label>
|
mw.text(badge, "未就绪");
|
||||||
<select id="ui-type-select" class="form-control">
|
mw.replaceClass(badge, "badge-success", "badge-warning");
|
||||||
<option value="default">太空人天气时钟</option>
|
}
|
||||||
<option value="album">电子相册</option>
|
}// 切换选项卡
|
||||||
</select>
|
function showTab(tabName) {
|
||||||
</div>
|
// 隐藏所有选项卡内容
|
||||||
|
mw.$$(".tab-content").forEach((tab) =>
|
||||||
<button class="btn btn-success" id="apply-display-btn">
|
mw.removeClass(tab, "active"),
|
||||||
应用设置
|
);// 移除所有选项卡的激活类
|
||||||
</button>
|
mw.$$(".nav-tab").forEach((tab) =>
|
||||||
|
mw.removeClass(tab, "active"),
|
||||||
<h3 class="mt-3">LCD数据内容</h3>
|
);// 显示选中的选项卡
|
||||||
<table class="table" id="lcd-data-table">
|
mw.addClass(mw.$(`#${tabName}-tab`), "active");// 激活选中的导航
|
||||||
<tr>
|
mw.addClass(mw.$(`[data-tab="${tabName}"]`), "active");// 根据选项卡刷新数据
|
||||||
<th>属性</th>
|
if (tabName === "status") {
|
||||||
<th>值</th>
|
refreshStatus();
|
||||||
</tr>
|
} else if (tabName === "config") {
|
||||||
</table>
|
loadConfig();
|
||||||
</div>
|
} else if (tabName === "display") {
|
||||||
|
updateDisplaySettings();
|
||||||
<!-- 系统配置选项卡 -->
|
}
|
||||||
<div id="config-tab" class="tab-content">
|
}// 刷新状态
|
||||||
<h3>天气站配置</h3>
|
async function refreshStatus() {
|
||||||
<div class="form-group">
|
try {
|
||||||
<label class="form-label">城市</label>
|
// 获取系统状态
|
||||||
<input
|
const response = await mw.ajax.get("/status");
|
||||||
type="text"
|
const data = JSON.parse(response);// 使用数据绑定更新系统状态
|
||||||
id="city-input"
|
mw.bind(data);// 更新内存仪表盘
|
||||||
class="form-control"
|
updateMemoryGauge(data.mem_free, data.mem_alloc);showMessage("状态已更新", "success");
|
||||||
placeholder="例如：北京"
|
} catch (error) {
|
||||||
/>
|
showMessage("获取状态失败: " + error.message, "error");
|
||||||
<small class="text-muted">
|
}
|
||||||
可输入城市名称或城市ID（<a
|
}// 更新内存仪表盘
|
||||||
href="https://mapopen-website-wiki.cdn.bcebos.com/cityList/weather_district_id.csv"
|
function updateMemoryGauge(free, alloc) {
|
||||||
target="_blank"
|
const maxMemory = parseInt(free) + parseInt(alloc);
|
||||||
>查看城市ID列表</a
|
const memoryValue = parseInt(alloc);
|
||||||
>）
|
const percentage = Math.min(
|
||||||
</small>
|
100,
|
||||||
</div>
|
Math.round((memoryValue / maxMemory) * 100),
|
||||||
|
);// 使用micro.js的图表功能创建仪表盘
|
||||||
<div class="form-group">
|
mw.chart.createGauge(mw.$("#memory-gauge"), percentage, 100, {
|
||||||
<label class="form-label">自动熄屏时间</label>
|
label: "内存使用率",
|
||||||
<input
|
color:
|
||||||
type="time"
|
percentage > 80
|
||||||
id="screen-timeout-input"
|
? "#e74c3c"
|
||||||
class="form-control"
|
: percentage > 50
|
||||||
/>
|
? "#f39c12"
|
||||||
<small class="text-muted">留空表示不自动熄屏</small>
|
: "#27ae60",
|
||||||
</div>
|
});
|
||||||
|
}// 更新显示设置
|
||||||
<button class="btn btn-success" id="save-config-btn">
|
async function updateDisplaySettings() {
|
||||||
保存配置
|
try {
|
||||||
</button>
|
const response = await mw.ajax.get("/lcd");
|
||||||
|
const data = JSON.parse(response);// 更新亮度滑块和显示值
|
||||||
<h3 class="mt-3">当前配置</h3>
|
mw.val(mw.$("#brightness-slider"), data.brightness);
|
||||||
<table class="table" id="current-config">
|
mw.text(mw.$("#brightness-value"), data.brightness);// 更新UI类型选择框
|
||||||
<tr>
|
mw.val(mw.$("#ui-type-select"), data.ui_type);// 更新LCD状态徽章
|
||||||
<th>配置项</th>
|
updateLcdBadges(data.ready);// 更新LCD数据表格
|
||||||
<th>值</th>
|
updateLcdDataTable(data.data);
|
||||||
</tr>
|
} catch (error) {
|
||||||
</table>
|
showMessage("获取LCD状态失败: " + error.message, "error");
|
||||||
</div>
|
}
|
||||||
|
}// 应用显示设置
|
||||||
<!-- 关于选项卡 -->
|
async function applyDisplaySettings() {
|
||||||
<div id="about-tab" class="tab-content">
|
try {
|
||||||
<h3>关于</h3>
|
const brightness = mw.val(mw.$("#brightness-slider"));
|
||||||
<p>
|
const uiType = mw.val(mw.$("#ui-type-select"));const response = await mw.ajax.post("/lcd/set", {
|
||||||
WS2是一款基于ESP8266的桌面气象站，能够实时显示天气信息、环境数据和时间。
|
brightness: brightness,
|
||||||
</p>
|
ui_type: uiType,
|
||||||
|
});const data = JSON.parse(response);if (data.status === "success") {
|
||||||
<div class="row">
|
showMessage("显示设置已应用", "success");
|
||||||
<div class="col">
|
// 刷新显示设置
|
||||||
<h3 class="mt-3">硬件规格</h3>
|
await updateDisplaySettings();
|
||||||
<div class="list">
|
} else {
|
||||||
<div class="list-item">
|
showMessage(
|
||||||
<strong>硬件平台:</strong> ESP8266
|
"设置失败: " + (data.message || "未知错误"),
|
||||||
<span class="badge badge-info">WiFi</span>
|
"error",
|
||||||
</div>
|
);
|
||||||
<div class="list-item">
|
}
|
||||||
<strong>显示屏:</strong> LCD 240x240
|
} catch (error) {
|
||||||
<span class="badge badge-info">彩色</span>
|
showMessage("请求失败: " + error.message, "error");
|
||||||
</div>
|
}
|
||||||
<div class="list-item">
|
}// 加载配置
|
||||||
<strong>环境参数:</strong>
|
async function loadConfig() {
|
||||||
温度、湿度、PM2.5、气压、AQI
|
try {
|
||||||
</div>
|
const response = await mw.ajax.get("/config");
|
||||||
</div>
|
const data = JSON.parse(response);currentConfig = data;// 更新配置表单
|
||||||
</div>
|
if (data.city) {
|
||||||
<div class="col">
|
mw.val(mw.$("#city-input"), data.city);
|
||||||
<h3 class="mt-3">软件信息</h3>
|
}if (data.screen_timeout) {
|
||||||
<div class="list">
|
mw.val(
|
||||||
<div class="list-item">
|
mw.$("#screen-timeout-input"),
|
||||||
<strong>固件:</strong>
|
data.screen_timeout,
|
||||||
<a
|
);
|
||||||
href="https://iot.foresh.com/git/kicer/ws2"
|
}// 更新配置表
|
||||||
target="_blank"
|
updateConfigTable(data);
|
||||||
>
|
} catch (error) {
|
||||||
ws2-v1.3.0
|
showMessage("获取配置失败: " + error.message, "error");
|
||||||
</a>
|
}
|
||||||
<span class="badge badge-success">开源</span>
|
}// 更新配置表格
|
||||||
</div>
|
function updateConfigTable(data) {
|
||||||
<div class="list-item">
|
const configTable = mw.$("#current-config");// 清除现有行（保留标题行）
|
||||||
<strong>协议:</strong> HTTP REST API
|
while (configTable.rows.length > 1) {
|
||||||
</div>
|
configTable.deleteRow(1);
|
||||||
<div class="list-item">
|
}// 添加新行
|
||||||
<strong>更新频率:</strong> 每小时
|
for (const key in data) {
|
||||||
</div>
|
const row = configTable.insertRow();
|
||||||
</div>
|
const cell1 = row.insertCell(0);
|
||||||
</div>
|
const cell2 = row.insertCell(1);mw.text(cell1, key);
|
||||||
</div>
|
mw.text(cell2, data[key]);
|
||||||
|
}
|
||||||
<h3 class="mt-3">开放源码</h3>
|
}// 更新LCD数据表格
|
||||||
<a
|
function updateLcdDataTable(data) {
|
||||||
href="https://github.com/kicer/ws2"
|
const dataTable = mw.$("#lcd-data-table");// 清除现有行（保留标题行）
|
||||||
target="_blank"
|
while (dataTable.rows.length > 1) {
|
||||||
class="btn btn-outline"
|
dataTable.deleteRow(1);
|
||||||
>
|
}// 添加数据行
|
||||||
kicer@Github: ws2
|
for (const key in data) {
|
||||||
</a>
|
const row = dataTable.insertRow();
|
||||||
<a
|
const cell1 = row.insertCell(0);
|
||||||
href="https://iot.foresh.com/git/kicer/ws2"
|
const cell2 = row.insertCell(1);mw.text(cell1, key);
|
||||||
target="_blank"
|
let value = data[key];
|
||||||
class="btn btn-outline"
|
// 如果值是对象，则转换为JSON字符串
|
||||||
>
|
if (typeof value === "object") {
|
||||||
kicer@Foresh: ws2（国内访问）</a
|
value = JSON.stringify(value);
|
||||||
>
|
}
|
||||||
|
mw.text(cell2, value);
|
||||||
<h3 class="mt-3">软件许可</h3>
|
}
|
||||||
<p>本项目采用MIT许可证开源，欢迎自由使用和修改。</p>
|
}// 保存配置
|
||||||
</div>
|
async function saveConfig() {
|
||||||
</div>
|
try {
|
||||||
|
const city = mw.val(mw.$("#city-input"));
|
||||||
<script src="./js/micro.js"></script>
|
const screenTimeout = mw.val(mw.$("#screen-timeout-input"));if (!city) {
|
||||||
<script>
|
showMessage("城市名称不能为空", "error");
|
||||||
// 全局变量
|
return;
|
||||||
let currentConfig = {};
|
}const configData = {
|
||||||
|
city: city,
|
||||||
// 页面加载完成后执行
|
};// 只有当输入了熄屏时间时才添加到配置中
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
if (screenTimeout !== "") {
|
||||||
initTabSwitching();
|
configData.screen_timeout = screenTimeout;
|
||||||
initEventHandlers();
|
}const response = await mw.ajax.post(
|
||||||
refreshStatus();
|
"/config/set",
|
||||||
});
|
configData,
|
||||||
|
);
|
||||||
// 初始化选项卡切换
|
const data = JSON.parse(response);if (data.status === "success") {
|
||||||
function initTabSwitching() {
|
showMessage("配置已保存", "success");
|
||||||
mw.$$(".nav-tab").forEach((tab) => {
|
loadConfig();
|
||||||
mw.on(tab, "click", function () {
|
} else {
|
||||||
const tabName = mw.attr(this, "data-tab");
|
showMessage(
|
||||||
showTab(tabName);
|
"保存失败: " + (data.message || "未知错误"),
|
||||||
});
|
"error",
|
||||||
});
|
);
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
// 初始化事件处理器
|
showMessage("请求失败: " + error.message, "error");
|
||||||
function initEventHandlers() {
|
}
|
||||||
// 亮度滑块
|
}// 显示消息
|
||||||
mw.on(mw.$("#brightness-slider"), "input", function () {
|
function showMessage(text, type) {
|
||||||
mw.text(mw.$("#brightness-value"), mw.val(this));
|
const messageEl = mw.$("#message");
|
||||||
});
|
mw.text(messageEl, text);
|
||||||
|
mw.addClass(messageEl, "alert-" + type);
|
||||||
// 应用显示设置按钮
|
mw.show(messageEl);setTimeout(() => {
|
||||||
mw.on(
|
mw.hide(messageEl);
|
||||||
mw.$("#apply-display-btn"),
|
}, 3000);
|
||||||
"click",
|
}
|
||||||
applyDisplaySettings,
|
</script></body></html>
|
||||||
);
|
|
||||||
|
|
||||||
// 保存配置按钮
|
|
||||||
mw.on(mw.$("#save-config-btn"), "click", saveConfig);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新LCD状态徽章
|
|
||||||
function updateLcdBadges(isReady) {
|
|
||||||
const badge = mw.$("#lcd-ready-badge");
|
|
||||||
|
|
||||||
if (isReady) {
|
|
||||||
mw.text(badge, "正常");
|
|
||||||
mw.replaceClass(badge, "badge-warning", "badge-success");
|
|
||||||
} else {
|
|
||||||
mw.text(badge, "未就绪");
|
|
||||||
mw.replaceClass(badge, "badge-success", "badge-warning");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换选项卡
|
|
||||||
function showTab(tabName) {
|
|
||||||
// 隐藏所有选项卡内容
|
|
||||||
mw.$$(".tab-content").forEach((tab) =>
|
|
||||||
mw.removeClass(tab, "active"),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 移除所有选项卡的激活类
|
|
||||||
mw.$$(".nav-tab").forEach((tab) =>
|
|
||||||
mw.removeClass(tab, "active"),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 显示选中的选项卡
|
|
||||||
mw.addClass(mw.$(`#${tabName}-tab`), "active");
|
|
||||||
|
|
||||||
// 激活选中的导航
|
|
||||||
mw.addClass(mw.$(`[data-tab="${tabName}"]`), "active");
|
|
||||||
|
|
||||||
// 根据选项卡刷新数据
|
|
||||||
if (tabName === "status") {
|
|
||||||
refreshStatus();
|
|
||||||
} else if (tabName === "config") {
|
|
||||||
loadConfig();
|
|
||||||
} else if (tabName === "display") {
|
|
||||||
updateDisplaySettings();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新状态
|
|
||||||
async function refreshStatus() {
|
|
||||||
try {
|
|
||||||
// 获取系统状态
|
|
||||||
const response = await mw.ajax.get("/status");
|
|
||||||
const data = JSON.parse(response);
|
|
||||||
|
|
||||||
// 使用数据绑定更新系统状态
|
|
||||||
mw.bind(data);
|
|
||||||
|
|
||||||
// 更新内存仪表盘
|
|
||||||
updateMemoryGauge(data.mem_free, data.mem_alloc);
|
|
||||||
|
|
||||||
showMessage("状态已更新", "success");
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("获取状态失败: " + error.message, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新内存仪表盘
|
|
||||||
function updateMemoryGauge(free, alloc) {
|
|
||||||
const maxMemory = parseInt(free) + parseInt(alloc);
|
|
||||||
const memoryValue = parseInt(alloc);
|
|
||||||
const percentage = Math.min(
|
|
||||||
100,
|
|
||||||
Math.round((memoryValue / maxMemory) * 100),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 使用micro.js的图表功能创建仪表盘
|
|
||||||
mw.chart.createGauge(mw.$("#memory-gauge"), percentage, 100, {
|
|
||||||
label: "内存使用率",
|
|
||||||
color:
|
|
||||||
percentage > 80
|
|
||||||
? "#e74c3c"
|
|
||||||
: percentage > 50
|
|
||||||
? "#f39c12"
|
|
||||||
: "#27ae60",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新显示设置
|
|
||||||
async function updateDisplaySettings() {
|
|
||||||
try {
|
|
||||||
const response = await mw.ajax.get("/lcd");
|
|
||||||
const data = JSON.parse(response);
|
|
||||||
|
|
||||||
// 更新亮度滑块和显示值
|
|
||||||
mw.val(mw.$("#brightness-slider"), data.brightness);
|
|
||||||
mw.text(mw.$("#brightness-value"), data.brightness);
|
|
||||||
|
|
||||||
// 更新UI类型选择框
|
|
||||||
mw.val(mw.$("#ui-type-select"), data.ui_type);
|
|
||||||
|
|
||||||
// 更新LCD状态徽章
|
|
||||||
updateLcdBadges(data.ready);
|
|
||||||
|
|
||||||
// 更新LCD数据表格
|
|
||||||
updateLcdDataTable(data.data);
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("获取LCD状态失败: " + error.message, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 应用显示设置
|
|
||||||
async function applyDisplaySettings() {
|
|
||||||
try {
|
|
||||||
const brightness = mw.val(mw.$("#brightness-slider"));
|
|
||||||
const uiType = mw.val(mw.$("#ui-type-select"));
|
|
||||||
|
|
||||||
const response = await mw.ajax.post("/lcd/set", {
|
|
||||||
brightness: brightness,
|
|
||||||
ui_type: uiType,
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = JSON.parse(response);
|
|
||||||
|
|
||||||
if (data.status === "success") {
|
|
||||||
showMessage("显示设置已应用", "success");
|
|
||||||
// 刷新显示设置
|
|
||||||
await updateDisplaySettings();
|
|
||||||
} else {
|
|
||||||
showMessage(
|
|
||||||
"设置失败: " + (data.message || "未知错误"),
|
|
||||||
"error",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("请求失败: " + error.message, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载配置
|
|
||||||
async function loadConfig() {
|
|
||||||
try {
|
|
||||||
const response = await mw.ajax.get("/config");
|
|
||||||
const data = JSON.parse(response);
|
|
||||||
|
|
||||||
currentConfig = data;
|
|
||||||
|
|
||||||
// 更新配置表单
|
|
||||||
if (data.city) {
|
|
||||||
mw.val(mw.$("#city-input"), data.city);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.screen_timeout) {
|
|
||||||
mw.val(
|
|
||||||
mw.$("#screen-timeout-input"),
|
|
||||||
data.screen_timeout,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新配置表
|
|
||||||
updateConfigTable(data);
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("获取配置失败: " + error.message, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新配置表格
|
|
||||||
function updateConfigTable(data) {
|
|
||||||
const configTable = mw.$("#current-config");
|
|
||||||
|
|
||||||
// 清除现有行（保留标题行）
|
|
||||||
while (configTable.rows.length > 1) {
|
|
||||||
configTable.deleteRow(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加新行
|
|
||||||
for (const key in data) {
|
|
||||||
const row = configTable.insertRow();
|
|
||||||
const cell1 = row.insertCell(0);
|
|
||||||
const cell2 = row.insertCell(1);
|
|
||||||
|
|
||||||
mw.text(cell1, key);
|
|
||||||
mw.text(cell2, data[key]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新LCD数据表格
|
|
||||||
function updateLcdDataTable(data) {
|
|
||||||
const dataTable = mw.$("#lcd-data-table");
|
|
||||||
|
|
||||||
// 清除现有行（保留标题行）
|
|
||||||
while (dataTable.rows.length > 1) {
|
|
||||||
dataTable.deleteRow(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加数据行
|
|
||||||
for (const key in data) {
|
|
||||||
const row = dataTable.insertRow();
|
|
||||||
const cell1 = row.insertCell(0);
|
|
||||||
const cell2 = row.insertCell(1);
|
|
||||||
|
|
||||||
mw.text(cell1, key);
|
|
||||||
let value = data[key];
|
|
||||||
// 如果值是对象，则转换为JSON字符串
|
|
||||||
if (typeof value === "object") {
|
|
||||||
value = JSON.stringify(value);
|
|
||||||
}
|
|
||||||
mw.text(cell2, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存配置
|
|
||||||
async function saveConfig() {
|
|
||||||
try {
|
|
||||||
const city = mw.val(mw.$("#city-input"));
|
|
||||||
const screenTimeout = mw.val(mw.$("#screen-timeout-input"));
|
|
||||||
|
|
||||||
if (!city) {
|
|
||||||
showMessage("城市名称不能为空", "error");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const configData = {
|
|
||||||
city: city,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 只有当输入了熄屏时间时才添加到配置中
|
|
||||||
if (screenTimeout !== "") {
|
|
||||||
configData.screen_timeout = screenTimeout;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await mw.ajax.post(
|
|
||||||
"/config/set",
|
|
||||||
configData,
|
|
||||||
);
|
|
||||||
const data = JSON.parse(response);
|
|
||||||
|
|
||||||
if (data.status === "success") {
|
|
||||||
showMessage("配置已保存", "success");
|
|
||||||
loadConfig();
|
|
||||||
} else {
|
|
||||||
showMessage(
|
|
||||||
"保存失败: " + (data.message || "未知错误"),
|
|
||||||
"error",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showMessage("请求失败: " + error.message, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示消息
|
|
||||||
function showMessage(text, type) {
|
|
||||||
const messageEl = mw.$("#message");
|
|
||||||
mw.text(messageEl, text);
|
|
||||||
mw.addClass(messageEl, "alert-" + type);
|
|
||||||
mw.show(messageEl);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
mw.hide(messageEl);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
68
src/rom/www/js/micro.min.js
vendored
Normal file
68
src/rom/www/js/micro.min.js
vendored
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
const MicroWeb={$:t=>document.querySelector(t),$$:t=>document.querySelectorAll(t),show:t=>t.style.display="block",hide:t=>t.style.display="none",toggle:t=>t.style.display="none"===t.style.display?"block":"none",text(t,e){if(void 0===e)return t.textContent;t.textContent=e},html(t,e){if(void 0===e)return t.innerHTML;t.innerHTML=e},val(t,e){if(void 0===e)return t.value;t.value=e},addClass:(t,e)=>t.classList.add(e),removeClass:(t,e)=>t.classList.remove(e),hasClass:(t,e)=>t.classList.contains(e),on(t,e,r,i){"function"==typeof r?(i=r,t.addEventListener(e,i)):t.addEventListener(e,t=>{t.target.matches(r)&&i.call(t.target,t)})},ajax:{async get(t){try{let e=await fetch(t);return await e.text()}catch(r){return console.error("GET failed:",r),null}},async post(t,e){try{let r=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});return await r.text()}catch(i){return console.error("POST failed:",i),null}},async postForm(t,e){let r=new FormData(e);try{let i=await fetch(t,{method:"POST",body:r});return await i.text()}catch(o){return console.error("Form POST failed:",o),null}}},bind(t,e=""){Object.keys(t).forEach(r=>{let i=document.querySelectorAll(`[data-bind="${e}${r}"]`);i.forEach(e=>{e.textContent=t[r]})})},render:(t,e)=>t.replace(/\{\{(\w+)\}\}/g,(t,r)=>void 0!==e[r]?e[r]:""),chart:{createProgress(t,e,r=100,i={}){let o=i.width||"100%",a=i.height||"20px",l=i.color||"#007bff",n=i.bgColor||"#f0f0f0",d=e/r*100,s=`
|
||||||
|
<div style="
|
||||||
|
width: ${o};
|
||||||
|
height: ${a};
|
||||||
|
background: ${n};
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 5px 0;">
|
||||||
|
<div style="
|
||||||
|
width: ${d}%;
|
||||||
|
height: 100%;
|
||||||
|
background: ${l};
|
||||||
|
transition: width 0.3s;
|
||||||
|
border-radius: 10px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small>${e} / ${r} (${d.toFixed(1)}%)</small>
|
||||||
|
`;t.innerHTML=s},createBarChart(t,e,r={}){let i=Math.max(...e.values);r.width;let o=r.height||200,a=r.colors||["#007bff","#28a745","#ffc107","#dc3545"],l=`<div style="display: flex; align-items: flex-end; height: ${o}px; gap: 10px;">`;e.values.forEach((t,r)=>{let n=e.labels?e.labels[r]:`Item ${r+1}`,d=a[r%a.length];l+=`
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<div style="
|
||||||
|
width: 40px;
|
||||||
|
height: ${t/i*(o-40)}px;
|
||||||
|
background: ${d};
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
margin: 0 auto;">
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 5px;">
|
||||||
|
${n}<br>
|
||||||
|
<strong>${t}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}),l+="</div>",t.innerHTML=l},createGauge(t,e,r=100,i={}){let o=i.size||150,a=i.color||"#007bff",l=`
|
||||||
|
<div style="position: relative; width: ${o}px; height: ${o/2}px;
|
||||||
|
overflow: hidden; margin: 0 auto;">
|
||||||
|
<div style="
|
||||||
|
position: absolute;
|
||||||
|
width: ${o}px;
|
||||||
|
height: ${o}px;
|
||||||
|
border: ${o/10}px solid #f0f0f0;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;">
|
||||||
|
</div>
|
||||||
|
<div style="
|
||||||
|
position: absolute;
|
||||||
|
width: ${o}px;
|
||||||
|
height: ${o}px;
|
||||||
|
border: ${o/10}px solid ${a};
|
||||||
|
border-radius: 50%;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
transform: rotate(${45+1.8*Math.min(e/r*100,100)}deg);
|
||||||
|
transition: transform 0.5s;">
|
||||||
|
</div>
|
||||||
|
<div style="
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
top: ${o/2.5}px;
|
||||||
|
font-size: ${o/7}px;
|
||||||
|
font-weight: bold;">
|
||||||
|
${e}
|
||||||
|
<div style="font-size: ${o/10}px; color: #666;">
|
||||||
|
${i.label||""}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;t.innerHTML=l}},utils:{debounce(t,e){let r;return function i(...o){let a=()=>{clearTimeout(r),t(...o)};clearTimeout(r),r=setTimeout(a,e)}},formatBytes(t,e=2){if(0===t)return"0 Bytes";let r=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,r)).toFixed(e))+" "+["Bytes","KB","MB","GB"][r]},uuid:()=>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){let e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})}};window.mw=MicroWeb;
|
||||||
Reference in New Issue
Block a user