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

Admin · 20.01.2013, 11:40

Многие пользователи часто спрашивают как сделать кнопку что бы она могла посылать код в порт Arduino
Привожу пример на три лампочки без CSS рюшечек

Этот код нужно скопировать и поместить в фаил с именем index.html

Код:

<!DOCTYPE HTML>
<html lang="en-US">

<head>
	<meta charset="UTF-8">
	<title>Button</title>
</head>

<body>
   <form method="get" action="serial.php"><button value="1" type="submit" name="send_m">Light ON </button></form>
   <form method="get" action="serial.php"><button value="0" type="submit" name="send_m">Light OFF</button></form>

   <form method="get" action="serial.php"><button value="3" type="submit" name="send_m">Room ON </button></form>
   <form method="get" action="serial.php"><button value="2" type="submit" name="send_m">Room OFF</button></form>

   <form method="get" action="serial.php"><button value="5" type="submit" name="send_m">ON </button></form>
   <form method="get" action="serial.php"><button value="4" type="submit" name="send_m">OFF</button></form>
</body>
</html>

PHP скрипт который принимает отправленное кнопкой значение и отправляет это значение в порт Arduino
Нужно создать фаил с именем serial.php
и поместить в него ниже выложенный код

PHP код:


			
<?php

$bufer = '';
$ch=' ';
$filename = "/dev/ttyUSB0";      //порт
$fp = fopen($filename, "r+");  //открыть порт

if ($fp) //если порт открыт
{
 fwrite($fp, $_GET['send_m']);  //полать в порт строку

   while ($ch != chr(0xA)) 
   {
     $ch = fgetc($fp); //прочитать один символ из порта
     $bufer.=$ch;
   }    
    echo "<br>".$bufer; 

fclose($fp); //закрыть порт
} else echo "Не удалось открыть порт" ;
      
?>

Код для Arduino

Код:

#define ledPin 13  
#define ledPin1 12
#define ledPin2 11
void setup()  
{   
  Serial.begin(57600);   
  pinMode(ledPin, OUTPUT); 
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
}  

void loop()  
{  
  if (Serial.available() > 0)  
  {  
    byte inByte = Serial.read();  
    switch (inByte)  
    {  
        case 49:  
        digitalWrite(ledPin, HIGH);
        delay(50);  
        Serial.println("Light ON");  
        break;  
        
        case 48:  
        digitalWrite(ledPin, LOW); 
        delay(50); 
        Serial.println("Light OFF");  
        break;  
        
        case 51:  
        digitalWrite(ledPin1, HIGH); 
        delay(50); 
        Serial.println("Room ON");  
        break; 
        
        case 50:  
        digitalWrite(ledPin1, LOW); 
        delay(50); 
        Serial.println("Room OFF");  
        break; 

        case 53:  
        digitalWrite(ledPin2, HIGH); 
        delay(52); 
        Serial.println("ON");  
        break;     

        case 52:  
        digitalWrite(ledPin2, LOW); 
        delay(52); 
        Serial.println("OFF");  
        break;     
    }          
  }  
}

Исходники кнопки с обратной связью

metaforos · 20.01.2013, 12:04

Chip, конечно этот код более правильный и красивый. Но и мой тоже умеет отправлять данные в Ардуинку. И получать тоже. А вот принимать и получать одновременно...

Admin · 20.01.2013, 12:07

Добавил код который отправляет и принимает

Если кому нибудь понадобится, могу выложить кнопки на CSS
Выглядеть будут как на скриншоте
Название: buttons.jpg
Просмотров: 8687

Размер: 16.1 Кб

Название: buttons.jpg
Просмотров: 8687

Размер: 16.1 Кб

metaforos · 20.01.2013, 19:58

Chip, я хочу реализовать следующее - одна кнопка на включение и выключение. Т.е. при нажатии, PHP отправляет в ардуину "1". Соответственно меняется состояние пина с 0 на 1 и ардуина возвращает состояние пина в PHP, который в свою очередь меняет состояние (отображение) кнопки. Это для того, чтобы открыв страницу своего дома, я сразу видел, что включено, а что нет. Я реализовывал подобное, но использовал NySQL, а сейчас хочу напрямую состояние пинов ардуины читать.

Admin · 20.01.2013, 20:06

Код проверил? Я выложил то что ты хотел

metaforos · 20.01.2013, 20:27

Только увидел. Попробую.

NEXT · 20.01.2013, 21:10

Мой вариант кнопки, кнопка одна.
нажимаем -включаем, нажимаем выключаем
кнопка меняет цвет.
Обратной связи не делал, пока нет необходимости.
Если кто сделает , просьба поделиться.

PHP код:


			
<?PHP
     
    if (isset($_GET['action'])) {
        require("php_serial.class.php");
        $serial = new phpSerial();    
        $serial->deviceSet("/dev/ttyATH0");    
        $serial->confBaudRate(9600); //Baud rate: 9600
        $serial->confParity("none");  //Parity (this is the "N" in "8-N-1")
        $serial->confCharacterLength(8); //Character length     (this is the "8" in "8-N-1")
        $serial->confStopBits(1);  //Stop bits (this is the "1" in "8-N-1")
        $serial->confFlowControl("none");
        $serial->deviceOpen();
       
        $command = "SW_undefined";
        //$caption = "Undefined command";
{
            if ($_GET['action'] == "SW_1")
        {
            $serial->sendMessage("m\r");
            $command = "SW_1_1";
            $image = 'onoff.png';
        }
        else
         {
            $serial->sendMessage("n\r");
            $command = "SW_1";
            $image = 'onoffred.png';          
        }
}
    $serial->deviceClose();
   }
      echo '<a href="/index.php?action=' . $command .'"><button><img src="' . $image . '" /></button></a>';

