Шаблоны Оформления для Веб-Интерфейса

[Qwert855]

WebUpdate есп8266 теперь на штатном порту (80)
Основан на блоке от User8.
GIFка
bandicam-2022-03-23-22-38-38-882.gif

[spoiler]
форум-WebUpdate-esp8266-port=80.flp
[/spoiler]

Добрый день. помогите пож-та подобным скриптом обновления программы по ссылке с ФТП файлового обменника.
Например, выложить на внешний ресурс бин файл, удаленно послать команду МК на скачку файла по ссылке.

[karen]

WebUpdate есп8266 теперь на штатном порту (80)
Основан на блоке от User8.
GIFка
bandicam-2022-03-23-22-38-38-882.gif

[spoiler]
форум-WebUpdate-esp8266-port=80.flp
[/spoiler]

Добрый день. помогите пож-та подобным скриптом обновления программы по ссылке с ФТП файлового обменника.
Например, выложить на внешний ресурс бин файл, удаленно послать команду МК на скачку файла по ссылке.

Про команду не знаю. Но есть блок http update.
Нужен только ftp на http,
Подаём en на блок esp скачивает bin обновляется.

[artemka19]

Пример Автоматического Отключения/Включения Точки Доступа, при наличии Удачного соединения Клиентом с применением Пользовательского Блока из веб-интерфейса:

Безымянный.png

[spoiler]
блок_ограничен_администрацией
[/spoiler]

Подробнее о Пользовательском Блоке:
[spoiler]
viewtopic.php?f=194&t=8024&p=114431#p114431
[/spoiler]

[Sps]

Здравствуйте, в связке ESP32 и SD пытаюсь сделать WebServer, чтобы файлы страниц загружать в браузер с SD карты. Пока не разобрался в чем отличие, вернее для каких целей лучше использовать WebServerPage и для каких web интерфейс и вообще на FLProg можно сделать то, что я хочу.

[artemka19]

WebServerPage - это устаревшая версия Веб интерфейса.
Веб интерфейс - это замена WebServerPage.

[Sps]

WebServerPage - это устаревшая версия Веб интерфейса.
Веб интерфейс - это замена WebServerPage.

Так, с этим понятно, спасибо, а через Веб интерфейс можно как-то общаться с SD картой и подгружать от туда HTML файлы?

[artemka19]

[ref]Sps[/ref], с sd картой не пробовал, а через файловую систему еспшки вполне можно. Выше есть примеры

[aidar_i]

Так, с этим понятно, спасибо, а через Веб интерфейс можно как-то общаться с SD картой и подгружать от туда HTML файлы?

[ref]Sps[/ref], с sd картой не пробовал, а через файловую систему еспшки вполне можно. Выше есть примеры

Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.

[Sps]

Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.

С Веб интерфейсом практически разобрался HTML + css вывожу без проблем, сейчас разбираюсь куда script вставлять, а вот что за зверь файловая система пока не понял, где посмотреть примеры, что почитать? и вообще из файловой системы как-то можно обратиться к SD

[aidar_i]

Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.

С Веб интерфейсом практически разобрался HTML + css вывожу без проблем, сейчас разбираюсь куда script вставлять, а вот что за зверь файловая система пока не понял, где посмотреть примеры, что почитать? и вообще из файловой системы как-то можно обратиться к SD

Поищите здесь мои темы про SPIFFS, там есть ссылка, где почитать.

[artemka19]

[ref]Sps[/ref], так выше же есть мини фак

viewtopic.php?t=7761&start=80#p113380

[Sps]

Sps, так выше же есть мини фак
viewtopic.php?t=7761&start=80#p113380

Сначала при компиляции выдает 'File' does not name a type
Потом после нажатия ESP32 Sketch Data Upload
[spoiler]
[SPIFFS] data : C:\Users\Сергей\AppData\Local\Temp\flprog\pr1\data
[SPIFFS] start : 3997696
[SPIFFS] size : 192
[SPIFFS] page : 256
[SPIFFS] block : 4096
[SPIFFS] upload : C:\Users\D899~1\AppData\Local\Temp\arduino_build_21547/pr1.spiffs.bin
[SPIFFS] address: 3997696
[SPIFFS] port : COM10
[SPIFFS] speed : 921600
[SPIFFS] mode : dio
[SPIFFS] freq : 80m

