Активные объекты на сценах

[Vit]

Заголовок: Активные объекты на сценах

Предлагаю вот такое незамысловатое добавление к элементам в виде кружочка для неживых датчиков. Иногда бывает и полезно увидеть, что датчик неживой. Например в случае с z-wave может получиться так, что датчик будет расположен на максимальном удалении от контроллера, и в какой то момент перестанет вообще его видеть.

Здравствуйте хотел сделать как на форуме, чтобы определять живой датчик или нет.
получилось только сделать так для одного датчика, как только а прописываю под второй датчик первый перестает показывать, нет ни точки не стрелок они как то перепрыгивают ко второму датчику хотя свойства .alive и .direction указываю каждому датчику свой.

покажите код для первого и для второго датчика...

[Bagir]

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

<style>
div.element_37 {
  font-size: 12pt;
  font-weight:700;
  text-align: center;
  border-radius: 30px;
  background-image: radial-gradient(%Livingroom.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_livingroom.direction%)) * Number(%ts_livingroom.alive%);
 var e = document.getElementById('f37');
 e.setAttribute('class', ad);
 // 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>

<br>
%Livingroom.Temperature% ℃
<div id="f37" class="element2"></div>

<style>
div.element_37 {
font-size: 12pt;
font-weight:700;
text-align: center;
border-radius: 30px;
background-image: radial-gradient(%Livingroom.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_livingroom.direction%)) * Number(%ts_livingroom.alive%);
var e = document.getElementById('f37');
e.setAttribute('class', ad);
// 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>

<br>
%Livingroom.Temperature% ℃
<div id="f37" class="element2"></div>

Небольшое изменение. Внизу element я заменил element2. Дело в том, что так то все равно как его назвать, т.к. в самом начале это имя как раз и подменяется. Но все же, думаю, будет правильней, если сделать так, потому что стиля element просто нету.

[Dragon]

-

[Dragon]

Заголовок: Активные объекты на сценах

покажите код для первого и для второго датчика...

во текст первого датчика

СпойлерПоказать

<style>
div.element_20 {
font-size: 12pt;
font-weight:700;
text-align: center;
border-radius: 30px;
background-image: radial-gradient(%Outdoor_sensor.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(%Outdoor_sensor.direction%)) * Number(%Outdoor_sensor.alive%);
var e = document.getElementById('f');
e.setAttribute('class', ad);
// 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>

<br>
%Outdoor_sensor.temp% ℃
<div id="f" class="element2"></div>

а вот для второго

СпойлерПоказать

<style>
div.element_21 {
font-size: 12pt;
font-weight:700;
text-align: center;
border-radius: 30px;
background-image: radial-gradient(%Hall_sensor.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(%Hall_sensor.direction%)) * Number(%Hall_sensor.alive%);
var e = document.getElementById('f');
e.setAttribute('class', ad);
// 0-не живой, 1-падает, 2-без изменений, 3-растет
</script>

<br>
%Hall_sensor.temp% ℃
<div id="f" class="element2"></div>

что я не так делаю

[Bagir]

Если одинаковых элементов несколько, можно попробовать использовать разные имена
var e = document.getElementById('f64');
<div id="f64" class="element2"></div>
Например тоже добавлять цифру id элемента. Это должно помочь.

[Dragon]

Если одинаковых элементов несколько, можно попробовать использовать разные имена
var e = document.getElementById('f64');
<div id="f64" class="element2"></div>
Например тоже добавлять цифру id элемента. Это должно помочь.

Спасибо после этих изменений все заработало как надо.

[I_I_Imonder]

получилось у кого сделать слайдер для сцены?