Php 使用webiopi访问gpio引脚_Php_Raspberry Pi_Webiopi

Php 使用webiopi访问gpio引脚

php raspberry-pi

Php 使用webiopi访问gpio引脚,php,raspberry-pi,webiopi,Php,Raspberry Pi,Webiopi,我想使用webiopi在线访问gpio引脚。单击一个按钮时，按钮的颜色将更改，以指示它是0还是1。按钮显示，但背景色不变。我是webiopi的新手。这是我的密码。请告诉我为什么背景色没有改变 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content = "height = d

我想使用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>


WebIOPi演示
webiopi（）.ready（函数（））{
var内容、按钮、控件；
内容=$（“#内容”）；
控件=$（“#控件”）；
button=webiopi（）.createGPIOButton（17，“LED1”）；
content.append（按钮）；
button=webiopi（）.createGPIOButton（18，“LED2”）；
content.append（按钮）；
button=webiopi（）.createGPIOButton（22，“LED3”）；
控件。追加（按钮）；
button=webiopi（）.createGPIOButton（23，“LED4”）；
控件。追加（按钮）；
button=webiopi（）.createGPIOButton（24，“LED5”）；
content.append（按钮）；
});
钮扣{
显示：块；
保证金：5px 5px 5px 5px；
宽度：160px；
高度：45px；
字号：24pt；
字体大小：粗体；
颜色：黑色；
}
#gpio17.5低{
背景颜色：黄色；
}
#gpio17.5偏高{
背景颜色：蓝色；
}
#gpio18.5低{
背景色：黑色；
}
#gpio18.5偏高{
背景颜色：蓝色；
}
#gpio22.5低{
背景色：黑色；
}
#gpio22.5偏高{
背景颜色：蓝色；
  }
#gpio23.5低{
背景色：黑色；
}
#gpio23.5偏高{
背景颜色：蓝色；
  }
#gpio24.5低{
背景色：黑色；
}
#gpio24.5偏高{
背景颜色：蓝色；
}

请看一个关于使用webiopi的好博客您可以下载完整的源代码，查看如何为webiopi页面创建带有自定义css的自定义UI