Arduino и Ethernet Shield W5100
|
|
|
Администратор
2015-12-08 16:13 #1
Arduino и Ethernet Shield W5100 обсуждение цикла статей.
Часть 1 - Начало проекта. Часть 2 - Добавлено динамическое обновление данных и работа с SD картой. Часть 3 - Добавлено оформление страницы. Часть 4 - Добавлено управление реле. Часть 5 - Добавлен регулятор мощности нагрузки в виде ползунка. NEW!!! Часть 6 - Реализация включения реле по таймеру
Профиль
|
|
|
ilnar
2016-01-13 16:35 #61
Цитата toto123 ( ) Скиньте этот фйл посмотреть. Все пытаюсь файл скинуть...:)
Код <html>
<head> <meta http-equiv='content-type' content='text/html; charset=UTF-8'> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <title>Данные с датчиков</title> <link type="text/css" rel="StyleSheet" href="/my.css" /> <script> function GetFlameState() { nocache = "&nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { var arrayOfStrings = this.responseText.split(":");
document.getElementById("flame_txt").innerHTML = arrayOfStrings[0]; document.getElementById("tempv_txt").innerHTML = arrayOfStrings[1]; document.getElementById("humid_txt").innerHTML = arrayOfStrings[2]; for(var i = 1 ; i < 5 ; i++) if(arrayOfStrings[2+i] == "1") document.getElementById("led_"+i).setAttribute("class","button_enabled"); else document.getElementById("led_"+i).setAttribute("class","button_disabled"); } } } } request.open("GET", "ajax_flame" + nocache, true); request.send(null); setTimeout('GetFlameState()', 1000); } function onClick(pin){ var request = new XMLHttpRequest(); request.open("GET", "\setpin?pin=" + pin, false); request.send(null); } </script>
</head>
<body onload="GetFlameState()"> <div class="form"> <h2>Arduino WEB контроль</h2> <hr noshade size="1px" color="white"> <table align="center"> <tr> <td><img src='flame.png' /></td> <td valign="center">Датчик газа</td> <td><span id="flame_txt"> 0</span></td> </tr>
<tr> <td><img src='temp.png' /></td> <td valign="center">Температура внутри</td> <td><span id="tempv_txt">0</span> °C</td> </tr>
<tr> <td><img src='temp.png' /></td> <td valign="center">Температура снаружи</td> <td><span id="temps_txt">0</span> °C</td> </tr>
<tr> <td><img src='humid.png' /></td> <td valign="center">Влажность</td> <td><span id="humid_txt">0</span> %</td> </tr>
<tr> <td><img src='press.png' /></td> <td valign="center">Давление</td> <td><span id="press_txt">0</span> мм</td> </tr> </table> <br> <center> <button type="button" id="led_1" class="button_disabled" onClick="onClick(1)">Реле №1</button> <button type="button" id="led_2" class="button_disabled" onClick="onClick(2)">Реле №2</button> <button type="button" id="led_3" class="button_disabled" onClick="onClick(3)">Реле №3</button> <button type="button" id="led_4" class="button_disabled" onClick="onClick(4)">Реле №4</button> </center> </div> </Body> </html>
Профиль
|
|
|
AspiD
2016-01-13 21:28 #62
Цитата ilnar ( ) Все пытаюсь файл скинуть...:) очевидно, что температура снаружи и давление не выводятся =))
Профиль
|
|
|
ilnar
2016-01-13 21:39 #63
Цитата AspiD ( ) очевидно, что температура снаружи и давление не выводятся =)) Датчик dht22 пока не подключен, он для наружной температуры и влажности.Подключен только bmp185.
Профиль
|
|
|
AspiD
2016-01-13 22:09 #64
Цитата ilnar249Цитата Датчик dht22 пока не подключен, он для наружной температуры и влажности.Подключен только bmp185. так с чем проблема на данном этапе?
Профиль
|
|
|
ilnar
2016-01-13 22:28 #65
Цитата AspiD ( ) так с чем проблема на данном этапе? с давлением разберусь,надеюсь :), только непонятно откуда идут данные показания датчика дыма.
Профиль
|
|
|
toto123
2016-01-13 22:47 #66
Цитата ilnar ( ) Код <tr> <td><img src='flame.png' /></td> <td valign="center">Датчик газа</td> <td><span id="flame_txt"> 0</span></td> </tr>
удалите вот это в Вашем index.htm и не будет никакого газа. Не забудьте массив в начале файла поправить и цикл. Скачайте на второй страничке нашей темы файлик 3_temp.zip (Я выкладывал) Там всё рабочее, посравнивайте мой htm со своим и всё поправите. Если не поймете - пишите...
Добавлено (2016-01-13, 22:47) ---------------------------------------------
Код document.getElementById("flame_txt").innerHTML = arrayOfStrings[0]; document.getElementById("tempv_txt").innerHTML = arrayOfStrings[1]; document.getElementById("humid_txt").innerHTML = arrayOfStrings[2]; for(var i = 1 ; i < 5 ; i++) if(arrayOfStrings[2+i] == "1")
тут не забудьте всё поправить....
Добавлено (2016-01-13, 22:47) --------------------------------------------- тогда и кнопки зеленеть будут где положено
Профиль
|
|
|
ilnar
2016-01-13 22:53 #67
toto123 , спасибо. Сейчас займемся.
Профиль
|
|
|
toto123
2016-01-13 22:56 #68
С удовольствием пообщался бы с Вами ещё, но в нашем поясе уже 2 ночи - спать охота...
Профиль
|
|
|
AspiD
2016-01-13 23:03 #69
Цитата ilnar ( ) непонятно откуда данные грузятся динамически без обновления странички. происходит это так: скрипт в браузере каждую секунду отправляет запрос серверу. сервер собирает данные с датчиков и формирует строку ответа. затем строка отправляется по сети в браузер клиента. и скрипт эту строку разбирает на показания отдельных датчиков и выводит на страничку. вот этот код формирует ответную строку:
Код if (StrContains(HTTP_req, "ajax_flame")) { sendBaseAnswer(client); int smoke_gas = 0; //пин на котором подключен MQ-2 int sensorReading = analogRead(smoke_gas); int chk; chk = DHT.read(DHT11_PIN); client.print(sensorReading); client.print(":"); client.print(DHT.temperature); client.print(":"); client.print(DHT.humidity); client.print(":"); client.print((digitalRead(2)) ? "1" : "0"); client.print(":"); client.print((digitalRead(3)) ? "1" : "0"); client.print(":"); client.print((digitalRead(5)) ? "1" : "0"); client.print(":"); client.print((digitalRead(6)) ? "1" : "0"); client.print(":"); client.print(pin5); }
а вот этот эту строку разбирает и выводит на сайт:
Код if (this.responseText != null) { var arrayOfStrings = this.responseText.split(":"); document.getElementById("flame_txt").innerHTML = arrayOfStrings[0]; document.getElementById("temp_txt").innerHTML = arrayOfStrings[1]; document.getElementById("humid_txt").innerHTML = arrayOfStrings[2]; for(var i = 1 ; i < 5 ; i++) if(arrayOfStrings[2+i] == "1") document.getElementById("led_"+i).setAttribute("class","button_enabled"); else document.getElementById("led_"+i).setAttribute("class","button_disabled"); }
параметры передаются через ":" порядок параметров один и тот же
Профиль
|
|
|
ilnar
2016-01-13 23:07 #70
Цитата toto123 ( ) С удовольствием пообщался бы с Вами ещё, но в нашем поясе уже 2 ночи - спать охота... Спасибо за помощь.
Добавлено (2016-01-13, 23:07) --------------------------------------------- AspiD , спасибо за подсказку. Если на а.0 MQ-2 не подключен все равно на сайте где датчик дыма будут показания?
Профиль
|
|
|
AspiD
2016-01-14 00:04 #71
меняются только показания датчиков. если какие-то показания не обновляются, то на страничке остаётся начальное значение. Код <tr> <td><img src='temp.png' /></td> <td valign="center">Температура внутри</td> <td><span id="tempv_txt">0</span> °C</td> </tr>
- это код отвечающий за одну строку. в этой строке 3 колонки. 1 - картинка temp.png, 2 - надпись "температура внутри". 3 - значение. колонка значения состоит из Код "<span id="tempv_txt">0</span>" и "°C"
что такое °C объяснять не нужно, я думаю =)) а вот первая часть - это мы "помечаем" место на страничке, чтобы из скрипта можно было обратиться к tempv_txt и изменить текст внутри. например так: document.getElementById("tempv_txt").innerHTML = "чё-нить";
Профиль
|
|
|
toto123
2016-01-14 19:50 #72
Спасибо AspiD за подробное обьяснение. Для меня тоже сложновато доходит взаимодействия связки прошивка-htm-джаваскрипт-ajax-CSS. Не сможете дать подсказку , как попытаться сделать авторизацию, хотя бы банальную, например внедрив в действующий проект вот это:
Профиль
|
|
|
toto123
2016-01-14 20:07 #73
Ниже файл с раширением HTM.Добавлено (2016-01-14, 20:07) --------------------------------------------- Вот думаю его внедрять в действующий файл index.htm (где нибудь в начале) - тормозить его если пароль неверный и продолжать работу основной части файла, если пароль верный. Или обращаться как то корректно из прошивки сперва к файлу пароля, а потом к файлу index.htm если пароль верный. Кто как думает ?
Сообщение отредактировал toto123 - Четверг, 2016-01-14, 20:02
Профиль
|
|
|
AspiD
2016-01-14 22:44 #74
Цитата toto123 ( ) Не сможете дать подсказку , как попытаться сделать авторизацию, хотя бы банальную, например внедрив в действующий проект вот это: с этим файликом можно сделать следующее: при заходе на http://192.168.0.20/ будет отображаться эта форма. а при вводе верного пароля будет осуществляться переход на http://192.168.0.20/tipa-dofiga-secretno и по этой ссылке уже будет интерфейс.
делается это просто. этот файлик кидаем на флешку. находим в прошивке код: Код if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm")) { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connnection: close"); client.println(); webFile = SD.open("index.htm"); }
и разделяем условие так:
Код if (StrContains(HTTP_req, "GET / ")){
client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connnection: close"); client.println(); webFile = SD.open("имя файлика с авторизацией");
} else if(StrContains(HTTP_req, "GET /tipa-dofiga-secretno")) {
client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connnection: close"); client.println(); webFile = SD.open("index.htm");
}
раньше у нас возвращалась index.htm в случае адреса http://192.168.0.20/ и http://192.168.0.20/index.htm теперь же: по http://192.168.0.20/ получаем страницу авторизации, по http://192.168.0.20/index.htm не получаем ничего и по http://192.168.0.20/tipa-dofiga-secretno получаем привычную страничку.
так же, в файлике авторизации нужно найти код и поправить. было: Код <script language="JavaScript">function password() {var a = document.form.text.value;if (a == 12345) { location.href = "https://yandex.ru"; }else {document.write('<center><div style="width: 30%;"><p style="border-style: solid; border-width: 3px; border-color: ff0000; padding: 20; text-align: center; font-size: 20pt;">Password error!</p></div></center>'); }}</script>
стало: Код <script language="JavaScript">function password() {var a = document.form.text.value;if (a == 12345) { location.href = "http://192.168.0.20/tipa-dofiga-secretno"; }else {document.write('<center><div style="width: 30%;"><p style="border-style: solid; border-width: 3px; border-color: ff0000; padding: 20; text-align: center; font-size: 20pt;">Password error!</p></div></center>'); }}</script>
Профиль
|
|
|
toto123
2016-01-15 00:22 #75
Спасибо большое AspiD, завтра попробую после работы, по результату отпишусь.Добавлено (2016-01-15, 00:22) --------------------------------------------- AspiD, не удержался ,откорректировал всё сейчас - всё работает. Еще раз спасибо ! (Надо же как "разжевал" подробно - на всё ушло 10 минут... Если кому захочется попробовать - завтра выложу всё "комплектом" (ino+css+htm). Пусть эта авторизация очень примитивная, но посмотреть что она работает уже интересно для начинающего.
Профиль
|
|