Активные объекты на сценах

[Bagir]

Это и понятно, потому что сейчас для примера используем метод switch. А надо получать от меги не команду, а статус. И соответственно устанавливать свойство объекту реле. Тогда такой заморочки не будет. Но это уже и правда другая тема не это ветки. В двух словах не расскажу, это невозможно. Пытайтесь понять объектную модель системы. Конечно напрасно для изучения МДМ вы взяли такую серьезную задачу, как подключение Меги и сцены. Надо с чего то по проще начинать. А вы сразу в море с головой ))

[Bagir]

Так-с, немного поколдовал с исходниками (читай -- надо обновиться), и добавил новое поле "Дополнительный код CSS" в настройку элементов сцены.

Сейчас можно задать блок CSS кода (1), в котором указать класс элемента состояния (2), к которому этот код применится.

Как это выглядит в админке:


Как выглядит на сцене:


Я взял для примера блок с указанного выше сайта, но немного его передал:

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

div.element_6 {
  display: inline-block;
  color: black;
  font-size: 125%;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .25em .5em;
  outline: none;
  border: 1px solid rgb(250,172,17);
  border-radius: 7px;
  background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
  transition: box-shadow .2s, border-color .2s;
} 
div.element_6:hover {
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
div.element_6:active {
  padding: calc(.25em + 1px) .5em calc(.25em - 1px);
  border-color: rgba(177,159,0,1);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}

Т.е. было всё тоже самое, только вместо "div.element_6" было "a.button10". Заменить нужно было для того, чтобы указанный CSS применялся к нашему элементу, класс которого теперь выводится в подсказке (2).

При желании можно наворотить чего-нибудь по-сложнее с анимацией элементов с помощью уже присутствующего jquery, обращаясь по id к отдельным состояниям элементов. Но это уже совсем другая история

Надо бы продолжить тему активных объектов на сценах. Кнопка получилась клевая, и навела на мысль. Значок датчика температуры с фоном или цветным кружком. Цвет плавно меняется от синего при 18 градусах, и до красного к 30 градусам. Но для этого нам надо затащить переменную в Дополнительный код CSS

На сценах с инженерными сетями тоже можно заполнять фоном различные участки труб и воздуховодов согласно их температуре. + gif анимация, и вообще будет шикарно смотреться.

Хочется получить элемент типа список для индивидуального расширенного лога событий одной сцены. Куда будет писаться много всего, например при расчете температуры подачи котла системы отопления. Оформить его, думаю, уже можно благодаря дополнительному коду CSS. Но я пока не догадался, как лучше туда загонять текст. Возможно это будет объект, чей метод мы можем вызывать, передавая ему новый текст, который будет добавляться к уже существующему. Тут сразу два вопроса. Как сделать прокрутку текста, и как из свойства объекта закинуть текст в элемент на сцене. Со вторым разобрался. %ThisComputer.weatherFull% И на сцене уже сводка погоды. Так же можно вытащить текст любого свойства. Осталось решить вопрос с прокруткой, т.к. для подробного лога то, что влезает в небольшую область очень мало.

[sergejey]

Насчёт лога могу подкинуть такую идею -- выводить последнюю строчку или же просто ссылку, а по клику открывать соответствующий элемент меню, где будет уже полный лог с прокруткой (в сценах можно указать открытие меню по клику на элемент).

[Bagir]

А и нормально. Только выводить можно не последнюю строчку, а ограниченное число строк, которое влезают в блок. А по клику действительно открывать меню. Конечно это не полноценный лог с прокруткой, но уже кое что. Спасибо за идею!

[Bagir]

К стати, что интересно, элемент за сцене вида HTML замечательно переносит слова на следующие строки, если текст длинный и не умещается. Я все о идее вертикальной прокрутки текста. Честно сказать, я в этой теме ничегошеньки не знаю. Если еще с php начинаю уже здороваться, то html для меня темный лес. Но что то подсказывает мне, что наверное можно описать подобный элемент списка с прокруткой и добавить ему свою переменную с текстом.
А вообще очень не хватает разнообразных элементов для оформления сайта. Поделитесь пожалуйста, кто что напридумывал.
И еще мысль. Если взять эту кнопку с примера, и растянуть ее вниз то получается плавный переход цвета заливки. Пришла мысль: Есть труба системы отопления. на подаче она горячая, на обратке температура ниже. Если на ней расположить несколько датчиков температуры, например маленьких крошек 1-Wire, то на сцене можно было бы организовать плавный переход цвета заливки трубы в зависимости от ее температуры. Возможно практической пользы от этого совсем и немного, но выглядеть будет офигенно! А если в системе несколько котлов, и этой сетью отапливается не одно здание (я например кинул круг в баню), то возможно даже где то и поможет выявить проблемные места, только датчиков надо больше. Установка их так то не проблемная. На телефонном проводе прямо впаять и сзади стяжкой притянуть к трубе. Как идея?
Вот пертикальный переход с красного в синий:

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

background: rgb(255,0,0) linear-gradient(rgb(255,0,0), rgb(0,0,255));

[Vit]

Да. На сценах хочется визуализации)

[Bagir]

Что то странное у меня творится:
Добавляю в новый элемент код

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

div.element_24 {
  display: inline-block;
  color: black;
  font-size: 125%;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .25em .5em;
  outline: none;
  border: 1px solid rgb(250,172,17);
  border-radius: 10px;
  background: rgb(0,0,255) linear-gradient(rgb(0,0,255), rgb(0,255,255));
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
  transition: box-shadow .2s, border-color .2s;
} 

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

Хм, а теперь все работает.... я в недоумении ...

Стоящая внимания ссыль с кодами градиента. Там сказано как изменить направление линейного градиента.
Интересна строка

background-image: linear-gradient(to left, #ff0000, #0000ff);

А вот круговой градиент для значка термомента.

В середине будет температура. Уже не так скучно как просто текст по среди комнаты.

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

background-image: radial-gradient(#ff0000, #ffffff);     

Пока представляю задачу так: Есть объект, который рассчитает все цвета по данным датчиков температуры, и запишет в свои свойства уже готовые #ff0000, #ffff00, #0000ff. А код на сценах возьмет эти свойства и выстроит уже раскрашенные прямоугольники. Кстати, они отлично вытягиваются в виде труб.

Вашему вниманию функции HEX в RGB или RGB в HEX
А так же вот на поиграться с выбором цвета

Из плюшек: в коде css можно указать вместо цифры например %ThisComputer.textBoxTest%. Вот только такое не будет работать 255-%ThisComputer.textBoxTest%. Так что вместо функции rgb(0,255,255) придется подставлять уже готовые значения. Зато это облегчит расчет и построение сцены, особенно на медленном железе.

[Bagir]

Вот что получилось:

ssc коды труб:
Вертикальная

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

div.element_23 {
  padding: .25em .5em;
  border-radius: 10px;
  background-image: linear-gradient(#ff0000, #0000ff);
}

горизонтальная

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

div.element_24 {
  padding: .25em .5em;
  border-radius: 10px;
  background-image: linear-gradient(to right, rgb(0,0,255), rgb(0,255,255));
}

Для отопления красное может быть взято за 80 градусов. Синее за 20 градусов, ну а голубой или белый на конце - пора менять трубы, 0 градусов.

[Vit]

Уже что то)). Верхний круг тоже интересен для температуры действительно не скучно)).

[Bagir]

Верхний круг тоже интересен для температуры

Сейчас сотворим!