修复配网时城市输入乱码的问题
This commit is contained in:
@@ -139,6 +139,7 @@ async def lcd_set(request):
|
||||
elif k == "ui_type":
|
||||
display.ui_type = v
|
||||
config.set(k, v)
|
||||
config.write()
|
||||
except Exception as e:
|
||||
ack["status"] = "error"
|
||||
ack["message"] = str(e)
|
||||
@@ -212,7 +213,7 @@ async def fetch_weather_data(city=None):
|
||||
|
||||
# 从配置文件获取城市，如果没有提供则使用配置中的值
|
||||
if not city:
|
||||
city = config.get("city") or "北京"
|
||||
city = config.get("cityid") or "北京"
|
||||
|
||||
print(f"正在获取{city}天气数据...")
|
||||
# 从配置获取API基础URL，默认使用官方API
|
||||
|
||||
@@ -119,11 +119,13 @@ class HTTPServer(BaseServer):
|
||||
ssid = unquote(params.get(b"ssid", None))
|
||||
password = unquote(params.get(b"password", ""))
|
||||
city = unquote(params.get(b"city", None))
|
||||
cityid = params.get(b"city", None)
|
||||
|
||||
# 使用全局Config实例保存配置
|
||||
config.set("ssid", ssid)
|
||||
config.set("password", password)
|
||||
config.set("city", city)
|
||||
config.set("cityid", cityid)
|
||||
if config.write():
|
||||
print("Configuration saved successfully")
|
||||
else:
|
||||
|
||||
@@ -79,6 +79,7 @@ placeholder="例如：北京"
|
||||
可输入城市名称或城市ID（<a
|
||||
href="https://mapopen-website-wiki.cdn.bcebos.com/cityList/weather_district_id.csv"
|
||||
target="_blank"
|
||||
download
|
||||
>查看城市ID列表</a
|
||||
>）
|
||||
</small></div><div class="form-group"><label class="form-label">自动熄屏时间</label
|
||||
@@ -348,6 +349,7 @@ showMessage("城市名称不能为空", "error");
|
||||
return;
|
||||
}const configData = {
|
||||
city: city,
|
||||
cityid: encodeURIComponent(city),
|
||||
};// 只有当输入了熄屏时间时才添加到配置中
|
||||
if (standbyTime !== "") {
|
||||
configData.standby_time = standbyTime;
|
||||
|
||||
@@ -1,318 +1,288 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>WiFi认证</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #3498db;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
color: #525252;
|
||||
}
|
||||
.box {
|
||||
background: white;
|
||||
width: 40ch;
|
||||
border-radius: 6px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
background: #ecf0f1;
|
||||
border: #ccc 1px solid;
|
||||
border-bottom: #ccc 2px solid;
|
||||
padding: 8px;
|
||||
width: 80%;
|
||||
color: #000;
|
||||
margin-top: 10px;
|
||||
font-size: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn {
|
||||
background: #2ecc71;
|
||||
width: 80%;
|
||||
padding: 8px 0;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
border: #27ae60 1px solid;
|
||||
margin: 20 auto;
|
||||
font-weight: 800;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #27ae60;
|
||||
}
|
||||
.config-title {
|
||||
font-size: 1em;
|
||||
color: #525252;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.wifi-list {
|
||||
width: 80%;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border: 1px solid #eee;
|
||||
background: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
.wifi-item {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wifi-item:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.wifi-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.wifi-signal {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.refresh-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #7f8c8d;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.refresh-btn:hover {
|
||||
background: #ecf0f1;
|
||||
}
|
||||
.refresh-btn:disabled {
|
||||
color: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.wifi-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.wifi-icon-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #7f8c8d;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(1) {
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(2) {
|
||||
left: 5px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(3) {
|
||||
left: 10px;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(4) {
|
||||
left: 15px;
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
}
|
||||
.wifi-signal-4 .wifi-icon-bar {
|
||||
background: #2ecc71;
|
||||
}
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(1),
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(2),
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(3) {
|
||||
background: #f1c40f;
|
||||
}
|
||||
.wifi-signal-2 .wifi-icon-bar:nth-child(1),
|
||||
.wifi-signal-2 .wifi-icon-bar:nth-child(2) {
|
||||
background: #e67e22;
|
||||
}
|
||||
.wifi-signal-1 .wifi-icon-bar:nth-child(1) {
|
||||
background: #e74c3c;
|
||||
}
|
||||
/* 遮罩层样式 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.overlay-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
.spinner-small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
margin: 15px auto;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form action="/login" method="get" class="box">
|
||||
<h1>WiFi 配置</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="refresh-btn"
|
||||
onclick="refreshList()"
|
||||
title="刷新WiFi列表"
|
||||
>
|
||||
↻
|
||||
</button>
|
||||
<div id="wifiList" class="wifi-list"></div>
|
||||
<input
|
||||
type="text"
|
||||
id="ssid"
|
||||
placeholder="WiFi名称"
|
||||
name="ssid"
|
||||
required
|
||||
/><br />
|
||||
<input
|
||||
type="password"
|
||||
id="pwd"
|
||||
placeholder="WiFi密码"
|
||||
name="password"
|
||||
/><br />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="城市名称"
|
||||
name="city"
|
||||
value=""
|
||||
/><br />
|
||||
<button type="submit" class="btn">保存配置</button>
|
||||
</form>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div class="overlay" id="connectingOverlay">
|
||||
<div class="overlay-content">
|
||||
<h2>正在连接到WiFi</h2>
|
||||
<div class="spinner-small"></div>
|
||||
<p>设备正在尝试连接，请稍候...</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
fetchWifiList();
|
||||
|
||||
// 添加表单提交事件监听
|
||||
document
|
||||
.querySelector(".box")
|
||||
.addEventListener("submit", function (e) {
|
||||
// 显示遮罩层
|
||||
document.getElementById(
|
||||
"connectingOverlay",
|
||||
).style.display = "flex";
|
||||
});
|
||||
};
|
||||
function fetchWifiList() {
|
||||
const listContainer = document.getElementById("wifiList");
|
||||
listContainer.innerHTML = "Loading...";
|
||||
fetch("/scan")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.networks) {
|
||||
data.networks.sort((a, b) => b.rssi - a.rssi);
|
||||
displayWifiList(data.networks);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching WiFi list:", error);
|
||||
});
|
||||
}
|
||||
function getSignalLevel(rssi) {
|
||||
if (rssi >= -50) return 4;
|
||||
if (rssi >= -60) return 3;
|
||||
if (rssi >= -70) return 2;
|
||||
return 1;
|
||||
}
|
||||
function createSignalIcon(signalLevel) {
|
||||
const icon = document.createElement("span");
|
||||
icon.className = `wifi-icon wifi-signal-${signalLevel}`;
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const bar = document.createElement("span");
|
||||
bar.className = "wifi-icon-bar";
|
||||
icon.appendChild(bar);
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
function displayWifiList(networks) {
|
||||
const listContainer = document.getElementById("wifiList");
|
||||
listContainer.innerHTML = "";
|
||||
for (const network of networks) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "wifi-item";
|
||||
const nameContainer = document.createElement("div");
|
||||
nameContainer.className = "wifi-name";
|
||||
const signalLevel = getSignalLevel(network.rssi);
|
||||
nameContainer.appendChild(createSignalIcon(signalLevel));
|
||||
const nameText = document.createTextNode(network.ssid);
|
||||
nameContainer.appendChild(nameText);
|
||||
const signalContainer = document.createElement("div");
|
||||
signalContainer.className = "wifi-signal";
|
||||
signalContainer.textContent = `${network.rssi} dBm`;
|
||||
item.appendChild(nameContainer);
|
||||
item.appendChild(signalContainer);
|
||||
item.onclick = function () {
|
||||
document.getElementById("ssid").value = network.ssid;
|
||||
document.getElementById('pwd').focus();
|
||||
};
|
||||
listContainer.appendChild(item);
|
||||
}
|
||||
}
|
||||
function refreshList() {
|
||||
const btn = document.querySelector(".refresh-btn");
|
||||
btn.innerHTML = "⟳";
|
||||
btn.disabled = true;
|
||||
fetchWifiList();
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = "↻";
|
||||
btn.disabled = false;
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>WiFi认证</title><style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #3498db;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
color: #525252;
|
||||
}
|
||||
.box {
|
||||
background: white;
|
||||
width: 40ch;
|
||||
border-radius: 6px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
background: #ecf0f1;
|
||||
border: #ccc 1px solid;
|
||||
border-bottom: #ccc 2px solid;
|
||||
padding: 8px;
|
||||
width: 80%;
|
||||
color: #000;
|
||||
margin-top: 10px;
|
||||
font-size: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn {
|
||||
background: #2ecc71;
|
||||
width: 80%;
|
||||
padding: 8px 0;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
border: #27ae60 1px solid;
|
||||
margin: 20 auto;
|
||||
font-weight: 800;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #27ae60;
|
||||
}
|
||||
.config-title {
|
||||
font-size: 1em;
|
||||
color: #525252;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.wifi-list {
|
||||
width: 80%;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border: 1px solid #eee;
|
||||
background: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
.wifi-item {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wifi-item:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.wifi-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.wifi-signal {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.refresh-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #7f8c8d;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.refresh-btn:hover {
|
||||
background: #ecf0f1;
|
||||
}
|
||||
.refresh-btn:disabled {
|
||||
color: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.wifi-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.wifi-icon-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #7f8c8d;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(1) {
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(2) {
|
||||
left: 5px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(3) {
|
||||
left: 10px;
|
||||
width: 3px;
|
||||
height: 9px;
|
||||
}
|
||||
.wifi-icon-bar:nth-child(4) {
|
||||
left: 15px;
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
}
|
||||
.wifi-signal-4 .wifi-icon-bar {
|
||||
background: #2ecc71;
|
||||
}
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(1),
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(2),
|
||||
.wifi-signal-3 .wifi-icon-bar:nth-child(3) {
|
||||
background: #f1c40f;
|
||||
}
|
||||
.wifi-signal-2 .wifi-icon-bar:nth-child(1),
|
||||
.wifi-signal-2 .wifi-icon-bar:nth-child(2) {
|
||||
background: #e67e22;
|
||||
}
|
||||
.wifi-signal-1 .wifi-icon-bar:nth-child(1) {
|
||||
background: #e74c3c;
|
||||
}
|
||||
/* 遮罩层样式 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.overlay-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
.spinner-small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
margin: 15px auto;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
</style></head><body><form action="/login" method="get" class="box"><h1>WiFi 配置</h1><button
|
||||
type="button"
|
||||
class="refresh-btn"
|
||||
onclick="refreshList()"
|
||||
title="刷新WiFi列表"
|
||||
>
|
||||
↻
|
||||
</button><div id="wifiList" class="wifi-list"></div><input
|
||||
type="text"
|
||||
id="ssid"
|
||||
placeholder="WiFi名称"
|
||||
name="ssid"
|
||||
required
|
||||
/><br /><input
|
||||
type="password"
|
||||
id="pwd"
|
||||
placeholder="WiFi密码"
|
||||
name="password"
|
||||
/><br /><input
|
||||
type="text"
|
||||
placeholder="城市名称"
|
||||
name="city"
|
||||
value=""
|
||||
/><br /><button type="submit" class="btn">保存配置</button></form><div class="overlay" id="connectingOverlay"><div class="overlay-content"><h2>正在连接到WiFi</h2><div class="spinner-small"></div><p>设备正在尝试连接，请稍候...</p></div></div><script>
|
||||
window.onload = function () {
|
||||
fetchWifiList();// 添加表单提交事件监听
|
||||
document
|
||||
.querySelector(".box")
|
||||
.addEventListener("submit", function (e) {
|
||||
// 显示遮罩层
|
||||
document.getElementById(
|
||||
"connectingOverlay",
|
||||
).style.display = "flex";
|
||||
});
|
||||
};
|
||||
function fetchWifiList() {
|
||||
const listContainer = document.getElementById("wifiList");
|
||||
listContainer.innerHTML = "Loading...";
|
||||
fetch("/scan")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.networks) {
|
||||
data.networks.sort((a, b) => b.rssi - a.rssi);
|
||||
displayWifiList(data.networks);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching WiFi list:", error);
|
||||
});
|
||||
}
|
||||
function getSignalLevel(rssi) {
|
||||
if (rssi >= -50) return 4;
|
||||
if (rssi >= -60) return 3;
|
||||
if (rssi >= -70) return 2;
|
||||
return 1;
|
||||
}
|
||||
function createSignalIcon(signalLevel) {
|
||||
const icon = document.createElement("span");
|
||||
icon.className = `wifi-icon wifi-signal-${signalLevel}`;
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const bar = document.createElement("span");
|
||||
bar.className = "wifi-icon-bar";
|
||||
icon.appendChild(bar);
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
function displayWifiList(networks) {
|
||||
const listContainer = document.getElementById("wifiList");
|
||||
listContainer.innerHTML = "";
|
||||
for (const network of networks) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "wifi-item";
|
||||
const nameContainer = document.createElement("div");
|
||||
nameContainer.className = "wifi-name";
|
||||
const signalLevel = getSignalLevel(network.rssi);
|
||||
nameContainer.appendChild(createSignalIcon(signalLevel));
|
||||
const nameText = document.createTextNode(network.ssid);
|
||||
nameContainer.appendChild(nameText);
|
||||
const signalContainer = document.createElement("div");
|
||||
signalContainer.className = "wifi-signal";
|
||||
signalContainer.textContent = `${network.rssi} dBm`;
|
||||
item.appendChild(nameContainer);
|
||||
item.appendChild(signalContainer);
|
||||
item.onclick = function () {
|
||||
document.getElementById("ssid").value = network.ssid;
|
||||
document.getElementById("pwd").focus();
|
||||
};
|
||||
listContainer.appendChild(item);
|
||||
}
|
||||
}
|
||||
function refreshList() {
|
||||
const btn = document.querySelector(".refresh-btn");
|
||||
btn.innerHTML = "⟳";
|
||||
btn.disabled = true;
|
||||
fetchWifiList();
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = "↻";
|
||||
btn.disabled = false;
|
||||
}, 1000);
|
||||
}
|
||||
</script></body></html>
|
||||
|
||||
Reference in New Issue
Block a user