根据LED状态动态切换HTML按钮文本的实现咨询

方案一：服务器端渲染（简单直接，适配Pico W有限资源） #

这种方式在服务器生成HTML时直接根据LED状态设置按钮文本，无需额外JS逻辑。

1. 修改MicroPython后端（main.py） #

确保已定义led1、led2、led3三个LED对象，然后在处理根路径请求时，动态生成带状态的HTML：

def luzEstaLigada(led):
    return led.value == 1

# 假设已完成LED初始化：
# from machine import Pin
# led1 = Pin(2, Pin.OUT)
# led2 = Pin(3, Pin.OUT)
# led3 = Pin(4, Pin.OUT)

def handle_root(request):
    # 获取每个LED的当前状态
    status1 = luzEstaLigada(led1)
    status2 = luzEstaLigada(led2)
    status3 = luzEstaLigada(led3)
    
    # 根据状态生成按钮文本
    btn1_text = "Off Luz 1" if status1 else "On Luz 1"
    btn2_text = "Off Luz 2" if status2 else "On Luz 2"
    btn3_text = "Off Luz 3" if status3 else "On Luz 3"
    
    # 动态拼接HTML内容
    html = f'''<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <br/>
    <form action="./liga-desliga1">
        <input type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="{btn1_text}" />
    </form>
    <br/>
    <form action="./liga-desliga2">
        <input type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="{btn2_text}" />
    </form>
    <br/>
    <form action="./liga-desliga3">
        <input type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="{btn3_text}" />
    </form>
</body>
</html>'''
    return html, 200

用户每次访问页面时，服务器都会根据LED实时状态生成对应按钮文本，刷新页面即可看到最新状态。

方案二：前端JS异步更新（无需刷新页面，实时同步状态） #

如果需要页面不刷新就能更新按钮状态，可以添加API接口返回LED状态，再用JS定时请求更新。

1. 后端添加状态API（main.py） #

新增/status路径的处理逻辑，返回JSON格式的LED状态：

import json

def handle_status(request):
    status_data = {
        "led1": luzEstaLigada(led1),
        "led2": luzEstaLigada(led2),
        "led3": luzEstaLigada(led3)
    }
    return json.dumps(status_data), 200, {'Content-Type': 'application/json'}

记得在HTTP服务器路由中添加该路径映射：

routes = [
    ('GET', '/', handle_root),
    ('GET', '/liga-desliga1', toggle_led1),
    ('GET', '/liga-desliga2', toggle_led2),
    ('GET', '/liga-desliga3', toggle_led3),
    ('GET', '/status', handle_status)  # 新增状态接口路由
]

2. 修改前端HTML并添加JS #

给每个按钮添加唯一ID，然后编写JS定时请求状态并更新按钮文本：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function updateButtonStates() {
            fetch('/status')
                .then(res => res.json())
                .then(data => {
                    // 更新LED1按钮
                    const btn1 = document.getElementById('btn-luz1');
                    btn1.value = data.led1 ? 'Off Luz 1' : 'On Luz 1';
                    
                    // 更新LED2按钮
                    const btn2 = document.getElementById('btn-luz2');
                    btn2.value = data.led2 ? 'Off Luz 2' : 'On Luz 2';
                    
                    // 更新LED3按钮
                    const btn3 = document.getElementById('btn-luz3');
                    btn3.value = data.led3 ? 'Off Luz 3' : 'On Luz 3';
                })
                .catch(err => console.error('获取状态失败:', err));
        }

        // 页面加载时立即更新，之后每2秒同步一次状态
        window.onload = () => {
            updateButtonStates();
            setInterval(updateButtonStates, 2000);
        };
    </script>
</head>
<body>
    <br/>
    <form action="./liga-desliga1">
        <input id="btn-luz1" type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="Luz 1" />
    </form>
    <br/>
    <form action="./liga-desliga2">
        <input id="btn-luz2" type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="Luz 2" />
    </form>
    <br/>
    <form action="./liga-desliga3">
        <input id="btn-luz3" type="submit" style="width: 400px;max-width: 95%;margin-left: 10px;margin-right: 10px;" value="Luz 3" />
    </form>
</body>
</html>

页面加载后会自动同步LED状态，之后每2秒刷新一次，无需手动刷新页面即可看到按钮文本随LED状态变化。

内容的提问来源于stack exchange，提问作者MuriTG25