基于GPIO输入的HTML垂直堆叠变色方块实现技术问询

完整代码方案 #

<!DOCTYPE html>
<html>
<head>
    <title>GPIO状态指示器</title>
    <style>
        /* 容器：垂直堆叠方块并居中 */
        .gpio-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        /* 方块基础样式：默认白色，视觉相连 */
        .gpio-block {
            width: 100px;
            height: 50px;
            border: 1px solid #ccc;
            border-bottom: none; /* 去掉底部边框实现相连效果 */
            transition: background-color 0.3s; /* 平滑变色过渡 */
        }
        /* 最后一个方块保留底部边框，保证整体完整 */
        .gpio-block:last-child {
            border-bottom: 1px solid #ccc;
        }
        /* GPIO激活时的绿色样式 */
        .gpio-active {
            background-color: #2ecc71;
        }
    </style>
</head>
<body>
    <div class="gpio-container">
        <!-- 10个GPIO状态方块，每个对应一个GPIO输入 -->
        <div class="gpio-block" id="gpio-1"></div>
        <div class="gpio-block" id="gpio-2"></div>
        <div class="gpio-block" id="gpio-3"></div>
        <div class="gpio-block" id="gpio-4"></div>
        <div class="gpio-block" id="gpio-5"></div>
        <div class="gpio-block" id="gpio-6"></div>
        <div class="gpio-block" id="gpio-7"></div>
        <div class="gpio-block" id="gpio-8"></div>
        <div class="gpio-block" id="gpio-9"></div>
        <div class="gpio-block" id="gpio-10"></div>
    </div>

    <script>
        // 模拟GPIO状态数组：可替换为从微控制器获取的真实数据
        // 数组索引0对应gpio-1，true=激活（变绿），false=默认白色
        let gpioStates = [false, true, false, false, true, false, false, false, true, false];

        // 更新方块颜色的核心函数
        function updateGpioBlocks() {
            gpioStates.forEach((state, index) => {
                const block = document.getElementById(`gpio-${index + 1}`);
                state ? block.classList.add('gpio-active') : block.classList.remove('gpio-active');
            });
        }

        // 页面加载时初始化显示
        updateGpioBlocks();

        // ----------------------
        // 对接微控制器的参考逻辑（伪代码）：
        // 用HTTP轮询或WebSocket实时获取GPIO状态
        // setInterval(() => {
        //     fetch('/api/get-gpio-states') // 替换为你的微控制器API地址
        //         .then(res => res.json())
        //         .then(data => {
        //             gpioStates = data;
        //             updateGpioBlocks();
        //         });
        // }, 1000); // 每秒刷新一次状态
    </script>
</body>
</html>

关键部分解释 #

• HTML结构：用一个容器包裹10个独立方块，每个方块有唯一ID，方便精准控制。
• CSS样式：
  • 通过flex-direction: column实现垂直堆叠；
  • 去掉方块底部边框（最后一个保留），让方块视觉上连成整体；
  • 加入过渡动画，让颜色变化更自然。
• JavaScript逻辑：
  • gpioStates数组存储GPIO状态，你只需替换为从微控制器获取的真实数据；
  • updateGpioBlocks函数遍历状态数组，动态给方块添加/移除绿色样式类。

新手操作提示 #

1. 将代码保存为gpio-indicator.html，用浏览器打开即可看到效果；
2. 修改gpioStates里的true/false值，可快速测试方块变色功能；
3. 对接微控制器时，只需要替换JavaScript中获取状态的部分，核心更新逻辑无需改动。

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