Главная » Форумы » Программирование

WebServer на ардуино 2560 и ethernet контроллере W5100

128 ответов [Последнее сообщение]
Ср, 20/01/2016 - 14:51
#51
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Тогда с минимумом изменений.

Верх
Чт, 21/01/2016 - 08:56
#52
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Наступил на грабли. Checkbox передается в запросе только если он checked, иначе ничего не передается. Что бы понять, что за запрос приходится добавлять фиктивный параметр. 5 фиктивных параметров мне показалось слишком жирно. В итоге сделал одну форму, один post запрос. Вот что получилось:

#include <SPI.h>
#include <Ethernet.h>
#include "HTML.h"
#include "request.h"
#include <avr/pgmspace.h>

Crequest request;
const char PROGMEM Ok[]={\
"HTTP/1.1 200 OK\r\n"\
"Content-Type: text/html\r\n"\
"\r\n\0"\
};

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
IPAddress ip(192, 168, 1, 198);

EthernetServer server(80);
EthernetClient client;
//-------- твои переменные -----------
boolean manauto=1, light=1, filter=0, air=0, hiter=0;

void setup() 
{
  //Serial.begin(9600);
  Ethernet.begin(mac, ip);
  server.begin();
  request.init();
}

void send(const char *ptr)
{
  char c;
  while(c=pgm_read_byte(ptr++)) client.print(c);
  //здесь по хорошему символы надо в буфер собирать, а затем отправлять клиенту
}

void sendjs()
{
/*
//на стороне клиента должна получиться такая функция
function setVars()
{
 document.getElementById('manauto').checked=1;
 document.getElementById('light').checked=0;
 document.getElementById('filter').checked=0;
 document.getElementById('air').checked=0;
 document.getElementById('hiter').checked=0;
}
*/
  String s;
  client.println("function setVars(){");
  s="document.getElementById('manauto').checked="+manauto?"1;":"0;";  client.println(s);
  s="document.getElementById('light').checked="  +light?  "1;":"0;";  client.println(s);
  s="document.getElementById('filter').checked=" +filter? "1;":"0;";  client.println(s);
  s="document.getElementById('air').checked="    +air?    "1;":"0;";  client.println(s);
  s="document.getElementById('hiter').checked="  +hiter?  "1;":"0;";  client.println(s);
  client.println("}");
}

void setVars()
{
  String s=request.param();//получаю строку параметров из запроса
  manauto=(s.indexOf("manauto=on")!=-1);
  light  =(s.indexOf("light=on")  !=-1);
  filter =(s.indexOf("filter=on") !=-1);
  air    =(s.indexOf("air=on")    !=-1);
  hiter  =(s.indexOf("hiter=on")  !=-1);
}

void loop() 
{
  client = server.available();// listen for incoming clients
  if (client) 
  {
    while (client.connected())
    {
      if (client.available() && request.received(client.read()))
      {
        switch (request.type())
        {
          case GET:  send(Ok); send(html); break;
          case GETJS: send(Ok); sendjs(); break;
          case POST: setVars(); send(Ok); send(html); break;
          default: break;
        }
        break;
      }
    }
    client.stop();
    request.init();
  }
}

html.h

const char PROGMEM html[]={\
"<!DOCTYPE html>"\
"<html>"\
"<head>"\
"<style>"\
"#manauto {display: none;}"\
"[for='manauto'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='manauto']:before {"\
"  content: 'MAN';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='manauto']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#manauto:checked ~ [for='manauto']:after {"\
"  left: 65px;"\
"}"\
"#light {display: none;}"\
"[for='light'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='light']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='light']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#light:checked ~ [for='light']:after {"\
"  left: 65px;"\
"}"\
"#filter {display: none;}"\
"[for='filter'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='filter']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='filter']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#filter:checked ~ [for='filter']:after {"\
"  left: 65px;"\
"}"\
"#air {display: none;}"\
"[for='air'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='air']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='air']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#air:checked ~ [for='air']:after {"\
"  left: 65px;"\
"}"\
"#hiter {display: none;}"\
"[for='hiter'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='hiter']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='hiter']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#hiter:checked ~ [for='hiter']:after {"\
"  left: 65px;"\
"}"\
"</style>"\
"<script type='text/javascript' src='script.js'></script>"\
"</head>"\
"<body onload='setVars();'>"\
"<form method='post' action='#'>"
"<table align=left border=0 cellpadding=5 cellspacing=1 width='auto'>"\
"<tbody>"\
"<tr>"\
"<td>Режим работы</td>"\
"<td><input type='checkbox' id='manauto' name='manauto'/><label for='manauto'>AUTO</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Свет</td>"\
"<td><input type='checkbox' id='light' name='light'/><label for='light'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Фильтр</td>"\
"<td><input type='checkbox' id='filter' name='filter'/><label for='filter'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Компрессор</td>"\
"<td><input type='checkbox' id='air' name='air'/><label for='air'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Нагреватель</td>"\
"<td><input type='checkbox' id='hiter' name='hiter'/><label for='hiter'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr><td><input type='hidden' name='tmp'><input type='submit' value='Отправить'></td></tr>"
"</tbody>"\
"</table>"\
"</form>"
"</body>"\
"</html>"\
};

request.h

