Страница 1 из 2

[Модификация] Элемент сцены Температура

Добавлено: Чт фев 26, 2015 10:49 pm
Bagir
Релиз элемента температуры для сцен. Вариант с круговым градиентом.
ИзображениеИзображениеИзображение
Добавлена индикация неживого датчика
Изображение
Вариант с тенью у шрифта
Изображение
Element details:Показать
Тип HTML
Ширина 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 - цветовое представление температуры.
В классе Rooms создам новое свойство TempHEX. В него будет записываться HEX значение цвета. В свойстве Temperature укажем запускать метод при изменении onTempChanges и создадим этот метод
КодПоказать

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

// получить температуру
$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); 
Теперь при каждом изменении свойства температуры будет рассчитываться HEX значение ее цвета для всех объектов комнат.
В коде элемента
<span style="text-shadow: 1px 1px 2px white;">%Officeroom.Temperature% ℃</span>
Атрибут style в этом теге задает тень для текста. При желании его можно убрать. А если нужно, отредактировать цвет. white - белый.

Re: Элемент сцены Температура

Добавлено: Пн фев 15, 2016 4:23 pm
1maikl
Настройка:

1. Поменять везде номер элемента на свой element_39. У имени f39 просто заменить цифру в двух местах.


Мужики, подскажите где должен находится element, какой тип файла, может быть есть образец элемента, прикрепите пожалуйста, что бы легче было понять как это работает. :roll:
В общем, на сцене кроме температуры ничего не отображается....

Re: Элемент сцены Температура

Добавлено: Пт фев 19, 2016 10:27 am
Alien
При редактировании элемента можно посмотреть его номер.
image1.png
image1.png (32.71 КБ) 15929 просмотров

Re: Элемент сцены Температура

Добавлено: Пн фев 22, 2016 9:19 am
1maikl
С температурой и градиентом разобрался, осталось разобраться с направлением измерения температуры ts_office.direction. Я так понимаю что это свойство объекта, но не пойму откуда он берёт данные, при помощи какого метода???? На сцене постоянно отображается красный кружок.Ткните пожалуйста где копнуть....

Re: Элемент сцены Температура

Добавлено: Пн фев 22, 2016 10:44 am
triada13
1maikl писал(а):С температурой и градиентом разобрался, осталось разобраться с направлением измерения температуры ts_office.direction. Я так понимаю что это свойство объекта, но не пойму откуда он берёт данные, при помощи какого метода???? На сцене постоянно отображается красный кружок.Ткните пожалуйста где копнуть....
Посмотри у bagir в Connecte.

Re: Элемент сцены Температура

Добавлено: Пн фев 22, 2016 1:33 pm
1maikl
Просмотрел, ничего о свойстве .direction не нашёл :roll:

Re: Элемент сцены Температура

Добавлено: Пн фев 22, 2016 1:54 pm
triada13
1maikl писал(а):Просмотрел, ничего о свойстве .direction не нашёл :roll:
Посмотрите, оно?(внизу):
СпойлерПоказать

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

$this->setProperty("updated",time());
$this->setProperty("updatedTime",date("Y-m-d H:i:s",time()));
$this->setProperty("alive",1);
$ot=$this->object_title;
$alive_timeout=(int)$this->getProperty("aliveTimeOut");
if (!$alive_timeout) { $alive_timeout=12*60*60; }
setTimeOut($ot."_alive","sg('".$ot.".alive',0);",$alive_timeout);

// Получение среднего значения из истории
//Получить id свойства
$prop_id=$this->getPropertyByName('status', $this->class_id, $this->id);
//Получаем VALUE_ID для следующей таблицы
$pvalue=SQLSelectOne("SELECT * FROM pvalues WHERE PROPERTY_ID='".$prop_id."' AND OBJECT_ID='".$this->id."'");
//Получаем средние значения температуры за последние 30 минут
$start_time=time()-30*60; // 30 минут
$arr_s = SQLSelectOne("SELECT avg(VALUE) as AVG_V FROM phistory WHERE VALUE_ID='".$pvalue['ID']."' AND ADDED>='".date('Y-m-d H:i:s', $start_time)."'");
$avg_s=round($arr_s[AVG_V], 1);

$s=$params['status'];
if (isset($s)) {
 // Если некорректные данные
 if (($s > 50) || ($s < -50)) { return; }
 // Записать в свойство объекта
 $this->setProperty('status',$s);
} else {
 // Для слинкованных свойств и запуска этого метода без передачи данных, взять их из свойства.
 $s = $this->getProperty('status');
}

$s=round($s, 1);

// Сравнение
if ($s-$avg_s > 0.5) {
 $d=1;
} elseif ($s-$avg_s < -0.5) {
 $d=-1;
} else {
 $d=0;
}

$this->setProperty('direction',$d);

// Передать данные слинкованной комнате
$linked_room=$this->getProperty("LinkedRoom");
if ($linked_room) { setGlobal($linked_room.'.Temperature', $s); }
Метод statusChanged, класс TempSensors

Re: Элемент сцены Температура

Добавлено: Вт фев 23, 2016 11:00 am
1maikl
Нет, ничего не получается. alive-всегда 1, независимо от того датчик подключен или нет. Значение свойства direction вообще не отображается....

Re: Элемент сцены Температура

Добавлено: Вт фев 23, 2016 3:22 pm
Alien
Видать не все правильно отрабатываете.
Смотрите в методы свои. Грубо говоря алгоритм должен быть такой:
1. Получение температуры откуда-то меняет свойство Температура объекта.
2. Изменение свойства Температура должно тянуть за собой выполнение метода с вычислением direction.
С alive аналогично - таймер обнуляется при изменении свойства.

Пример все-таки нужно смотреть у Bagir

Re: Элемент сцены Температура

Добавлено: Вт фев 23, 2016 6:01 pm
1maikl
Голову уже сломал, не пойму где искать. Пробовал метод у Sergejey и у Bagir/. Да, кстати а в коде самого метода ничего не надо менять?