Отображение/Управление несколькими ЕСП с одного места. (локально)
Демо-Гифка:
Иногда возникает потребность мониторить показания от разных ЕСП в одном месте. С одной веб-страницы страницы. (в локальной сети).
Например так:
Однако, просто так этого не получится сделать: веб-бразуеры блокируют запросы на другие ip-адреса, отличные от адреса страницы на которой мы находимся. В браузерах срабатывает правило "Cross-Origin Resource Sharing (CORS)".
Какой же выход?
Необходимо чтобы сервер (сервер который у нас на ЕСП находится) разрешал читать информацию, запрашиваемую web-браузером. (путем добавления новых HTTP-заголовков).
В 2020 году в библиотеки ЕСП8266/32 данная функция была добавлена в соответствующие библиотеки.
Теперь достаточно вызвать
enableCORS(true) перед
WiFi.begin и мы получаим возможность читать информацию, запрашиваемую web-браузером из разных источников (в нашем случае - из разных ЕСП в пределах локальной сети).
В конце поста будет выложен блок и проект, который включает CORS на серверах в наших ЕСП.
- 2.png (3.87 КБ) 2678 просмотров
Итак, предлагаю два варианта отображения информации с разных ЕСП в одном месте:
1 - использование файла "сбор_данных_с_нескольких _ЕСП_(локально).htm", который мы просто запускаем в браузере. (указав в этом файле ip-адреса необходимых ЕСП).
2 - создаем в ФЛПрог (в веб-интерфейсе) страничку в Меню, перейдя на которую мы сможем увидеть данные с других ЕСП в локальной сети.
//-------------------------------------------------все примеры/блок/проекты реализованы на версии 7.5.2---------------------------------------//
//-----------------------------------------------------------------------------1 вариант-------------------------------------------------------------------------//
1 - проект ФЛПрог.
-вытаскиваем блок "Доступ_к_данным_esp826632_(заголовки_для_CORS)_(Code_-_Professional)" в проект
-в проекте ФЛПрог включаем web-интерфейс и на Первую страничку выносим Первым какой-нибудь параметр, который будем мониторить.
-Почему Первым? Исключительно для упрощения примера. Можно мониторить с любой страницы. Любой параметр.
-в конце поста будет пример проекта.
2 - Предварительно настроим ip-адреса в ФЛПрог.
-Идем сюда (раздел "Специальные адреса" в настройках веб-интерфейса):
-Снимаем галочку с "Динамические адреса"
-Прописываем любые свои удобочитаемые адреса. (Например как на картинке выше)
3 - Прописываем в файле адреса. которые мы задали выше.
-Берем файл "сбор_данных_с_нескольких _ЕСП_(локально).htm":
-Открываем его в Блокноте
-Находим там строку со следующим содержимым: "
var url1="http://192.168.138.19/zapros_new_data?page=1";"
(строки номер 141,181, 219)
-Меняем адрес на свой. (указываем адрес до "?page=1")
4 - Прошиваем ЕСП.
5 - Запускаем файл "сбор_данных_с_нескольких _ЕСП_(локально).htm".
получаем это, видим что ЕСП№2 недоступна, а с ЕСП№1 и ЕСП№3 получаем данные:
Выводимый текст можно подправить под себя здесь:
строка 168, 206, 244 - document.getElementById("esp1").innerHTML = (url1) + "<br>" + "Получено с ЕСП № 1: " + (obj001["d"][0]["v"]);
где можно добавить/удалить/изменить под себя:
-(url1) - это ip адрес
- "<br>" - это перенос строки
-"Получено с ЕСП № 1: " - это просто текст
-(obj001
["d"][0]["v"]) - здесь задаем какой параметр выводить. [0] -это первый параметр на странице флпрог, [1] - это второй, [2] - это третий и т.д.
Файлы:
-страница для запуска в браузере:
-проект для ЕСП1
-проект для ЕСП2
-проект для ЕСП3 (есп32)
Для пробы достаточно одной ЕСП. Необязательно все три использовать
В файле можно легко добавить/удалить количество отображаемых параметров: просто скопировать и вставить код и изменить такие значения как otvet001.open, url1, otvet001.ontimeout=control001, otvet001.timeout, otvet001.open и т.д. , просто увеличив цифры 001,002,003,004,005 и т.д.
Не забываем при добавлении изменять <div id="esp2" class="label">Offline</div>, просто увеличивая esp3, esp4, esp5 и т.д.
//-----------------------------------------------------------------------------2 вариант-------------------------------------------------------------------------//
Этот вариант реализован в файлах проектов выше)))
Выглядит это так:
