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

Делимся шаблонами для веб интерфейса.

Qwert855
Сержант
Сообщения: 159
Зарегистрирован: 19.12.2020{, 23:57}
Репутация: 7
Имя: Alex

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

#121

Сообщение Qwert855 » 22.04.2022{, 11:12}

artemka19 писал(а):
23.03.2022{, 22:51}
WebUpdate есп8266 теперь на штатном порту (80)
Основан на блоке от User8.
GIFка
bandicam-2022-03-23-22-38-38-882.gif
СпойлерПоказать
форум-WebUpdate-esp8266-port=80.flp
Добрый день. помогите пож-та подобным скриптом обновления программы по ссылке с ФТП файлового обменника.
Например, выложить на внешний ресурс бин файл, удаленно послать команду МК на скачку файла по ссылке.

Аватара пользователя
karen
Рядовой
Сообщения: 46
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#122

Сообщение karen » 22.04.2022{, 12:44}

Qwert855 писал(а):
22.04.2022{, 11:12}
artemka19 писал(а):
23.03.2022{, 22:51}
WebUpdate есп8266 теперь на штатном порту (80)
Основан на блоке от User8.
GIFка
bandicam-2022-03-23-22-38-38-882.gif
СпойлерПоказать
форум-WebUpdate-esp8266-port=80.flp
Добрый день. помогите пож-та подобным скриптом обновления программы по ссылке с ФТП файлового обменника.
Например, выложить на внешний ресурс бин файл, удаленно послать команду МК на скачку файла по ссылке.

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

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#123

Сообщение artemka19 » 02.05.2022{, 22:19}

Пример Автоматического Отключения/Включения Точки Доступа, при наличии Удачного соединения Клиентом с применением Пользовательского Блока из веб-интерфейса:
Безымянный.png
СпойлерПоказать
Fix_Client_Reconnect_final_001_7.5.1.flp
(434.13 КБ) 28 скачиваний
Подробнее о Пользовательском Блоке:
СпойлерПоказать

Sps
Рядовой
Сообщения: 8
Зарегистрирован: 22.04.2017{, 17:25}
Репутация: 0

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

#124

Сообщение Sps » 14.05.2022{, 00:13}

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

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#125

Сообщение artemka19 » 14.05.2022{, 01:07}

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

Sps
Рядовой
Сообщения: 8
Зарегистрирован: 22.04.2017{, 17:25}
Репутация: 0

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

#126

Сообщение Sps » 14.05.2022{, 09:00}

artemka19 писал(а):
14.05.2022{, 01:07}
WebServerPage - это устаревшая версия Веб интерфейса.
Веб интерфейс - это замена WebServerPage.
Так, с этим понятно, спасибо, а через Веб интерфейс можно как-то общаться с SD картой и подгружать от туда HTML файлы?

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#127

Сообщение artemka19 » 14.05.2022{, 09:21}

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

aidar_i
Полковник
Сообщения: 2477
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 417
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#128

Сообщение aidar_i » 14.05.2022{, 11:47}

Sps писал(а):
14.05.2022{, 09:00}
Так, с этим понятно, спасибо, а через Веб интерфейс можно как-то общаться с SD картой и подгружать от туда HTML файлы?
artemka19 писал(а):
14.05.2022{, 09:21}
Sps, с sd картой не пробовал, а через файловую систему еспшки вполне можно. Выше есть примеры
Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.

Sps
Рядовой
Сообщения: 8
Зарегистрирован: 22.04.2017{, 17:25}
Репутация: 0

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

#129

Сообщение Sps » 14.05.2022{, 17:53}

aidar_i писал(а):
14.05.2022{, 11:47}
Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.
С Веб интерфейсом практически разобрался HTML + css вывожу без проблем, сейчас разбираюсь куда script вставлять, а вот что за зверь файловая система пока не понял, где посмотреть примеры, что почитать? и вообще из файловой системы как-то можно обратиться к SD

aidar_i
Полковник
Сообщения: 2477
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 417
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#130

Сообщение aidar_i » 14.05.2022{, 18:50}