esptool.py v3.0-dev
Serial port COM10
Connecting........_
Chip is ESP32-D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse, Coding Scheme None
Crystal is 40MHz
MAC: ac:67:b2:37:a2:14
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 921600
Changed.
Configuring flash size...
Auto-detected Flash size: 4MB
Compressed 196608 bytes to 376...
Writing at 0x003d0000... (100
Wrote 196608 bytes (376 compressed) at 0x003d0000 in 0.1 seconds (effective 23831.3 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...
[/spoiler]
что дальше с этим делать и как использовать не разобрался.

[tornado]

Как сделать кнопку(push) в веб интерфейсе при нажатии -1, при отпускании -0 ?

[agronom]

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

2022-05-25_093809.png

Может у кого получилось перенести

[karen]

Не нашёл в ваших примерах тэг как можно выровнять название с его значением в одну линию?
У автора в настройках есть два параметра либо сверху, либо снизу
2022-05-25_093809.png
Может у кого получилось перенести

Проект можно?! Попробую вам помочь.

[slsl]

Не нашёл в ваших примерах тэг как можно выровнять название с его значением в одну линию?

Используйте в оформлении параметра - noBlock.
Если среди стилей его нет, то добавьте;

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

.noBlock
      {
      display: inline;
      }

[agronom]

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

а вот с добавлением мнемоники так просто нельзя забросить стиль видимо

2022-05-26_085148.png

портится всё вокруг и перекликается с общими стилями
а я уж подумал, что таким образом можно набросать кучу стилей и пользоваться

[artemka19]

Отображение/Управление несколькими ЕСП с одного места. (локально)

Демо-Гифка:

bandicam-2022-06-02-19-25-27-720.gif

Иногда возникает потребность мониторить показания от разных ЕСП в одном месте. С одной веб-страницы страницы. (в локальной сети).
Например так:

1.png

Однако, просто так этого не получится сделать: веб-бразуеры блокируют запросы на другие ip-адреса, отличные от адреса страницы на которой мы находимся. В браузерах срабатывает правило "Cross-Origin Resource Sharing (CORS)".
Какой же выход?
Необходимо чтобы сервер (сервер который у нас на ЕСП находится) разрешал читать информацию, запрашиваемую web-браузером. (путем добавления новых HTTP-заголовков).

В 2020 году в библиотеки ЕСП8266/32 данная функция была добавлена в соответствующие библиотеки.
Теперь достаточно вызвать enableCORS(true) перед WiFi.begin и мы получаим возможность читать информацию, запрашиваемую web-браузером из разных источников (в нашем случае - из разных ЕСП в пределах локальной сети).

В конце поста будет выложен блок и проект, который включает CORS на серверах в наших ЕСП.

2.png

Итак, предлагаю два варианта отображения информации с разных ЕСП в одном месте:

1 - использование файла "сбор_данных_с_нескольких _ЕСП_(локально).htm", который мы просто запускаем в браузере. (указав в этом файле ip-адреса необходимых ЕСП).
2 - создаем в ФЛПрог (в веб-интерфейсе) страничку в Меню, перейдя на которую мы сможем увидеть данные с других ЕСП в локальной сети.

//-------------------------------------------------все примеры/блок/проекты реализованы на версии 7.5.2---------------------------------------//

//-----------------------------------------------------------------------------1 вариант-------------------------------------------------------------------------//
1 - проект ФЛПрог.
-вытаскиваем блок "Доступ_к_данным_esp826632_(заголовки_для_CORS)_(Code_-_Professional)" в проект

-в проекте ФЛПрог включаем web-интерфейс и на Первую страничку выносим Первым какой-нибудь параметр, который будем мониторить.
-Почему Первым? Исключительно для упрощения примера. Можно мониторить с любой страницы. Любой параметр.
-в конце поста будет пример проекта.

2 - Предварительно настроим ip-адреса в ФЛПрог.
-Идем сюда (раздел "Специальные адреса" в настройках веб-интерфейса):

3.png

-Снимаем галочку с "Динамические адреса"
-Прописываем любые свои удобочитаемые адреса. (Например как на картинке выше)

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 получаем данные:

1.png

Выводимый текст можно подправить под себя здесь:
строка 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 вариант-------------------------------------------------------------------------//

Этот вариант реализован в файлах проектов выше)))
Выглядит это так:

11.png

22.png

[artemka19]

Передаем данные из ЕСП в виджет/гаджет Windows 7/8/10/11

Вспомним сегодня о таких полузабытых программах как виджеты/гаджеты в Windows
Демо-Видео:
https://disk.yandex.ru/i/a3VOUzXsBFXK7Q

Чтобы запускать виджеты/Гаджеты на Win 8/10/11, необходимо сначала установить программу 8gadgetpack
После установки можно запускать виджет как обычно. Также как в Win7.
https://8gadgetpack.net/


//---------------------------------------шаг 1 -------------------------------------//
Создаем проект в флпрог.
Вытаскиваем значение переменной, которую будем мониторить в виджете, в веб-интерфейс

6.png

//---------------------------------------шаг 2 -------------------------------------//

1-качаем файл виджета:

мой гаджет 1 значение.rar

2-получаем такой файл:

1.png

3-распаковывем этот файл как обычный архив и получаем это:

2.png

//---------------------------------------шаг 3 -------------------------------------//

1-открываем файл gadget.html в Блокноте:

3.png

2-ищем там такую строку (строка №55):

4.png

3-меняем адрес с http://192.168.138.9/zapros_new_data?page=1 на адрес Своей ЕСП.

4-вот этот текст zapros_new_data мы предварительно задаем в ФЛПрог -> Инструменты -> Отладчик Веб-интерфейса -> Настройки Веб-интерфейса -> Специальные Адреса.

5.png

5-вот этот текст page=1 - это номер Страницы в веб-интерфейсе, откуда мы будем забирать данные в виджет/гаджет

6-сохраняем изменения


//---------------------------------------шаг 4 -------------------------------------//

1-теперь выделяем все элементы

7.png

2-Нажимаем правой клавишей мыши и выбираем "Добавить к архиву" и ИЗМЕНЯЕМ РАСШИРЕНИЕ с .zip на .gadget

8.png

9.png

3-в результате получаем:

10.png

4-устанавливаем виджет/гаджет (кликаем два раза по файлу "мой гаджет 1 позиция.gadget")

11.png

12.png

13.png

Не забываем, что для Win 8/10/11, необходимо сначала установить программу 8gadgetpack
После установки можно запускать виджет как обычно. Также как в Win7.
https://8gadgetpack.net/

[artemka19]

Гаджет/Виджет на 3 позиции:

[spoiler]

1.png

2.png

мой гаджет 3 позиции.rar

[/spoiler]