#define GET 1
#define GETJS 2
#define POST 3
class Crequest
{
protected:
  String s;
  byte st, reqType;
  int i, dataLen;
public:
  void init() {s=""; st=0; reqType=0; dataLen=0;}
  byte type(){return reqType;}
  String param(){return s;}
  void LookForKeyWord()
  {
    if (s.indexOf("GET / ")!=-1) reqType=GET;
    else if (s.indexOf("GET /script.js")!=-1) reqType=GETJS;
    else if (s.indexOf("POST /")!=-1) reqType=POST;
    else if (s.indexOf("Content-Length: ")!=-1) dataLen = s.substring(15).toInt();
    s="";
  }
  bool received(char c)
  {
    s+=c; //Собираю символы в строку
    switch(st)
    {
      case 0: if(c=='\r') st=1; break;//жду конец строки
      case 1: if(c=='\n') {st=2; LookForKeyWord();} break;//получена строка запроса
      case 2: if(c=='\r') st=3; else st=0; break;//жду пустую строку
      case 3: if(c=='\n') {if ((reqType==GET)||(reqType==GETJS)) return true; st=4; s=""; i=0;} break;//получен заголовок запроса
      case 4: if (++i>=dataLen) return true; break;//Получены данные POST запроса
    }
  }
};

/*
Так выглядит GET запрос. Пустая строка это конец запроса
------------------------------------------------------------------------------------------
GET / HTTP/1.1\r\n
Host: 10.0.0.20\r\n
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:19.0) Gecko/20100101 Firefox/19.0\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*;q=0.8\r\n
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3\r\n
Accept-Encoding: gzip, deflate\r\n
Connection: keep-alive\r\n
\r\n
------------------------------------------------------------------------------------------


Так выглядит POST запрос. Между заголовком и данными пустая строка. Content-Length: это длина данных.
------------------------------------------------------------------------------------------
POST /login.php HTTP/1.1\r\n
User-Agent: Opera/9.80 (Windows NT 6.1; WOW64; U; ru) Presto/2.10.229 Version/11.62\r\n
Host: yourhost.ru\r\n
Accept: *\r\n
Accept-Language: ru-RU,en\r\n
Connection: Close\r\n
Content-Length: 25\r\n
Content-Type: application/x-www-form-urlencoded\r\n
\r\n
name=value&name=value&...
------------------------------------------------------------------------------------------


На любой запрос отвечаем Ok. Ответ тоже заканчивается пустой строкой
------------------------------------------------------------------------------------------
HTTP/1.1 200 OK\r\n
Content-Type: text/html\r\n
\r\n
------------------------------------------------------------------------------------------

*/

 

Верх
Сб, 23/01/2016 - 22:31
#53
mozgolomys
Offline
Зарегистрирован: 08.01.2016

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

Верх
Пнд, 25/01/2016 - 00:22
#54
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Строчка 233 "<tr><td><input type='hidden' name='tmp'><input type='submit' value='Отправить'></td></tr>" отправдяет выбранные выше положения переключателей? Если да, то как-то не очень красиво получается.

Не работает 81 строчка switch (request.type())

 

 

Верх
Чт, 04/02/2016 - 23:16
#55
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Как эту беду отладить?

Верх
Пт, 05/02/2016 - 05:45
#56
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Медленно, но верно приходит озарение, особенно к утру. Проблема в том, что в файле request.h в строке 11 мы присваиваем reqType=0; и возвращаем в 12 строке этот ноль в type. А для 0 у нас не указан switch.

Верх
Пт, 05/02/2016 - 10:17
#57
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Цитата:
А для 0 у нас не указан switch.

0 отработается по default: break;

Но этого не должно быть, значит либо приходит запрос, которого мы не ожидали, либо мы не правильно разбираем нужный нам запрос. Вставь Serial.println(s); в функцию LookForKeyWord(). Посмотри, как выглядит запрос.

Верх
Пт, 05/02/2016 - 13:23
#58
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Не могу понять почему, но в request.h мы заходим только в 11 строку

void init() {s=""; st=0; reqType=0; dataLen=0; Serial.println("init()");}

и дальше останавливаемся.

Верх
Пт, 05/02/2016 - 14:17
#59
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Serial.begin(); не забыл раскомментировать в setup()?

Коммент #28  по-прежнему актуален.

Верх
Пт, 05/02/2016 - 16:58
#60
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Andy пишет:

Serial.begin(); не забыл раскомментировать в setup()?

Не забыл, без него монитор вообще не выводит ничего.

Andy пишет:

Коммент #28  по-прежнему актуален.

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

После выбора необходимых комбинаций кнопок и нажатия кнопки отправить, строка браузера имеет такой вид 192.168.1.198/#, на сколько я понимаю там должно передваться состояние всех кнопок.

Все же предлагаю сделать отправку состояния каждой отдельной кнопки и избавиться от лишней кнопки "передать".

Теперь можно приступать к написанию исполнительной части?

Верх
Пт, 05/02/2016 - 19:48
#61
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

mozgolomys пишет:
После выбора необходимых комбинаций кнопок и нажатия кнопки отправить, строка браузера имеет такой вид 192.168.1.198/#, на сколько я понимаю там должно передваться состояние всех кнопок.
Состояние кнопок передается POST запросом и потому не видно, если в html коде заменить POST на GET, тогда состояние кнопок можно увидеть в адресной строке.

mozgolomys пишет:
Все же предлагаю сделать отправку состояния каждой отдельной кнопки и избавиться от лишней кнопки "передать".
Я пробовал отправлять запрос по onClick, но беда в том, что если checkbox в состоянии reset, то запрос пустой и не возможно определеить от какой кнопки пришел. Приходится добавлять фиктивный параметр. Если тебя не пугает 5 фиктивных параметров, можно сделать и так.

