Уважаемые пользователи! Наш сайт и форум содержится на средства полученные от рекламы. Если вы хотите и дальше продолжать общаться, скачивать, и т.п. пожалуйста отключите блокировку рекламы для нашего сайта/форума. Можно и покликать по рекламным ссылкам, так будут больше выплаты. Спасибо за понимание!

ВЕБ сервер в программе FLProg

Проекты с блоком WebServerPage

Ответить
Аватара пользователя
rw6cm
Полковник
Сообщения: 1805
Зарегистрирован: 06.09.2015{, 20:25}
Репутация: 162
Имя: Владимир

ВЕБ сервер в программе FLProg

#1

Сообщение rw6cm » 16.06.2020{, 11:15}

ВЕБ сервер в программе FLProg

Тема для тех, кто хочет делать свои веб проекты.
Понимают, что надо вникать в HTML, CSS, JS.
Но не знают с чего начать, и как это использовать в программе FLProg.
Цель этой темы:
Понять принцип и работу встроенных веб блоков FLProg,
а так же нюансы с которыми придется столкнуться на этом пути.

Часть 1 Страница приветствия.
Часть 2 Встроенные часы ESP.
Часть 3 Часы ESP + кнопки.

Примеры будут использовать FLProg v6.3.1 модуль ESP32, или ESP8266.
Win10-64, FLProg (portable)

Аватара пользователя
rw6cm
Полковник
Сообщения: 1805
Зарегистрирован: 06.09.2015{, 20:25}
Репутация: 162
Имя: Владимир

ВЕБ сервер в программе FLProg

#2

Сообщение rw6cm » 16.06.2020{, 11:17}

Часть 1 Страница приветствия.

Начнем с того , что ESP у нас будет сервером.
Работать будем с блоком WebServerPage из раздела коммуникации.
содержаниеПоказать
Создаем новый проект ESP.
В дереве проекта, в настройках WiFi модуля, настраиваем ESP как клиента.
Вводим имя и пароль к точке доступа своего WiFi роутера.
Т.е наша ESP с сервером на борту, будет клиентом в сети WiFi роутера,
а мы (пользователи) будем клиентами, роутера, и ESP.
Ключевое звено в этой сети будет WiFi роутер, он распределяет ИП адреса устройствам.
Этот адрес роутер арендует на какое то время (несколько дней), после чего меняет его на другой.
Первый нюанс с которым мы сталкиваемся - как узнать, какой адрес роутер предоставил нашей ESP.
Вариантов много:
  • Пока проект в стадии настройки, можно смотреть ИП по USB.
  • Можно через терминал винды пропинговать сеть.
  • Если есть фаервол, (например в антивирусе НОД секюрити) можно посмотреть локальное окружение.
  • Можно на ESP настроить точку доступа, которая будет выдавать ИП, но в данный момент это ни к чему.
  • Есть разные утилиты, которые могут это делать.
  • Но самый актуальный вариант, зайти в настройки роутера, и в разделе DHCP сервера, по мак адресу ESP посмотреть ИП.
    Заодно где то там же, привязать ИП к этому мак адресу, что бы роутер его больше не менял.
Ставим на плату блок webserverpage. Заходим в настройки. Добавляем устройство 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>
Этот код уже сформировал FLProg, и это будет в каждой странице созданной этим блоком.
Чтобы определить, что нам надо сюда добавить, придется обратиться к помощи гугла.
Рассматривать сам код не буду. Информации на русском языке, очень много.
Сложностей в освоении 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. Заходим с браузера, и изучаем как это все выглядит, и работает.
Видео, чтобы было понятно о чем речь, когда пишу "изучать и настраивать в браузере"

В основном код беру здесь w3schools его русскоязычное подобие schoolsw3
Много интересного на Arduino Prom
Страница приветствия.flp
(23.29 КБ) 34 скачивания
Win10-64, FLProg (portable)

