我用ai写了openwrt的luci的大屏幕信息界面，大家看咋样

676220229 · 发表于 2026-6-17 17:13

本帖最后由 676220229 于 2026-6-20 23:51 编辑

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenWrt 系统监控面板</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
/* 彩色动态渐变背景 */
body {
min-height: 100vh;
background: linear-gradient(-45deg, #0072ff, #00c6ff, #3a1c71, #d76d77);
background-size: 400% 400%;
animation: gradientBg 15s ease infinite;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}
@keyframes gradientBg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
width: 100%;
max-width: 1200px;
}
.header-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
text-align: center;
color: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
transition: all 0.3s ease;
}
.header-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
#clock {
font-size: 48px;
font-weight: bold;
margin: 10px 0;
letter-spacing: 3px;
}
.grid-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.data-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 28px;
color: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
transition: all 0.3s ease;
}
.data-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.22);
}
.card-title {
font-size: 16px;
opacity: 0.9;
margin-bottom: 16px;
}
.card-value {
font-size: 36px;
font-weight: 700;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: 160px;
}
.ip-text {
word-break: break-all;
font-size: 22px;
}
.speed-tag {
display: inline-block;
padding: 6px 14px;
border-radius: 30px;
background: rgba(255,255,255,0.2);
margin-right: 10px;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="header-card">
<h1>OpenWrt 系统实时监控面板</h1>
<div id="clock">00:00:00</div>
<div id="date"></div>
</div>
<div class="grid-box">
<div class="data-card">
<div class="card-title">💻 CPU 使用率</div>
<div class="chart-wrap">
<canvas id="cpuChart"></canvas>
</div>
<div class="card-value" id="cpuRate">0%</div>
</div>
<div class="data-card">
<div class="card-title">🧠 内存使用率</div>
<div class="chart-wrap">
<canvas id="memChart"></canvas>
</div>
<div class="card-value" id="memRate">0%</div>
</div>
<div class="data-card">
<div class="card-title">📶 实时网络速率</div>
<div class="speed-tag">⬆ 上传：<span id="uploadSpeed">0 KB/s</span></div>
<div class="speed-tag">⬇ 下载：<span id="downloadSpeed">0 KB/s</span></div>
</div>
<div class="data-card">
<div class="card-title">🌐 当前公网 IP</div>
<div class="ip-text" id="publicIp">获取中...</div>
</div>
</div>
</div>
<script>
// 1. 实时时钟
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {hour12: false});
const dateStr = now.toLocaleDateString('zh-CN', {weekday:'long',year:'numeric',month:'long',day:'numeric'});
document.getElementById('clock').innerText = timeStr;
document.getElementById('date').innerText = dateStr;
}
setInterval(updateClock, 1000);
updateClock();
// 2. 初始化环形图表
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
const memCtx = document.getElementById('memChart').getContext('2d');
const cpuChart = new Chart(cpuCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [0, 100],
backgroundColor: ['#00c6ff', 'rgba(255,255,255,0.1)'],
borderWidth: 0
}]
},
options: { cutout: '75%', responsive: true, maintainAspectRatio: false, plugins: {legend: {display:false}} }
});
const memChart = new Chart(memCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [0, 100],
backgroundColor: ['#ff7675', 'rgba(255,255,255,0.1)'],
borderWidth: 0
}]
},
options: { cutout: '75%', responsive: true, maintainAspectRatio: false, plugins: {legend: {display:false}} }
});
// 3. 读取OpenWrt系统数据
let lastRx = 0, lastTx = 0;
const netDev = 'eth0'; // 改成你的WAN网卡，一般eth0/pppoe-wan
async function getSystemData() {
try {
// CPU 负载
const resCpu = await fetch('/proc/loadavg');
const loadText = await resCpu.text();
const cpuLoad = parseFloat(loadText.split(' ')[0]) * 100;
const cpuPercent = Math.min(Math.round(cpuLoad), 100);
cpuChart.data.datasets[0].data = [cpuPercent, 100 - cpuPercent];
cpuChart.update();
document.getElementById('cpuRate').innerText = cpuPercent + '%';
// 内存
const resMem = await fetch('/proc/meminfo');
const memText = await resMem.text();
const memTotal = parseInt(memText.match(/MemTotal:\s+(\d+)/)[1]);
const memFree = parseInt(memText.match(/MemFree:\s+(\d+)/)[1]);
const memUsed = memTotal - memFree;
const memPercent = Math.round(memUsed / memTotal * 100);
memChart.data.datasets[0].data = [memPercent, 100 - memPercent];
memChart.update();
document.getElementById('memRate').innerText = memPercent + '%';
// 网卡流量计算网速
const resNet = await fetch(`/proc/net/dev`);
const netText = await resNet.text();
const match = netText.match(new RegExp(`${netDev}:\\s*(\\d+)\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+(\\d+)`));
if(match){
const rx = parseInt(match[1]);
const tx = parseInt(match[2]);
if(lastRx !== 0){
const down = ((rx - lastRx) / 1024).toFixed(2);
const up = ((tx - lastTx) / 1024).toFixed(2);
document.getElementById('downloadSpeed').innerText = `${down} KB/s`;
document.getElementById('uploadSpeed').innerText = `${up} KB/s`;
}
lastRx = rx;
lastTx = tx;
}
// 获取公网IP
if(!document.getElementById('publicIp').innerText.includes('.')){
const ipRes = await fetch('https://api.ipify.org');
const pubIp = await ipRes.text();
document.getElementById('publicIp').innerText = pubIp;
}
} catch (err) {
console.log('数据读取异常：', err);
}
}
// 每1秒刷新一次数据
setInterval(getSystemData, 1000);
getSystemData();
</script>
</body>
</html>

复制代码

我用ai重写了openwrt的luci界面，大家看咋样，首页还需要显示哪些信息？对于家用来说，哪些信息足够用了？脱离原生 LuCI 布局，做独立 HTML 大屏首页，支持粒子背景、动态时钟、实时网速跑马灯、数据轮播动画、全屏毛玻璃，它有三种颜色，随背景可变。用的都是最基础的rgb色拼的没有用渲染。不浪费路由器的CPU。通过 AJAX 实时读取 OpenWrt 系统数据。

如如果大家喜欢，我就把源代码贴出来，自己打包成htm文件，用winscp上传到openwrt相应的位置。备份原有 index.html，将上面代码新建保存为 index.html，记住一定要备份，一定要备份。PPPoE 拨号改成：pppoe-wan
光猫桥接网口拨号：eth0、wan 根据自己网卡修改

请大家在应用之前建议先保存成HTML预览一遍，然后再用人工智能跑一遍，让他们嗯，提提意见。提提意见。

676220229 · 发表于 2026-6-17 17:18

本帖最后由 676220229 于 2026-6-20 23:52 编辑

强烈建议大家谁有歪果的AI具的，让他把代码逐行再检查一遍。下面是阿里的千问优化过的代码，我觉得比起其他的智能，这版优化是应该是比较好的。

增加了动画和图标。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenWrt 系统监控面板</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
/* 动态渐变背景 */
body {
min-height: 100vh;
background: linear-gradient(-45deg, #0072ff, #00c6ff, #3a1c71, #d76d77);
background-size: 400% 400%;
animation: gradientBg 15s ease infinite;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
color: #fff;
}
@keyframes gradientBg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container { width: 100%; max-width: 1200px; }
/* 顶部时钟卡片 */
.header-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
transition: transform 0.3s ease;
}
.header-card:hover { transform: translateY(-5px); }
#clock { font-size: 48px; font-weight: bold; margin: 10px 0; letter-spacing: 3px; }
#date { font-size: 18px; opacity: 0.9; }
/* 网格布局 */
.grid-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.data-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 28px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.data-card:hover { transform: translateY(-8px); }
.card-title { font-size: 16px; opacity: 0.9; margin-bottom: 15px; width: 100%; text-align: left; }
.card-value { font-size: 36px; font-weight: 700; margin: 10px 0; }
.chart-wrap { width: 100%; height: 150px; position: relative; }
.ip-text { word-break: break-all; font-size: 20px; font-weight: bold; margin-top: 10px; }
.speed-group { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
.speed-item { display: flex; justify-content: space-between; background: rgba(0,0,0,0.2); padding: 8px 15px; border-radius: 10px; font-size: 14px; }
.speed-val { font-weight: bold; font-family: monospace; }
</style>
</head>
<body>
<div class="container">
<div class="header-card">
<h1>OpenWrt 实时监控</h1>
<div id="clock">00:00:00</div>
<div id="date">Loading...</div>
</div>
<div class="grid-box">
<div class="data-card">
<div class="card-title">💻 CPU 使用率</div>
<div class="chart-wrap"><canvas id="cpuChart"></canvas></div>
<div class="card-value" id="cpuRate">0%</div>
</div>
<div class="data-card">
<div class="card-title">🧠 内存使用率</div>
<div class="chart-wrap"><canvas id="memChart"></canvas></div>
<div class="card-value" id="memRate">0%</div>
</div>
<div class="data-card">
<div class="card-title">📶 实时网速</div>
<div class="speed-group">
<div class="speed-item">
<span>⬇ 下载</span>
<span class="speed-val" id="downloadSpeed">0 KB/s</span>
</div>
<div class="speed-item">
<span>⬆ 上传</span>
<span class="speed-val" id="uploadSpeed">0 KB/s</span>
</div>
</div>
</div>
<div class="data-card">
<div class="card-title">🌐 公网 IP</div>
<div class="ip-text" id="publicIp">查询中...</div>
</div>
</div>
</div>
<script>
// 1. 时钟逻辑
function updateClock() {
const now = new Date();
document.getElementById('clock').innerText = now.toLocaleTimeString('zh-CN', {hour12: false});
document.getElementById('date').innerText = now.toLocaleDateString('zh-CN', {weekday:'long', year:'numeric', month:'long', day:'numeric'});
}
setInterval(updateClock, 1000);
updateClock();
// 2. 图表初始化
const createDoughnut = (ctx, color) => new Chart(ctx, {
type: 'doughnut',
data: { datasets: [{ data: [0, 100], backgroundColor: [color, 'rgba(255,255,255,0.1)'], borderWidth: 0, cutout: '75%' }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { enabled: false } } }
});
const cpuChart = createDoughnut(document.getElementById('cpuChart').getContext('2d'), '#00c6ff');
const memChart = createDoughnut(document.getElementById('memChart').getContext('2d'), '#ff7675');
// 3. 数据获取逻辑
let lastRx = 0, lastTx = 0, lastTime = Date.now();
const netInterface = 'eth0'; // ⚠️ 请根据实际情况修改网卡名，如 eth0, pppoe-wan 等
async function fetchData() {
try {
// --- CPU 计算 (基于 /proc/stat 差值计算，比 loadavg 更准确) ---
const statRes = await fetch('/proc/stat');
const statText = await statRes.text();
const cpuLine = statText.split('\n')[0]; // 获取第一行 cpu 总数据
const cpuVals = cpuLine.split(/\s+/).slice(1).map(Number); // 提取数值
const total = cpuVals.reduce((a, b) => a + b, 0);
const idle = cpuVals[3];
// 如果是第一次运行，只记录初始值
if (window.prevTotal === undefined) {
window.prevTotal = total;
window.prevIdle = idle;
return;
}
const diffTotal = total - window.prevTotal;
const diffIdle = idle - window.prevIdle;
const cpuPercent = Math.round(((diffTotal - diffIdle) / diffTotal) * 100) || 0;
window.prevTotal = total;
window.prevIdle = idle;
// 更新 CPU UI
document.getElementById('cpuRate').innerText = cpuPercent + '%';
cpuChart.data.datasets[0].data = [cpuPercent, 100 - cpuPercent];
cpuChart.update('none'); // 'none' 模式避免动画卡顿
// --- 内存计算 ---
const memRes = await fetch('/proc/meminfo');
const memText = await memRes.text();
const memTotal = parseInt(memText.match(/MemTotal:\s+(\d+)/)[1]);
const memFree = parseInt(memText.match(/MemFree:\s+(\d+)/)[1]);
const buffers = parseInt(memText.match(/Buffers:\s+(\d+)/)[1] || 0);
const cached = parseInt(memText.match(/Cached:\s+(\d+)/)[1] || 0);
// 实际使用 = 总量 - 空闲 - 缓冲 - 缓存
const memUsed = memTotal - memFree - buffers - cached;
const memPercent = Math.round((memUsed / memTotal) * 100);
document.getElementById('memRate').innerText = memPercent + '%';
memChart.data.datasets[0].data = [memPercent, 100 - memPercent];
memChart.update('none');
// --- 网速计算 ---
const netRes = await fetch('/proc/net/dev');
const netText = await netRes.text();
// 匹配网卡行，提取接收字节和发送字节
const netMatch = netText.match(new RegExp(`${netInterface}:\\s*(\\d+)\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+\\d+\\s+(\\d+)`));
if (netMatch) {
const rx = parseInt(netMatch[1]);
const tx = parseInt(netMatch[2]);
const now = Date.now();
const timeDiff = (now - lastTime) / 1000; // 秒
if (timeDiff > 0) {
const downSpeed = ((rx - lastRx) / 1024 / timeDiff).toFixed(2);
const upSpeed = ((tx - lastTx) / 1024 / timeDiff).toFixed(2);
document.getElementById('downloadSpeed').innerText = `${downSpeed} KB/s`;
document.getElementById('uploadSpeed').innerText = `${upSpeed} KB/s`;
}
lastRx = rx;
lastTx = tx;
lastTime = now;
}
// --- 公网 IP ---
if (!document.getElementById('publicIp').innerText.includes('.')) {
// 使用 ipify 获取公网 IP
const ipRes = await fetch('https://api.ipify.org');
const ip = await ipRes.text();
document.getElementById('publicIp').innerText = ip;
}
} catch (e) {
console.error("获取数据失败:", e);
}
}
// 每秒刷新
setInterval(fetchData, 1000);
fetchData();
</script>
</body>
</html>

复制代码

676220229 · 发表于 2026-6-17 17:19

我没有把它封装成安装软件包，原因就是我没有数字签名，获得OPENWRT数字签名实在太麻烦了,还不如直接用文件替换。

676220229 · 发表于 2026-6-17 17:24

有办法删帖吗？找了半天找不到地方删帖。这个标题有点儿吹牛逼了，都怪语音输入法，我说我重写了露西的一个大屏界面，并没有说我重写露西，我哪有那大本事重写露西呢？这下吹牛吹大了，这还不让删帖了，这还

longlo · 发表于 2026-6-17 18:05

676220229 发表于 2026-6-17 17:24
有办法删帖吗？找了半天找不到地方删帖。这个标题有点儿吹牛逼了，都怪语音输入法，我说我重写了露西的一个 ...

帖子是可以编辑的啊，你编辑就行了，如果确认删帖的话，回复我的帖子，我看到后会删除

欲与伊泰克 · 发表于 2026-6-18 13:52

挺好的做一个小显示器在路由上就ok了

676220229 · 发表于 2026-6-20 01:15

欲与伊泰克发表于 2026-6-18 13:52
挺好的做一个小显示器在路由上就ok了

0.96 寸 3.3V I2C OLED 屏：8~12 元
40P 彩排杜邦线：3 元
公母排针插座（焊接路由 TTL）：2 元
双面泡棉胶：1 元
合计：15 元左右

安装依赖：opkg install python3 python3-pillow i2c-tools
开启内核 I2C/SPI 驱动，在 LuCI 开启 GPIO 权限
用 Python 脚本读取 CPU 温度、内存、WAN 流量、在线时长、负载，推送至屏幕显示（常用开源项目：oled-exp、luci-app-oled、lcd4linux）
豆包说的

676220229 · 发表于 2026-6-20 01:16

from PIL import Image, ImageDraw, ImageFont
import smbus2
import time
import os
# I2C配置
I2C_BUS = 0
OLED_ADDR = 0x3C
WIDTH = 128
HEIGHT = 64
bus = smbus2.SMBus(I2C_BUS)
# 初始化SSD1306命令
def oled_init():
init_cmds = [
0xAE,0xD5,0x80,0xA8,0x3F,0xD3,0x00,0x40,
0x8D,0x14,0xA1,0xC8,0xD9,0xF1,0xDA,0x12,
0xDB,0x40,0xA4,0xA6,0xAF
]
for cmd in init_cmds:
bus.write_byte_data(OLED_ADDR, 0x00, cmd)
def display_image(img):
buf = img.tobytes()
for page in range(8):
bus.write_byte_data(OLED_ADDR, 0x00, 0xB0 + page)
bus.write_byte_data(OLED_ADDR, 0x00, 0x00)
bus.write_byte_data(OLED_ADDR, 0x00, 0x10)
for x in range(WIDTH):
bus.write_byte_data(OLED_ADDR, 0x40, buf[page*WIDTH + x])
def get_sys_info():
load = os.popen("uptime | awk '{print $10,$11,$12}'").read().strip()
mem = os.popen("free -h | grep Mem | awk '{print $3"/"$2}'").read().strip()
temp = os.popen("cat /sys/class/thermal/thermal_zone0/temp").read()
temp = f"{int(int(temp)/1000)}℃"
wan_ip = os.popen("ifconfig wan | grep inet | awk '{print $2}'").read().strip()
return load, mem, temp, wan_ip
oled_init()
font = ImageFont.load_default()
while True:
img = Image.new("1", (WIDTH, HEIGHT), 0)
draw = ImageDraw.Draw(img)
load, mem, temp, wan_ip = get_sys_info()
draw.text((0,0), f"CPU负载:{load}", font=font, fill=255)
draw.text((0,16), f"内存:{mem}", font=font, fill=255)
draw.text((0,32), f"温度:{temp}", font=font, fill=255)
draw.text((0,48), f"WAN:{wan_ip}", font=font, fill=255)
display_image(img)
time.sleep(2)

复制代码

账号		自动登录	找回密码
密码			立即注册

我用ai写了openwrt的luci的大屏幕信息界面，大家看咋样

本帖子中包含更多资源

相关帖子

点评

欢迎大家光临恩山无线论坛 /2