Страница 1 из 11

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

Добавлено: 12 дек 2021, 04:27
petroua
Статус соединения с есп в веб-интерфейсе:
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

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

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

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

Добавлено: 12 дек 2021, 16:36
petroua
[ref]lentyaj1982[/ref],
как страницы меню добавить/удалить?

Там еще и кнопки можно стилизовывать)))

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

Добавлено: 12 дек 2021, 16:54
karen
Интереснная шапка. Спасибо за шаблон.
Ждем новые варианты) :smile38:

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

Добавлено: 12 дек 2021, 17:29
lentyaj1982
petroua писал(а): 12 дек 2021, 16:36 [ref]lentyaj1982[/ref],
как страницы меню добавить/удалить?
поподробнее?
ок.
сделаю мануал. :smile9:

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

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

Добавлено: 12 дек 2021, 20:48
Phazz
Боковое меню
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
боковое меню.flp

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

Добавлено: 15 дек 2021, 01:20
karen
:smile198:

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

Добавлено: 15 дек 2021, 03:45
petroua
[ref]karen[/ref],

[spoiler]



Здесь цвет фона можно сменить:

[/spoiler]

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

Добавлено: 15 дек 2021, 16:21
petroua
[ref]karen[/ref],
или так:

[spoiler]



[/spoiler]

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

Добавлено: 15 дек 2021, 17:22
karen
petroua писал(а): 15 дек 2021, 16:21 [ref]karen[/ref],
или так:
3.jpg
[spoiler]
4.jpg
3.jpg
mini menu (1).flp
[/spoiler]
Ага, знаю, я выше 👆 другого плана меню добавил для мобилы удобней).
Позже ещё добавлю)

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

Добавлено: 15 дек 2021, 18:02
DrScorpion86
petroua писал(а): 15 дек 2021, 16:21 [ref]karen[/ref],
или так:
3.jpg
[spoiler]
4.jpg
3.jpg
mini menu (1).flp
[/spoiler]
А как у вас обновление прошивки реализовано?

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

Добавлено: 15 дек 2021, 19:47
petroua
:) [ref]DrScorpion86[/ref],
так там же есть ссылка update.
или вопрос про удаленную прошивку?

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

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

Добавлено: 15 дек 2021, 20:19
Phazz
[ref]DrScorpion86[/ref], через блок WEB Update. Но ссылка динамическая в зависимости от ip ESP

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

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

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

Добавлено: 18 дек 2021, 09:41
DrScorpion86
[ref]artemka19[/ref],
Цель какая, когда кнопка "вкл"-зелёная "выкл"-красная?
Я чекбокс под это дело прикрутил. В понедельник на работу выйду покажу.

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

Добавлено: 18 дек 2021, 18:38
karen
artemka19 писал(а): 18 дек 2021, 01:38 [ref]petroua[/ref],
Получилось совместить Кнопку и Индикатор кнопки. Чтоб кнопка одновременно являлась и индикатором.
Грачик об этом в видео говорил.(что этого не хватает)


2.jpg
проверка кнопки-индикатора.flp
демо-концепт-меню.mp4
[spoiler]
1.jpg
3.jpg
4.jpg
[/spoiler]

Офтопик
[ref]karen[/ref], это мой соб..вдохновитель) ему тоже +
:no: :no: :no:

Отправлено спустя 2 часа 30 минут 35 секунд:
Мой вариант 😁 но только тёмной темы) не люблю я светлые)

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

Добавлено: 20 дек 2021, 15:58
DrScorpion86
[ref]artemka19[/ref],
Хм... а не работает нифига:(
в обычном html всё работает а вот в эмуляторе и в контроллере уже не хочет.
З.Ы. я ещё поковыряю. Должно же как то заработать:)

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

Добавлено: 20 дек 2021, 22:32
karen
DrScorpion86 писал(а): 20 дек 2021, 15:58 [ref]artemka19[/ref],
Хм... а не работает нифига:(
в обычном html всё работает а вот в эмуляторе и в контроллере уже не хочет.
З.Ы. я ещё поковыряю. Должно же как то заработать:)
С какой из вариантов тем у вас не работает? 🤔

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

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

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

Добавлено: 21 дек 2021, 00:11
Qwert855
привет. в сети есть редакторы CSS слайдеров, есть опыт внедрения данного инструмента на страницу?
пример ползунов
[spoiler]давно делал подобное нужен тип <input type="range">
https://html5css.ru/howto/howto_js_rangeslider.php
http://htmlbook.ru/samhtml5/formy/polzunok
https://bloggood.ru/vebmasteru/polzunok ... niya.html/
https://stylecss.ru/generator-input-range-css/
https://developer.mozilla.org/ru/docs/W ... nput/range
https://atuin.ru/blog/oformlenie-polzun ... typerange/
https://xdan.ru/samij-luchshij-range-sl ... query.html

и не менее интересное двойные ползуны
https://codepen.io/alpden/pen/XKLbbp
https://habr.com/ru/post/247935/
[/spoiler]