Управление gpio на html - Форум обсуждения систем "Умный дом", проектов Ардуино, OpenWRT и других DIY устройств

Muxac · 08.05.2018, 11:04

Всем привет. Помогите с такой проблемой.
Есть роутер A5-V11 (Клон Hame A15)
На нем стоит openwrt
К роутеру подцеплена WEB камера и через MJPG-streamer идет стрим на порту 8080 (ЭТО ВАЖНО)

Так вот прикупил я модуль с ик диодами, подпаял к gpio24
экспортировал, и если в консоли дать комманду:
echo 1 > /sys/class/gpio/gpio24/value соответственно лампочки загораются.
По аппаратной части все работает. А вот как сделать, чтобы этот ик модуль управлялся со страницы стрима (включать/выключать подсветку)
Постоянно включенная подсветка не нужна. Нужно ночью переодически наблюдать за ребенком.

По началу пытался прикрутить GpioSwitcher
Отдельно он сам по себе работает.
Но он имеет формат (cgi)
А стрим обычная html страница вида:

PHP код:


			
<html>

  <head>

    <title>MJPG-Streamer - Stream Example</title>

  </head>

  <body>

    <center>

      <img src="/?action=stream" />

    </center>

  </body>

</html>

Как можно в html прикрепить кнопку вкл/выкл gpio?

Admin · 08.05.2018, 12:50

без cgi не получится

sunny · 08.05.2018, 14:35

Сами кнопки не проблема:
http://htmlbook.ru/samhtml5/formy/knopki
Я так понимаю, нужно использовать скрипты для активации функционала кнопки.

Muxac · 08.05.2018, 18:15

Цитата:

Сообщение от sunny

Сами кнопки не проблема:
http://htmlbook.ru/samhtml5/formy/knopki
Я так понимаю, нужно использовать скрипты для активации функционала кнопки.

А не подскажите как это сделать?
Как по простому передать консоли echo 1 > /sys/class/gpio/gpio24/value
без cgi-bin
Так как cgi-bin висит на 80 порту
а мне нужен для работы 8080

Muxac · 08.05.2018, 18:20

Еще я придумал по другому,

sh скрипт проверяет каждую секунду-две наличие файла /www/1.txt
если он появился, отправляет комманду echo 1 > /sys/class/gpio/gpio24/value
соответственно если файла нет, отправляет echo 0 > /sys/class/gpio/gpio24/value

А кнопки на форме соответственно создают и удаляют этот файл 1.txt

Код такой:

PHP код:


			
#!/bin/sh
#Задаем переменную директории
DIR=/www/1
while true
do
if [ -f $DIR/1.txt ];
then
echo 1 > /sys/class/gpio/gpio24/value
sleep 2
else
echo 0 > /sys/class/gpio/gpio24/value
sleep 2
fi
done

Нормально ли использовать такой вариант?

И не знаю как создать этот файл с кнопки html

sunny · 08.05.2018, 19:29

Попробуйте через запуск sh скрипта, почему нет

Код:

<form action="адрес sh скрипта" method="post">
    <input type="button" name="my_button" value="Нажать">
</form>

http://www.cyberforum.ru/post5613927.html
или
http://www.cyberforum.ru/post3093550.html

Или кнопка (выше) и
http://htmlbook.ru/html/attr/onclick

Muxac · 08.05.2018, 19:44

они все php запускают!
А этот mjpg не поддерживает ничего кроме html

sunny · 08.05.2018, 19:50

Попробуйте через php

http://www.cyber-place.ru/showthread.php?t=493

melsem · 08.05.2018, 23:19

Цитата:

Сообщение от 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, 11:04	#1
Muxac Member Регистрация: 22.03.2015 Сообщений: 45 Вес репутации: 0	Управление gpio на html Всем привет. Помогите с такой проблемой. Есть роутер A5-V11 (Клон Hame A15) На нем стоит openwrt К роутеру подцеплена WEB камера и через MJPG-streamer идет стрим на порту 8080 (ЭТО ВАЖНО) Так вот прикупил я модуль с ик диодами, подпаял к gpio24 экспортировал, и если в консоли дать комманду: echo 1 > /sys/class/gpio/gpio24/value соответственно лампочки загораются. По аппаратной части все работает. А вот как сделать, чтобы этот ик модуль управлялся со страницы стрима (включать/выключать подсветку) Постоянно включенная подсветка не нужна. Нужно ночью переодически наблюдать за ребенком. По началу пытался прикрутить GpioSwitcher Отдельно он сам по себе работает. Но он имеет формат (cgi) А стрим обычная html страница вида: PHP код: `<html> <head> <title>MJPG-Streamer - Stream Example</title> </head> <body> <center> <img src="/?action=stream" /> </center> </body> </html>` Как можно в html прикрепить кнопку вкл/выкл gpio?

08.05.2018, 18:20	#5
Muxac Member Регистрация: 22.03.2015 Сообщений: 45 Вес репутации: 0	Еще я придумал по другому, sh скрипт проверяет каждую секунду-две наличие файла /www/1.txt если он появился, отправляет комманду echo 1 > /sys/class/gpio/gpio24/value соответственно если файла нет, отправляет echo 0 > /sys/class/gpio/gpio24/value А кнопки на форме соответственно создают и удаляют этот файл 1.txt Код такой: PHP код: `#!/bin/sh #Задаем переменную директории DIR=/www/1 while true do if [ -f $DIR/1.txt ]; then echo 1 > /sys/class/gpio/gpio24/value sleep 2 else echo 0 > /sys/class/gpio/gpio24/value sleep 2 fi done` Нормально ли использовать такой вариант? И не знаю как создать этот файл с кнопки html Последний раз редактировалось Muxac; 08.05.2018 в 18:56.

08.05.2018, 19:29	#6
sunny Senior Member Регистрация: 22.10.2015 Адрес: Там где сосны и песок Сообщений: 1,534 Вес репутации: 1602	Попробуйте через запуск sh скрипта, почему нет Код: <form action="адрес sh скрипта" method="post"> <input type="button" name="my_button" value="Нажать"> </form> http://www.cyberforum.ru/post5613927.html или http://www.cyberforum.ru/post3093550.html Или кнопка (выше) и http://htmlbook.ru/html/attr/onclick __________________ Читаю ваши мысли по аватару ... Последний раз редактировалось sunny; 08.05.2018 в 19:33.

08.05.2018, 19:44	#7
Muxac Member Регистрация: 22.03.2015 Сообщений: 45 Вес репутации: 0	они все php запускают! А этот mjpg не поддерживает ничего кроме html Последний раз редактировалось Muxac; 08.05.2018 в 19:49.

08.05.2018, 19:50	#8
sunny Senior Member Регистрация: 22.10.2015 Адрес: Там где сосны и песок Сообщений: 1,534 Вес репутации: 1602	Попробуйте через php http://www.cyber-place.ru/showthread.php?t=493 __________________ Читаю ваши мысли по аватару ...

08.05.2018, 12:50	#2
Admin Administrator Регистрация: 12.04.2010 Адрес: Москва Сообщений: 9,618 Вес репутации: 9824	без cgi не получится __________________ Интернет магазин электронных компонентов.

08.05.2018, 14:35	#3
sunny Senior Member Регистрация: 22.10.2015 Адрес: Там где сосны и песок Сообщений: 1,534 Вес репутации: 1602	Сами кнопки не проблема: http://htmlbook.ru/samhtml5/formy/knopki Я так понимаю, нужно использовать скрипты для активации функционала кнопки. __________________ Читаю ваши мысли по аватару ...

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)