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

[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

[lentyaj1982]

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

[petroua]

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

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

[karen]

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

[lentyaj1982]

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

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

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

[Phazz]

Боковое меню

doc_2021-12-12_22-44-59.mp4

(395.17 КБ) 152 скачивания

боковое меню.flp

(215.22 КБ) 173 скачивания

[karen]

[petroua]

karen,

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

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

[petroua]

karen,
или так:

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

[karen]

karen,
или так:
3.jpg

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

4.jpg
3.jpg
mini menu (1).flp

Ага, знаю, я выше другого плана меню добавил для мобилы удобней).
Позже ещё добавлю)

[DrScorpion86]

karen,
или так:
3.jpg

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

4.jpg
3.jpg
mini menu (1).flp

А как у вас обновление прошивки реализовано?

[petroua]

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

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

[Phazz]

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

[petroua]

Получилось совместить Кнопку и Индикатор кнопки. Чтоб кнопка одновременно являлась и индикатором.
Грачик об этом в видео говорил.(что этого не хватает)

а как реализовано?

[DrScorpion86]

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

[karen]

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


2.jpg
проверка кнопки-индикатора.flp
демо-концепт-меню.mp4

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

1.jpg
3.jpg
4.jpg

Не по теме

karen, это мой соб..вдохновитель) ему тоже +

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

[DrScorpion86]

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

[karen]

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

С какой из вариантов тем у вас не работает?

[DrScorpion86]

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

С какой из вариантов тем у вас не работает?

Похоже я нашел в чем проблема...
Если делать "красоту" только через css стили, то всё работает. Но стоит использовать JavaScript (получение данных, от изменяющих переменных), не работает, т.к. этот скрипт подгружается до основного скрипта(который заставляет все нововведения работать через AJAX).
Есть уже пару мыслей как это обойти. Либо продолжу углубляться в изучение и делать свои Ajax запросы

[Qwert855]

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

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

давно делал подобное нужен тип <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/