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

[petroua]

Qwert855,
да

[petroua]

(которые без вынесенных скриптов

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

[DrScorpion86]

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

ColorX.jpg

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

Отправлено спустя 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>

Всё!

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

[DrScorpion86]

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

[zhulen820]

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

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

[DrScorpion86]

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

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

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

[DrScorpion86]

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]

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

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

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

[cmept-27]

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

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

1.png

2.png

3.png

4.png

Пример

1.flp

[pipapsix]

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

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

2022-01-07_15-57-27.png

[zhulen820]

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

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

[pipapsix]

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

Тут я сильно не помогу, сын делал и сказал , что тут руки связаны . С каждым объектом создается отдельный 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]

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

5.png

[pipapsix]

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

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

[DrScorpion86]

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

[pipapsix]

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

[pipapsix]

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

7,4,1..20 ВЭБ. .flp

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

2022-01-08_18-57-33.png

[cmept-27]

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

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

6.png

7.png

8.png

9.png

2.flp

[petroua]

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

[petroua]

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