Element details:Показать
Тип HTML
Ширина 60
Высота 60
Код
Ширина 60
Высота 60
Код
Код: Выделить всё
<style>
div.element_36 {
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%);
}
.triangle1 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
}
.triangle-1 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
</style>
<br>
%Officeroom.Temperature% ℃
<div class="triangle%ts_office.direction%"></div> Цвет градиента меняется в зависимости от значения температуры. Есть индикация направления изменения показаний. В планах индикация статуса объекта датчика - живой/мертвый.
Применены правила перевода градусов в цвет. Значение цвета рассчитывается при изменении температуры, и при желании можно все легко поправить. За основу взяты следующие положения:
1. Будут использованы три цвета и переходы между ними. Голубой->Синий->Красный
2. 18 градусов - синий цвет;
3. 30 градусов - красный цвет;
4. Из этого следует, что голубой цвет это 12 градусов;
5. Все что ниже 12 градусов так и останется голубым;
6. Все что выше 30 градусов так и будет красным.
Для оценки воздуха комнаты это вполне справедливо.
Таблица изменения градиента в зависимости от температурыПоказать
- 1. Сразу поменять номер элемента на свой div.element_36
2. %Officeroom.Temperature% - это свойство объекта со значением температуры.
3. %ts_office.direction% - направление изменения: 1 - растет (красный треугольник вверх), -1 - снижается (синий треугольник вниз), 0 (или что другое) - значение не изменилось. Ничего отображаться не будет.
4. %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); 
