基础版本ui完成
This commit is contained in:
@@ -1,20 +1,22 @@
|
||||
# ESP8266天气站主程序
|
||||
# 首先尝试连接已保存的WiFi，失败则启动CaptivePortal进行配置
|
||||
|
||||
import asyncio
|
||||
import gc
|
||||
import json
|
||||
import sys
|
||||
import time
|
||||
|
||||
import machine
|
||||
import asyncio
|
||||
from config import config
|
||||
from display import display # 导入液晶屏管理模块
|
||||
from wifi_manager import wifi_manager
|
||||
|
||||
|
||||
def uuid():
|
||||
return str(machine.unique_id().hex())
|
||||
|
||||
|
||||
def parse_url_params(url):
|
||||
# 解析URL中的查询参数，返回参数字典
|
||||
params = {}
|
||||
@@ -30,18 +32,23 @@ def parse_url_params(url):
|
||||
|
||||
return params
|
||||
|
||||
|
||||
async def post_parse(request):
|
||||
if request.method != "POST":
|
||||
raise Exception("invalid request")
|
||||
content_length = int(request.headers["Content-Length"])
|
||||
return (await request.read(content_length)).decode()
|
||||
|
||||
|
||||
async def json_response(request, data):
|
||||
await request.write("HTTP/1.1 200 OK\r\n")
|
||||
await request.write("Content-Type: application/json; charset=utf-8\r\n\r\n")
|
||||
await request.write(data)
|
||||
|
||||
CREDENTIALS = ('admin', config.get('web_password', 'admin'))
|
||||
|
||||
CREDENTIALS = ("admin", config.get("web_password", "admin"))
|
||||
|
||||
|
||||
def authenticate(credentials):
|
||||
async def fail(request):
|
||||
await request.write("HTTP/1.1 401 Unauthorized\r\n")
|
||||
@@ -51,31 +58,37 @@ def authenticate(credentials):
|
||||
def decorator(func):
|
||||
async def wrapper(request):
|
||||
from ubinascii import a2b_base64 as base64_decode
|
||||
header = request.headers.get('Authorization', None)
|
||||
|
||||
header = request.headers.get("Authorization", None)
|
||||
if header is None:
|
||||
return await fail(request)
|
||||
|
||||
# Authorization: Basic XXX
|
||||
kind, authorization = header.strip().split(' ', 1)
|
||||
kind, authorization = header.strip().split(" ", 1)
|
||||
if kind != "Basic":
|
||||
return await fail(request)
|
||||
|
||||
authorization = base64_decode(authorization.strip()) \
|
||||
.decode('ascii') \
|
||||
.split(':')
|
||||
authorization = (
|
||||
base64_decode(authorization.strip()).decode("ascii").split(":")
|
||||
)
|
||||
|
||||
if list(credentials) != list(authorization):
|
||||
return await fail(request)
|
||||
|
||||
return await func(request)
|
||||
|
||||
return wrapper
|
||||
|
||||
return decorator
|
||||
|
||||
|
||||
# /status: 获取系统状态
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
async def sys_status(request):
|
||||
await json_response(request,
|
||||
json.dumps({
|
||||
await json_response(
|
||||
request,
|
||||
json.dumps(
|
||||
{
|
||||
"time": "{}-{:02d}-{:02d} {:02d}:{:02d}:{:02d}".format(
|
||||
*time.localtime()
|
||||
),
|
||||
@@ -84,28 +97,35 @@ async def sys_status(request):
|
||||
"uuid": uuid(),
|
||||
"platform": str(sys.platform),
|
||||
"version": str(sys.version),
|
||||
})
|
||||
}
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
# /lcd: 获取LCD状态
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
async def lcd_status(request):
|
||||
# 返回LCD状态
|
||||
await json_response(request,
|
||||
json.dumps({
|
||||
"ready": display.is_ready(),
|
||||
"brightness": display.brightness(),
|
||||
"ui_type": display.ui_type,
|
||||
"data": display.ui_data,
|
||||
})
|
||||
await json_response(
|
||||
request,
|
||||
json.dumps(
|
||||
{
|
||||
"ready": display.is_ready(),
|
||||
"brightness": display.brightness(),
|
||||
"ui_type": display.ui_type,
|
||||
"data": display.ui_data,
|
||||
}
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
# /config: 获取当前配置
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
async def config_get(request):
|
||||
# 返回所有配置项
|
||||
await json_response(request, json.dumps(config.config_data))
|
||||
|
||||
|
||||
# /lcd/set: 设置LCD状态
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
async def lcd_set(request):
|
||||
@@ -122,6 +142,7 @@ async def lcd_set(request):
|
||||
finally:
|
||||
await json_response(request, json.dumps(ack))
|
||||
|
||||
|
||||
# /config/set: 更新配置
|
||||
# curl -H "Content-Type: application/json" -X POST -d '{"city":"xxx","who":"ami"}' 'http://<url>/config/set'
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
@@ -139,6 +160,7 @@ async def config_update(request):
|
||||
finally:
|
||||
await json_response(request, json.dumps(ack))
|
||||
|
||||
|
||||
# /exec: 执行命令并返回
|
||||
# {"cmd":"import network;R=network.WLAN().config(\"mac\").hex()", "token":"xxx"}
|
||||
@authenticate(credentials=CREDENTIALS)
|
||||
@@ -159,6 +181,8 @@ async def eval_cmd(request):
|
||||
finally:
|
||||
await json_response(request, json.dumps(ack))
|
||||
|
||||
|
||||
|
||||
# ntp时钟同步
|
||||
def sync_ntp_time():
|
||||
import ntptime
|
||||
@@ -187,7 +211,7 @@ async def fetch_weather_data(city=None):
|
||||
print(f"正在获取{city}天气数据...")
|
||||
# 从配置获取API基础URL，默认使用官方API
|
||||
url = config.get("weather_api_url", "http://esp.tangofu.com/api/ws2/")
|
||||
params = {'uuid':uuid(), 'city':city}
|
||||
params = {"uuid": uuid(), "city": city}
|
||||
|
||||
# 发送GET请求
|
||||
async with aiohttp.ClientSession() as session:
|
||||
@@ -211,8 +235,15 @@ async def fetch_weather_data(city=None):
|
||||
|
||||
ip = wifi_manager.get_ip()
|
||||
|
||||
display.update_ui(city, weather, advice, aqi, lunar, ip,
|
||||
envdat={'t':t,'rh':rh,'co2':co2,'pm':pm,'ap':ap})
|
||||
display.update_ui(
|
||||
city,
|
||||
weather,
|
||||
advice,
|
||||
aqi,
|
||||
lunar,
|
||||
ip,
|
||||
envdat={"t": t, "rh": rh, "co2": co2, "pm": pm, "ap": ap},
|
||||
)
|
||||
else:
|
||||
print(f"获取天气数据失败，状态码: {response.status}")
|
||||
|
||||
@@ -282,7 +313,7 @@ async def ui_task():
|
||||
t0 = time.ticks_ms()
|
||||
|
||||
# 计算当前帧号(1-10)，更新动画
|
||||
cframe = (F % 10)
|
||||
cframe = F % 10
|
||||
pic = f"/rom/images/T{cframe}.jpg"
|
||||
display.show_jpg(pic, 160, 160)
|
||||
|
||||
@@ -297,7 +328,7 @@ async def ui_task():
|
||||
# 控制帧率
|
||||
now = time.ticks_ms()
|
||||
ts = time.ticks_diff(now, t0)
|
||||
_sT = (100-ts) if ts<90 else 10
|
||||
_sT = (100 - ts) if ts < 90 else 10
|
||||
await asyncio.sleep_ms(_sT)
|
||||
|
||||
except Exception as e:
|
||||
@@ -308,28 +339,32 @@ async def ui_task():
|
||||
except Exception as e:
|
||||
print(f"动画任务初始化失败: {e}")
|
||||
|
||||
|
||||
def cb_progress(data):
|
||||
if isinstance(data, bytes):
|
||||
if data == b'/':
|
||||
display.portal_info('load iwconfig page ')
|
||||
elif data == b'/login':
|
||||
display.portal_info('WiFi connecting ... ')
|
||||
if data == b"/":
|
||||
display.portal_info("load iwconfig page ")
|
||||
elif data == b"/login":
|
||||
display.portal_info("WiFi connecting ... ")
|
||||
elif isinstance(data, str):
|
||||
display.message(data, 19, 204)
|
||||
|
||||
if data: print(f'progress: {str(data)}')
|
||||
if data:
|
||||
print(f"progress: {str(data)}")
|
||||
|
||||
|
||||
def start():
|
||||
# 初始化液晶屏
|
||||
display.init_display(config.get("bl_mode")=="pwm", 7000)
|
||||
display.init_display(config.get("bl_mode") == "pwm", 7000)
|
||||
display.brightness(int(config.get("brightness", 10)))
|
||||
cb_progress("WiFi connect ...")
|
||||
|
||||
if not wifi_manager.connect(cb_progress):
|
||||
gc.collect()
|
||||
from captive_portal import CaptivePortal
|
||||
|
||||
portal = CaptivePortal()
|
||||
display.portal_win(portal.essid.decode('ascii'))
|
||||
display.portal_win(portal.essid.decode("ascii"))
|
||||
portal.start(cb_progress)
|
||||
# just reboot
|
||||
machine.reset()
|
||||
@@ -343,6 +378,7 @@ def start():
|
||||
naw = Nanoweb()
|
||||
# website top directory
|
||||
naw.STATIC_DIR = "/rom/www"
|
||||
naw.INDEX_FILE = "/rom/www/index.html"
|
||||
|
||||
# Declare route from a dict
|
||||
naw.routes = {
|
||||
|
||||
549
src/rom/www/index.html
Normal file
549
src/rom/www/index.html
Normal file
@@ -0,0 +1,549 @@
|
||||
<!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.css" />
|
||||
<style>
|
||||
/* 只保留micro.css中没有的特殊样式 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.nav-tab.active {
|
||||
border-bottom-color: #3498db;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
.gauge-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<h1>WS2桌面气象站</h1>
|
||||
<button class="btn" id="logout-btn">退出</button>
|
||||
</div>
|
||||
|
||||
<div class="alert hidden" id="message"></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="memory">-</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>
|
||||
|
||||
<button class="btn" id="refresh-status-btn">刷新状态</button>
|
||||
</div>
|
||||
|
||||
<!-- 屏幕显示选项卡 -->
|
||||
<div id="display-tab" class="tab-content">
|
||||
<h3>LCD状态</h3>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<strong>就绪状态:</strong>
|
||||
<span id="lcd-ready-display">-</span>
|
||||
<span
|
||||
id="lcd-ready-badge-display"
|
||||
class="badge badge-warning"
|
||||
></span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>当前亮度:</strong>
|
||||
<span id="lcd-brightness-display">-</span>%
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>UI类型:</strong>
|
||||
<span id="lcd-ui-type-display">-</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>数据内容:</strong>
|
||||
<span id="lcd-data-display">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-3">显示设置</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">亮度 (0-100)</label>
|
||||
<input
|
||||
type="range"
|
||||
id="brightness-slider"
|
||||
min="0"
|
||||
max="100"
|
||||
class="form-control"
|
||||
style="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">
|
||||
应用设置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 系统配置选项卡 -->
|
||||
<div id="config-tab" class="tab-content">
|
||||
<h3>天气站配置</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">城市</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city-input"
|
||||
class="form-control"
|
||||
placeholder="例如：北京"
|
||||
/>
|
||||
<small class="text-muted">
|
||||
可输入城市名称或城市ID（<a
|
||||
href="https://mapopen-website-wiki.cdn.bcebos.com/cityList/weather_district_id.csv"
|
||||
target="_blank"
|
||||
>查看城市ID列表</a
|
||||
>）
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">自动熄屏时间</label>
|
||||
<input
|
||||
type="time"
|
||||
id="screen-timeout-input"
|
||||
class="form-control"
|
||||
/>
|
||||
<small class="text-muted">留空表示不自动熄屏</small>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-success" id="save-config-btn">
|
||||
保存配置
|
||||
</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>
|
||||
WS2是一款基于ESP8266的桌面气象站，能够实时显示天气信息、环境数据和时间。
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3 class="mt-3">硬件规格</h3>
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<strong>硬件平台:</strong> ESP8266
|
||||
<span class="badge badge-info">WiFi</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>显示屏:</strong> LCD 240x240
|
||||
<span class="badge badge-info">彩色</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>环境参数:</strong> 温度、湿度、PM2.5、气压、AQI
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="mt-3">软件信息</h3>
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<strong>固件:</strong>
|
||||
<a href="https://iot.foresh.com/git/kicer/ws2" target="_blank"> ws2-v1.3.0 </a>
|
||||
<span class="badge badge-success">开源</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>协议:</strong> HTTP REST API
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<strong>更新频率:</strong> 每小时
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-3">开放源码</h3>
|
||||
<a href="https://github.com/kicer/ws2" target="_blank" class="btn btn-outline"> Kicer@Github: ws2 </a>
|
||||
<a href="https://iot.foresh.com/git/kicer/ws2" target="_blank" class="btn btn-outline"> Kicer@foresh: ws2（国内访问）</a>
|
||||
|
||||
<h3 class="mt-3">软件许可</h3>
|
||||
<p>本项目采用MIT许可证开源，欢迎自由使用和修改。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/micro.js"></script>
|
||||
<script>
|
||||
// 全局变量
|
||||
let currentConfig = {};
|
||||
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initTabSwitching();
|
||||
initEventHandlers();
|
||||
refreshStatus();
|
||||
loadConfig();
|
||||
updateDisplaySettings();
|
||||
});
|
||||
|
||||
// 初始化选项卡切换
|
||||
function initTabSwitching() {
|
||||
mw.$$(".nav-tab").forEach(tab => {
|
||||
mw.on(tab, "click", function () {
|
||||
const tabName = mw.attr(this, "data-tab");
|
||||
showTab(tabName);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化事件处理器
|
||||
function initEventHandlers() {
|
||||
// 退出按钮
|
||||
mw.on(mw.$("#logout-btn"), "click", function () {
|
||||
alert("退出功能暂未实现");
|
||||
});
|
||||
|
||||
// 亮度滑块
|
||||
mw.on(mw.$("#brightness-slider"), "input", function () {
|
||||
mw.text(mw.$("#brightness-value"), mw.val(this));
|
||||
});
|
||||
|
||||
// 刷新状态按钮
|
||||
mw.on(mw.$("#refresh-status-btn"), "click", refreshStatus);
|
||||
|
||||
// 应用显示设置按钮
|
||||
mw.on(
|
||||
mw.$("#apply-display-btn"),
|
||||
"click",
|
||||
applyDisplaySettings,
|
||||
);
|
||||
|
||||
// 保存配置按钮
|
||||
mw.on(mw.$("#save-config-btn"), "click", saveConfig);
|
||||
}
|
||||
|
||||
// 更新LCD状态徽章
|
||||
function updateLcdBadges(isReady) {
|
||||
const badge1 = mw.$("#lcd-ready-badge");
|
||||
const badge2 = mw.$("#lcd-ready-badge-display");
|
||||
|
||||
if (isReady) {
|
||||
mw.text(badge1, "正常");
|
||||
mw.text(badge2, "正常");
|
||||
mw.replaceClass(badge1, "badge-warning", "badge-success");
|
||||
mw.replaceClass(badge2, "badge-warning", "badge-success");
|
||||
} else {
|
||||
mw.text(badge1, "未就绪");
|
||||
mw.text(badge2, "未就绪");
|
||||
mw.replaceClass(badge1, "badge-success", "badge-warning");
|
||||
mw.replaceClass(badge2, "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 statusResponse = await mw.ajax.get("/status");
|
||||
const statusData = JSON.parse(statusResponse);
|
||||
|
||||
// 使用数据绑定更新系统状态
|
||||
mw.bind(statusData);
|
||||
|
||||
// 更新内存仪表盘
|
||||
updateMemoryGauge(statusData.memory);
|
||||
|
||||
showMessage("状态已更新", "success");
|
||||
} catch (error) {
|
||||
showMessage("获取状态失败: " + error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
// 更新内存仪表盘
|
||||
function updateMemoryGauge(memoryStr) {
|
||||
// 从内存字符串中提取数值，例如 "100 KB" -> 100
|
||||
const match = memoryStr.match(/(\d+)/);
|
||||
if (match) {
|
||||
// 这里简化处理，假设最大可用内存为50KB
|
||||
const maxMemory = 50;
|
||||
const memoryValue = parseInt(match[1]);
|
||||
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);
|
||||
|
||||
// 更新LCD状态
|
||||
const lcdBindings = {
|
||||
"lcd-ready": data.ready ? "就绪" : "未就绪",
|
||||
"lcd-brightness": data.brightness,
|
||||
"lcd-ui-type": data.ui_type,
|
||||
"lcd-data": JSON.stringify(data.data),
|
||||
};
|
||||
mw.bind(lcdBindings);
|
||||
|
||||
// 更新亮度滑块
|
||||
mw.val(mw.$("#brightness-slider"), data.brightness);
|
||||
mw.text(mw.$("#brightness-value"), data.brightness);
|
||||
|
||||
// 更新UI类型选择框
|
||||
mw.val(mw.$("#ui-type-select"), data.ui_type);
|
||||
} 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");
|
||||
refreshStatus();
|
||||
} 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]);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
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>
|
||||
Reference in New Issue
Block a user