Question

我想使用webiopi在线访问gpio引脚。当单击一个按钮时，按钮的颜色将改变以指示它是0还是1.按钮显示但背景颜色没有变化。我是webiopi的新手。这是我的代码。请告诉我为什么背景颜色没有变化。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content = "height = device-height, width = 420,   user-scalable = yes" /> 
    <title>WebIOPi | Demo</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {
                var content, button,controles;
                content = $("#content");
                 controles= $("#controls");


            button = webiopi().createGPIOButton(17, "LED1");
            content.append(button);


            button = webiopi().createGPIOButton(18, "LED2");
            content.append(button); 

            button = webiopi().createGPIOButton(22, "LED3");
            controles.append(button); 


            button = webiopi().createGPIOButton(23, "LED4");
            controles.append(button); 


            button = webiopi().createGPIOButton(24, "LED5");
            content.append(button);
           });

 </script>
        <style type="text/css">
            button {
                    display: block;
                    margin: 5px 5px 5px 5px;
                    width: 160px;
                    height: 45px;
                    font-size: 24pt;
                    font-weight: bold;
                    color: black;
            }


            #gpio17.LOW {
 background-color: yellow;
}
       #gpio17.HIGH {
        background-color: Blue;
            }

            #gpio18.LOW {
    background-color: Black;
      }
       #gpio18.HIGH {
      background-color: Blue;
                 }

            #gpio22.LOW {
        background-color: Black;
           }
                #gpio22.HIGH {
                background-color: Blue;
                      }

            #gpio23.LOW {
               background-color: Black;
                   }
                #gpio23.HIGH {
                         background-color: Blue;
                       }

            #gpio24.LOW {
                background-color: Black;
                         }
               #gpio24.HIGH {
                 background-color: Blue;
                           }





       </style>
</head>
<body>
    <div id="content" align="left"></div>
    <div id="controls" align="center"></div>
</body>
</html>

Answer 1

请查看有关使用webiopi http://www.coderewind.com/2015/10/build-a-raspberry-pi-wifi-rc-car/的好博客您可以下载完整的源代码，了解如何为webiopi页面完成带有自定义css的自定义UI。

使用webiopi访问gpio引脚

1 个答案: