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

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

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#1

Сообщение petroua » 12.12.2021{, 04:27}

Статус соединения с есп в веб-интерфейсе:
viewtopic.php?t=7761&start=40#p111669

Новогодняя:
viewtopic.php?f=202&t=7761&p=111670#p111670

Стрелочный индикатор:
viewtopic.php?f=202&t=7761&p=111670#p111671

Один из вариантов оформления меню
viewtopic.php?f=202&t=7761&p=109890#p109919

кнопка меняющая цвет по состоянию(on/off).
viewtopic.php?t=7761&start=20#p110202

круглые цифровые индикаторы:
viewtopic.php?t=7761&start=40#p111674

встроенные шрифт и иконки:
viewtopic.php?t=7761&start=40#p111518

вывод графика
viewtopic.php?t=7761&start=60#p112413

примеры графических элементов
viewtopic.php?t=7761&start=80#p113245

оформление страницы webupdate
viewtopic.php?t=7761&start=80#p113273

Power Block
viewtopic.php?t=7761&start=80#p113238

Пример использования структур и получение дата/время из браузера в есп
viewtopic.php?t=7761&start=80#p112710

ESP Monitor
viewtopic.php?t=7761&start=100#p113424

Доступ к файловой системе Esp8266/32
viewtopic.php?t=7761&start=100#p113626

WebUpdate есп8266 на штатном порту (80)
viewtopic.php?t=7761&start=100#p113665

WebUpdate есп32 на штатном порту (80)
viewtopic.php?t=7761&start=100#p113737

Нажатие и Удержание кнопки в веб-интерфейсе + мультиджойстик
viewtopic.php?t=7761&start=100#p113751
Последний раз редактировалось petroua 28.03.2022{, 21:34}, всего редактировалось 34 раза.

lentyaj1982
Рядовой
Сообщения: 6
Зарегистрирован: 01.10.2021{, 20:55}
Репутация: 0
Имя: rashid

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

#2

Сообщение lentyaj1982 » 12.12.2021{, 13:45}

огласите весь список пожалуйста :D . Где можно почитать про стили, и прочее с примерами, чтоб просто копировать и вставлять?)

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#3

Сообщение petroua » 12.12.2021{, 16:36}

lentyaj1982,
как страницы меню добавить/удалить?

Там еще и кнопки можно стилизовывать)))
Последний раз редактировалось petroua 15.01.2022{, 12:42}, всего редактировалось 1 раз.

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

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

#4

Сообщение karen » 12.12.2021{, 16:54}

Интереснная шапка. Спасибо за шаблон.
Ждем новые варианты) :smile38:
karens4

lentyaj1982
Рядовой
Сообщения: 6
Зарегистрирован: 01.10.2021{, 20:55}
Репутация: 0
Имя: rashid

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

#5

Сообщение lentyaj1982 » 12.12.2021{, 17:29}

petroua писал(а):
12.12.2021{, 16:36}
lentyaj1982,
как страницы меню добавить/удалить?
поподробнее?
ок.
сделаю мануал. :smile9:

Там еще и кнопки можно стилизовывать)))
кнопки, индикация, столбиком, таблицей, размер шрифта..))) Любая инфа будет полезной)) спасибо

Аватара пользователя
Phazz
Полковник
Сообщения: 1980
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 227
Откуда: Сургут
Имя: Анатолий

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

#6

Сообщение Phazz » 12.12.2021{, 20:48}

Боковое меню
2021-12-12 22-46-26 localhost 88 telegram  - Google Chrome.png
2021-12-12 22-46-45 localhost 88 telegram  - Google Chrome.png
doc_2021-12-12_22-44-59.mp4
(395.17 КБ) 85 скачиваний
боковое меню.flp
(215.22 КБ) 96 скачиваний

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

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

#7

Сообщение karen » 15.12.2021{, 01:20}

:smile198:
Вложения
mini menu.flp
(209.85 КБ) 46 скачиваний
Снимок.PNG
karens4

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#8

Сообщение petroua » 15.12.2021{, 03:45}

karen,
СпойлерПоказать



Здесь цвет фона можно сменить:
Последний раз редактировалось petroua 15.01.2022{, 12:43}, всего редактировалось 2 раза.

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#9

Сообщение petroua » 15.12.2021{, 16:21}

karen,
или так:
СпойлерПоказать


Последний раз редактировалось petroua 15.01.2022{, 12:41}, всего редактировалось 1 раз.

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

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

#10

Сообщение karen » 15.12.2021{, 17:22}

