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

stD · 28.04.2015, 02:03

Это простейший вариант, в дальнейшем буду добавлять функционал.

Понажимать можно здесь.

Требования:
Любой сервер с поддержкой php, например Lighttpd и сам PHP.

Ардуина подключается либо к USB, либо к UART, кому как удобнее.

Описание на примере usb и ардуино nano.

Установим драйвера для разных ардуин и утилиту для настройки порта stty:

PHP код:


			
opkg update

PHP код:


			
opkg install kmod-usb-serial-ftdi kmod-usb-acm kmod-usb-serial-pl2303 kmod-usb-serial-cp210x libftdi coreutils-stty

Устанавливаем и настраиваем небольшой прокси-сервер ser2net, он создаёт соединение между сокетом и устройством (/dev/ttyUSB0).

PHP код:


			
opkg install ser2net

Редактируем файл конфигурации:

PHP код:


			
nano /etc/ser2net.conf

Закомментируйте всё строчки в конце и сохраните.

Добавим ser2net и stty в автозагрузку:

PHP код:


			
nano /etc/rc.local

Должно получится так:

PHP код:


			
stty -F /dev/ttyUSB0 cs8 57600 ignbrk -brkint -icrnl -imaxbel -opost -onlcr -isig -icanon -iexten -echo -echoe -echok -echoctl -echoke noflsh -ixon -crtscts -hupcl

ser2net -C "3002:raw:0:/dev/ttyUSB0:57600 NONE 1STOPBIT 8DATABITS -XONXOFF -LOCAL -RTSCTS"

exit 0

Строки инициализации должны быть записаны одной строкой (без переноса).

В примере используется устройство /dev/ttyUSB0, у Вас может быть другое! (ttyATH0 — консоль, ttyACM0 — мега)

Если подклюаете к UART, то надо подправить файл /etc/inittab, закомментировав последнюю строчку:

PHP код:


			
nano /etc/inittab

Вот так:

PHP код:


			
::sysinit:/etc/init.d/rcS S boot
::shutdown:/etc/init.d/rcS K shutdown
#ttyATH0::askfirst:/bin/ash --login

Проверить...

PHP код:


			
ls /dev/tty*

.
.
.
Скачайте архив и распакуйте его в рабочую папку сервера, чтоб было так /var/www/primer/.
У Вас может быть другая рабочая папка.

Прошейте в ардуину этот скетч:

PHP код:


			
int descript[5];
int R1 = 0; // флаг первой лампы D12
int R2 = 0; // флаг второй лампы D13

void setup()  
{   
  Serial.begin(57600);   
  pinMode(12, OUTPUT); 
  pinMode(13, OUTPUT);  
}  

void loop()  
{  
 if (Serial.available()>4) // ждём дескриптор и нужный символ
 {
  if (Serial.read()=='Y') // проверяем первый символ, если это 'Y', то продолжаем принимать, если нет, то выходим из цикла чтения 
   {
    for (byte i=0; i < 5; i++)
      {
         descript[i] = Serial.read(); // добавляем символы в массив   
      } 
        
 if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) // проверяем символы
  {
   switch (descript[3]) 
    {
      case 'o': // обновление
      glavnaia(); // отправка ответа
      break;
      
      case 'A':
      digitalWrite(12, HIGH);
      R1 = 1; // ставим флаг в единицу (вкл)
      glavnaia();
      break;
      
      case 'a':
      digitalWrite(12, LOW);
      R1 = 0; // ставим флаг в ноль (откл)
      glavnaia();
      break;
      
      case 'B':
      digitalWrite(13, HIGH);
      R2 = 1;
      glavnaia();
      break;
      
      case 'b':
      digitalWrite(13, LOW);
      R2 = 0;
      glavnaia();
      break;
    
     }
   }
   
  else
    {
      for(byte i=0; i < 255; i++) 
       {
         Serial.read();    
       } 
    } 
   }// конец if (Serial.read()=='Y')
  } // конец чтение порта 
}

void glavnaia() // отправка ответа
 {
      Serial.print(R1); // отсылаем флаг 
      Serial.print(",");  // запятая для парсинга строки
      Serial.println(R2);  // отсылаем флаг !!!последняя строчка должна быть println!!!
 }

Будем включать и выключать D12 и D13. Ардуина будет рапортовать о выполнении команды.

Прверить работу можно так:
Вкл

PHP код:


			
echo 'Y+=Za' > /dev/ttyUSB0

Откл

PHP код:


			
echo 'Y+=Zb' > /dev/ttyUSB0

Работа заключается в следующем: index.html раз в три секунды (интервал можно изменить) запрашивает данные у ардуины с помощью функции ajax (ajax позволяет не перегружать страницу). Запрос передаётся php-файлу (box2.php) находящемуся на сервере, который в свою очередь обращается к ардуине через сокет ser2net.

Для лучшего понимания откройте файлы index.html и box2.php из архива, и посмотрите комментарии.

В браузере заходим по аресу ваш_роутер/primer/

Должно получится так:

Если надпись stD серая, это значит что связь с ардуиной установлена, если красная, то связи нет.

Нажатие на лампочку отсылает в ардуину символ включения или отключения (в зависимости от состояния), ардуина выполняет действие и посылает в ответ строку с флагами состояния (единица или ноль). Ответ разбирается в html-странице и в зависимости от флагов выводит картинку лампочки.

