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

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

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

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

#141

Сообщение artemka19 » 20.06.2022{, 21:25}

Общение между ЕСП с помощью штатного веб-интерфейса и спецадресов


Демо-Видео:
https://disk.yandex.ru/i/vMQDVxY3O360Eg

файлы проектов для двух есп8266:
СпойлерПоказать

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

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

#142

Сообщение artemka19 » 23.06.2022{, 02:06}

//------------------------------------------------------ only for FLPRog 7.5.2 -------------------------------------------//

Создав проект в ФЛПрог и установив для еспшек получение IP по DHCP,
порой бывает неудобно искать какой же адрес получила еспшка :).

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

Но теперь это в прошлом! :)

Теперь все наши устройства можно находить в сети, запустив либо локальный файл .html, либо из под любой другой еспшки (адрес которой нам известен).

Для этого нужно лишь установить блок в проект и скопировать скрипт в свой проект. (или использовать нижевыложенные проекты как шаблоны).

Демо-видео:
https://disk.yandex.ru/i/7sw_oZ8SZ3M1lA
.
.
.
.
4.png
Скрины:
СпойлерПоказать
скрин настроек блока.png
скрин настроек блока.png (9.6 КБ) 1413 просмотров
1.png
2.png
3.png
4.png
Файлы:
СпойлерПоказать
блок отдельно:
scan_my_esp-32-на форум.flp
(649.54 КБ) 20 скачиваний
scan_my_esp-8266-1-на форум.flp
(664.86 КБ) 16 скачиваний
scan_my_esp-8266-2-на форум.flp
(665.29 КБ) 17 скачиваний
для запуска сканирования из локально файла(не забываем изменить в файле ip-маску под свою!):

Fuksas
Рядовой
Сообщения: 14
Зарегистрирован: 12.06.2017{, 23:13}
Репутация: 0

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

#143

Сообщение Fuksas » 30.06.2022{, 10:56}

Добрый день.Может у кого есть пример как использовать файлы CSS и JS из файловой системы SPIFF для оформления веб-интерфейса?

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

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

#144

Сообщение artemka19 » 30.06.2022{, 12:58}

Fuksas,
data.zip
(8.92 КБ) 14 скачиваний
СпойлерПоказать
1.jpg
2.jpg
ФАК:

на примере флпрог-портабл:
-идем по пути \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"
-происходит загрузка файлов в файловую систему
------------------------------------------------------------------------
-теперь можно загрузить сам проект в еспшку.

Аватара пользователя
Sio
Рядовой
Сообщения: 16
Зарегистрирован: 28.06.2021{, 19:26}
Репутация: 0
Имя: Sio

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

#145

Сообщение Sio » 03.07.2022{, 23:31}

Приветствую всх коллеи, у меня вопрос ещё раз про графики.
Сергей Глушенко выложил в сеть видео о создании графиков:
Очень хорошие видео, огромное СПАСИБО за подробно описанную информацию автору.
Но на видео видно сам график но в нём нет ориентиров, просто линия.
grafik.jpg
Я тут примерно нарисовал, что имею ввиду. Хотелось бы дополнить график линиями температуры, какя температура была примерно 10 минут назат, итд...
Автор рисует графики на "КАНВАС" или "КАНВЕ" надо этот код немного дополнить.
canvas.jpg
Кто-нибуди пытался дополнить код? Пожалуйста поделитесь наработками.

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

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

#146

Сообщение artemka19 » 04.07.2022{, 02:09}

Sio,

viewtopic.php?t=7761&start=60#p112413

только там через интернет, но можно скачать скрипт графика и закинуть его в файловую систему например.

Аватара пользователя
cmept-27
Сержант
Сообщения: 248
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 65

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

#147

Сообщение cmept-27 » 24.07.2022{, 07:02}

Может кому пригодиться.
0.png
1.png
2.png
3.png
4.png
5.png
ПРИМЕР.flp
(3.13 МБ) 30 скачиваний
Перезалил
Последний раз редактировалось cmept-27 24.07.2022{, 14:13}, всего редактировалось 4 раза.
OK

ArtemArable
Рядовой
Сообщения: 53
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#148

Сообщение ArtemArable » 24.07.2022{, 08:39}

cmept-27 писал(а):
24.07.2022{, 07:02}
Может кому пригодиться.
0.png
1.png
2.png
3.png
4.png
5.png
ПРИМЕР.flp
Спасибо. То что надо. Очень красиво.

Отправлено спустя 3 часа 36 минут 15 секунд:
cmept-27 писал(а):
24.07.2022{, 07:02}
Может кому пригодиться.
ПРИМЕР.flp
А можно добавить ввод времени и текущее время?

Аватара пользователя
cmept-27
Сержант
Сообщения: 248
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 65

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

#149

Сообщение cmept-27 » 24.07.2022{, 13:28}

ArtemArable, Перезалил
OK

ArtemArable
Рядовой
Сообщения: 53
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#150

Сообщение ArtemArable » 24.07.2022{, 15:57}

cmept-27 писал(а):
24.07.2022{, 13:28}
ArtemArable, Перезалил
Спасибо за оперативность. А путь к файлу обновления как прописывать?

Аватара пользователя
cmept-27
Сержант
Сообщения: 248
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 65

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

#151

Сообщение cmept-27 » 24.07.2022{, 16:29}

ArtemArable, Вопрос конечно интересный ? Зачем ? Поставьте прошивку и попробуйте.
OK

ArtemArable
Рядовой
Сообщения: 53
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#152

Сообщение ArtemArable » 24.07.2022{, 16:49}

cmept-27 писал(а):
24.07.2022{, 16:29}
ArtemArable, Вопрос конечно интересный ? Зачем ? Поставьте прошивку и попробуйте.
Я про Webupdate. Он подразумевает диалог с выбором бинарника. Или я что то не понимаю?

Аватара пользователя
cmept-27
Сержант
Сообщения: 248
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 65

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

#153

Сообщение cmept-27 » 25.07.2022{, 05:21}

ArtemArable, При нажатии на кнопку UPDATE появиться диалог.
6.png
6.png (2.67 КБ) 567 просмотров
OK

ArtemArable
Рядовой
Сообщения: 53
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#154

Сообщение ArtemArable » 25.07.2022{, 05:39}

Спасибо. Сегодня вечером попробую.

Отправлено спустя 3 часа 2 минуты 49 секунд:
поп
cmept-27 писал(а):
25.07.2022{, 05:21}
ArtemArable, При нажатии на кнопку UPDATE появиться диалог.
6.png
Спасибо. Залил в 32. Все классно. Олдскульный семисегментный стиль просто бомба. Хорошая база для проектов. Под 8266 кроме блока WebUpdate что еще необходимо подправить?

Аватара пользователя
cmept-27
Сержант
Сообщения: 248
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 65

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

#155

Сообщение cmept-27 » 01.08.2022{, 17:14}

Звук на HTML странице при нажатии на кнопку.
ПРИМЕР (1).flp
(794.74 КБ) 11 скачиваний
Здесь вы можете конвертировать mp3 или wav файлы в формат Data URI:
https://dopiaza.org/tools/datauri/index.php
OK

ArtemArable
Рядовой
Сообщения: 53
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#156

Сообщение ArtemArable » 03.08.2022{, 21:29}

cmept-27 писал(а):
24.07.2022{, 07:02}
Может кому пригодиться.
0.png
1.png
2.png
3.png
4.png
5.png
ПРИМЕР.flp
Перезалил
Не получается адаптировать Ваш проект на ESP8266. Мешает шрифт. IDE выдает предупреждение о малой свободной памяти, при этом кроект загружается, но не работает.

Ответить

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