Доступ к штифтам gpio с помощью webiopi
Я хочу получить доступ к gpio pins онлайн с помощью webiopi. Когда нажата одна кнопка, цвет кнопки изменится, чтобы указать, является ли она 0 или 1. кнопки отображаются, но цвет фона не меняется. я новичок в вебиопи. это мой код подскажите пожалуйста, почему цвет фона не меняется.
<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. http://www.coderewind.com/2015/10/build-a-raspberry-pi-wifi-rc-car/
Вы можете скачать полный исходный код, чтобы увидеть, как создается пользовательский интерфейс с пользовательским CSS для страницы webiopi.
Другие решения
Других решений пока нет …