Если открыть ещё одну страничку (или зайти с другого устройства) и включить лампочку, то на первой страничке (в течении 3 сек.) тоже включится лампочка. Для этого и нужно обновление.

Интервал меняется в index.html.

PHP код:


			
$(document).ready(function()
          {  
            show();  
            setInterval('show()',3000);  /* частота обновления */
          });

На этом пока всё...

stD · 05.05.2015, 10:16

Шаблон веб-интерфейса с помощью которого можно будет включать и отключать «что-то» подключённое к пинам ардуино (D2 — D13).

Посмотреть и понажимать можно здесь...

Скачайте архив и распакуйте его в рабочую папку сервера (по умолчанию это /var/www), чтоб получилось так /var/www/knopki.
У Вас может быть своя папка.

Прошиваем скетч:

PHP код:


			
byte d2 = 0; // флаги
byte d3 = 0;
byte d4 = 0;
byte d5 = 0;
byte d6 = 0;
byte d7 = 0;
byte d8 = 0;
byte d9 = 0;
byte d10 = 0;
byte d11 = 0;
byte d12 = 0;
byte d13 = 0;

byte descript[5]; // массив

void setup() 
{
  Serial.begin(57600);
  pinMode(2, OUTPUT); 
  pinMode(3, OUTPUT);
  pinMode(4, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT);
  pinMode(7, OUTPUT);
  pinMode(8, OUTPUT);
  pinMode(9, OUTPUT);
  pinMode(10, OUTPUT);
  pinMode(11, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, OUTPUT);
}
  
void loop() 
{  
  if (Serial.available()>4) // ждём дескриптор и нужный символ
   {
    if (Serial.read()=='Y') // проверяем первый символ, если это 'Y', то продолжаем принимать, если нет, то выходим из цикла чтения
     {
      for (byte i=0; i < 5; i++)
        {
           descript[i] = Serial.read(); // добавляем символы в массив   
        } 
        
    if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) // проверяем дескриптор
     {
      switch (descript[3])
       {
         case 'o': // обновление
         glavnaia(); // отправка ответа
         break;
         
         case 'A': // d2 вкл
         digitalWrite(2, HIGH); // вкл d2
         d2 = 1; // ставим флаг в единицу (вкл)
         glavnaia(); // отправка ответа
         break;
         
         case 'a': // d2 откл
         digitalWrite(2, LOW); // откл d2
         d2 = 0; // ставим флаг в ноль (откл)
         glavnaia(); // отправка ответа
         break; 
 
         case 'B': // d3
         digitalWrite(3, HIGH);
         d3 = 1;
         glavnaia();
         break;
         
         case 'b': // d3
         digitalWrite(3, LOW);
         d3 = 0;
         glavnaia();
         break;          
  
         case 'C': // d4
         digitalWrite(4, HIGH);
         d4 = 1;
         glavnaia();
         break;
         
         case 'c': // d4
         digitalWrite(4, LOW);
         d4 = 0;
         glavnaia();
         break;   
  
         case 'D': // d5
         digitalWrite(5, HIGH);
         d5 = 1;
         glavnaia();
         break;
         
         case 'd': // d5
         digitalWrite(5, LOW);
         d5 = 0;
         glavnaia();
         break;  
  
         case 'E': // d6
         digitalWrite(6, HIGH);
         d6 = 1;
         glavnaia();
         break;
         
         case 'e': // d6
         digitalWrite(6, LOW);
         d6 = 0;
         glavnaia();
         break;   
  
         case 'F': // d7
         digitalWrite(7, HIGH);
         d7 = 1;
         glavnaia();
         break;
         
         case 'f': // d7
         digitalWrite(7, LOW);
         d7 = 0;
         glavnaia();
         break;  
 
         case 'G': // d8
         digitalWrite(8, HIGH);
         d8 = 1;
         glavnaia();
         break;
         
         case 'g': // d8
         digitalWrite(8, LOW);
         d8 = 0;
         glavnaia();
         break;  
 
         case 'H': // d9
         digitalWrite(9, HIGH);
         d9 = 1;
         glavnaia();
         break;
         
         case 'h': // d9
         digitalWrite(9, LOW);
         d9 = 0;
         glavnaia();
         break; 
         
         case 'I': // d10
         digitalWrite(10, HIGH);
         d10 = 1;
         glavnaia();
         break;
         
         case 'i': // d10
         digitalWrite(10, LOW);
         d10 = 0;
         glavnaia();
         break;         
 
         case 'J': // d11
         digitalWrite(11, HIGH);
         d11 = 1;
         glavnaia();
         break;
         
         case 'j': // d11
         digitalWrite(11, LOW);
         d11 = 0;
         glavnaia();
         break;  
        
         case 'K': // d12
         digitalWrite(12, HIGH);
         d12 = 1;
         glavnaia();
         break;
         
         case 'k': // d12
         digitalWrite(12, LOW);
         d12 = 0;
         glavnaia();
         break;         
      
         case 'M': // d13
         digitalWrite(13, HIGH);
         d13 = 1;
         glavnaia();
         break;
         
         case 'm': // d13
         digitalWrite(13, LOW);
         d13 = 0;
         glavnaia();
         break;
 
         default:
         glavnaia();
       }
     }
   
    else // если символ был не 'Y', то всё что в буфере подлежит аннигиляции )
      {
        for(byte i=0; i < 255; i++) 
         {
           Serial.read();    
         } 
      } 
     }    // конец if (Serial.read()=='Y')
   }    // конец чтение порта
 
} // конец loop