petroua писал(а):
15.12.2021{, 16:21}
karen,
или так:
3.jpg
СпойлерПоказать
4.jpg
3.jpg
mini menu (1).flp
Ага, знаю, я выше 👆 другого плана меню добавил для мобилы удобней).
Позже ещё добавлю)
karens4

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#11

Сообщение DrScorpion86 » 15.12.2021{, 18:02}

petroua писал(а):
15.12.2021{, 16:21}
karen,
или так:
3.jpg
СпойлерПоказать
4.jpg
3.jpg
mini menu (1).flp
А как у вас обновление прошивки реализовано?

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#12

Сообщение petroua » 15.12.2021{, 19:47}

:) DrScorpion86,
так там же есть ссылка update.
или вопрос про удаленную прошивку?

если про нее - то это Phazz делал изначальный шаблон. Я лишь приукрасил маленько)

Аватара пользователя
Phazz
Полковник
Сообщения: 1980
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 227
Откуда: Сургут
Имя: Анатолий

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

#13

Сообщение Phazz » 15.12.2021{, 20:19}

DrScorpion86, через блок WEB Update. Но ссылка динамическая в зависимости от ip ESP

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#14

Сообщение petroua » 18.12.2021{, 01:44}

artemka19 писал(а):
18.12.2021{, 01:38}
Получилось совместить Кнопку и Индикатор кнопки. Чтоб кнопка одновременно являлась и индикатором.
Грачик об этом в видео говорил.(что этого не хватает)
а как реализовано? :D

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#15

Сообщение DrScorpion86 » 18.12.2021{, 09:41}

artemka19,
Цель какая, когда кнопка "вкл"-зелёная "выкл"-красная?
Я чекбокс под это дело прикрутил. В понедельник на работу выйду покажу.

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

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

#16

Сообщение karen » 18.12.2021{, 16:07}

artemka19 писал(а):
18.12.2021{, 01:38}
petroua,
Получилось совместить Кнопку и Индикатор кнопки. Чтоб кнопка одновременно являлась и индикатором.
Грачик об этом в видео говорил.(что этого не хватает)


2.jpg
проверка кнопки-индикатора.flp
демо-концепт-меню.mp4
СпойлерПоказать
1.jpg
3.jpg
4.jpg
Не по теме
karen, это мой соб..вдохновитель) ему тоже +
:no: :no: :no:

Отправлено спустя 2 часа 30 минут 35 секунд:
Мой вариант 😁 но только тёмной темы) не люблю я светлые)
Вложения
mod_karens4.flp
(234.91 КБ) 59 скачиваний
4.PNG
3.PNG
2.PNG
Снимок.PNG
karens4

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#17

Сообщение DrScorpion86 » 20.12.2021{, 15:58}

artemka19,
Хм... а не работает нифига:(
в обычном html всё работает а вот в эмуляторе и в контроллере уже не хочет.
З.Ы. я ещё поковыряю. Должно же как то заработать:)

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

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

#18

Сообщение karen » 20.12.2021{, 22:32}

DrScorpion86 писал(а):
20.12.2021{, 15:58}
artemka19,
Хм... а не работает нифига:(
в обычном html всё работает а вот в эмуляторе и в контроллере уже не хочет.
З.Ы. я ещё поковыряю. Должно же как то заработать:)
С какой из вариантов тем у вас не работает? 🤔
karens4

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#19

Сообщение DrScorpion86 » 20.12.2021{, 23:06}

karen писал(а):
20.12.2021{, 22:32}
DrScorpion86 писал(а):
20.12.2021{, 15:58}
artemka19,
Хм... а не работает нифига:(
в обычном html всё работает а вот в эмуляторе и в контроллере уже не хочет.
З.Ы. я ещё поковыряю. Должно же как то заработать:)
С какой из вариантов тем у вас не работает? 🤔
Похоже я нашел в чем проблема...
Если делать "красоту" только через css стили, то всё работает. Но стоит использовать JavaScript (получение данных, от изменяющих переменных), не работает, т.к. этот скрипт подгружается до основного скрипта(который заставляет все нововведения работать через AJAX).
Есть уже пару мыслей как это обойти. Либо продолжу углубляться в изучение и делать свои Ajax запросы :smile38:

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

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

#20

Сообщение Qwert855 » 21.12.2021{, 00:11}

привет. в сети есть редакторы CSS слайдеров, есть опыт внедрения данного инструмента на страницу?
пример ползунов

Ответить

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