[Дизайн] Элемент сцены Влажность

Оформление сцен, меню, страниц

Модераторы: immortal, newz20

Ответить
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

[Дизайн] Элемент сцены Влажность

Сообщение Bagir » Чт фев 26, 2015 11:13 pm

Релиз элемента влажности для сцен. Вариант с вертикальным заполнением квадратика градиентом.
Изображение
Element details:Показать
Тип HTML
Ширина 40
Высота 40
Код

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

<style>
div.element_33 {
  font-size: 12pt;
  font-weight:700;
  text-align: center;
  border-radius: 4px;
  border: 0.5px solid rgb(250,172,17);
  background-image: linear-gradient(to top, rgba(0,150,255,0.4) %Officeroom.Humidity%%, rgba(0,255,255,0.6), rgba(60,255,255,0.5), rgba(60,255,255,0.4));
}
.element_33 .icon0 {
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 6px;
}
.element_33 .icon1 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid blue;
}
.element_33 .icon2 {
}
.element_33 .icon3 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid red;
}
</style>

<script> 
 var ad="icon" + (2+Number(%hs_office.direction%)) * Number(%hs_office.alive%);
 document.getElementById('f33').setAttribute('class', ad);
 // 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>

%Officeroom.Humidity% %
<div id="f33"></div>
Описание:
Цвет в элементе плавно переходит снизу вверх в зависимости от величины влажности. Есть индикация направления изменения показаний, а так же признака, что датчик неживой. Элемент по стилю и структуре похож на элемент температуры, но он намного проще т.к. нет функции расчета цвета.
Настройка:
  • 1. Поменять везде номер элемента на свой element_33. У имени f33 просто заменить цифру в двух местах.
    2. Officeroom.Humidity - это свойство объекта со значением влажности (без знака процент, просто число от 0 до 100). Указано в коде дважды!
    3. hs_office.direction - направление изменения: 1 - растет (красный треугольник вверх), -1 - снижается (синий треугольник вниз), 0 - значение не изменилось. Ничего отображаться не будет.
    4. hs_office.alive - признак что датчик живой. 1 - живой, 0 - не отвечает.
Вложения
Elements23-09-52.zip
(2.34 КБ) 338 скачиваний
За это сообщение автора Bagir поблагодарили (всего 2):
Alien (Чт май 07, 2015 10:22 am) • Сергей1963 (Вт сен 11, 2018 3:50 am)
Рейтинг: 2.33%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Ответить