Управление gpio на html

[melsem]

Сообщение от 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 и в архиве выложи сюда. Посмотрим...