Добавлена индикация неживого датчика
Вариант с тенью у шрифта
Ширина 60
Высота 60
Код
Код: Выделить всё
<style>
div.element_39 {
font-size:12pt;
font-weight:700;
text-align: center;
background-image: radial-gradient(%Officeroom.TempHEX% -15px, rgba(0,0,0,0) 65%);
}
.element_39 .icon0 {
width: 12px;
height: 12px;
background: red;
border-radius: 6px;
}
.element_39 .icon1 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
.element_39 .icon2 {
}
.element_39 .icon3 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid OrangeRed;
}
</style>
<script>
var ad="icon" + (2+Number(%ts_office.direction%)) * Number(%ts_office.alive%);
document.getElementById('f39').setAttribute('class', ad);
// 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>
<br style="height:33%"/>
<span style="text-shadow: 1px 1px 2px white;">%Officeroom.Temperature% ℃</span>
<div id="f39"></div>
Цвет градиента меняется в зависимости от значения температуры. Есть индикация направления изменения показаний. В планах индикация статуса объекта датчика - живой/мертвый.
Применены правила перевода градусов в цвет. Значение цвета рассчитывается при изменении температуры, и при желании можно все легко поправить. За основу взяты следующие положения:
1. Будут использованы три цвета и переходы между ними. Голубой->Синий->Красный
2. 18 градусов - синий цвет;
3. 30 градусов - красный цвет;
4. Из этого следует, что голубой цвет это 12 градусов;
5. Все что ниже 12 градусов так и останется голубым;
6. Все что выше 30 градусов так и будет красным.
Для оценки воздуха комнаты это вполне справедливо.
- 1. Поменять везде номер элемента на свой element_39. У имени f39 просто заменить цифру в двух местах.
2. Officeroom.Temperature - это свойство объекта со значением температуры.
3. ts_office.direction - направление изменения: 1 - растет (красный треугольник вверх), -1 - снижается (синий треугольник вниз), 0 - значение не изменилось. Ничего отображаться не будет.
4. ts_office.alive - признак что датчик живой. 1 - живой, 0 - не отвечает.
5. Officeroom.TempHEX - цветовое представление температуры.
Код: Выделить всё
// получить температуру
$x = $this->getProperty('Temperature');
// не больше и не меньше
if ($x<12) {$x=12;} elseif ($x>30) {$x=30;}
// расчет величины цветовой шкалы
$x = round( ($x-12)*42,5 );
$hcolor = '#';
// расчет r
$y = $x-255;
if ($y < 0) {$y = 0;} elseif ($y > 255) {$y = 255;}
$y = dechex($y);
if (strlen($y) == 1) {$y = '0'.$y;}
$hcolor = $hcolor.$y;
// расчет g
$y = 255-$x;
if ($y < 0) {$y = 0;} elseif ($y > 255) {$y = 255;}
$y = dechex($y);
if (strlen($y) == 1) {$y = '0'.$y;}
$hcolor = $hcolor.$y;
// расчет b
$y = 765-$x;
if ($y < 0) {$y = 0;} elseif ($y > 255) {$y = 255;}
$y = dechex($y);
if (strlen($y) == 1) {$y = '0'.$y;}
$hcolor = $hcolor.$y;
// установить свойство цвета температуры
$this->setProperty('TempHEX', $hcolor);
<span style="text-shadow: 1px 1px 2px white;">%Officeroom.Temperature% ℃</span>
Атрибут style в этом теге задает тень для текста. При желании его можно убрать. А если нужно, отредактировать цвет. white - белый.