void glavnaia() // отправка данных
 {
      Serial.print(d2);//0
      Serial.print(","); // 
      Serial.print(d3);//1
      Serial.print(",");
      Serial.print(d4);//2
      Serial.print(",");
      Serial.print(d5);//3
      Serial.print(",");
      Serial.print(d6);//4
      Serial.print(",");
      Serial.print(d7);//5
      Serial.print(",");
      Serial.print(d8);//6
      Serial.print(",");
      Serial.print(d9);//7 
      Serial.print(",");
      Serial.print(d10);//8
      Serial.print(",");
      Serial.print(d11);//9
      Serial.print(",");
      Serial.print(d12);//10
      Serial.print(",");
      Serial.println(d13);//11 отсылается 12 значений
 }

Роутер отправляет в ардуину запрос от клиента состоящий из дескриптора (Y+=Z) и управляющего символа (например 'А'- вкл d2). Дескриптор позволит отфильтровать возможный мусор и исключит случайные срабатывания.

Ардуина обрабатывает управляющий символ внутри функции switch (например включает светодиод) и отправляет ответ роутеру, который в свою очередь отдаст его клиенту.

Работа с клиентом описана ниже.

.

Теперь в браузере зайдите по адресу ваш_роутер/knopki/

Если связь установлена, то Вы увидите это:

Нажмите на D13 — загорится светодиод на ардуине и кнопка подсветится.

.

Как работает: Обновление страницы.

index.html раз в три секунды (интервал можно изменить) запрашивает данные у ардуины (отправляя ей символ о) с помощью функции ajax (ajax позволяет не перегружать страницу).

PHP код:


			
/*обновление*/
show();
setInterval(show,3000);  /* частота обновления в милисекундах */

function show(){  /* функция обновления */
 
            $.ajax({ 
                type: "GET",
                url: "box2.php?df=o", /* отправка символа о */
                timeout:300,           
                cache: false,       
                success: function(data){ 
...

Запрос передаётся php-файлу (box2.php) находящемуся на сервере, который в свою очередь отправляет его в ардуину.

PHP код:


			
<?php
if($fp = fsockopen("localhost", 3002, $errno, $errstr, 1)) // открываем порт, в качестве посредника между роутером и ардуиной выступает ser2net
   { 
      fwrite($fp, 'Y+=Z'); // отправляем в порт дескриптор Y+=Z
      fwrite($fp, $_GET['df']); // отправляем в порт символ полученый от html странички
      $bufft = fgets($fp); // получаем ответ от ардуины
      fclose($fp); // закрываем порт
      echo $bufft; // отправляем ответ клиенту 
   }  
?>

Ардуина получает команду, обрабатывает её и отправляет ответ, который по той же цепочке возвращается html-страничке (index.html).

PHP код:


			

...
 switch (descript[3])
       {
         case 'o': // обновление
         glavnaia(); // отправка ответа
         break;
...
void glavnaia() // отправка данных
 {
      Serial.print(d2);//0
      Serial.print(",");
      Serial.print(d3);//1
...

Html-страничка разбирает ответ и выводит на экран нужную кнопку.

PHP код:


			
...
 success: function(data){   
                                          
                           var vars = data.split(","); /* разбор строки принятой от ардуино */
                           if(vars.length == dlina){ /* проверка длины данных (количество блоков разделённых запятой) */
                               
                               /*d2*/
                               if(vars[0] == 1) { $(".d2otkl").show(); $(".d2vkl").hide(); }  /* в зависимости от принятого флага скрывает/показавыет кнопку вкл или откл */
                               else if(vars[0] == 0) { $(".d2otkl").hide(); $(".d2vkl").show(); } 
...

Если открыть ещё одну страничку (или зайти с другого устройства) и нажать какую-то кнопку, то на первой страничке (в течении 3 сек.) эта кнопка тоже станет включённой.

Нажатие на кнопку:

Нажатие на кнопку работает так же как и «обновление», в ардуину отсылается символ включения или отключения (в зависимости от состояния), ардуина выполняет действие и посылает в ответ строку с флагами состояния (единица или ноль).

Ответ разбирается в html-странице и в зависимости от флагов выводит на экран нужную кнопку.

Для лучшего понимания откройте файл index.html из архива, и посмотрите комментарии.

.

Если связи между ардуиной и роутером нет, то будет только красная надпись stD — это индикатор работы, когда связь установлена, надпись становится серой.

Подождите минуту и пообновляйте страницу. Если связь не устанавливается, то проверьте настройки роутера.
Проверьте права на файлы, правильность путей и устройств.

.

Дизайн

Названия кнопок меняются в конце файла index.html

PHP код:


			
...
<div class="knop d2vkl">D2</div> <!-- здесь менять названия кнопок -->
<div class="knop d2otkl">D2</div> <!-- чтобы убрать кнопку удалите оба блока -->
...

Расположение и размер кнопок задаются в файле knopki.css

PHP код:


			
...
.d2vkl{
top: 20px; /*координаты кнопок*/
left: 20px; /*координаты кнопок*/
box-shadow: 0 0 10px 3px rgba(0,0,0,0.3); /*цвет и размер тени кнопки*/
-webkit-transition-duration: 0.6s; /*плавность появления*/
-o-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}

.d2vkl:hover{ /*наведение мыши на кнопку*/
box-shadow: 0 0 2px 1px rgba(0,0,0,0.3);
}
...

PHP код:


			
...
.knop {
position: absolute;
width: 200px; /*ширина для всех кнопок*/
height: 100px; /*высота для всех кнопок*/
display: none;
cursor: pointer; 
font-size: 30px; /*размер текста на кнопках*/
font-weight: 600; /*ширина текста на кнопках*/
font-family: Arial, Helvetica, sans-serif; /*шрифт*/
color: #161616; /*цвет текста на кнопках*/
text-shadow: 0px 1px 2px #7c7c7c; /*цвет и размер тени кнопок*/
text-align: center;
line-height: 3.2;
}

Цвет фона меняется в файле style.css

PHP код:


			
body {
background:#202020; /* цвет фона */
}
...

Засим пока что всё...

Prana · 05.05.2015, 11:45

посмотрите в Test модуль Light Control - в нем реализуется аналогичная функциональность с несколько расширенными возможностями. Для своего модуля можете почерпнуть, в частности, как можно организовать более хитрое ajax-взаимодействие: устанавливать на клиенте соединение с большим таймаутом, а в cgi-скрипте придерживать ответ, если нет обновлений от Arduino. А при обновлении отвечать сразу, в результате лаг считывания состояния - порядка 1,5 секунд, при редких (не более 3х в минуту) запросах от клиентов к http-серверу.

В модуле Light Control пошли по пути "утяжеления" решения введением БД:
1. это позволит не конфликтовать множеству параллельных запросов к порту, если подключается несколько клиентов.
2. можно будет хранить не только текущее состояние пинов, но и историю по некоторым, что позволит просматривать логи, строить графики.

stD · 05.05.2015, 12:46

Цитата:

посмотрите в Test модуль Light Control

Я плохо знаком с киберврт, по причине отсутствия интереса.
...

Цитата:

В модуле Light Control пошли по пути "утяжеления" решения введением БД:
1. это позволит не конфликтовать множеству параллельных запросов к порту, если подключается несколько клиентов.

На сколько я понимаю, вы каким-то процессом забираете данные с ардуины и складываете в БД, а клиенты запрашивают данные непосредственно из БД. Я прав?

У себя, я реализовал подобное решение давно. Просто здесь я буду выкладывать всё поэтапно, чтоб не выглядело громоздко.
...

А спросить я хотел про это:

Цитата:

организовать более хитрое ajax-взаимодействие: устанавливать на клиенте соединение с большим таймаутом, а в cgi-скрипте придерживать ответ, если нет обновлений от Arduino

Опишите пожалуйста всё подробно, что Вы имеете ввиду и как это работает, с кусками кода.

Я не до конца понял Вашу мысль, в частности мне не понятно вот это "если нет обновлений от Arduino".

Prana · 05.05.2015, 14:09

Цитата:

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

На сколько я понимаю, вы каким-то процессом забираете данные с ардуины и складываете в БД, а клиенты запрашивают данные непосредственно из БД. Я прав?

Все именно так: есть демон serd, который единолично висит на порту, и складывает все в БД.

Цитата:

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

Опишите пожалуйста всё подробно, что Вы имеете ввиду и как это работает, с кусками кода.

подробное описание есть в теме Light Control
Если нужен код, а Cyberwrt нет - напишите в личку, я пришлю отдельно cgi

Цитата:

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

Я не до конца понял Вашу мысль, в частности мне не понятно вот это "если нет обновлений от Arduino".

Мой ajax-запрос обращается вот к такому скрипту на сервере:

PHP код:


			
#!/bin/sh
echo "Content-type: text/html; charset=utf-8"
echo

PINS=$(echo $QUERY_STRING | grep -oE "(^|[?&])pins=[0-9,]+" | cut -f 2 -d "=" | head -n1)
old=$(echo $QUERY_STRING | grep -oE "(^|[?&])old=[0-9,]+" | cut -f 2 -d "=" | head -n1)

states=$(mysqlite3 /tmp/uart_buf.db "select PIN_VALUE as val from uart_buf where PIN_NAME in ($PINS)" | grep -oE "[0-9]+" | sed ':a;N;$!ba;s/\n/,/g')
i=1; 
while [ "$old" == "$states"  ]  ; do               
  sleep 1;   
  let i=i+1;                                                                                                                                           
  states=$(mysqlite3 /tmp/uart_buf.db "select PIN_VALUE as val from uart_buf where PIN_NAME in ($PINS)" | grep -oE "[0-9]+" | sed ':a;N;$!ba;s/\n/,/g')
  if [ "$i" -eq 40 ] ; then                                                                                                                            
    break;                     
  fi                             
done                             
if [ "$i" -lt 40 ] ; then        
  echo $states                   
  mysqlite3 /tmp/uart_buf.db "update uart_buf set PIN_VALUE = 0 where PIN_NAME = 99" > /dev/nul
fi

обратите внимание на цикл: пока прочитанное из базы состояние (сразу для всех пинов) не меняется, скрипт вызывает sleep 1
это позволяет не создавать постоянно новых процессов на сервере для данного клиента, а клиент не создает слишком часто ajax-запросов и не увеличивает трафик.

Основное назначение Light Control - управление светом, поэтому задержка обновления состояния в 1-2 секунды не напрягала. А в исходном посте я предложил вам посмотреть модуль, чтобы не гонять впустую ajax каждые 3 секунды.

stD · 05.05.2015, 13:47

Да, забыл сказать, что использование БД для хранения состояний не всегда удобно, а в некоторых случаях не допустимо.

С таймаутами аякса, тоже есть нюансы, при некоторых обстоятельствах.

Например в одном из "проектов", было жизнено необходимо мгновенное обновление страницы. Устройство находилось за 200 км от города, пинги о-го-го, приходилось искать компромисс между таймаутами, пингами и потерей пакетов. Вобщем интервал обновления около 100 мс. Разумется запись в базу данных и параллельное чтение не совсем разумно.

stD · 05.05.2015, 14:52

Я понял Вашу мысль.

Получается, что когда Вы смотрите на экран (например планшета), Вы не можете быть уверены в том, есть ли связь с ардуиной или нет.
...
Собственно я и "гоняю" пакеты так часто, чтобы видеть что связь есть.

Если ардуина отвалилась от роутера или отвалился инет, как Вы об этом узнаете?

...

Не подумайте что я придираюсь, просто пытаюсь вникнуть.

Prana · 05.05.2015, 15:09

Цитата:

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

Я понял Вашу мысль.

Получается, что когда Вы смотрите на экран (например планшета), Вы не можете быть уверены в том, есть ли связь с ардуиной или нет.

каждые 30 секунд в любом случае переоткрывается ajax-соединение

Цитата:

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

Собственно я и "гоняю" пакеты так часто, чтобы видеть что связь есть.

Если ардуина отвалилась от роутера или отвалился инет, как Вы об этом узнаете?

отваливание интернета нужно проверять при создании ajax-запроса, в light_control сейчас это приводит к постоянным попыткам установить соединение, но вообще можно и на странице что-нибудь в таком случае отображать. Обработки "ардуина отвалилась от роутера" тоже нет - предложу Admin писать что-нибудь хитрое в базу в этом случае. Но может и демон отвалиться - значит, в базу нужно логгировать и timestamp последнего обновления

В любом случае, я не считаю веб-приложение пригодным для ответственной realtime работы, а простое управление нагрузками вроде света или отопления, по локальной сети или даже через Интернет, вполне можно на нем строить. Если нужно что-то серьезнее, то я бы ушел от ajax к сокетам и отдельному демону, слушающему tcp-порт.

stD · 05.05.2015, 15:16

Цитата:

по локальной сети или даже через Интернет

Локалка вообще мало интересна.

Цитата:

ajax к сокетам и отдельному демону, слушающему tcp-порт

Что Вы имеете ввиду?

Prana · 05.05.2015, 15:54

Цитата:

ajax к сокетам и отдельному демону, слушающему tcp-порт
Что Вы имеете ввиду?

если нужна надежная и быстрая связь, я бы не стал полагаться на веб-приложение, а делал бы клиентское приложение, которое через сокет устанавливало и постоянно поддерживало бы соединение с открытым сокетом на tcp-порту сервера. Безо всяких браузеров, JS, веб-серверов и cgi-скриптов в качестве прослоек.

05.05.2015, 11:45	#3
Prana Junior Member Регистрация: 17.03.2015 Сообщений: 27 Вес репутации: 0	Re: Шаблон веб-интерфейса посмотрите в Test модуль Light Control - в нем реализуется аналогичная функциональность с несколько расширенными возможностями. Для своего модуля можете почерпнуть, в частности, как можно организовать более хитрое ajax-взаимодействие: устанавливать на клиенте соединение с большим таймаутом, а в cgi-скрипте придерживать ответ, если нет обновлений от Arduino. А при обновлении отвечать сразу, в результате лаг считывания состояния - порядка 1,5 секунд, при редких (не более 3х в минуту) запросах от клиентов к http-серверу. В модуле Light Control пошли по пути "утяжеления" решения введением БД: 1. это позволит не конфликтовать множеству параллельных запросов к порту, если подключается несколько клиентов. 2. можно будет хранить не только текущее состояние пинов, но и историю по некоторым, что позволит просматривать логи, строить графики.

05.05.2015, 13:47	#6
stD Senior Member Регистрация: 02.04.2012 Адрес: Питер Сообщений: 1,125 Вес репутации: 1312	Re: Шаблон веб-интерфейса Да, забыл сказать, что использование БД для хранения состояний не всегда удобно, а в некоторых случаях не допустимо. С таймаутами аякса, тоже есть нюансы, при некоторых обстоятельствах. Например в одном из "проектов", было жизнено необходимо мгновенное обновление страницы. Устройство находилось за 200 км от города, пинги о-го-го, приходилось искать компромисс между таймаутами, пингами и потерей пакетов. Вобщем интервал обновления около 100 мс. Разумется запись в базу данных и параллельное чтение не совсем разумно. Последний раз редактировалось stD; 05.05.2015 в 14:06.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

28.04.2015, 02:03	#1
stD Senior Member Регистрация: 02.04.2012 Адрес: Питер Сообщений: 1,125 Вес репутации: 1312	Шаблон веб-интерфейса Это простейший вариант, в дальнейшем буду добавлять функционал. Понажимать можно здесь. Требования: Любой сервер с поддержкой php, например Lighttpd и сам PHP. Ардуина подключается либо к USB, либо к UART, кому как удобнее. Описание на примере usb и ардуино nano. Установим драйвера для разных ардуин и утилиту для настройки порта stty: PHP код: `opkg update` PHP код: `opkg install kmod-usb-serial-ftdi kmod-usb-acm kmod-usb-serial-pl2303 kmod-usb-serial-cp210x libftdi coreutils-stty` Устанавливаем и настраиваем небольшой прокси-сервер ser2net, он создаёт соединение между сокетом и устройством (/dev/ttyUSB0). PHP код: `opkg install ser2net` Редактируем файл конфигурации: PHP код: `nano /etc/ser2net.conf` Закомментируйте всё строчки в конце и сохраните. Добавим ser2net и stty в автозагрузку: PHP код: `nano /etc/rc.local` Должно получится так: PHP код: `stty -F /dev/ttyUSB0 cs8 57600 ignbrk -brkint -icrnl -imaxbel -opost -onlcr -isig -icanon -iexten -echo -echoe -echok -echoctl -echoke noflsh -ixon -crtscts -hupcl ser2net -C "3002:raw:0:/dev/ttyUSB0:57600 NONE 1STOPBIT 8DATABITS -XONXOFF -LOCAL -RTSCTS" exit 0` Строки инициализации должны быть записаны одной строкой (без переноса). В примере используется устройство /dev/ttyUSB0, у Вас может быть другое! (ttyATH0 — консоль, ttyACM0 — мега) Если подклюаете к UART, то надо подправить файл /etc/inittab, закомментировав последнюю строчку: PHP код: `nano /etc/inittab` Вот так: PHP код: `::sysinit:/etc/init.d/rcS S boot ::shutdown:/etc/init.d/rcS K shutdown #ttyATH0::askfirst:/bin/ash --login` Проверить... PHP код: `ls /dev/tty` . . . Скачайте* архив и распакуйте его в рабочую папку сервера, чтоб было так /var/www/primer/. У Вас может быть другая рабочая папка. Прошейте в ардуину этот скетч: PHP код: int descript[5]; int R1 = 0; // флаг первой лампы D12 int R2 = 0; // флаг второй лампы D13 void setup() { Serial.begin(57600); pinMode(12, OUTPUT); pinMode(13, OUTPUT); } void loop() { if (Serial.available()>4) // ждём дескриптор и нужный символ { if (Serial.read()=='Y') // проверяем первый символ, если это 'Y', то продолжаем принимать, если нет, то выходим из цикла чтения { for (byte i=0; i < 5; i++) { descript[i] = Serial.read(); // добавляем символы в массив } if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) // проверяем символы { switch (descript[3]) { case 'o': // обновление glavnaia(); // отправка ответа break; case 'A': digitalWrite(12, HIGH); R1 = 1; // ставим флаг в единицу (вкл) glavnaia(); break; case 'a': digitalWrite(12, LOW); R1 = 0; // ставим флаг в ноль (откл) glavnaia(); break; case 'B': digitalWrite(13, HIGH); R2 = 1; glavnaia(); break; case 'b': digitalWrite(13, LOW); R2 = 0; glavnaia(); break; } } else { for(byte i=0; i < 255; i++) { Serial.read(); } } }// конец if (Serial.read()=='Y') } // конец чтение порта } void glavnaia() // отправка ответа { Serial.print(R1); // отсылаем флаг Serial.print(","); // запятая для парсинга строки Serial.println(R2); // отсылаем флаг !!!последняя строчка должна быть println!!! } Будем включать и выключать D12 и D13. Ардуина будет рапортовать о выполнении команды. Прверить работу можно так: Вкл PHP код: `echo 'Y+=Za' > /dev/ttyUSB0` Откл PHP код: `echo 'Y+=Zb' > /dev/ttyUSB0` Работа заключается в следующем: index.html раз в три секунды (интервал можно изменить) запрашивает данные у ардуины с помощью функции ajax (ajax позволяет не перегружать страницу). Запрос передаётся php-файлу (box2.php) находящемуся на сервере, который в свою очередь обращается к ардуине через сокет ser2net. Для лучшего понимания откройте файлы index.html и box2.php из архива, и посмотрите комментарии. В браузере заходим по аресу ваш_роутер/primer/ Должно получится так: Если надпись stD серая, это значит что связь с ардуиной установлена, если красная, то связи нет. Нажатие на лампочку отсылает в ардуину символ включения или отключения (в зависимости от состояния), ардуина выполняет действие и посылает в ответ строку с флагами состояния (единица или ноль). Ответ разбирается в html-странице и в зависимости от флагов выводит картинку лампочки. Если открыть ещё одну страничку (или зайти с другого устройства) и включить лампочку, то на первой страничке (в течении 3 сек.) тоже включится лампочка. Для этого и нужно обновление. Интервал меняется в index.html. PHP код: `$(document).ready(function() { show(); setInterval('show()',3000); /* частота обновления / });` На этом пока всё... Последний раз редактировалось stD; 11.06.2015 в 18:33.*

05.05.2015, 10:16	#2
stD Senior Member Регистрация: 02.04.2012 Адрес: Питер Сообщений: 1,125 Вес репутации: 1312	Re: Шаблон веб-интерфейса Шаблон веб-интерфейса с помощью которого можно будет включать и отключать «что-то» подключённое к пинам ардуино (D2 — D13). Посмотреть и понажимать можно здесь... Скачайте архив и распакуйте его в рабочую папку сервера (по умолчанию это /var/www), чтоб получилось так /var/www/knopki. У Вас может быть своя папка. Прошиваем скетч: PHP код: byte d2 = 0; // флаги byte d3 = 0; byte d4 = 0; byte d5 = 0; byte d6 = 0; byte d7 = 0; byte d8 = 0; byte d9 = 0; byte d10 = 0; byte d11 = 0; byte d12 = 0; byte d13 = 0; byte descript[5]; // массив void setup() { Serial.begin(57600); pinMode(2, OUTPUT); pinMode(3, OUTPUT); pinMode(4, OUTPUT); pinMode(5, OUTPUT); pinMode(6, OUTPUT); pinMode(7, OUTPUT); pinMode(8, OUTPUT); pinMode(9, OUTPUT); pinMode(10, OUTPUT); pinMode(11, OUTPUT); pinMode(12, OUTPUT); pinMode(13, OUTPUT); } void loop() { if (Serial.available()>4) // ждём дескриптор и нужный символ { if (Serial.read()=='Y') // проверяем первый символ, если это 'Y', то продолжаем принимать, если нет, то выходим из цикла чтения { for (byte i=0; i < 5; i++) { descript[i] = Serial.read(); // добавляем символы в массив } if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) // проверяем дескриптор { switch (descript[3]) { case 'o': // обновление glavnaia(); // отправка ответа break; case 'A': // d2 вкл digitalWrite(2, HIGH); // вкл d2 d2 = 1; // ставим флаг в единицу (вкл) glavnaia(); // отправка ответа break; case 'a': // d2 откл digitalWrite(2, LOW); // откл d2 d2 = 0; // ставим флаг в ноль (откл) glavnaia(); // отправка ответа break; case 'B': // d3 digitalWrite(3, HIGH); d3 = 1; glavnaia(); break; case 'b': // d3 digitalWrite(3, LOW); d3 = 0; glavnaia(); break; case 'C': // d4 digitalWrite(4, HIGH); d4 = 1; glavnaia(); break; case 'c': // d4 digitalWrite(4, LOW); d4 = 0; glavnaia(); break; case 'D': // d5 digitalWrite(5, HIGH); d5 = 1; glavnaia(); break; case 'd': // d5 digitalWrite(5, LOW); d5 = 0; glavnaia(); break; case 'E': // d6 digitalWrite(6, HIGH); d6 = 1; glavnaia(); break; case 'e': // d6 digitalWrite(6, LOW); d6 = 0; glavnaia(); break; case 'F': // d7 digitalWrite(7, HIGH); d7 = 1; glavnaia(); break; case 'f': // d7 digitalWrite(7, LOW); d7 = 0; glavnaia(); break; case 'G': // d8 digitalWrite(8, HIGH); d8 = 1; glavnaia(); break; case 'g': // d8 digitalWrite(8, LOW); d8 = 0; glavnaia(); break; case 'H': // d9 digitalWrite(9, HIGH); d9 = 1; glavnaia(); break; case 'h': // d9 digitalWrite(9, LOW); d9 = 0; glavnaia(); break; case 'I': // d10 digitalWrite(10, HIGH); d10 = 1; glavnaia(); break; case 'i': // d10 digitalWrite(10, LOW); d10 = 0; glavnaia(); break; case 'J': // d11 digitalWrite(11, HIGH); d11 = 1; glavnaia(); break; case 'j': // d11 digitalWrite(11, LOW); d11 = 0; glavnaia(); break; case 'K': // d12 digitalWrite(12, HIGH); d12 = 1; glavnaia(); break; case 'k': // d12 digitalWrite(12, LOW); d12 = 0; glavnaia(); break; case 'M': // d13 digitalWrite(13, HIGH); d13 = 1; glavnaia(); break; case 'm': // d13 digitalWrite(13, LOW); d13 = 0; glavnaia(); break; default: glavnaia(); } } else // если символ был не 'Y', то всё что в буфере подлежит аннигиляции ) { for(byte i=0; i < 255; i++) { Serial.read(); } } } // конец if (Serial.read()=='Y') } // конец чтение порта } // конец loop void glavnaia() // отправка данных { Serial.print(d2);//0 Serial.print(","); // Serial.print(d3);//1 Serial.print(","); Serial.print(d4);//2 Serial.print(","); Serial.print(d5);//3 Serial.print(","); Serial.print(d6);//4 Serial.print(","); Serial.print(d7);//5 Serial.print(","); Serial.print(d8);//6 Serial.print(","); Serial.print(d9);//7 Serial.print(","); Serial.print(d10);//8 Serial.print(","); Serial.print(d11);//9 Serial.print(","); Serial.print(d12);//10 Serial.print(","); Serial.println(d13);//11 отсылается 12 значений } Роутер отправляет в ардуину запрос от клиента состоящий из дескриптора (Y+=Z) и управляющего символа (например 'А'- вкл d2). Дескриптор позволит отфильтровать возможный мусор и исключит случайные срабатывания. Ардуина обрабатывает управляющий символ внутри функции switch (например включает светодиод) и отправляет ответ роутеру, который в свою очередь отдаст его клиенту. Работа с клиентом описана ниже. . Теперь в браузере зайдите по адресу ваш_роутер/knopki/ Если связь установлена, то Вы увидите это: Нажмите на D13 — загорится светодиод на ардуине и кнопка подсветится. . Как работает: Обновление страницы. index.html раз в три секунды (интервал можно изменить) запрашивает данные у ардуины (отправляя ей символ о) с помощью функции ajax (ajax позволяет не перегружать страницу). PHP код: /обновление/ show(); setInterval(show,3000); /* частота обновления в милисекундах / function show(){ / функция обновления / $.ajax({ type: "GET", url: "box2.php?df=o", / отправка символа о / timeout:300, cache: false, success: function(data){ ... Запрос передаётся php-файлу* (box2.php) находящемуся на сервере, который в свою очередь отправляет его в ардуину. PHP код: <?php if($fp = fsockopen("localhost", 3002, $errno, $errstr, 1)) // открываем порт, в качестве посредника между роутером и ардуиной выступает ser2net { fwrite($fp, 'Y+=Z'); // отправляем в порт дескриптор Y+=Z fwrite($fp, $_GET['df']); // отправляем в порт символ полученый от html странички $bufft = fgets($fp); // получаем ответ от ардуины fclose($fp); // закрываем порт echo $bufft; // отправляем ответ клиенту } ?> Ардуина получает команду, обрабатывает её и отправляет ответ, который по той же цепочке возвращается html-страничке (index.html). PHP код: `... switch (descript[3]) { case 'o': // обновление glavnaia(); // отправка ответа break; ... void glavnaia() // отправка данных { Serial.print(d2);//0 Serial.print(","); Serial.print(d3);//1 ...` Html-страничка разбирает ответ и выводит на экран нужную кнопку. PHP код: ... success: function(data){ var vars = data.split(","); /* разбор строки принятой от ардуино / if(vars.length == dlina){ / проверка длины данных (количество блоков разделённых запятой) / /d2/ if(vars[0] == 1) { $(".d2otkl").show(); $(".d2vkl").hide(); } / в зависимости от принятого флага скрывает/показавыет кнопку вкл или откл / else if(vars[0] == 0) { $(".d2otkl").hide(); $(".d2vkl").show(); } ... Если открыть ещё одну страничку (или зайти с другого устройства) и нажать какую-то кнопку, то на первой страничке (в течении 3 сек.) эта кнопка тоже станет включённой. Нажатие на кнопку:* Нажатие на кнопку работает так же как и «обновление», в ардуину отсылается символ включения или отключения (в зависимости от состояния), ардуина выполняет действие и посылает в ответ строку с флагами состояния (единица или ноль). Ответ разбирается в html-странице и в зависимости от флагов выводит на экран нужную кнопку. Для лучшего понимания откройте файл index.html из архива, и посмотрите комментарии. . Если связи между ардуиной и роутером нет, то будет только красная надпись stD — это индикатор работы, когда связь установлена, надпись становится серой. Подождите минуту и пообновляйте страницу. Если связь не устанавливается, то проверьте настройки роутера. Проверьте права на файлы, правильность путей и устройств. . Дизайн Названия кнопок меняются в конце файла index.html PHP код: `... <div class="knop d2vkl">D2</div> <!-- здесь менять названия кнопок --> <div class="knop d2otkl">D2</div> <!-- чтобы убрать кнопку удалите оба блока --> ...` Расположение и размер кнопок задаются в файле knopki.css PHP код: ... .d2vkl{ top: 20px; /координаты кнопок/ left: 20px; /координаты кнопок/ box-shadow: 0 0 10px 3px rgba(0,0,0,0.3); /цвет и размер тени кнопки/ -webkit-transition-duration: 0.6s; /плавность появления/ -o-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .d2vkl:hover{ /наведение мыши на кнопку/ box-shadow: 0 0 2px 1px rgba(0,0,0,0.3); } ... PHP код: ... .knop { position: absolute; width: 200px; /ширина для всех кнопок/ height: 100px; /высота для всех кнопок/ display: none; cursor: pointer; font-size: 30px; /размер текста на кнопках/ font-weight: 600; /ширина текста на кнопках/ font-family: Arial, Helvetica, sans-serif; /шрифт/ color: #161616; /цвет текста на кнопках/ text-shadow: 0px 1px 2px #7c7c7c; /цвет и размер тени кнопок/ text-align: center; line-height: 3.2; } Цвет фона меняется в файле style.css PHP код: `body { background:#202020; /* цвет фона / } ...` Засим пока что всё...* Последний раз редактировалось stD; 05.05.2015 в 10:21.

05.05.2015, 14:52	#7
stD Senior Member Регистрация: 02.04.2012 Адрес: Питер Сообщений: 1,125 Вес репутации: 1312	Re: Шаблон веб-интерфейса Я понял Вашу мысль. Получается, что когда Вы смотрите на экран (например планшета), Вы не можете быть уверены в том, есть ли связь с ардуиной или нет. ... Собственно я и "гоняю" пакеты так часто, чтобы видеть что связь есть. Если ардуина отвалилась от роутера или отвалился инет, как Вы об этом узнаете? ... Не подумайте что я придираюсь, просто пытаюсь вникнуть. Последний раз редактировалось stD; 05.05.2015 в 14:59.

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