Цитата:
Сообщение от Muxac
......По началу пытался прикрутить GpioSwitcher
Отдельно он сам по себе работает....
|
Все можно, и не сложно.
Перепиши фаил /www/cgi-bin/modules/gpioswitcher/
index.cgi этим содержимым
PHP код:
#!/bin/sh
echo "Content-type: text/html; charset=utf-8"
echo
gpiostate=$(cat /sys/class/gpio/gpio27/value)
gpio27state=''
if echo $gpiostate | grep 0 > null; then
gpio27state='checked'
fi
gpiostate=$(cat /sys/class/gpio/gpio0/value)
gpio0state=''
if echo $gpiostate | grep 1 > null; then
gpio0state='checked'
fi
gpiostate=$(cat /sys/class/gpio/gpio17/value)
gpio17state=''
if echo $gpiostate | grep 0 > null; then
gpio17state='checked'
fi
gpiostate=$(cat /sys/class/gpio/gpio26/value)
gpio26state=''
if echo $gpiostate | grep 0 > null; then
gpio26state='checked'
fi
echo "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta charset=\"utf-8\">
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"/>
<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/>
<meta name=\"viewport\" content=\"width=device-width; initial-scale=1; maximum-scale=1; user-scalable=1;\" />
<title>GpioSwitcher</title>
<style>
#pagewrap { width:95%; font-family: 'Arial', Arial, serif; }
h1 {
font-family: \"Arial\", Arial, serif;
font-style: bold;
font-size: 20x;
}
div.main {
margin: 2px;
background: #f0f0f0;
padding: 5px;
width: 290px;
float: left;
}
table {
font-family: \"Arial\", Arial, serif;
font-size: 20px;
width: 100%;
}
td.first { width: 200px; }
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display: block; overflow: hidden; cursor: pointer;
width: 90px;
border: 2px solid #333333; border-radius: 20px;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
width: 90px;
border: 0px solid #333333; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: \"ВКЛ\";
padding-left: 10px;
background-color: #EEEEEE; color: #000000;
}
.onoffswitch-inner:after {
content: \"ВЫКЛ\";
padding-right: 10px;
background-color: #EEEEEE; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 4px;
background: #FC0000;
border: 2px solid #333333; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #21FA05;
}
</style>
<script type=\"text/javascript\">
function countDown(switchel, inverse, delayon, delayoff) {
cb = switchel.parentNode.childNodes[1];
second = 0;
cb.checked ? second = delayoff : second = delayon;
handler=switchel.onclick;
switchel.onclick='';
var interval = setInterval(function()
{
switchel.parentNode.parentNode.parentNode.childNodes[1].innerText=second;
cb.disabled=true;
if (!second) {
cb.disabled=false;
clearInterval(interval);
switcher(switchel, !inverse);
switchel.onclick=handler;
switchel.parentNode.parentNode.parentNode.childNodes[1].innerText=\"\";
}
second=second-1;
}, 1000);
}
function switcher(switchel, inverse){
cb = switchel.parentNode.childNodes[1];
var xmlhttp;
if (window.XMLHttpRequest) {
// код для IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// код для IE6, IE5
xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");
}
if (cb.checked == !inverse) {
xmlhttp.open(\"GET\",\"/cgi-bin/modules/gpioswitcher/gpio.cgi?id=\"+cb.id.substr(6,2)+\"&state=0\",true);
} else {
xmlhttp.open(\"GET\",\"/cgi-bin/modules/gpioswitcher/gpio.cgi?id=\"+cb.id.substr(6,2)+\"&state=1\",true);
}
xmlhttp.send();
};
</script>
</head>
`cat /www/menu.html`<br>
<body>
<center>
<script type=text/javascript>
document.write(\"<img src='http://\"+document.location.host+\":8080/?action=stream'/>\")
</script>
</center>
</body>
<div id=\"pagewrap\">
<div class=\"main\">
<table>"
echo "<tr><td class=\"first\">LED 1</td><td></td>"
echo "<td><div class=\"onoffswitch\">"
echo " <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" id=\"switch27\" "$gpio27state"/>"
echo " <label class=\"onoffswitch-label\" for=\"switch27\" onclick=\"switcher(this, true)\">"
echo " <span class=\"onoffswitch-inner\"></span>"
echo " <span class=\"onoffswitch-switch\"></span>"
echo "</label>"
echo "</div></td></tr>"
echo "<tr><td class=\"first\">LED 2</td><td></td>"
echo "<td><div class=\"onoffswitch\">"
echo " <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" id=\"switch0\" "$gpio0state"/>"
echo " <label class=\"onoffswitch-label\" for=\"switch0\" onclick=\"switcher(this, false)\">"
echo " <span class=\"onoffswitch-inner\"></span>"
echo " <span class=\"onoffswitch-switch\"></span>"
echo "</label>"
echo "</div></td></tr>"
echo "<tr><td class=\"first\">LED 3</td><td></td>"
echo "<td><div class=\"onoffswitch\">"
echo " <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" id=\"switch17\" "$gpio17state"/>"
echo " <label class=\"onoffswitch-label\" for=\"switch17\" onclick=\"switcher(this, true)\">"
echo " <span class=\"onoffswitch-inner\"></span>"
echo " <span class=\"onoffswitch-switch\"></span>"
echo "</label>"
echo "</div></td></tr>"
echo "<tr><td class=\"first\">LED 4</td><td></td>"
echo "<td><div class=\"onoffswitch\">"
echo " <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" id=\"switch26\" "$gpio26state"/>"
echo " <label class=\"onoffswitch-label\" for=\"switch26\" onclick=\"switcher(this, true)\">"
echo " <span class=\"onoffswitch-inner\"></span>"
echo " <span class=\"onoffswitch-switch\"></span>"
echo "</label>"
echo "</div></td></tr>"
echo "</table>
</div>
<div style=\"clear: both; background: #f0f0f0; padding: 5px;\">
cyber-place.ru
<div style=\"float: right\">
<a href=\"/cgi-bin/modules/gpioswitcher/constructor.cgi\">Настройка</a>
</div>
</div>
</body>
</html>"
И картинка будет в самом
gpioswitcher.
Если не будет работать скопируй все фаилы и папки в
www и в архиве выложи сюда. Посмотрим...
08.05.2018, 23:19
Комбинированный вид