mozgolomys пишет:
Теперь можно приступать к написанию исполнительной части?
Я думал это все уже реализовано.... сделай отдельным модулем.

 

Верх
Сб, 06/02/2016 - 19:38
#62
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Фиктивный параметр это String param(){return s;}? Для чего он нам нужен, если можно, чуть подробнее?

Andy пишет:
mozgolomys пишет:
Теперь можно приступать к написанию исполнительной части?
Я думал это все уже реализовано.... сделай отдельным модулем.

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

Верх
Сб, 06/02/2016 - 21:14
#63
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

mozgolomys пишет:
Фиктивный параметр это String param(){return s;}? Для чего он нам нужен, если можно, чуть подробнее?
Это функция возвращающая строку содержащую POST запрос. Вызывается в строке 64.

Фиктивный параметр в html коде строка 233 <input type='hidden' name='tmp'>, он передается в форме всегда, когда все чекбоксы в состоянии reset, в запросе передается только этот параметр.

Верх
Сб, 13/02/2016 - 04:40
#64
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Добавил, если я понял правильно, фиктивные параметры. Получил код следующего вида: 





#include <SPI.h>
#include <Ethernet.h>
#include "HTML.h"
#include "request.h"
#include <avr/pgmspace.h>

Crequest request;
const char PROGMEM Ok[]={\
"HTTP/1.1 200 OK\r\n"\
"Content-Type: text/html\r\n"\
"\r\n\0"\
};

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
IPAddress ip(192, 168, 1, 198);

EthernetServer server(80);
EthernetClient client;
//-------- твои переменные -----------
boolean manual=1, avto=0, lighton=0, lightoff=1, filteron=0, filteroff=1, airon=0, airoff=1, hiteron=0,hiteroff=1 ;

void setup() 
{
  Serial.begin(9600);
  Ethernet.begin(mac, ip);
  server.begin();
  request.init();
}

//void func()
//{
//// send a standard http response header
//client.println("HTTP/1.1 200 OK");
//client.println("Content-Type: text/html");
//client.println("Connection: close");
//client.println();
//// send web page
//client.println("<!DOCTYPE html>");
//client.println("<html>");
//client.println("<head>");
//client.println("<title>Arduino Web Page</title>");
//client.println("</head>");
//client.println("<body>");
//client.println("<h1>Hello from Arduino!</h1>");
//client.println("<p>A web page from the Arduino server</p>");
//client.println("</body>");
//client.println("</html>");
//}

void send(const char *ptr)
{
  char c;
  while(c=pgm_read_byte(ptr++)) client.print(c);
  //здесь по хорошему символы надо в буфер собирать, а затем отправлять клиенту
}

void sendjs()
{
/*
//на стороне клиента должна получиться такая функция
function setVars()
{
 document.getElementById('manauto').checked=1;
 document.getElementById('light').checked=0;
 document.getElementById('filter').checked=0;
 document.getElementById('air').checked=0;
 document.getElementById('hiteron').checked=0;
}
*/
  String s;
  client.println("function setVars(){");
   s="document.getElementById('manual').checked=" +manual?"1;":"0;";  client.println(s);
  s="document.getElementById('avto').checked=" +avto?"1;":"0;";  client.println(s);
  s="document.getElementById('lighton').checked="  +lighton?  "1;":"0;";  client.println(s);
  s="document.getElementById('lightoff').checked="  +lightoff?  "0;":"1;";  client.println(s);
  s="document.getElementById('filteron').checked=" +filteron? "1;":"0;";  client.println(s);
  s="document.getElementById('filteroff').checked=" +filteroff? "0;":"1;";  client.println(s);
  s="document.getElementById('airon').checked="    +airon?    "1;":"0;";  client.println(s);
  s="document.getElementById('airoff').checked="    +airoff?    "0;":"1;";  client.println(s);
  s="document.getElementById('hiteron').checked="  +hiteron?  "1;":"0;";  client.println(s);
  s="document.getElementById('hiteroff').checked="  +hiteroff?  "0;":"1;";  client.println(s);
  client.println("}");
}

void setVars()
{
  String s=request.param();//получаю строку параметров из запроса
  manual=(s.indexOf("manual=on")!=-1);
  avto=(s.indexOf("avto=on")!=-1);
  lighton  =(s.indexOf("lighton=on")  !=-1);
  lightoff  =(s.indexOf("lightoff=on")  !=-1);
  filteron =(s.indexOf("filteron=on") !=-1);
  filteroff =(s.indexOf("filteroff=on") !=-1);
  airon    =(s.indexOf("airon=on")    !=-1);
  airoff    =(s.indexOf("airoff=on")    !=-1);
  hiteron  =(s.indexOf("hiteron=on")  !=-1);
  hiteroff  =(s.indexOf("hiteroff=on")  !=-1);
 Serial.println(s);
}

void loop() 
{
  client = server.available();// listen for incoming clients
  if (client) 
  {
    while (client.connected())
    {
      if (client.available() && request.received(client.read()))
      {
        switch (request.type())
        {
          case GET:  send(Ok); send(html); break;
          case GETJS: send(Ok); sendjs(); break;
          case POST: setVars(); send(Ok); send(html); break;
          default: break;
        }
        break;
      }
    }
    client.stop();
    request.init();
  }
  
}

html:





const char PROGMEM html[]={\
"<!DOCTYPE html>"\
"<html>"\
"<head>"\
"<meta http-equiv='Content-Type' content='text/html; refresh content=10; charset=utf-8' /> "\
"<style>"\
"#manual {display: none;}"\
"[for='manual'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='manual']:before {"\
"  content: 'MAN';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='manual']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#manual:checked ~ [for='manual']:after {"\
"  left: 65px;"\
"}"\
"#lighton {display: none;}"\
"[for='lighton'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='lighton']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='lighton']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#lighton:checked ~ [for='lighton']:after {"\
"  left: 65px;"\
"}"\
"#filteron {display: none;}"\
"[for='filteron'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='filteron']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='filteron']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#filteron:checked ~ [for='filteron']:after {"\
"  left: 65px;"\
"}"\
"#airon {display: none;}"\
"[for='airon'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='airon']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='airon']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#airon:checked ~ [for='airon']:after {"\
"  left: 65px;"\
"}"\
"#hiteron {display: none;}"\
"[for='hiteron'] {"\
"  position: relative;"\
"  display: block;"\
"  width: 95px;"\
"  height: 10px;"\
"  padding: 15px;"\
"  border-radius: 50px;"\
"  line-height: 10px;"\
"  color: #00FF22;"\
"  text-shadow: 1px 1px 0px rgba(255,255,255,.15);"\
"  background: rgb(71, 71, 71);"\
"  box-shadow:"\
"       0 1px 0 rgba(255,255,255,.2),"\
"       inset 0 0 0 5px rgb(60, 60, 60),"\
"       inset 0 6px 6px rgba(0,0,0,.5),"\
"       inset 0 -6px 1px rgba(255,255,255,.2);"\
"  cursor: pointer;"\
"}"\
"[for='hiteron']:before {"\
"  content: 'OFF';"\
"  position: absolute;"\
"  right: 15px;"\
"  color: #FF0000;"\
"}"\
"[for='hiteron']:after {"\
"  content: '';"\
"  position: absolute;"\
"  left: 5px; top: 5px;"\
"  display: block;"\
"  width: 55px;"\
"  height: 30px;"\
"  border-radius: 50px;"\
"  background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
"  transition: .5s;"\
"}"\
"#hiteron:checked ~ [for='hiteron']:after {"\
"  left: 65px;"\
"}"\
"</style>"\
"<script type='text/javascript' src='script.js'></script>"\
"</head>"\
"<body onload='setVars();'>"\
"<form method='post' action='#'>"
"<table align=left border=0 cellpadding=5 cellspacing=1 width='auto'>"\
"<tbody>"\
"<tr>"\
"<td>Режим работы</td>"\
"<td><input type='checkbox' id='manual' name='manual' onClick='this.form.submit()'/><label for='manual'>AUTO</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Свет</td>"\
"<td><input type='checkbox' id='lighton' name='lighton' onClick='this.form.submit()'/><label for='lighton'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Фильтр</td>"\
"<td><input type='checkbox' id='filteron' name='filteron' onClick='this.form.submit()'/><label for='filteron'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Компрессор</td>"\
"<td><input type='checkbox' id='airon' name='airon' onClick='this.form.submit()'/><label for='airon'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"<tr>"\
"<td>Нагреватель</td>"\
"<td><input type='checkbox' id='hiteron' name='hiteron' onClick='this.form.submit()'/><label for='hiteron'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\

"</tbody>"\
"</table>"\
"</form>"
"</body>"\
"</html>"\
};

 

Проблема в том, что в мониторе порта вижу отклик на действие кнопок manual=on, но в теле html не получается написать условие типа:



if (manual==1){
[for='manauto']:after;
}else{
[for='manauto']:before;
}

 

