ВЕБ сервер в программе FLProg
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
ВЕБ сервер в программе FLProg
Тема для тех, кто хочет делать свои веб проекты.
Понимают, что надо вникать в HTML, CSS, JS.
Но не знают с чего начать, и как это использовать в программе FLProg.
Цель этой темы:
Понять принцип и работу встроенных веб блоков FLProg,
а так же нюансы с которыми придется столкнуться на этом пути.
Примеры будут использовать FLProg v6.3.1 модуль ESP32, или ESP8266
Часть 1 Страница приветствия.
Часть 2 Встроенные часы ESP.
Часть 3 Часы ESP + кнопки.
Пример информер погоды.
Ниже примеры будут использовать FLProg v7.3.4 модуль ESP32, или ESP8266.
Пример работы JSON в веб FLProg.
Передача "JSON" данных между ESP.
Тема для тех, кто хочет делать свои веб проекты.
Понимают, что надо вникать в HTML, CSS, JS.
Но не знают с чего начать, и как это использовать в программе FLProg.
Цель этой темы:
Понять принцип и работу встроенных веб блоков FLProg,
а так же нюансы с которыми придется столкнуться на этом пути.
Примеры будут использовать FLProg v6.3.1 модуль ESP32, или ESP8266
Часть 1 Страница приветствия.
Часть 2 Встроенные часы ESP.
Часть 3 Часы ESP + кнопки.
Пример информер погоды.
Ниже примеры будут использовать FLProg v7.3.4 модуль ESP32, или ESP8266.
Пример работы JSON в веб FLProg.
Передача "JSON" данных между ESP.
Win10-64, FLProg (portable)
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Часть 1 Страница приветствия.
Начнем с того , что ESP у нас будет сервером.
Работать будем с блоком WebServerPage из раздела коммуникации.
[spoiler title=содержание]
Создаем новый проект ESP.
В дереве проекта, в настройках WiFi модуля, настраиваем ESP как клиента.
Вводим имя и пароль к точке доступа своего WiFi роутера.
Т.е наша ESP с сервером на борту, будет клиентом в сети WiFi роутера,
а мы (пользователи) будем клиентами, роутера, и ESP.
Ключевое звено в этой сети будет WiFi роутер, он распределяет ИП адреса устройствам.
Этот адрес роутер арендует на какое то время (несколько дней), после чего меняет его на другой.
Первый нюанс с которым мы сталкиваемся - как узнать, какой адрес роутер предоставил нашей ESP.
Вариантов много:
Во вкладке адреса страницы добавляем страницу, ставим птичку Головная страница (хост), готово.
Мы создали хостовую пустую страницу, которая при обращении к ESP будет ее передавать, и открывать в браузере клиента.
Теперь нам надо выяснить, что уже сделал FLProg в этой странице и что нужно делать нам.
Смотреть и настраивать проект будем с помощью браузера.
Которые есть во всех современных гаджетах(я привык к Мазиле, примеры и настройки будут на ней).
Заливаем проект. Заходим мазилой по адресу ESP. Видим пустую страницу.
ПКМ выбираем исходный код страницы(или сочетание CTRL+U). Откроется новая страница с 3 строками кода.
Этот код уже сформировал FLProg, и это будет в каждой странице созданной этим блоком.
Чтобы определить, что нам надо сюда добавить, придется обратиться к помощи гугла.
Рассматривать сам код не буду. Информации на русском языке, очень много.
Сложностей в освоении HTML, CSS, JS нет. Начал уделять этому внимания с этого года.
За это время не почувствовал себя знатоком веба, еще путаюсь в терминологии, часто захожу в тупик,
но зато понял где, и что конкретно надо искать, и как это использовать в своих проектах.
Единственно в этом коде хотел обратить внимание, на закрытый тег </body>,
т.е в своих страницах, нам надо только открывать, этот тег, а FLProg закроет его сам.
Хотя смотрю браузер переваривает это, и сам дополняет теги.
Но чтобы не ловить в дальнейшем грабли, будем делать как пишут в умных книгах )).
Структура страницы будет состоять из:
Заполним нашу страницу кодом. Сразу будем комментировать, что бы потом легче ориентироваться.
Здесь есть один нюанс.
Код в скриптах и CSS лучше писать в одну строку. Все пробелы (кроме жизненно необходимых) сразу удалять.
Иначе некоторые моменты FLProg воспринимает по своему, и код становится не рабочим.
Конечно, код при этом становится не очень читабельным, зато экономим на размере пакета, и свое время на поиски граблей ))
Заливаем проект в ESP. Заходим с браузера, и изучаем как это все выглядит, и работает.
Видео, чтобы было понятно о чем речь, когда пишу "изучать и настраивать в браузере"
https://www.youtube.com/watch?v=rJsAZor ... e=youtu.be
[/spoiler]
В основном код беру здесь w3schools его русскоязычное подобие schoolsw3
Много интересного на Arduino Prom
Начнем с того , что ESP у нас будет сервером.
Работать будем с блоком WebServerPage из раздела коммуникации.
[spoiler title=содержание]
Создаем новый проект ESP.
В дереве проекта, в настройках WiFi модуля, настраиваем ESP как клиента.
Вводим имя и пароль к точке доступа своего WiFi роутера.
Т.е наша ESP с сервером на борту, будет клиентом в сети WiFi роутера,
а мы (пользователи) будем клиентами, роутера, и ESP.
Ключевое звено в этой сети будет WiFi роутер, он распределяет ИП адреса устройствам.
Этот адрес роутер арендует на какое то время (несколько дней), после чего меняет его на другой.
Первый нюанс с которым мы сталкиваемся - как узнать, какой адрес роутер предоставил нашей ESP.
Вариантов много:
- Пока проект в стадии настройки, можно смотреть ИП по USB.
- Можно через терминал винды пропинговать сеть.
- Если есть фаервол, (например в антивирусе НОД секюрити) можно посмотреть локальное окружение.
- Можно на ESP настроить точку доступа, которая будет выдавать ИП, но в данный момент это ни к чему.
- Есть разные утилиты, которые могут это делать.
- Но самый актуальный вариант, зайти в настройки роутера, и в разделе DHCP сервера, по мак адресу ESP посмотреть ИП.
Заодно где то там же, привязать ИП к этому мак адресу, что бы роутер его больше не менял.
Во вкладке адреса страницы добавляем страницу, ставим птичку Головная страница (хост), готово.
Мы создали хостовую пустую страницу, которая при обращении к ESP будет ее передавать, и открывать в браузере клиента.
Теперь нам надо выяснить, что уже сделал FLProg в этой странице и что нужно делать нам.
Смотреть и настраивать проект будем с помощью браузера.
Которые есть во всех современных гаджетах(я привык к Мазиле, примеры и настройки будут на ней).
Заливаем проект. Заходим мазилой по адресу ESP. Видим пустую страницу.
ПКМ выбираем исходный код страницы(или сочетание CTRL+U). Откроется новая страница с 3 строками кода.
Код: Выделить всё
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<META content=text/html; charset=utf-8 http-equiv=Content-Type>
<html></body></html>
Чтобы определить, что нам надо сюда добавить, придется обратиться к помощи гугла.
Рассматривать сам код не буду. Информации на русском языке, очень много.
Сложностей в освоении HTML, CSS, JS нет. Начал уделять этому внимания с этого года.
За это время не почувствовал себя знатоком веба, еще путаюсь в терминологии, часто захожу в тупик,
но зато понял где, и что конкретно надо искать, и как это использовать в своих проектах.
Единственно в этом коде хотел обратить внимание, на закрытый тег </body>,
т.е в своих страницах, нам надо только открывать, этот тег, а FLProg закроет его сам.
Хотя смотрю браузер переваривает это, и сам дополняет теги.
Но чтобы не ловить в дальнейшем грабли, будем делать как пишут в умных книгах )).
Структура страницы будет состоять из:
- Стилей (CSS)-в которых будем задавать дизайн всей страницы в целом,
и каждого элемента или группы элементов в отдельности.
- Код самой страницы (HTML) -тексты, кнопки, графика, и т д.
- Ява скриптов (JS)-подпрограмм обслуживающих работу динамичных данных.
Заполним нашу страницу кодом. Сразу будем комментировать, что бы потом легче ориентироваться.
Код: Выделить всё
<head>
<title>Client</title>
<!-- ===== НАШИ СТИЛИ CSS ===== -->
<style>
/* для всей страницы */
body{color:#6b1a1a;background-color:#efdece80;font-family:'Times New Roman',Times,serif;}
</style>
</head>
<!-- ===== ТЕЛО СТРАНИЦЫ HTML ===== -->
<body>
<p>Привет FLProg!!!</p>
<!-- ===== НАШИ СКРИПТЫ JS ===== -->
<script>
</script>
Код в скриптах и CSS лучше писать в одну строку. Все пробелы (кроме жизненно необходимых) сразу удалять.
Иначе некоторые моменты FLProg воспринимает по своему, и код становится не рабочим.
Конечно, код при этом становится не очень читабельным, зато экономим на размере пакета, и свое время на поиски граблей ))
Заливаем проект в ESP. Заходим с браузера, и изучаем как это все выглядит, и работает.
Видео, чтобы было понятно о чем речь, когда пишу "изучать и настраивать в браузере"
https://www.youtube.com/watch?v=rJsAZor ... e=youtu.be
[/spoiler]
В основном код беру здесь w3schools его русскоязычное подобие schoolsw3
Много интересного на Arduino Prom
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Часть 2 Встроенные часы ESP.
Соберем что то динамичное. Возьмем встроенные часы ESP.
Время будем синхронизировать по NTP.
Соберем что то динамичное. Возьмем встроенные часы ESP.
Время будем синхронизировать по NTP.
► Показать
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Часть 3 Часы ESP + кнопки.
Добавим в проект 3 кнопки.
Будем управлять встроенным светодиодом ESP.
[spoiler title=содержание]
При отключенных кнопках светодиод молчит.
При вкл 1кнопки =1моргание, при 2 =2, при 3 =3, приоритет по старшинству,
т.е если нажата 3 кнопка состояние предыдущих не важно.
Добавим еще одну плату для кнопок. На ней поставим Web Page блок с тремя страницами.
Для каждой кнопки будет своя страница (с булеан выходом при обращении к странице).
Т.к команды от кнопок, на стороне ESP, работают при обращении к странице, будем использовать HEAD запрос (запрос без ответа).
Для этого напишем в главной странице клиента скрипт, выполняющий HEAD запрос кнопки на сервер.
Чтобы знать реальное состояние кнопок на сервере, будем обновлять их состояние.
Допишем в скрипт «АВТО ОБНОВЛЕНИЕ» запрос на состояние кнопок, а также изменение их цвета, в зависимости от состояния.
В главной странице клиента допишем в стилях внешний вид и расположение кнопок.
Ну и конечно в теле html допишем сами кнопки.
Ответ всех данных с сервера будем отправлять одним пакетом, в виде массива текстовых слов (на русском языке для лучшего понимания). Для этого в первой плате добавим состояние кнопок, и времени, в виде текстовой строки через запятые. В браузере можем посмотреть пакет принимаемых данных По аналогии Авторского веб интерфейса добавил поля header и footer.
Код в главной странице клиента теперь выглядит так:
Наша страница в браузере выглядит так:
В связи с тем что, при усложнении хостовой страницы, появлялся не понятный баг.
А именно: при обращении к странице с данными, вместо нее в ответе возвращается хостовая станица (Выглядит это как наложение сдвинутой страницы без данных на ней. И хотя это происходит не часто, но неприятно. Решил не использовать страницу хост). По этому в главной странице клиента адрес станицы теперь client. Заходим на ESP теперь по адресу “IP/client”
[/spoiler]
Добавим в проект 3 кнопки.
Будем управлять встроенным светодиодом ESP.
[spoiler title=содержание]
При отключенных кнопках светодиод молчит.
При вкл 1кнопки =1моргание, при 2 =2, при 3 =3, приоритет по старшинству,
т.е если нажата 3 кнопка состояние предыдущих не важно.
Добавим еще одну плату для кнопок. На ней поставим Web Page блок с тремя страницами.
Для каждой кнопки будет своя страница (с булеан выходом при обращении к странице).
Т.к команды от кнопок, на стороне ESP, работают при обращении к странице, будем использовать HEAD запрос (запрос без ответа).
Для этого напишем в главной странице клиента скрипт, выполняющий HEAD запрос кнопки на сервер.
Чтобы знать реальное состояние кнопок на сервере, будем обновлять их состояние.
Допишем в скрипт «АВТО ОБНОВЛЕНИЕ» запрос на состояние кнопок, а также изменение их цвета, в зависимости от состояния.
В главной странице клиента допишем в стилях внешний вид и расположение кнопок.
Ну и конечно в теле html допишем сами кнопки.
Ответ всех данных с сервера будем отправлять одним пакетом, в виде массива текстовых слов (на русском языке для лучшего понимания). Для этого в первой плате добавим состояние кнопок, и времени, в виде текстовой строки через запятые. В браузере можем посмотреть пакет принимаемых данных По аналогии Авторского веб интерфейса добавил поля header и footer.
Код в главной странице клиента теперь выглядит так:
Код: Выделить всё
<head><title>Client</title>
<!-- ===== НАШИ СТИЛИ CSS ===== --><style>
/* для всей страницы */
body{color:#6b1a1a;background-color:#efdece;font-family:'Times New Roman',Times,serif;}
/* верх страницы */
.header{background:#60ECEC;text-align:center;font-weight:600;font-size:200%;}
/* время на странице */
.time{line-height:1.0;text-align:center;font-weight:600;font-size:370%;}
/* для кнопок */
.button{margin:auto;display:block;font-size:25px;line-height:1.6;letter-spacing:0.88px;font-weight:600;padding:5px;border-radius:8px;border:3px solid green;width:200px;box-shadow:0 0 0 60px rgba(0,0,0,0)inset,2px 2px 8px #a990c3;}
.button:active{top:2px;left:2px;box-shadow:0 0 0 60px rgba(0,0,0,.05)inset;}
/* низ страницы */
.footer{background:#60ECEC;text-align:center;font-weight:350;font-size:100%;}
</style>
</head>
<!-- ===== ТЕЛО СТРАНИЦЫ HTML ===== -->
<body>
<!-- ВЕРХ -->
<h1 class="header">Сделано в FLProg</h1>
<!-- ВРЕМЯ -->
<p class="time" id="time">**:**:**</p>
<!-- КНОПКА 1 -->
<p><button type="button" class="button" id="kn1" onclick="sendKn('sendkn1')">****** *\n***</button></p>
<!-- КНОПКА 2 -->
<p><button type="button" class="button" id="kn2" onclick="sendKn('sendkn2')">****** *\n***</button></p>
<!-- КНОПКА 3 -->
<p><button type="button" class="button" id="kn3" onclick="sendKn('sendkn3')">****** *\n***</button></p>
<!-- НИЗ -->
<p class="footer">=== rw6cm 2020 ===</p>
<!-- ===== НАШИ СКРИПТЫ JS ===== -->
<script></script>
<!-- КОМАНДА С КНОПКИ НА СЕРВЕР -->
<script>
function sendKn(url){var xhttp=new XMLHttpRequest();xhttp.open("HEAD",url,true);xhttp.send();}
</script>
<!-- АВТО ОБНОВЛЕНИЕ ВЫБРАННЫХ ДАННЫХ -->
<script>
function sendRequest(){
setInterval(function(){loadDoc();},1000);function loadDoc(){var xhttp=new XMLHttpRequest();xhttp.onreadystatechange=function(){if(this.readyState==4&&this.status==200){var arr=xhttp.responseText.split(",");
document.getElementById("time").innerHTML=arr[0];
var k1=document.getElementById("kn1");
k1.innerHTML=arr[1];if(k1.innerHTML==="КНОПКА 1 ВКЛ"){k1.style.backgroundColor=('#7bf27b');}else{k1.style.backgroundColor=('#d9ddf7');}
var k2=document.getElementById("kn2");
k2.innerHTML=arr[2];if(k2.innerHTML==="КНОПКА 2 ВКЛ"){k2.style.backgroundColor=('#7bf27b');}else{k2.style.backgroundColor=('#d9ddf7');}
var k3=document.getElementById("kn3");
k3.innerHTML=arr[3];if(k3.innerHTML==="КНОПКА 3 ВКЛ"){k3.style.backgroundColor=('#7bf27b');}else{k3.style.backgroundColor=('#d9ddf7');}}};xhttp.open("GET","server_info",true);xhttp.send();}}
sendRequest();
</script>
А именно: при обращении к странице с данными, вместо нее в ответе возвращается хостовая станица (Выглядит это как наложение сдвинутой страницы без данных на ней. И хотя это происходит не часто, но неприятно. Решил не использовать страницу хост). По этому в главной странице клиента адрес станицы теперь client. Заходим на ESP теперь по адресу “IP/client”
[/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Пример работы JSON в веб FLProg.
Сборка пакета Json рассматривается в соседней ветке
Здесь рассмотрим какие нюансы могут возникнуть при обмене данными в json формате.
[spoiler title=содержание]
Для примера возьмем абстрактный проект. Пусть это будет автомат обработки растений.
Нам нужно передавать исторические данные работы оборудования, расход химикатов, и при каких метео условиях была обработка.
По сути нам надо три списка выдаваемые по запросу.Пакет данных соберем в json строке средствами FLProg.
Прием передачу организуем с помощью блока веб сервер.
схема проекта: Но тут нас поджидает разочарование (( ява скрипт не хочет парсить строку json.
Срока валидная все вроде правильно но …
Ошибка прям в начале строки.
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.
Что может ему не нравится? строка начинается с фигурной скобки как положено.
Значит что то есть до нее, но не видим. Решил посмотреть под другим углом ))
Выяснилось ,что перед фигурными есть еще кавычки , Это понятно, мы передаем сроку с Си языка. А JS не любит двойные кавычки.
Если внутри двойные значит снаружи нужны одинарные. Вечная проблема с этими кавычками,
Пришлось обрезать с концов по фигурные скобки, и вставить одинарные кавычки. и
!
[/spoiler]
flp7.3.3
Сборка пакета Json рассматривается в соседней ветке
Здесь рассмотрим какие нюансы могут возникнуть при обмене данными в json формате.
[spoiler title=содержание]
Для примера возьмем абстрактный проект. Пусть это будет автомат обработки растений.
Нам нужно передавать исторические данные работы оборудования, расход химикатов, и при каких метео условиях была обработка.
По сути нам надо три списка выдаваемые по запросу.Пакет данных соберем в json строке средствами FLProg.
Прием передачу организуем с помощью блока веб сервер.
схема проекта: Но тут нас поджидает разочарование (( ява скрипт не хочет парсить строку json.
Срока валидная все вроде правильно но …

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.
Что может ему не нравится? строка начинается с фигурной скобки как положено.
Значит что то есть до нее, но не видим. Решил посмотреть под другим углом ))
Выяснилось ,что перед фигурными есть еще кавычки , Это понятно, мы передаем сроку с Си языка. А JS не любит двойные кавычки.
Если внутри двойные значит снаружи нужны одинарные. Вечная проблема с этими кавычками,
Пришлось обрезать с концов по фигурные скобки, и вставить одинарные кавычки. и

[/spoiler]
flp7.3.3
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
ВЕБ сервер в программе FLProg
весьма интересная тема, надеюсь она получит развитие.
посмотрел совместимость с библиотекой json на примере погодного информера.
Конфликтов нет, и это в чем то отличная альтернатива ESPUI
Однозначно с плагином esp8266fs.jar было бы огонь.
посмотрел совместимость с библиотекой json на примере погодного информера.
Конфликтов нет, и это в чем то отличная альтернатива ESPUI
Однозначно с плагином esp8266fs.jar было бы огонь.
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Пример информер погоды.
Разберем JSON строку с сайта погоды.
Возьмем прогноз погоды на неделю, и выберем с него почасовой прогноз на два дня.
[spoiler title=схема проекта в флп] .
Ссылка на сайт погоды
Ссылка на JSON ответ.
[/spoiler] ESP8266 FLProg 6.3.1
Разберем JSON строку с сайта погоды.
Возьмем прогноз погоды на неделю, и выберем с него почасовой прогноз на два дня.
[spoiler title=схема проекта в флп] .
Ссылка на сайт погоды
Ссылка на JSON ответ.
[/spoiler] ESP8266 FLProg 6.3.1
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
ВЕБ сервер в программе FLProg
интересный пример.
это получатся он на ява скрипте?
можете пож та показать как полученные данные от запроса вывести в переменные
это получатся он на ява скрипте?
можете пож та показать как полученные данные от запроса вывести в переменные
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
- rw6cm
- Полковник
- Сообщения: 2372
- Зарегистрирован: 06 сен 2015, 20:25
- Имя: Владимир
- Поблагодарили: 41 раз
ВЕБ сервер в программе FLProg
Передача "JSON" данных между ESP.
В примере рассматривается вариант передачи данных в JSON виде,
с esp8266 (веб сервер) на ESP32 (веб клиент).
[spoiler]
Веб сервер аналогичен проекту поста 8 , и использует блок веб сервер флп.
Веб клиент аналогичен посту выше распарсить JSON и использует ПБ веб клиент. (т.к. клиент флп для этого не подошел.)
Веб сервер esp8266 формирует данные в Json, и выдает их в теле веб страницы.
Веб клиент ESP32 берет данные с страницы, парсит, и выдает в нужном виде в UART.
п/с при подключении UART возможно понадобится ресетнуть есп32
[/spoiler] flp7.3.4
В примере рассматривается вариант передачи данных в JSON виде,
с esp8266 (веб сервер) на ESP32 (веб клиент).
[spoiler]
Веб сервер аналогичен проекту поста 8 , и использует блок веб сервер флп.
Веб клиент аналогичен посту выше распарсить JSON и использует ПБ веб клиент. (т.к. клиент флп для этого не подошел.)
Веб сервер esp8266 формирует данные в Json, и выдает их в теле веб страницы.
Веб клиент ESP32 берет данные с страницы, парсит, и выдает в нужном виде в UART.
п/с при подключении UART возможно понадобится ресетнуть есп32
[/spoiler] flp7.3.4
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Win10-64, FLProg (portable)
ВЕБ сервер в программе FLProg
Добрый день.
помогите по двум вопросам.
- есть ли пример как читать значения например с веб страниц типа <input type="range"> и транслировать их на контроллер в переменную.
из возможностей стандартного блока не не нашел ничего кроме передачи булена
- так же прошу помощи как минимальным кодом обновлять локальные динамические данные на странице. (без CCS и прочих стилей только минимальный набор скрипта)
как это сделано с часами в одном из примеров.
<!-- АВТО ОБНОВЛЕНИЕ ВЫБРАННЫХ ДАННЫХ -->
дёргать всю страницу как предлагает стандартный блок, это совсем не вариант.
в блоке ФЛП введен "доступный вход" - Sec
значение переменной с контроллера "Sec" отображается на странице, но оно не обновляется.
полагаю request.open('GET','/Sec',true); тут нужно что то иное прописывать. может еще где то.
Спасибо
помогите по двум вопросам.
- есть ли пример как читать значения например с веб страниц типа <input type="range"> и транслировать их на контроллер в переменную.
из возможностей стандартного блока не не нашел ничего кроме передачи булена
- так же прошу помощи как минимальным кодом обновлять локальные динамические данные на странице. (без CCS и прочих стилей только минимальный набор скрипта)
как это сделано с часами в одном из примеров.
<!-- АВТО ОБНОВЛЕНИЕ ВЫБРАННЫХ ДАННЫХ -->
Код: Выделить всё
<script>
function sendRequest(){
setInterval(function(){loadDoc();},1000);function loadDoc(){var xhttp=new XMLHttpRequest();xhttp.onreadystatechange=function(){if(this.readyState==4&&this.status==200){document.getElementById("time").innerHTML=this.responseText;}};xhttp.open("GET","server_info",true);xhttp.send();}}
sendRequest();
</script>
в блоке ФЛП введен "доступный вход" - Sec
Код: Выделить всё
<input type="text" value="Sec" id="gz" class="" />
<script>
var relay = document.getElementById("gz");
var relay_status = 0;
function relay_state() {
var request = new XMLHttpRequest();
request.open('GET','/Sec',true);
request.onload = function() {
if (request.readyState == 4 && request.status == 200) {
var response = request.responseText;
relay_status = Number.parseInt(response);
if (relay_status == 0)
relay.classList.add('off');
else
relay.classList.add('on');
}
}
request.send();
}
полагаю request.open('GET','/Sec',true); тут нужно что то иное прописывать. может еще где то.
Спасибо
ВЕБ сервер в программе FLProg
Здравствуйте AlexQwert855 писал(а): 25 сен 2021, 13:49 Добрый день.
помогите по двум вопросам.
- есть ли пример как читать значения например с веб страниц типа <input type="range"> и транслировать их на контроллер в переменную.
из возможностей стандартного блока не не нашел ничего кроме передачи булена
- так же прошу помощи как минимальным кодом обновлять локальные динамические данные на странице. (без CCS и прочих стилей только минимальный набор скрипта)
как это сделано с часами в одном из примеров.
<!-- АВТО ОБНОВЛЕНИЕ ВЫБРАННЫХ ДАННЫХ -->дёргать всю страницу как предлагает стандартный блок, это совсем не вариант.Код: Выделить всё
<script> function sendRequest(){ setInterval(function(){loadDoc();},1000);function loadDoc(){var xhttp=new XMLHttpRequest();xhttp.onreadystatechange=function(){if(this.readyState==4&&this.status==200){document.getElementById("time").innerHTML=this.responseText;}};xhttp.open("GET","server_info",true);xhttp.send();}} sendRequest(); </script>
в блоке ФЛП введен "доступный вход" - Sec
значение переменной с контроллера "Sec" отображается на странице, но оно не обновляется.Код: Выделить всё
<input type="text" value="Sec" id="gz" class="" /> <script> var relay = document.getElementById("gz"); var relay_status = 0; function relay_state() { var request = new XMLHttpRequest(); request.open('GET','/Sec',true); request.onload = function() { if (request.readyState == 4 && request.status == 200) { var response = request.responseText; relay_status = Number.parseInt(response); if (relay_status == 0) relay.classList.add('off'); else relay.classList.add('on'); } } request.send(); }
полагаю request.open('GET','/Sec',true); тут нужно что то иное прописывать. может еще где то.
Спасибо
В блоке "Веб сервер" нет возможности, "по умолчанию", транслировать значения на контроллер в переменную, кроме передачи булена.

Сам долго мучался, пока не разобрался в коде

Но есть метод

Логика работы:
1. Отправляем HEAD запрос "HEAD "http://192.168.10.100/sendsave?InputTex ... utNumber=1"." с параметрами "?InputText=on&InputNumber=1
Код: Выделить всё
<script>
function sendKn(url){
var xhttp=new XMLHttpRequest();
var body = "InputText="+document.getElementById("input_text1").value+"&InputNumber="+document.getElementById("input_number1").value;
console.log(body);
xhttp.open("HEAD",url+"?"+body,true);
xhttp.send();}
</script>
Код: Выделить всё
int _parseWebServerReqest(String reqestAddres)
{
String reqestAddresCopy=reqestAddres;//Копируем переменную reqestAddres
int index;
int result=0;
index=reqestAddres.indexOf("/");
reqestAddres =reqestAddres.substring(index+1);
if (reqestAddres.indexOf("?")==-1){//Если в строке не находим "?"
index=reqestAddres.indexOf(" ");}//Идем до конца стори
else{index=reqestAddres.indexOf("?");}//Если нашли "?", то заканчиваес строку на ?
reqestAddres =reqestAddres.substring(0, index);
if (reqestAddres=="")
{
result= 1;
}
if (reqestAddres=="sendsave")
{
reqestAddres =reqestAddresCopy;//Восстанавливаем начальное значение переменной
index=reqestAddres.indexOf("?");//Ищем индекс "?"
reqestAddres =reqestAddres.substring(index+1);//Извлекаем строку начиная с "?"
index=reqestAddres.indexOf(" ");//Ищем индекс конца строки
reqestAddres =reqestAddres.substring(0, index);//Извлекаем строку с ? до конца
_gtv10 =reqestAddres;//Записываем строку в переменную
result= 1;
}
Пример: InputText=on&InputNumber=1.
Локально обновлять данные страницы?
Используйте пример: Часть 3 Часы ESP + кнопки.
P.S. В проекте:
В Arduino IDE Заменить "int _parseWebServerReqest(String reqestAddres)"
На:
Код: Выделить всё
int _parseWebServerReqest(String reqestAddres)
{
String index2=reqestAddres;
int index;
int result=0;
index=reqestAddres.indexOf("/");
reqestAddres =reqestAddres.substring(index+1);
if (reqestAddres.indexOf("?")==-1){
index=reqestAddres.indexOf(" ");}
else{index=reqestAddres.indexOf("?");}
reqestAddres =reqestAddres.substring(0, index);
if (reqestAddres=="")
{
result= 1;
}
if (reqestAddres=="sendsave")
{
reqestAddres=index2;
index=reqestAddres.indexOf("?");
reqestAddres =reqestAddres.substring(index+1);
index=reqestAddres.indexOf(" ");
reqestAddres =reqestAddres.substring(0, index);
_gtv1 =reqestAddres;
result= 1;
}
return result;
}
В Поле "Число" - время свечение светодиода.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
32 Кб должно хватить для любых задач!!!
ВЕБ сервер в программе FLProg
Спасибо, попробую разобраться.
я смотрел в сторону JSON, ваш пример думаю чем то схож по принципу.
В голове концепт - собирать данные с одной страницы, скидывать на другую и там их парсить.
я смотрел в сторону JSON, ваш пример думаю чем то схож по принципу.
В голове концепт - собирать данные с одной страницы, скидывать на другую и там их парсить.
- Rovki
- Полковник
- Сообщения: 5710
- Зарегистрирован: 22 апр 2016, 17:25
- Откуда: Чехов
- Имя: Анатолий
- Благодарил (а): 67 раз
- Поблагодарили: 212 раз
- Контактная информация:
ВЕБ сервер в программе FLProg
А где бибку взять HTTPClient.h ?
для ЕСП8266

Электронщик до мозга костей и не только
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
- Rovki
- Полковник
- Сообщения: 5710
- Зарегистрирован: 22 апр 2016, 17:25
- Откуда: Чехов
- Имя: Анатолий
- Благодарил (а): 67 раз
- Поблагодарили: 212 раз
- Контактная информация:
ВЕБ сервер в программе FLProg
Что бы веб клиента сделать на есп 8266 
Отправлено спустя 11 минут 15 секунд:
Вопрос к уважаемому автору темы- предположим что есть некий веб сервер (от флпрог или espui) который виден в веб браузере, можно ли создать на есп веб клиента позволяющий считывать из сервера предназначенные только для него данные . То есть в сервере есть N (значений- int или float регистров ) поступающих по UART) , предназначенных для N клиентов и каждый из этих клиентов(веб) имеет доступ только к своим данным????
В итоге получим возможность в браузере ПК(мобилки) видеть все данные (для всех клиентов) ,но каждый из веб клиентов (на есп) будет получать (отдавать) только свои данные .

Отправлено спустя 11 минут 15 секунд:
Вопрос к уважаемому автору темы- предположим что есть некий веб сервер (от флпрог или espui) который виден в веб браузере, можно ли создать на есп веб клиента позволяющий считывать из сервера предназначенные только для него данные . То есть в сервере есть N (значений- int или float регистров ) поступающих по UART) , предназначенных для N клиентов и каждый из этих клиентов(веб) имеет доступ только к своим данным????

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

Электронщик до мозга костей и не только
- Phazz
- Полковник
- Сообщения: 3110
- Зарегистрирован: 17 окт 2016, 15:38
- Откуда: Сургут
- Имя: Анатолий
- Благодарил (а): 228 раз
- Поблагодарили: 107 раз
ВЕБ сервер в программе FLProg
[ref=#ff8000]Rovki[/ref], это и сейчас можно в 751 вообще без проблем. Теперь там появилось полноценное api. На запрос придет json со всеми параметрами что есть на странице. А дальше хоть на страницу выводите, хоть в базу данных пишите
- Rovki
- Полковник
- Сообщения: 5710
- Зарегистрирован: 22 апр 2016, 17:25
- Откуда: Чехов
- Имя: Анатолий
- Благодарил (а): 67 раз
- Поблагодарили: 212 раз
- Контактная информация:
ВЕБ сервер в программе FLProg
Проблем не будет когда блоки появятсяPhazz писал(а): 22 апр 2022, 08:44 [ref=#ff8000]Rovki[/ref], это и сейчас можно в 751 вообще без проблем. Теперь там появилось полноценное api. На запрос придет json со всеми параметрами что есть на странице. А дальше хоть на страницу выводите, хоть в базу данных пишите

Электронщик до мозга костей и не только
- support
- Супермодератор
- Сообщения: 1917
- Зарегистрирован: 03 янв 2018, 11:45
- Откуда: Астрахань
- Имя: Сергей
- Поблагодарили: 23 раза
- Контактная информация:
ВЕБ сервер в программе FLProg
Сейчас работаю над полноценным Вэб АПИ там будет и клиент и сервер. Постараюсь за недели 2-3 сделать.
Автор программы FLProg.
ВЕБ сервер в программе FLProg
[ref=#00aa00]support[/ref], а почему не хотите сделать на асинхроном библиотеке
а то что вы хотите уже пройденый вариант тормозной
а то что вы хотите уже пройденый вариант тормозной
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 4 гостя