Шаблон класса / Class Template

[Nail]

Продолжаю издеваться над шаблоном класса для комнат.
Оказывается в предыдущей версии (там был класс blinker) не работало мерцание (планировалось использовать для датчика движения к примеру)....вот хоть убейте - всё равно не смог заставить его работать, по-этому пока убрал..."кручение" иконок при этом работает на ура, не знаю что за бред...
Так же добавил фон (соответственно свойство background, в которое вписан путь для картинки)....ну и немного подправлен css.
В общем теперь это выглядит как то так
class_template.jpg
Кстати на скрине видно, как выведены показания с датчиков помимо влажности и температуры (см. виджет Улица)...ток такой вариант придумал...если есть другие варианты - жду предложений)))

Шаблон класса roomsПоказать

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

<style>
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

 .container {
  border-radius: 15px;
  border:1px solid #444;
  padding: 10px;
  //background-color:rgba(0, 0, 0, 0.3);
}
 
.left_top {
  float: right;
  font-size: 120%;
}
.left_top div {
  border-radius: 5px;
  border:1px solid #444;
  padding: 2px; 
  display:inline-block;
}
.name {
  font-size: 140%;
}
.devices {
  font-size: 200%;
  margin-bottom: 4px;
  padding-top: 4px;
}
.devices div{
 vertical-align:top;
 margin-right:6px;
 }
 .devices i{
 vertical-align:top;
 margin-right:6px;
 }
 .devices img{
 vertical-align:top;
 margin-right:6px;
 }
.time {
  font-size: 60%;
  color:grey;
}
 
//animations 
 .spiner {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 
    z-index: 100;
}
 
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
   }
 }

 </style>
  <div class="container" style="background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8)), url(%.background%);">
    <div class="left_top">
        <div style='display:%.temperature|"none;inline-block"%'><i class="fa fa-thermometer" aria-hidden="true"></i> %.temperature%°C</div>
        <div style='display:%.humidity|"none;inline-block"%'><i class="fa fa-tint" aria-hidden="true"></i> %.humidity%%</div>      </div>
    <div class="info">
      <div class="name">%.object_description%</div>
      <div class="devices">
       %.deviceString%
      </div>
      <div class="loc" style='display:%.RoomMsg|"none;block"%'><i class="fa fa-podcast" aria-hidden="true"></i> %.RoomMsg%</div>
      <div class="time" style='display:%.LatestActivityTime|"none;block"%'><i class="fa fa-refresh"></i> %.LatestActivityTime%</div>
    </div>
   <div style="clear:both;"></div>
  </div> 

Забавно, учитывая, что в rooms не использовался тот значек вообще))
Надо, наверное таки, по-разному классы обзывать)

ну а я о чем говорил ранее!!!...

А будет продолжение ,доработка? Конечный результат?

[nick7zmail]

Ну это по сути и есть конечный результат)) Больше пока не дорабатывал. Да и пожеланий то собственно не было.

[kas5858]

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

<font style='display:\%SmartHomeDoor.status|"none;block"%'><i class="fal fa-door-open" title="Дверь"></i></font>

Как менять дверь закрыта, дверь открыта?

[Chainik]

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

<font style='display:\%SmartHomeDoor.status|"none;block"%'><i class="fal fa-door-open" title="Дверь"></i></font>

Как менять дверь закрыта, дверь открыта?

Вот так:
https://ab-log.ru/forum/viewtopic.php?f ... 309#p28309

[kas5858]

Как быть с кондиционером, у меня включен это 1, выключен 2 ? Такая схема всегда показывает иконку. По моему где то было решение но что то не могу найти.

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

<font style='display:\%HisenseSD.status|"block;none"%'><i class="fal fa-snowflake" title="Кондиционер"></i></font>

[Chainik]

Тут отсчет идет от нуля. Т.е. в "block;none" означает, что картинка будет показана при "0", а при "1" -- не будет. А про "2" вообще ничего не сказано. Таким образом, должно быть так: "none;block;none"
Эта иконка будет показываться при "1"

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

<font style='display:\%HisenseSD.status|"none;block;none"%'><i class="fal fa-snowflake" title="Кондиционер"></i></font>

а эта при "2"

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

<font style='display:\%HisenseSD.status|"none;none;block"%'><i class="fal fa-snowflake" title="Кондиционер"></i></font>

Хотя сами иконки, конечно, должны быть разными.

[kas5858]

Спасибо, точно "none;block;none".

[kosem]

Подскажите, пожалуйста, совсем запутался! Вот застрял на простейшем примере, правда делал не совсем "как надо"...
Ничего никуда не прописывал, а данные беру из свойств Users и SBatterySensors (создал ПУ batt телефона: Sensor_battery01.icon и Sensor_battery01.color), а код вставляю в "Меню управления -> Данные":

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

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

 <style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.containerUser_1 {
  background-color:%Sensor_battery02.alive|"rgba(255, 0, 0, 0.3);rgba(0, 0, 0, 0.3)"%;
  border-radius: 15px;
  border:1px solid #444;
  padding: 5px;
}
.containerUser_1 img {
  height: 50px;
  float: left;
  border-radius: 15px;
  padding-right: 5px;
}
.battUser_1 {
  float: right;
}
.nameUser_1 {
  font-size: 120%;
}
.locUser_1 {
  font-size: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.timeUser_1 {
  font-size: 60%;
  color:grey;
}
 </style>

<div class="containerUser_1">
     <img src="/cms/avatars/_User_1.jpg">
     <div class="battUser_1">
     <font size="2" style="padding-bottom: 1px;">%User_1.BattLevel%%</font> <span class="fa fa-%Sensor_battery01.icon%" style="color: %Sensor_battery01.color%" aria-hidden="true"></span>
     <font style='display:\%User_1.Charging|"none;block;none"%'><i class="fa fa-plug"></i></font>
      </div>
    <div class="infoUser_1">
      <div class="nameUser_1" style="color: #FFD700">%User_1.fullName%</div>
     <div class="locUser_1"><span style="color: #A52A2A" class="loc_icon fa fa-map-marker" aria-hidden="true"></span> %User_1.seenAt%</div>
      <div class="timeUser_1"><span class="ref_icon fa fa-refresh" aria-hidden="true"></span> %User_1.CoordinatesUpdated%</div>
    </div>
     <div style="clear:both;"></div>

Наверное, я всё не правильно делаю...
Но все показывает, данные и цвета меняются - в данном варианте "вилочка" горит после "батарейки", а хотел вместо батарейки - когда работает зарядка (User_1.Charging=1), а в идеале наложить на "батарейку" значок заряда (типа молнии, как в мобильном).
И как можно вставить иконку не "горизонтальной" батарейки, а "вертикальную" (как в SBatterySensors), я думал Sensor_battery01.icon - именно ее и будет показывать...
Спасибо!

[NiKiToS]

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

      <div class="name">%.object_description%</div>

в этой строке точно %.object_description% прописывается? может все таки %Title% правильней будет. По стандартным значениям это и есть название обЪекта, или я что то не догоняю?

[tarasfrompir]

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

      <div class="name">%.object_description%</div>

в этой строке точно %.object_description% прописывается? может все таки %Title% правильней будет. По стандартным значениям это и есть название обЪекта, или я что то не догоняю?

это для того чтобы не генерировались одниковые блоки... на странице