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

petroua · #21

Qwert855,
да

petroua · #22

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

что за вынесенные скрипты?

DrScorpion86 · #23

Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.

Del
З.Ы. код JavaScript хромой, но работает. Буду продолжать трудится над этим:)
Цель присосаться к тем данным, которые получает вся html страница через JavaScript автора

Отправлено спустя 4 часа 56 минут 35 секунд:
Маленько подправил код. Теперь кнопка привязана не к ID "пользовательскому параметру", а к CSS стилям buttonX и colorX (писаться должны именно так). Это позволят привязывать их к любому "пользовательскому параметру"(только обязательно оба к одному параметру).

Esp32_test web_кнопкаColorX 7-4-1.zip: (10.58 КБ) 114 скачиваний

///////////////////////////////
Добавляем 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

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

Добавляем цветовой индикатор с таким же сис.параметром как в кнопке (в данном примере "Temp1")
Указываем стиль colorX
Настраиваем цвета по вкусу:)

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

Добавляем HTML код

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

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

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

Всё!

З.ы. последовательность размещения и место нахождения всех элементов не имеет значения

DrScorpion86 · #24

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

zhulen820 · #25

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

Не могу сообразить если надо несколько кнопок сделать? Надо в HTML код внести изменения. Может пример выложите с двумя кнопками???

DrScorpion86 · #26

zhulen820 писал(а): ↑
01.01.2022{, 23:53}

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

Помочь смогу только после праздников.

DrScorpion86 · #27

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 · #28

Отправлено спустя 1 час 4 минуты 5 секунд:

DrScorpion86 писал(а): ↑
02.01.2022{, 20:30}
Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2

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

cmept-27 · #29

Набросал свой вид менюшки. Пока тока разбираюсь в CCS и HTML, прошу сильно не пинать. Много еще надо переделать. Да и много не хватает в самой Flprog

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

Пример

1.flp: (1.57 МБ) 89 скачиваний

pipapsix · #30

У нас пока так получается, бьемся над расположением компонентов .
Кнопки работают

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

zhulen820 · #31

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

А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.

pipapsix · #32

zhulen820 писал(а): ↑
07.01.2022{, 16:38}
А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.

Тут я сильно не помогу, сын делал и сказал , что тут руки связаны . С каждым объектом создается отдельный DIV.
Получилось расположить так кнопки с помощью создания таблицы, так что все данные будут в таблице , но говорит, что нужно еще подумать, может получится обойти это.

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

Я тут вообще не понимаю)

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

И в настроках кнопки. СТИЛЬ КНОПКИ ВПИСАТЬ 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 · #33

pipapsix, Тоже сделал с помощью таблицы. Может можно по другому, но пока не понял как

pipapsix · #34

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

Можно,там вариант есть несколько DIV в один засунуть и уже отдельно управлять, сын начал, но особой прыти нет в этом ковыряться), голжу хожу, надоедаю))
Просто я ему еще давно сказал, чтобы изучал программирование, а не блоками собирал, а теперь мне и говорит, ну не понимаю я твои блоки.

DrScorpion86 · #35

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

pipapsix · #36

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

pipapsix · #37

Вот как и обещал, если будет получатся , что то более менее подходящее, выложу. В проекте только Вэб интерфейс, больше ничего.
Что и куда вставлено я не понял) но понять можно)
В принципе , для большего интерфейс мне и не нужен .

7,4,1..20 ВЭБ. .flp: (359.11 КБ) 77 скачиваний

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

cmept-27 · #38

DrScorpion86, Спасибо. Чуток разобрался.Display: grid получше таблиц. Совместил кнопку индикатор и текст )))

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

2.flp: (793.99 КБ) 112 скачиваний

petroua · #39

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

petroua · #40

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