Шаблоны Оформления для Веб-Интерфейса
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Общение между ЕСП с помощью штатного веб-интерфейса и спецадресов
Демо-Видео:
видео_ограничено_администрацией
файлы проектов для двух есп8266:
[spoiler]
блок_ограничен_администрацией
[/spoiler]
Демо-Видео:
видео_ограничено_администрацией
файлы проектов для двух есп8266:
[spoiler]
блок_ограничен_администрацией
[/spoiler]
Последний раз редактировалось artemka19 24 мар 2023, 14:43, всего редактировалось 1 раз.
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
//------------------------------------------------------ only for FLPRog 7.5.2 -------------------------------------------//
Создав проект в ФЛПрог и установив для еспшек получение IP по DHCP,
порой бывает неудобно искать какой же адрес получила еспшка
.
Нужно заходить в роутер и там смотреть какой именно адрес присвоился.
Но теперь это в прошлом!
Теперь все наши устройства можно находить в сети, запустив либо локальный файл .html, либо из под любой другой еспшки (адрес которой нам известен).
Для этого нужно лишь установить блок в проект и скопировать скрипт в свой проект. (или использовать нижевыложенные проекты как шаблоны).
Демо-видео:
видео_ограничено_администрацией
.
.
.
. Скрины:
[spoiler] [/spoiler]
Файлы:
[spoiler]
блок отдельно:
блок_ограничен_администрацией
для запуска сканирования из локально файла(не забываем изменить в файле ip-маску под свою!):
[/spoiler]
Создав проект в ФЛПрог и установив для еспшек получение IP по DHCP,
порой бывает неудобно искать какой же адрес получила еспшка

Нужно заходить в роутер и там смотреть какой именно адрес присвоился.
Но теперь это в прошлом!

Теперь все наши устройства можно находить в сети, запустив либо локальный файл .html, либо из под любой другой еспшки (адрес которой нам известен).
Для этого нужно лишь установить блок в проект и скопировать скрипт в свой проект. (или использовать нижевыложенные проекты как шаблоны).
Демо-видео:
видео_ограничено_администрацией
.
.
.
. Скрины:
[spoiler] [/spoiler]
Файлы:
[spoiler]
блок отдельно:
блок_ограничен_администрацией
для запуска сканирования из локально файла(не забываем изменить в файле ip-маску под свою!):
[/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось artemka19 24 мар 2023, 14:45, всего редактировалось 1 раз.
Шаблоны Оформления для Веб-Интерфейса
Добрый день.Может у кого есть пример как использовать файлы CSS и JS из файловой системы SPIFF для оформления веб-интерфейса?
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
[ref]Fuksas[/ref],
[spoiler] ФАК:
на примере флпрог-портабл:
-идем по пути \PortableFLProg_7-4-6_Win64\ideV8\tools
-здесь создаем папки ESP32FS и ESP8266FS
-в каждой из этих папок создаем папку tool
-кладем esp8266fs.jar и esp32fs.jar в соответствующие папки
-теперь после запуска/перезапуска Ардуино ИДЕ, в разделе "инструменты"
у нас должны появится пункты "ESP32 Sketch Data Upload" и "ESP8266 Sketch Data Upload"
-Теперь после компиляции в флпрог и загрузки Ардуино ИДЕ из флпрог, выбираем "скетч"->"показать папку скетча"
-в открывшееся окно папки копируем папку "data" из вложения.
-выбираем в меню "инструменты" пункт "Flash Size 1 MB"
-нажимаем на "ESP8266 Sketch Data Upload"
-происходит загрузка файлов в файловую систему
------------------------------------------------------------------------
-теперь можно загрузить сам проект в еспшку.
[/spoiler]
[spoiler] ФАК:
на примере флпрог-портабл:
-идем по пути \PortableFLProg_7-4-6_Win64\ideV8\tools
-здесь создаем папки ESP32FS и ESP8266FS
-в каждой из этих папок создаем папку tool
-кладем esp8266fs.jar и esp32fs.jar в соответствующие папки
-теперь после запуска/перезапуска Ардуино ИДЕ, в разделе "инструменты"
у нас должны появится пункты "ESP32 Sketch Data Upload" и "ESP8266 Sketch Data Upload"
-Теперь после компиляции в флпрог и загрузки Ардуино ИДЕ из флпрог, выбираем "скетч"->"показать папку скетча"
-в открывшееся окно папки копируем папку "data" из вложения.
-выбираем в меню "инструменты" пункт "Flash Size 1 MB"
-нажимаем на "ESP8266 Sketch Data Upload"
-происходит загрузка файлов в файловую систему
------------------------------------------------------------------------
-теперь можно загрузить сам проект в еспшку.
[/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось artemka19 24 мар 2023, 14:46, всего редактировалось 1 раз.
- Sio
- Сержант
- Сообщения: 128
- Зарегистрирован: 28 июн 2021, 19:26
- Откуда: из дома, к вам
- Имя: Александр
- Благодарил (а): 8 раз
- Поблагодарили: 2 раза
Шаблоны Оформления для Веб-Интерфейса
Приветствую всх коллеи, у меня вопрос ещё раз про графики.
Сергей Глушенко выложил в сеть видео о создании графиков: https://www.youtube.com/watch?v=oBWwPablQ04
Очень хорошие видео, огромное СПАСИБО за подробно описанную информацию автору.
Но на видео видно сам график но в нём нет ориентиров, просто линия. Я тут примерно нарисовал, что имею ввиду. Хотелось бы дополнить график линиями температуры, какя температура была примерно 10 минут назат, итд...
Автор рисует графики на "КАНВАС" или "КАНВЕ" надо этот код немного дополнить. Кто-нибуди пытался дополнить код? Пожалуйста поделитесь наработками.
Сергей Глушенко выложил в сеть видео о создании графиков: https://www.youtube.com/watch?v=oBWwPablQ04
Очень хорошие видео, огромное СПАСИБО за подробно описанную информацию автору.
Но на видео видно сам график но в нём нет ориентиров, просто линия. Я тут примерно нарисовал, что имею ввиду. Хотелось бы дополнить график линиями температуры, какя температура была примерно 10 минут назат, итд...
Автор рисует графики на "КАНВАС" или "КАНВЕ" надо этот код немного дополнить. Кто-нибуди пытался дополнить код? Пожалуйста поделитесь наработками.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
[ref]Sio[/ref],
viewtopic.php?t=7761&start=60#p112413
только там через интернет, но можно скачать скрипт графика и закинуть его в файловую систему например.
viewtopic.php?t=7761&start=60#p112413
только там через интернет, но можно скачать скрипт графика и закинуть его в файловую систему например.
Шаблоны Оформления для Веб-Интерфейса
Может кому пригодиться.
Перезалил
Перезалил
Последний раз редактировалось cmept-27 22 ноя 2024, 15:45, всего редактировалось 5 раз.
OK
-
- Сержант
- Сообщения: 139
- Зарегистрирован: 23 ноя 2020, 16:46
- Имя: Artem
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Спасибо. То что надо. Очень красиво.cmept-27 писал(а): 24 июл 2022, 07:02 Может кому пригодиться.
0.png
1.png
2.png
3.png
4.png
5.png
ПРИМЕР.flp
Отправлено спустя 3 часа 36 минут 15 секунд:
А можно добавить ввод времени и текущее время?
-
- Сержант
- Сообщения: 139
- Зарегистрирован: 23 ноя 2020, 16:46
- Имя: Artem
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Спасибо за оперативность. А путь к файлу обновления как прописывать?
Шаблоны Оформления для Веб-Интерфейса
[ref]ArtemArable[/ref], Вопрос конечно интересный ? Зачем ? Поставьте прошивку и попробуйте.
OK
-
- Сержант
- Сообщения: 139
- Зарегистрирован: 23 ноя 2020, 16:46
- Имя: Artem
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Я про Webupdate. Он подразумевает диалог с выбором бинарника. Или я что то не понимаю?cmept-27 писал(а): 24 июл 2022, 16:29 [ref]ArtemArable[/ref], Вопрос конечно интересный ? Зачем ? Поставьте прошивку и попробуйте.
Шаблоны Оформления для Веб-Интерфейса
[ref]ArtemArable[/ref], При нажатии на кнопку UPDATE появиться диалог.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
OK
-
- Сержант
- Сообщения: 139
- Зарегистрирован: 23 ноя 2020, 16:46
- Имя: Artem
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Спасибо. Сегодня вечером попробую.
Отправлено спустя 3 часа 2 минуты 49 секунд:
поп
Отправлено спустя 3 часа 2 минуты 49 секунд:
поп
Спасибо. Залил в 32. Все классно. Олдскульный семисегментный стиль просто бомба. Хорошая база для проектов. Под 8266 кроме блока WebUpdate что еще необходимо подправить?cmept-27 писал(а): 25 июл 2022, 05:21 [ref]ArtemArable[/ref], При нажатии на кнопку UPDATE появиться диалог.
6.png
Шаблоны Оформления для Веб-Интерфейса
Звук на HTML странице при нажатии на кнопку.
Здесь вы можете конвертировать mp3 или wav файлы в формат Data URI:
https://dopiaza.org/tools/datauri/index.php
Здесь вы можете конвертировать mp3 или wav файлы в формат Data URI:
https://dopiaza.org/tools/datauri/index.php
Последний раз редактировалось cmept-27 22 ноя 2024, 15:44, всего редактировалось 1 раз.
OK
-
- Сержант
- Сообщения: 139
- Зарегистрирован: 23 ноя 2020, 16:46
- Имя: Artem
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Не получается адаптировать Ваш проект на ESP8266. Мешает шрифт. IDE выдает предупреждение о малой свободной памяти, при этом кроект загружается, но не работает.cmept-27 писал(а): 24 июл 2022, 07:02 Может кому пригодиться.
0.png
1.png
2.png
3.png
4.png
5.png
ПРИМЕР.flp
Перезалил
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Блоки Графиков для штатного веб-интерфейса
*создано в FLProg v.7.5.2 1-вытащить блок "Настройки общие" на плату проекта
[spoiler] [/spoiler]
-подать на вход "Записать значения" сигнал по которому будут записывать ся значения в массивы
-указать количество точек (проверял на 2х1000 и 5х300 точек)
-указать названия графиков
(КОЛИЧЕСТВО НАЗВАНИЙ (Т.Е. КОЛИЧЕСТВО ГРАФИКОВ), ДОЛЖНО СООТВЕТСТВОВАТЬ КОЛИЧЕСТВУ БЛОКОВ "Данные для Линии/Точек")
-можно использовать как со временем из блока NTP, так и без времени (будет просто эмулироваться счет от 1++)
[spoiler] [/spoiler]
-настроить по вкусу и цвету)))
[spoiler] [/spoiler]
2-вытащить минимум(!) один блок "Данные для Линии/Точек"
(каждый блок = линия на графике)
-подать на вход блока данные, которые будут отображаться на графике
[spoiler] [/spoiler]
3-создать ДВЕ стринг-переменные (это служебные, нужны для передачи инфы в мк через штатный веб)
и подключить их к выходам блока настроек.
[spoiler] [/spoiler]
4-включить веб-интерфейс и скопировать 3 пункта из примера к себе в проект
[spoiler] [/spoiler]
Возможности:
-работают без Интернета
-8266/32
-скрипты кэшируются.
т.е. первая загрузка будет долше обычной, но все последующие будут молниеносны))))
-можно сохранять/загружать ранее сохраненные файлы графиков в различных форматах
-включать/отключать реалтайм (обращение к есп после построения графиков)
-менять тип линий графиков
-фуллскрин
-вывод таблицы значений
-зуммирование графиков
...короче там много чего)
*график оперативный - т.е. до данные не хранятся в энергонезависимой памяти
**массивы с данными - не СТЕК: используется индекс общий для всех масcивов - так быстрее и не нужно
переписывать массивы целиком, что позволит в будущем сделать энергонезависимые графики.
[spoiler] [/spoiler]
ОБМЕНЯТЬСЯ С ТОВАРИЩЕМ СВОИМИ ФАЙЛАМИ ГРАФИКОВ
проект:
блок_ограничен_администрацией
*создано в FLProg v.7.5.2 1-вытащить блок "Настройки общие" на плату проекта
[spoiler] [/spoiler]
-подать на вход "Записать значения" сигнал по которому будут записывать ся значения в массивы
-указать количество точек (проверял на 2х1000 и 5х300 точек)
-указать названия графиков
(КОЛИЧЕСТВО НАЗВАНИЙ (Т.Е. КОЛИЧЕСТВО ГРАФИКОВ), ДОЛЖНО СООТВЕТСТВОВАТЬ КОЛИЧЕСТВУ БЛОКОВ "Данные для Линии/Точек")
-можно использовать как со временем из блока NTP, так и без времени (будет просто эмулироваться счет от 1++)
[spoiler] [/spoiler]
-настроить по вкусу и цвету)))
[spoiler] [/spoiler]
2-вытащить минимум(!) один блок "Данные для Линии/Точек"
(каждый блок = линия на графике)
-подать на вход блока данные, которые будут отображаться на графике
[spoiler] [/spoiler]
3-создать ДВЕ стринг-переменные (это служебные, нужны для передачи инфы в мк через штатный веб)
и подключить их к выходам блока настроек.
[spoiler] [/spoiler]
4-включить веб-интерфейс и скопировать 3 пункта из примера к себе в проект
[spoiler] [/spoiler]
Возможности:
-работают без Интернета
-8266/32
-скрипты кэшируются.
т.е. первая загрузка будет долше обычной, но все последующие будут молниеносны))))
-можно сохранять/загружать ранее сохраненные файлы графиков в различных форматах
-включать/отключать реалтайм (обращение к есп после построения графиков)
-менять тип линий графиков
-фуллскрин
-вывод таблицы значений
-зуммирование графиков
...короче там много чего)
*график оперативный - т.е. до данные не хранятся в энергонезависимой памяти
**массивы с данными - не СТЕК: используется индекс общий для всех масcивов - так быстрее и не нужно
переписывать массивы целиком, что позволит в будущем сделать энергонезависимые графики.
[spoiler] [/spoiler]
ОБМЕНЯТЬСЯ С ТОВАРИЩЕМ СВОИМИ ФАЙЛАМИ ГРАФИКОВ



проект:
блок_ограничен_администрацией
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось artemka19 24 мар 2023, 14:48, всего редактировалось 20 раз.
-
- Лейтенант
- Сообщения: 540
- Зарегистрирован: 03 сен 2020, 15:41
- Откуда: Питер
- Имя: Артем
- Поблагодарили: 1 раз
Шаблоны Оформления для Веб-Интерфейса
Эти файлы - исключительно в демонстрационных целях: т.е. вы сможете открыть у себя на еспшке мой график ТОЛЬКО ДЛЯ ПРОСМОТРА, и я, в свою очередь, смогу ваши файлы просмотреть у себя.
вот мои сохраненные графики:
*перезалив проекта
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Шаблоны Оформления для Веб-Интерфейса
artemka19,не могли бы вы добавить окошко для ввода часов и минут, как на картинке? Спасибо!
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость