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

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

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

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

#21

Сообщение petroua » 21.12.2021{, 04:25}

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

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

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

#22

Сообщение petroua » 22.12.2021{, 01:02}

artemka19 писал(а):
21.12.2021{, 23:54}
(которые без вынесенных скриптов
что за вынесенные скрипты?

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

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

#23

Сообщение DrScorpion86 » 22.12.2021{, 11:41}

Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
ColorX.jpg
Del
З.Ы. код JavaScript хромой, но работает. Буду продолжать трудится над этим:)
Цель присосаться к тем данным, которые получает вся html страница через JavaScript автора :smile37:

Отправлено спустя 4 часа 56 минут 35 секунд:
Маленько подправил код. Теперь кнопка привязана не к ID "пользовательскому параметру", а к CSS стилям buttonX и colorX (писаться должны именно так). Это позволят привязывать их к любому "пользовательскому параметру"(только обязательно оба к одному параметру).
Esp32_test web_кнопкаColorX 7-4-1.zip
///////////////////////////////
Добавляем css стили в закладке "описание стилей"
СпойлерПоказать

Код: Выделить всё

.buttonX {
  width: 100px;
  height: 35px;
  border: solid 2px rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  margin: 4px;
  font-size: 1.2rem;
  font-weight: 500;
  color: white;
  -webkit-box-shadow: 0px 3px 4px grey;
          box-shadow: 0px 3px 4px grey;
}

.buttonX:hover {
  opacity: .8;
}

.buttonX:active {
  -webkit-box-shadow: inset 2px 2px 3px black;
          box-shadow: inset 2px 2px 3px black;
}
Добавляем кнопку с сис.параметром (в данном примере "Temp1")
Указываем стиль для кнопки buttonX
СпойлерПоказать
Без имени-04.jpg
Без имени-05.jpg
Добавляем цветовой индикатор с таким же сис.параметром как в кнопке (в данном примере "Temp1")
Указываем стиль colorX
Настраиваем цвета по вкусу:)
СпойлерПоказать
Без имени-02.jpg
Без имени-03.jpg
Добавляем HTML код
СпойлерПоказать
Без имени-01.jpg

Код: Выделить всё

<script>
setInterval(function(){
    document.querySelector('.buttonX').style.backgroundColor = document.querySelector('.colorX').style.backgroundColor
},300);
</script>

Всё! :smile160:

З.ы. последовательность размещения и место нахождения всех элементов не имеет значения :)
Для скачивания вложений Вы должны быть зарегистрированы.

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

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

#24

Сообщение DrScorpion86 » 31.12.2021{, 23:45}

artemka19, Можете сам js код выложить? Хочется глянуть, а до компа тока после праздников доберусь :)

zhulen820
Сержант
Сообщения: 165
Зарегистрирован: 29.08.2016{, 22:44}
Репутация: 5
Откуда: Серпухов
Имя: Александр

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

#25

Сообщение zhulen820 » 01.01.2022{, 23:53}

DrScorpion86 писал(а):
22.12.2021{, 16:38}
Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
Не могу сообразить если надо несколько кнопок сделать? Надо в HTML код внести изменения. Может пример выложите с двумя кнопками???

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

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

#26

Сообщение DrScorpion86 » 02.01.2022{, 09:36}

zhulen820 писал(а):
01.01.2022{, 23:53}
DrScorpion86 писал(а):
22.12.2021{, 16:38}
Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
Не могу сообразить если надо несколько кнопок сделать? Надо в HTML код внести изменения. Может пример выложите с двумя кнопками???
Помочь смогу только после праздников.

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

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

#27

Сообщение DrScorpion86 » 02.01.2022{, 20:30}

zhulen820, В принципе...
Берёте этот код
<script>
setInterval(function(){
document.querySelector('.buttonX').style.backgroundColor = document.querySelector('.colorX').style.backgroundColor;
document.querySelector('.buttonX2').style.backgroundColor = document.querySelector('.colorX2').style.backgroundColor;
},300);
</script>

Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2

zhulen820
Сержант
Сообщения: 165
Зарегистрирован: 29.08.2016{, 22:44}
Репутация: 5
Откуда: Серпухов
Имя: Александр

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

#28

Сообщение zhulen820 » 02.01.2022{, 22:57}

Отправлено спустя 1 час 4 минуты 5 секунд:
DrScorpion86 писал(а):
02.01.2022{, 20:30}
Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2

Проверил, работает. Спасибо!

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

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

#29

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

Набросал свой вид менюшки. Пока тока разбираюсь в CCS и HTML, прошу сильно не пинать. Много еще надо переделать. Да и много не хватает в самой Flprog
СпойлерПоказать
1.png
2.png
3.png
4.png
Пример
1.flp
Для скачивания вложений Вы должны быть зарегистрированы.
OK

Аватара пользователя
pipapsix
Лейтенант
Сообщения: 413
Зарегистрирован: 25.10.2016{, 21:26}
Репутация: 11
Откуда: Волгоградская обл.
Имя: СашкаСаняАлександр

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

#30

Сообщение pipapsix » 07.01.2022{, 15:59}

У нас пока так получается, бьемся над расположением компонентов .
Кнопки работают
СпойлерПоказать
2022-01-07_15-57-27.png
Для скачивания вложений Вы должны быть зарегистрированы.

zhulen820
Сержант
Сообщения: 165
Зарегистрирован: 29.08.2016{, 22:44}
Репутация: 5
Откуда: Серпухов
Имя: Александр

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

#31

Сообщение zhulen820 » 07.01.2022{, 16:38}

pipapsix писал(а):
07.01.2022{, 15:59}
У нас пока так получается, бьемся над расположением компонентов .
Кнопки работают
А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.

