Элемент Термодатчик
Добавлено: Чт сен 25, 2014 1:31 am
Предлагаю вот такое незамысловатое добавление к элементам в виде кружочка для неживых датчиков. Иногда бывает и полезно увидеть, что датчик неживой. Например в случае с z-wave может получиться так, что датчик будет расположен на максимальном удалении от контроллера, и в какой то момент перестанет вообще его видеть.
Выбор значка принимается в зависимости от свойств ts_office.alive и ts_office.direction объекта датчика. Значение температуры в примере берется из свойства Officeroom.Temperature
Не забудьте поменять все эти имена на свои! А так же номер в div.element_64.
Код CSS в группах:
element0 - Датчик не живой. Красный кружек.
element1 - Температура падает. Синий треугольник вниз.
element2 - Температура неизменна. В группе нет кода и никакого значка не будет.
element3 - Температура растет. Оранжево-красный треугольник вверх.
Может кому и понравится для чего нибудь.
Код CSSSPOILER_SHOW
Код: Выделить всё
<style>
div.element_64 {
font-size: 12pt;
font-weight:700;
text-align: center;
border-radius: 30px;
background-image: radial-gradient(%Officeroom.TempHEX% -15px, rgba(0,0,0,0) 65%);
}
.element0 {
width: 12px;
height: 12px;
background: red;
border-radius: 6px;
}
.element1 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
.element2 {
}
.element3 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid OrangeRed;
}
</style>
<script>
var ad="element" + (2+Number(%ts_office.direction%)) * Number(%ts_office.alive%);
var e = document.getElementById('f');
e.setAttribute('class', ad);
// 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>
<br>
%Officeroom.Temperature% ℃
<div id="f" class="element"></div>Не забудьте поменять все эти имена на свои! А так же номер в div.element_64.
Код CSS в группах:
element0 - Датчик не живой. Красный кружек.
element1 - Температура падает. Синий треугольник вниз.
element2 - Температура неизменна. В группе нет кода и никакого значка не будет.
element3 - Температура растет. Оранжево-красный треугольник вверх.
И еще вот. Крутил вертел и как по ненароком получил вот это:SPOILER_SHOW
Может кому и понравится для чего нибудь.
Код: Выделить всё
<style>
div.element_45 {
font-size: 12pt;
font-weight:700;
text-align: center;
border-radius: 30px;
background-image: linear-gradient(rgb(0,0,255) -40px, rgba(0,0,255,0) 60%);
}
</style>
<br>
60