Sps писал(а):
14.05.2022{, 17:53}
aidar_i писал(а):
14.05.2022{, 11:47}
Можно без проблем, если работает с файловой системой. Принцип работы там почти одинаковый. Я помню, переделывал скетч с файловой системы на СД, там менял только библиотеки и в коде fs на sd.
С Веб интерфейсом практически разобрался HTML + css вывожу без проблем, сейчас разбираюсь куда script вставлять, а вот что за зверь файловая система пока не понял, где посмотреть примеры, что почитать? и вообще из файловой системы как-то можно обратиться к SD
Поищите здесь мои темы про SPIFFS, там есть ссылка, где почитать.

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#131

Сообщение artemka19 » 14.05.2022{, 21:42}

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

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

Sps
Рядовой
Сообщения: 8
Зарегистрирован: 22.04.2017{, 17:25}
Репутация: 0

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

#132

Сообщение Sps » 15.05.2022{, 08:40}

artemka19 писал(а):
14.05.2022{, 21:42}
Sps, так выше же есть мини фак
viewtopic.php?t=7761&start=80#p113380
Сначала при компиляции выдает 'File' does not name a type
Потом после нажатия ESP32 Sketch Data Upload
СпойлерПоказать
[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...
что дальше с этим делать и как использовать не разобрался.

tornado
Рядовой
Сообщения: 14
Зарегистрирован: 14.04.2020{, 21:17}
Репутация: 1
Имя: Ivan

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

#133

Сообщение tornado » 22.05.2022{, 07:29}

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

agronom
Рядовой
Сообщения: 9
Зарегистрирован: 24.05.2022{, 06:56}
Репутация: 0
Имя: Стас

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

#134

Сообщение agronom » 25.05.2022{, 05:52}

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

Аватара пользователя
karen
Рядовой
Сообщения: 46
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#135

Сообщение karen » 25.05.2022{, 16:24}

agronom писал(а):
25.05.2022{, 05:52}
Не нашёл в ваших примерах тэг как можно выровнять название с его значением в одну линию?
У автора в настройках есть два параметра либо сверху, либо снизу
2022-05-25_093809.png
Может у кого получилось перенести
Проект можно?! Попробую вам помочь.
karens4

slsl
Рядовой
Сообщения: 4
Зарегистрирован: 08.12.2021{, 22:41}
Репутация: 2
Имя: Вячеслав

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

#136

Сообщение slsl » 25.05.2022{, 17:46}

agronom писал(а):
25.05.2022{, 05:52}
Не нашёл в ваших примерах тэг как можно выровнять название с его значением в одну линию?
Используйте в оформлении параметра - noBlock.
Если среди стилей его нет, то добавьте;

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

.noBlock
      {
      display: inline;
      }

agronom
Рядовой
Сообщения: 9
Зарегистрирован: 24.05.2022{, 06:56}
Репутация: 0
Имя: Стас

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

#137

Сообщение agronom » 26.05.2022{, 05:04}

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

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

2022-05-26_085148.png
портится всё вокруг и перекликается с общими стилями
а я уж подумал, что таким образом можно набросать кучу стилей и пользоваться

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#138

Сообщение artemka19 » 02.06.2022{, 18:25}

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

Демо-Гифка:
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
2.png (3.87 КБ) 338 просмотров

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

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
CORS-1-на форум.flp
(658.99 КБ) 11 скачиваний
-проект для ЕСП2
CORS-2-на форум.flp
(882.16 КБ) 16 скачиваний
-проект для ЕСП3 (есп32)
CORS-3-esp32-на форум.flp
(853.51 КБ) 31 скачивание
Для пробы достаточно одной ЕСП. Необязательно все три использовать :)
В файле можно легко добавить/удалить количество отображаемых параметров: просто скопировать и вставить код и изменить такие значения как 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
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#139

Сообщение artemka19 » 03.06.2022{, 23:10}

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

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

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


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



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

1-качаем файл виджета:
мой гаджет 1 значение.rar
(48.1 КБ) 11 скачиваний
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
11.png (30.52 КБ) 270 просмотров
12.png
13.png

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

artemka19
Сержант
Сообщения: 198
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 77
Откуда: Питер
Имя: Артем

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

#140

Сообщение artemka19 » 04.06.2022{, 00:48}

Гаджет/Виджет на 3 позиции:
СпойлерПоказать
1.png
2.png
мой гаджет 3 позиции.rar
(48.33 КБ) 12 скачиваний

Ответить

Вернуться в «WEB интерфейс»