Аватара пользователя
pipapsix
Лейтенант
Сообщения: 413
Зарегистрирован: 25.10.2016{, 21:26}
Репутация: 11
Откуда: Волгоградская обл.
Имя: СашкаСаняАлександр

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

#32

Сообщение pipapsix » 07.01.2022{, 16:53}

zhulen820 писал(а):
07.01.2022{, 16:38}
А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.
Тут я сильно не помогу, сын делал и сказал , что тут руки связаны . С каждым объектом создается отдельный DIV.
Получилось расположить так кнопки с помощью создания таблицы, так что все данные будут в таблице , но говорит, что нужно еще подумать, может получится обойти это.
СпойлерПоказать
2022-01-07_16-54-49.png
Я тут вообще не понимаю)

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

И в настроках кнопки. СТИЛЬ КНОПКИ ВПИСАТЬ button

P.S- проэкт не загружаю, так как рабочий. Как будет получаться, создам новый и поделюсь.
СпойлерПоказать
.stText
{
font-family:TRENDY;
font-size:20px;
color:blue;
text-align:center;
}
.button {
background-color: #008CBA; /* Green */
border: 5px solid black;
color: #00FF00;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}

.menu
{
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1%;
margin: 1%;
width:16%;
border: 1px solid black;
border-radius: 8px;
}
.menuItem
{
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
display: block;
margin: 5px;
width:95%;
}
.header
{
padding: 10px;
left: 0px;
right: 0px;
top: 0px;
background: #00FFFF;
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 250%;
}
.content
{
display: grid;
float:right;
width:78%;
grid-template-rows: 1fr 1fr;
grid-template-columns: 150px 150px 150px;
}
.footer
{
float:left;
padding: 1%;
width:98%;
background: #00FFFF;
margin-top: 1%;
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 150%;
}
.buttonFlp
{
width:150px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:12px;
cursor:pointer;
float:left;
padding: 1%;
margin: 1%;
}
.buttonFlp:hover
{
background:#358DE5;
}
.buttonFlp:focus
{
outline:none;
}
.stLab
{
margin: 5px 0;
}
.stBtn
{
margin: 5px;
}
.stLig
{
margin: 5px;
width:50px;
height:50px;
border-radius:20%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stText
{
margin: 5px 0;
}
.stIF
{
margin: 5px 0;
}
.stWL
{
height:100px;
width:400px;
overflow: auto;
}
.stChb
{
margin: 5px 0;
}
.stRb
{
margin: 5px 0;
}
.stCB
{
margin: 5px 0;
}
Для скачивания вложений Вы должны быть зарегистрированы.

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

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

#33

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

pipapsix, Тоже сделал с помощью таблицы. Может можно по другому, но пока не понял как
5.png
Для скачивания вложений Вы должны быть зарегистрированы.
Последний раз редактировалось cmept-27 07.01.2022{, 18:24}, всего редактировалось 2 раза.
OK

Аватара пользователя
pipapsix
Лейтенант
Сообщения: 413
Зарегистрирован: 25.10.2016{, 21:26}
Репутация: 11
Откуда: Волгоградская обл.
Имя: СашкаСаняАлександр

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

#34

Сообщение pipapsix » 07.01.2022{, 18:15}

cmept-27 писал(а):
07.01.2022{, 18:07}
Тоже сделал с помощью таблицы. Может можно по другому, но пока не понял как
Можно,там вариант есть несколько DIV в один засунуть и уже отдельно управлять, сын начал, но особой прыти нет в этом ковыряться), голжу хожу, надоедаю))
Просто я ему еще давно сказал, чтобы изучал программирование, а не блоками собирал, а теперь мне и говорит, ну не понимаю я твои блоки.

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

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

#35

Сообщение DrScorpion86 » 07.01.2022{, 19:24}

cmept-27, pipapsix,
Display: flex
или
Display: grid
Думаю вам лучше подойдёт именно display grid.
Почитайте-изучите;)

Аватара пользователя
pipapsix
Лейтенант
Сообщения: 413
Зарегистрирован: 25.10.2016{, 21:26}
Репутация: 11
Откуда: Волгоградская обл.
Имя: СашкаСаняАлександр

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

#36

Сообщение pipapsix » 07.01.2022{, 21:04}

DrScorpion86,
Как ни странно, изначально пробовали Display: grid, не то. Перешли на Display: flex с еще одним костылем) Все прочитано и изучено)
Но все расно спс за совет.

Аватара пользователя
pipapsix
Лейтенант
Сообщения: 413
Зарегистрирован: 25.10.2016{, 21:26}
Репутация: 11
Откуда: Волгоградская обл.
Имя: СашкаСаняАлександр

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

#37

Сообщение pipapsix » 08.01.2022{, 19:02}

Вот как и обещал, если будет получатся , что то более менее подходящее, выложу. В проекте только Вэб интерфейс, больше ничего.
Что и куда вставлено я не понял) но понять можно)
В принципе , для большего интерфейс мне и не нужен .
7,4,1..20 ВЭБ. .flp
СпойлерПоказать
2022-01-08_18-57-33.png
Для скачивания вложений Вы должны быть зарегистрированы.

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

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

#38

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

DrScorpion86, Спасибо. Чуток разобрался.Display: grid получше таблиц. Совместил кнопку индикатор и текст )))
СпойлерПоказать
6.png
7.png
8.png
9.png
2.flp
Для скачивания вложений Вы должны быть зарегистрированы.
OK

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

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

#39

Сообщение petroua » 17.01.2022{, 17:54}

кому нужно скину примеры из темы я откопал на я.диске архивы зачем минусите чела может он отойдет еще)

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

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

#40

Сообщение petroua » 17.01.2022{, 18:07}

aidar_i, это пока его еще не удалили админы но тему первоисточник уже удалили

Ответить

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