?>

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

metaforos · 20.01.2013, 23:04

Chip, ну это близко к истинне. Но вот эти "On", "Off" и т.д., должны отображаться на главной странице с кнопками. Пытался их передавать через GET - не получается. Через Cooki - получается, но через попу... И при первом входе на страницу, естественно ничего не отображается (что включено, а что нет). Еще так более-менее получается -

PHP код:


			
header('Location: index1.php?var='.$bufer);

- но данные отображаются в адресной строке...

Admin · 20.01.2013, 23:43

Нужно сделать два скрипта
1-который будет отправлять команды
2-который будет принимать массив со статусами лампочек и находится на главной странице в index

В первом скрипте прописать в конце header('Location: /buttons/index.html');
тогда после выполнения первого скрипта обновится главная html страница с кнопками, в самом начале главной страницы разместить код второго скрипта который получит статусы лампочек

metaforos · 20.01.2013, 23:59

Вот в этом и есть вся сложность. В Serial.php я прописал - header('Location: index.php');
Мой cтарый код в самом начале главной страницы -

PHP код:


			
<?php 
include "php_serial.class.php"; 
$serial = new phpSerial; 
$serial->deviceSet("/dev/ttyACM0"); 
$serial->confBaudRate(9600); 
$serial->deviceOpen(); 
usleep(2000000); 
$read = $serial->readPort(); 
print $read; 
$serial->deviceClose(); 
?>

как раз что-то подобное и пытался делать. Но ничего не получилось. А

PHP код:


			
header('Location: index.php?var='.$bufer);

хоть что-то отправляет.

20.01.2013, 23:04	#8
metaforos Member Регистрация: 17.03.2012 Адрес: Мариуполь (UA) Сообщений: 72 Вес репутации: 0	Chip, ну это близко к истинне. Но вот эти "On", "Off" и т.д., должны отображаться на главной странице с кнопками. Пытался их передавать через GET - не получается. Через Cooki - получается, но через попу... И при первом входе на страницу, естественно ничего не отображается (что включено, а что нет). Еще так более-менее получается - PHP код: `header('Location: index1.php?var='.$bufer);` - но данные отображаются в адресной строке...

20.01.2013, 23:59	#10
metaforos Member Регистрация: 17.03.2012 Адрес: Мариуполь (UA) Сообщений: 72 Вес репутации: 0	Вот в этом и есть вся сложность. В Serial.php я прописал - header('Location: index.php'); Мой cтарый код в самом начале главной страницы - PHP код: `<?php include "php_serial.class.php"; $serial = new phpSerial; $serial->deviceSet("/dev/ttyACM0"); $serial->confBaudRate(9600); $serial->deviceOpen(); usleep(2000000); $read = $serial->readPort(); print $read; $serial->deviceClose(); ?>` как раз что-то подобное и пытался делать. Но ничего не получилось. А PHP код: `header('Location: index.php?var='.$bufer);` хоть что-то отправляет.

20.01.2013, 12:04	#2
metaforos Member Регистрация: 17.03.2012 Адрес: Мариуполь (UA) Сообщений: 72 Вес репутации: 0	Chip, конечно этот код более правильный и красивый. Но и мой тоже умеет отправлять данные в Ардуинку. И получать тоже. А вот принимать и получать одновременно...

20.01.2013, 12:07	#3
Admin Administrator Регистрация: 12.04.2010 Адрес: Москва Сообщений: 9,616 Вес репутации: 9821	Добавил код который отправляет и принимает Если кому нибудь понадобится, могу выложить кнопки на CSS Выглядеть будут как на скриншоте

20.01.2013, 19:58	#4
metaforos Member Регистрация: 17.03.2012 Адрес: Мариуполь (UA) Сообщений: 72 Вес репутации: 0	Chip, я хочу реализовать следующее - одна кнопка на включение и выключение. Т.е. при нажатии, PHP отправляет в ардуину "1". Соответственно меняется состояние пина с 0 на 1 и ардуина возвращает состояние пина в PHP, который в свою очередь меняет состояние (отображение) кнопки. Это для того, чтобы открыв страницу своего дома, я сразу видел, что включено, а что нет. Я реализовывал подобное, но использовал NySQL, а сейчас хочу напрямую состояние пинов ардуины читать.

20.01.2013, 20:06	#5
Admin Administrator Регистрация: 12.04.2010 Адрес: Москва Сообщений: 9,616 Вес репутации: 9821	Код проверил? Я выложил то что ты хотел

20.01.2013, 20:27	#6
metaforos Member Регистрация: 17.03.2012 Адрес: Мариуполь (UA) Сообщений: 72 Вес репутации: 0	Только увидел. Попробую.

20.01.2013, 23:43	#9
Admin Administrator Регистрация: 12.04.2010 Адрес: Москва Сообщений: 9,616 Вес репутации: 9821	Нужно сделать два скрипта 1-который будет отправлять команды 2-который будет принимать массив со статусами лампочек и находится на главной странице в index В первом скрипте прописать в конце *header('Location: /buttons/index.html');* тогда после выполнения первого скрипта обновится главная html страница с кнопками, в самом начале главной страницы разместить код второго скрипта который получит статусы лампочек

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