Выдает ошибку и просит поставить { перед if. Может быть это надо как-то по другому записать.

Т.е. при нажатии на кнопку режим работы, кнопка после обновления страницы, возвращается в исходное состояние. А мне нужно что бы после обновления страницы состояния других кнопок не менялось. А той, которая вызвала обновление - изменилось. Наверное как-то сумбурно получилось.

Верх
Сб, 13/02/2016 - 12:19
#65
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

mozgolomys пишет:
Выдает ошибку и просит поставить { перед if. Может быть это надо как-то по другому записать.
Не пойму, где ты хочешь это реализовать, если в стилях, то CSS не поддерживает if/else, если в скриптах, то к стилям надо по другому обращаться.

В нашей реализации состоянием переключателей управляет javascript, а он исполняется после полной загрузки html страницы. Поэтому при каждой перезагрузке страницы, мы будем видеть сначала исходное состояние переключателей, а затем после выполнения скрипта - их реальное состояние. Если не нравится эта перерисовка, тогда надо либо модифицировать html на лету, либо перенести форму в iFrame, либо использовать ajax запросы.

Верх
Сб, 13/02/2016 - 23:14
#66
mozgolomys
Offline
Зарегистрирован: 08.01.2016

У меня другая проблема. Мне не очень нравится реализация передачи состояния всех кнопок, отдельной кнопкой. Мы по этому поводу говорили выше. Я ввел состояние кнопок manual/avto, filteron/filteroff, airon/airoff и т.д. Но для того, что бы передать состояние кнопки после изменения ее значения, я добавил перезагрузку страницы

"<td><input type='checkbox' id='manual' name='manual' onClick='this.form.submit()'/><label for='manual'>AUTO</label></td>"\

И состояние кнопок перестало фиксироваться. Мне нужно как-то добавить условие, если manual==1 то переключить переключатель в состояние manual, если manual==0, то переключатель должен быть в режиме avto.

Верх
Вс, 14/02/2016 - 13:28
#67
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Давай по шагам. Положи html файл на локальный диск. Измени <form method="get", что бы видеть запросы прямо в адресной строке. Открой его в браузере. Нажимай на кнопки, форма должна отправляться при нажатии на любую кнопку, в зависимости от кнопки, в адресной строке должно появляться, что-то вроде этого:

file:///C:/HTML/filename.html?manauto=on

Страница обновляется, но состояние кнопок пока исходное. Верни <form method="post". Перенеси html в проект. Теперь браузером обращайся к дуине. Смотри, как она отрабатывает manauto=on, как генерит javascript, появляется ли в скрипте: document.getElementById('manauto').checked=1; как браузер исполняет этот скрипт, меняется ли состояние переключателя после исполнения скрипта.

Верх
Вс, 14/02/2016 - 17:44
#68
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Понял, проблема вот в чем:
"<td><input type='checkbox' id='manual' name='manual' onClick='this.form.submit()'/><label for='manual'>AUTO</label></td>"\

Я нажимаю на кнопку и получаю в serial monitor - manual=on, нажимаю еще раз и снова получаю то же самое. Нужно как-то в html написать условие, что если нажали на переключатель, то manual=on, а если еще раз нажали на переключатель, то avto=on. И что бы на экране положение кнопки менялось.

Нашел такое условие для html:

<!--#if expr="УСЛОВИЕ1" -->
   HTML-код, который будет выводиться, 
       если УСЛОВИЕ1 истинно
<!--#elif expr="УСЛОВИЕ2" -->
   HTML-код, который будет выводиться, 
       если УСЛОВИЕ1 ложно, 
	   а УСЛОВИЕ2 истинно
<!--#else -->
   HTML-код, который будет выводиться, 
       если все условия ложны
<!--#endif -->

Но компилятор выдает ошибки, то на #, то просит какую-то {, хотя все есть. Наверное что-то в написании.

 

 

Верх
Вс, 14/02/2016 - 18:19
#69
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Что-то я не понимаю, как должна быть связана работа html кнопки и передача post запроса, т.к. у нас кнопка перемещается (визуально меняет состояние), только из-за того что работает css селектор, который визуально перемещает кнопку на заданную координату. Т.е. физически не происходит отправка post запроса.

Но если я ставлю onClick='this.form.submit()', обновление html странички после нажатия кнопки, то страничка перерисовывается и стиль кнопки возвращается в исходную позицию, но post запрос отправляется.

Хочу что бы при перемещении кнопки, она оставалась в этом положении до следующего нажатия, и соответственно отправлялся post запрос.

 

Верх
Вс, 14/02/2016 - 20:50
#70
uni
uni аватар
Offline
Зарегистрирован: 24.09.2015

Я бы прислушался к советам товарищей выше и копал в сторону ajax. Работу с формами выкинуть на помойку. Для отладки использовать консоль браузера, сниффер и терминал. Я бы в качестве протокола использовал json, так как он встроен в java script, а для мк можно использовать jsmn для парсинга. Ещё бы рекомендовал использовать отладчик, но всё это сложные материи, а вы хотите всё сразу.

Верх
Вс, 14/02/2016 - 21:31
#71
mozgolomys
Offline
Зарегистрирован: 08.01.2016

uni пишет:
Ещё бы рекомендовал использовать отладчик, но всё это сложные материи, а вы хотите всё сразу.

С этого момента по подробнее. Какой?

Верх
Вс, 14/02/2016 - 21:45
#72
uni
uni аватар
Offline
Зарегистрирован: 24.09.2015

Есть один, но нужна целая статья, чтобы описать как им пользоваться. Я помаленьку кропаю её и хочу выложить на хабре. Времени нету всё обстоятельно расписать. Если вкратце, то про отладку скетчей можно прочитать тут. Я сейчас примерно тем же занимаюсь, но у меня есть отладчик. Только я хочу использовать ajax и json, т.к. мне с ними удобнее.

Верх
Вс, 14/02/2016 - 21:56
#73
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Отладка идет путем вывода данных в sirial monitor?

Верх
Вс, 14/02/2016 - 22:05
#74
uni
uni аватар
Offline
Зарегистрирован: 24.09.2015

Ардуинщикам трудно представить, что можно остановить выполнение программы, просмотреть всю карту регистров мк, поставить точки останова или пройтись пошагово по ассемблерному листингу. Это всё стандартные средства разработки, которые оказались за бортом из-за целей максимального упрощения работы с Arduino.

Верх
Вс, 14/02/2016 - 22:13
#75
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

mozgolomys пишет:
Что-то я не понимаю, как должна быть связана работа html кнопки и передача post запроса, т.к. у нас кнопка перемещается (визуально меняет состояние), только из-за того что работает css селектор, который визуально перемещает кнопку на заданную координату. Т.е. физически не происходит отправка post запроса.

Но если я ставлю onClick='this.form.submit()', обновление html странички после нажатия кнопки, то страничка перерисовывается и стиль кнопки возвращается в исходную позицию, но post запрос отправляется.

Хочу что бы при перемещении кнопки, она оставалась в этом положении до следующего нажатия, и соответственно отправлялся post запрос.

Есть объект checkbox у него два стиля checked и nonchecked. Стили просто отображают состояние объекта, они не вызывают отправку форм. Объекту на событие onclick навешивается обработчик, вот он и отправляет форму. Дуине отправляется post запрос с состояниями переключателей. Затем get запрос на обновление страницы и get запрос на получение script.js. Когда страничка загрузится выполнится скрипт, который установит переключатели в нужное состояние.

Если этого не происходит, значит где-то в этой последовательность есть ошибка.

Верх
Вс, 14/02/2016 - 23:22
#76
mozgolomys
Offline
Зарегистрирован: 08.01.2016

1. Т.е. onClick='this.form.submit()', это лишнее?

2  checkbox у него два стиля checked и nonchecked, можете ткнуть в какой строчке checkbox - стиль checked, а в какой nonchecked.

Верх
Пнд, 15/02/2016 - 10:06
#77
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

mozgolomys пишет:
1. Т.е. onClick='this.form.submit()', это лишнее?

Это и есть обработчик события onClick, именно он отправляет форму.

mozgolomys пишет:
2  checkbox у него два стиля checked и nonchecked, можете ткнуть в какой строчке checkbox - стиль checked, а в какой nonchecked.

:checked задает различия между стилями.

Верх
Пнд, 15/02/2016 - 14:48
#78
mozgolomys
Offline
Зарегистрирован: 08.01.2016

За визуальное перемещение переключателя на странице браузера, отвечает селектор css:
"[for='lighton']:before {"\
" content: 'OFF';"\
" position: absolute;"\
" right: 15px;"\
" color: #FF0000;"\
"}"\
"[for='lighton']:after {"\
" content: '';"\
" position: absolute;"\
" left: 5px; top: 5px;"\
" display: block;"\
" width: 55px;"\
" height: 30px;"\
" border-radius: 50px;"\
" background: #ccc linear-gradient(#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);"\
" transition: .5s;"\
"}"\
"#lighton:checked ~ [for='lighton']:after {"\
" left: 65px;"\
"}"\

Отправка данных case POST: setVars(); send(Ok); send(html); break;
В sirial monitor для случая с использованием onClick='this.form.submit()':
lighton=on
reqType=GETJS
1;
1;
Если убрать onClick='this.form.submit()', никакой отправки данных не происходит.
В живую можно пощелкать http://ackvarium.ddns.net/.
Режим работы - без onClick='this.form.submit()'.
Свет и т.д. - с onClick='this.form.submit()'.

Проблема в том, что мы нажали на кнопочку на форме, отправили в контроллер значение lighton=on, селектор css переключил визуально положение кнопки, но после перезагрузки страницы onClick='this.form.submit()', селектор css возвращается в исходную позицию.

ВОПРОС: как узнает селектор css, в каком положении должен быть переключатель?

Верх
Пнд, 15/02/2016 - 15:53
#79
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

После перезагрузки страницы также загружается script.js, вот он и должен устанавливть чекбоксы в нужное состояние, а CSS просто это отображает. Сейчас в скрипте у тебя:

function setVars(){
1;
1;
1;
0;
1;
0;
1;
0;
1;
0;
}

А должно быть:

function setVars()
{
 document.getElementById('manauto').checked=1;
 document.getElementById('light').checked=0;
 document.getElementById('filter').checked=0;
 document.getElementById('air').checked=0;
 document.getElementById('hiter').checked=0;
}

 

Верх
Пнд, 15/02/2016 - 16:07
#80
mozgolomys
Offline
Зарегистрирован: 08.01.2016

так получается надо разкоментить это?
/*
//на стороне клиента должна получиться такая функция
function setVars()
{
document.getElementById('manauto').checked=1;
document.getElementById('light').checked=0;
document.getElementById('filter').checked=0;
document.getElementById('air').checked=0;
document.getElementById('hiteron').checked=0;
}
*/

Верх
Пнд, 15/02/2016 - 16:35
#81
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

В дуине такой код:

  client.println("function setVars(){");
  s="document.getElementById('manauto').checked="+manauto?"1;":"0;";  client.println(s);
  s="document.getElementById('light').checked="  +light?  "1;":"0;";  client.println(s);
  s="document.getElementById('filter').checked=" +filter? "1;":"0;";  client.println(s);
  s="document.getElementById('air').checked="    +air?    "1;":"0;";  client.println(s);
  s="document.getElementById('hiter').checked="  +hiter?  "1;":"0;";  client.println(s);
  client.println("}");

В результате его работы браузер клиента  должен получить такой скрипт:

function setVars()
{
 document.getElementById('manauto').checked=1;
 document.getElementById('light').checked=0;
 document.getElementById('filter').checked=0;
 document.getElementById('air').checked=0;
 document.getElementById('hiter').checked=0;
}

 

Верх
Пнд, 15/02/2016 - 16:36
#82
mozgolomys
Offline
Зарегистрирован: 08.01.2016

но получаем ошибку: function и document. Добавьте пожалуста не много больше букв.
script.js передаст в html, что checkbox - checked или nonchecked?

Верх
Пнд, 15/02/2016 - 16:41
#83
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Как посмотреть, получит ли браузер этот скрипт?

Верх
Пнд, 15/02/2016 - 17:03
#84
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

функция document.getElementById('manauto').checked=1; найдет в теле html тег с id='manauto', это в нашем случае:

<input type="checkbox" id="manauto" name="manauto" onClick='this.form.submit();'/>

и установит его в checked. А CSS это отобразит. Аналогично поступят остальные функции скрипта со своими тегами.

Цитата:
Как посмотреть, получит ли браузер этот скрипт?
В отладчике браузера или "Исходный код страницы".

Цитата:
но получаем ошибку: function и document.
в браузере?

Верх
Пнд, 15/02/2016 - 17:10
#85
mozgolomys
Offline
Зарегистрирован: 08.01.2016

в исходном коде:

<script type='text/javascript' src='script.js'></script>
</head>
<body onload='setVars();'><form method='post' action='#'>
<table align=left border=0 cellpadding=5 cellspacing=1 width='auto'><tbody>
<tr><
td>Режим работы</td>
<td><input type='checkbox' id='manual' name='avto' onClick='this.form.submit()'/><label for='manual'>AUTO</label></td>
<td>Feedback</td>
</tr><tr>
<td>Свет</td>
<td><input type='checkbox' id='lighton' name='lighton' onClick='this.form.submit()'/><label for='lighton'>ON</label></td>
<td>Feedback</td></tr>
<tr><td>Фильтр</td><td><input type='checkbox' id='filteron' name='filteron' onClick='this.form.submit()'/><label for='filteron'>ON</label></td>
<td>Feedback</td></tr>
<tr><td>Компрессор</td>
<td><input type='checkbox' id='airon' name='airon' onClick='this.form.submit()'/><label for='airon'>ON</label></td>
<td>Feedback</td></tr>
<tr><td>Нагреватель</td>
<td><input type='checkbox' id='hiteron' name='hiteron' onClick='this.form.submit()'/><label for='hiteron'>ON</label></td><td>Feedback</td></tr>
</tbody></table></form></body></html>

Верх
Пнд, 15/02/2016 - 17:16
#86
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Исходный код выглядит так:

<script type='text/javascript' src='script.js'></script>

script.js можно кликнуть и увидеть его содержимое, разве нет?

Верх
Пнд, 15/02/2016 - 17:19
#87
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Andy пишет:

Исходный код выглядит так:

<script type='text/javascript' src='script.js'></script>

script.js можно кликнуть и увидеть его содержимое, разве нет?

В исходном коде в опере так не получится, т.к. он в текстовом формате. Это нужно opera dragonfly, попробую запустить.

Верх
Пнд, 15/02/2016 - 17:22
#88
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

можно в адресной строке набрать http://ackvarium.ddns.net/script.js

Верх
Пнд, 15/02/2016 - 17:28
#89
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Спасибо, получилось function setVars(){ 1; 1; 1; 0; 1; 0; 1; 0; 1; 0; }

Верх
Пнд, 15/02/2016 - 22:42
#90
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Вот это не работает:

s="document.getElementById('manual').checked=" +manual? "1;":"0;";
s="document.getElementById('avto').checked=" +avto?"1;":"0;";

Получаем:

1;

1;

Пробовал так:

s="document.getElementById('manual').checked=" ;
s="document.getElementById('avto').checked=" ;

получалось:

document.getElementById('manual').checked=

Пробовал так:

s="document.getElementById('manual').checked=" "1;"

получилось:

document.getElementById('manual').checked=1;

Переключатель - переключается. Но назад визуально возвращается, а запроса не приходит.

Верх
Пнд, 15/02/2016 - 23:10
#91
mozgolomys
Offline
Зарегистрирован: 08.01.2016

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

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

 

Верх
Втр, 16/02/2016 - 11:19
#92
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Цитата:

Вот это не работает:

1 s="document.getElementById('manual').checked=" +manual? "1;":"0;";

а если так:

s="document.getElementById('manual').checked="; if(manual) s+="1;"; else s+="0;";

в крайнем случае так:

client.print("document.getElementById('manual').checked="); if(manual) client.println("1;") else client.println("0;");

Верх
Втр, 16/02/2016 - 12:09
#93
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Первый вариант заработал

document.getElementById('manual').checked=1;
document.getElementById('avto').checked=0;
document.getElementById('lighton').checked=0;
document.getElementById('lightoff').checked=0;
document.getElementById('filteron').checked=1;
document.getElementById('filteroff').checked=0;
document.getElementById('airon').checked=0;
document.getElementById('airoff').checked=0;
document.getElementById('hiteron').checked=0;
document.getElementById('hiteroff').checked=0;

Затем я нажимаю на перемещение кнопки, отправляется Post запрос и все, странича грузится бесконечно. Это из-за того, что мне нужно как-то указать, что nonchecked =avto.

Верх
Втр, 16/02/2016 - 13:37
#94
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Цитата:
отправляется Post запрос и все, странича грузится бесконечно.
Разница между GET и POST только в вызове функции setVars(); в ней застревает что ли?... если GET работает, а POST нет.

          case GET:  send(Ok); send(html); break;
          case POST: setVars(); send(Ok); send(html); break;

В дуине добавлены переменные: avto, lightoff, filteroff, airoff, hiteroff.
А в html коде их нет. Похоже это те самые 5 фиктивных параметров, значит ты не понял мою идею. Я имел в виду, если форм больше одной и в них только чекбоксы то, что бы различить пустые запросы от разных форм нужно добавлять в формы фиктивные параметры. У нас только одна форма, значит пустой запрос означает все чекбоксы в состоянии nonchecked.

Еще одна мысль: анимация теряет смысл если страница обновляется сразу по клику.

Верх
Ср, 17/02/2016 - 02:20
#95
mozgolomys
Offline
Зарегистрирован: 08.01.2016

Мы вернулись к тому, с чего начали пару дней назад. Меня не устраивает отправка состояния переключателей отдельной кнопкой. , на что мы договорились добавить фиктивные параметры, а это значит, что каждая кнопка - это отдельная форма. Т.о. html будет выглядеть:

"<body onload='setVars();'>"\
"<table align=left border=0 cellpadding=5 cellspacing=1 width='auto'>"\
"<tbody>"\
"<form method='post' action='#'>"
"<tr>"\
"<td>Режим работы</td>"\
"<td><input type='checkbox' id='manual' name='avto'/><label for='manual'>AUTO</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

"<form method='post' action='#'>"
"<tr>"\
"<td>Свет</td>"\
"<td><input type='checkbox' id='lighton' name='lighton' /><label for='lighton'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

"<form method='post' action='#'>"
"<tr>"\
"<td>Фильтр</td>"\
"<td><input type='checkbox' id='filteron' name='filteron'/><label for='filteron'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

"<form method='post' action='#'>"
"<tr>"\
"<td>Компрессор</td>"\
"<td><input type='checkbox' id='airon' name='airon'/><label for='airon'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

"<form method='post' action='#'>"
"<tr>"\
"<td>Нагреватель</td>"\
"<td><input type='checkbox' id='hiteron' name='hiteron'/><label for='hiteron'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"
"</tbody>"\
"</table>"\
"</body>"\

1) Где необходимо установить фиктивный параметр?

2) Согласен с вашей мудрой мыслью, но не понимаю как должна обовляться страница.