Аватара пользователя
Anydy
Администратор
Сообщения: 2758
Зарегистрирован: 30.12.2017{, 12:10}
Репутация: 206
Имя: Андрей

ВЕБ сервер в программе FLProg

#3

Сообщение Anydy » 16.06.2020{, 15:26}

rw6cm, Володя, не понятно зачем сервер на МК? На малинке или апельсинке еще пойму....а лучше на VPS но на ESP???

Аватара пользователя
rw6cm
Полковник
Сообщения: 1805
Зарегистрирован: 06.09.2015{, 20:25}
Репутация: 162
Имя: Владимир

ВЕБ сервер в программе FLProg

#4

Сообщение rw6cm » 16.06.2020{, 16:06}

Anydy писал(а):
16.06.2020{, 15:26}
На малинке или апельсинке еще пойму.
Мне надо сделать дистанционный прибор, чтото типа анализатора.
Он должен быть компактный, и экономичный. ESP для этого хватит с лихвой.
Сервер нужен чтобы не замарачиваться с софтом на стороне пользователей.
Доступ должен быть с разных девайсов, поэтому браузер для всех.
Вот и хочу посмотреть на что ESP способна, а точнее наверно я способен :smile37:
За одно появился стимул углубится в веб направлении )
Win10-64, FLProg (portable)

Аватара пользователя
Anydy
Администратор
Сообщения: 2758
Зарегистрирован: 30.12.2017{, 12:10}
Репутация: 206
Имя: Андрей

ВЕБ сервер в программе FLProg

#5

Сообщение Anydy » 16.06.2020{, 22:38}

я тебе однозначно скажу - ESP ну ни как не может работать в роли сервера! Может в виде игрушки.....оно вам надо?
У меня сервер на полноценном линуксе и то не все работает как хотелось бы .....а вы хотите на ардуино?

Аватара пользователя
rw6cm
Полковник
Сообщения: 1805
Зарегистрирован: 06.09.2015{, 20:25}
Репутация: 162
Имя: Владимир

ВЕБ сервер в программе FLProg

#6

Сообщение rw6cm » 17.06.2020{, 14:10}

Часть 2 Встроенные часы ESP.

Соберем что то динамичное. Возьмем встроенные часы ESP.
Время будем синхронизировать по NTP.
содержаниеПоказать
Собираем на отдельной плате схему из блоков NTP сервер и RTC (проект будет в низу).
Делаем необходимые настройки, и выводим время текстовой строкой.
Представим как это должно работать.
У нас есть страница хост. Это шаблон страницы.
Можно сказать фотография собранная из пазлов (кусочков). Цифры часов это набор пазлов в этой фото.
На данный момент чтобы сменить цифру секунд, нам надо каждую секунду обновлять страницу.
Т.е запрашивать у сервера новую фотографию, на которой будет запечатлена другая секунда.
Обновлять так часто страницу не удачное решение.
Во-первых при обновлении страницы в браузере, происходит перезагрузка части служб,
обновление всех привязок (кеш, url, стили, скрипты, итд). Это очень грузит систему.
Плюс сама страница может содержать много графики, инфы, т.е. много весить.
Гонять часто такие большие пакеты, повесят сеть.
Да и выглядит это дёрганно, с залипанием, глаза очень быстро пошлют вас ))
Мы пойдем другим путем. Создадим еще одну страницу, в теле которой будет только число времени. Назовем ее (server_info).
А в хостовой странице мы напишем программку (скрипт), которая каждую секунду, будет обращаться к странице (server_info),
и ее содержимое(число времени), будет подставлять в ячейки пазлов времени.
В результате мы по запросу клиента, с ESP, один раз загружаем хостовую страницу.
После чего эта страница, ежесекундным запросом вытягивает всего лишь байты времени с сервера.
По хорошему здесь надо написать еще один скрипт (генератор с счетчиком),
чтобы он секунды обновлял внутри браузера, и лишь каждую минуту обновлял с сервера.
Все таки каждую секунду для ESP будет тяжко, если по мимо сети, она будет загружена еще какой то тяжелой работой.
Но у меня цель, выяснить, на сколько ее можно загрузить частыми запросами, по этому оставим так.
В хостовой странице создадим стиль для наших часов. Сделаем их по середине, и огромными ))
В результате код хостовой страницы будет выглядеть так:

Код: Выделить всё

<head>
<title>Client</title>
<!-- =====  НАШИ СТИЛИ CSS  ===== -->
<style>
/* для всей страницы */
body{color:#6b1a1a;background-color:#efdece80;font-family:'Times New Roman',Times,serif;}
/* для времени */
.time{line-height:1.0;text-align:center;font-weight:600;font-size:800%;}
</style>
</head>

<!-- =====  ТЕЛО СТРАНИЦЫ HTML  ===== -->
<body>
<!-- ВРЕМЯ -->
<p class="time" id="time">**:**:**</p>

<!-- =====  НАШИ СКРИПТЫ JS  ===== -->
<script></script>
<!-- АВТО ОБНОВЛЕНИЕ ВЫБРАННЫХ ДАННЫХ -->
<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>
Заливаем в ESP и изучаем как работает.
Внутренние часы.flp
(86.65 КБ) 27 скачиваний
Win10-64, FLProg (portable)

Аватара пользователя
rw6cm
Полковник
Сообщения: 1805
Зарегистрирован: 06.09.2015{, 20:25}
Репутация: 162
Имя: Владимир

ВЕБ сервер в программе FLProg

#7

Сообщение rw6cm » 02.07.2020{, 00:34}

Часть 3 Часы ESP + кнопки.

Добавим в проект 3 кнопки.
Будем управлять встроенным светодиодом ESP.
содержаниеПоказать
При отключенных кнопках светодиод молчит.
При вкл 1кнопки =1моргание, при 2 =2, при 3 =3, приоритет по старшинству,
т.е если нажата 3 кнопка состояние предыдущих не важно.
Добавим еще одну плату для кнопок. На ней поставим Web Page блок с тремя страницами.
Для каждой кнопки будет своя страница (с булеан выходом при обращении к странице).
Т.к команды от кнопок, на стороне ESP, работают при обращении к странице, будем использовать HEAD запрос (запрос без ответа).
Для этого напишем в главной странице клиента скрипт, выполняющий HEAD запрос кнопки на сервер.
Чтобы знать реальное состояние кнопок на сервере, будем обновлять их состояние.
Допишем в скрипт «АВТО ОБНОВЛЕНИЕ» запрос на состояние кнопок, а также изменение их цвета, в зависимости от состояния.
В главной странице клиента допишем в стилях внешний вид и расположение кнопок.
Ну и конечно в теле html допишем сами кнопки.
Ответ всех данных с сервера будем отправлять одним пакетом, в виде массива текстовых слов (на русском языке для лучшего понимания). Для этого в первой плате добавим состояние кнопок, и времени, в виде текстовой строки через запятые.
2020_07_02_09_22_23_FLProg_6.3.1.png
В браузере можем посмотреть пакет принимаемых данных
2020_07_02_09_28_42_Client.png
По аналогии Авторского веб интерфейса добавил поля 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>
Наша страница в браузере выглядит так:
2020_07_02_00_06_40_Window.png
В связи с тем что, при усложнении хостовой страницы, появлялся не понятный баг.
А именно: при обращении к странице с данными, вместо нее в ответе возвращается хостовая станица (Выглядит это как наложение сдвинутой страницы без данных на ней. И хотя это происходит не часто, но неприятно. Решил не использовать страницу хост). По этому в главной странице клиента адрес станицы теперь client. Заходим на ESP теперь по адресу “IP/client”
Часы+кнопки.flp
(297.46 КБ) 13 скачиваний
Win10-64, FLProg (portable)

Ответить

Вернуться в «Букварь»