Верх
Ср, 17/02/2016 - 10:21
#96
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

В html

"<form method='post' action='#'>"
"<tr>"\
"<td>Свет</td>"\
"<td><input type='checkbox' id='lighton' name='lighton' />
<input type='hidden' name='lightfrm'>
<label for='lighton'>ON</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

Аналогично во все формы надо добавить hidden параметр со своим именем.

В дуине

void setVars()
{
  String s=request.param();//получаю строку параметров из запроса
  if (s.indexOf("lightfrm")!=-1) //если в запросе присутствует параметр lightfrm
  {//значит запрос от формы Свет
    if (s.indexOf("lighton")!=-1) lighton=true; //если есть lighton значит чекбокс checked
    else lighton=false;//иначе nonchecked
  }
...//аналогично для других запросов
}

 

Верх
Чт, 18/02/2016 - 22:42
#97
mozgolomys
Offline
Зарегистрирован: 08.01.2016

После загрузки в первый раз страницы, получаю:

document.getElementById('manauto').checked=1;
document.getElementById('manautofrm').checked=0;
document.getElementById('light').checked=0;
document.getElementById('lightfrm').checked=1;
document.getElementById('filter').checked=0;
document.getElementById('filterfrm').checked=1;
document.getElementById('air').checked=0;
document.getElementById('airfrm').checked=1;
document.getElementById('hiter').checked=0;
document.getElementById('hiterfrm').checked=1;

Перемещение переключателей по прежнему ничего не меняет, sirial monitor молчит.

Судя по:

Andy пишет:

Дуине отправляется post запрос с состояниями переключателей. Затем get запрос на обновление страницы и get запрос на получение script.js. Когда страничка загрузится выполнится скрипт, который установит переключатели в нужное состояние.

После изменения состояния переключателя, необходимо отправить GET запрос на обновление страницы?

Но с другой стороны, у нас должен отправляться POST запрос, после изменения состояния переключателя, а это не происходит.

Значит у нас какая-то проблема с отправкой POST запроса здесь:

"<form method='post' action='#'>"
"<tr>"\
"<td>Режим работы</td>"\
"<td><input type='checkbox' id='manauto' name='manauto'/><input type='hidden' name='manauto'><label for='manauto'>AUTO</label></td>"\
"<td>Feedback</td>"\
"</tr>"\
"</form>"

 

Верх
Пт, 19/02/2016 - 10:58
#98
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Цитата:
Значит у нас какая-то проблема с отправкой POST запроса здесь:
Нет обработчика onClick. Имена inputам лучше дать разные иначе запрос будет выглядеть так: manauto=on&manauto=. Придется "мух от котлет отделять".

Верх
Пт, 19/02/2016 - 15:33
#99
mozgolomys
Offline
Зарегистрирован: 08.01.2016

В обработчик запихать отправку POST запроса?

"Имена inputам лучше дать разные иначе запрос будет выглядеть так: manauto=on&manauto=." Такого не должно быть, т.к. manauto или =on или nonchecked. Или я опять что-то не понимаю?

 

Верх
Пт, 19/02/2016 - 15:48
#100
Andy
Andy аватар
Offline
Зарегистрирован: 01.01.2016

Мы же хотим по клику отправлять форму, значит надо onClick='this.form.submit();'

Поскольку поля имеют одинаковые имена, получим такие запросы:

manauto=on&manauto= 

или

manauto=

В первом случае состояние чекбокса передается т.к. он checked, во втором случае не передается, потому что nonchecked. В принципе эти запросы можно разобрать так:

void setVars()
{
  String s=request.param();//получаю строку параметров из запроса
  if (s.indexOf("manauto")!=-1) //если в запросе присутствует параметр manauto
  {//значит запрос от формы manauto
    if (s.indexOf("manauto=on")!=-1) manauto=true; //если есть "manauto=on" значит чекбокс checked
    else manauto=false;//иначе nonchecked
  }
...//аналогично для других запросов
}

 

Верх