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

[nick7zmail]

Да, у меня было такое...почему-то когда шаблон на отдельной вкладке - всё норм. Стоило переместить в пункт, где ещё что-то есть (не помню что именно, но вроде без всяческого ява кода...только стандартные элементы) - тоже отображалось только название...и явно не код шаблона виноват...а именно расположение его в меню...я даже не пересоздавал его, а просто перемещал один и тот же пункт.

[hc2hunter]

Наткнулся на глюк...
Похоже при анализе конструкции шаблона скрипт ищет первое вхождение %. , и, не анализируя его, вставляет конструкцию, из-за чего частенько у него получается <имя_объекта>

Наткнулся очень просто - надо было зашаблонить картинки и вставил такой код <img src='/button_status_%.status%_led_%.led%.png'>
В итоге в html имел <img src='/button_status_0_led_0ButtonS20.png'>
Как думаете, откуда взялся красный текст? Оттуда, что было проанализировано %.png и попытка вставить вместо него название объекта.
Обошел очень просто - поставил подчерк перед _.png, но протрахался полчаса

[ymf]

Тоже поймал глюк...
Унаследовав класс Relays, создал свой собственный класс, которому определил шаблон :

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

<div id="myswitch">
<div>
<img src='/images/powero%.status|"ff.png;n.png"%'
onClick='objClicked(this)'>
</div>
<script type="text/javascript">
function objClicked(tag){
var o = '%.object_title%';
callMethod(o+'.%.status|"turnOn;turnOff"%');
}
</script>
</div>

Разместил объект этого класса на сцене, он работает отлично. Добавил этот объект в меню, в раздел "управление". На сцене объект продолжает работать, а в меню отображается, даже при клике выполняется функция, но переключения в %.status|"turnOn;turnOff"% не происходят, и иконка не меняется.
Может есть какие-то трюки для обхода этих глюков?

[nick7zmail]

Продолжаем эксперементировать с шаблонами)) на этот раз шаблон класса Rooms.
Благодаря последнему обновлению (да, да, которое сломало меню)) - стало возможно создавать более универсальные шаблоны.
Вот вам пример:

11.jpg (42.5 КБ) 6953 просмотра

1 шаблон может отображать как маленькие строчки типа как кухня или улица, так и большой объем инфы со статусом и значками, как зал.
У комнат имеются свойства temperature и humidity. Если выставить датчик температуры и влажности в простых устройствах, как основные сенсоры помещения - эти значения и будут попадать в свойства комнаты. И за счет шаблона можно сделать - если свойство есть - отобразить его, если нет - скрыть целиком блок...
Бонусом добавлено пару анимаций (вращение и мигание). Вентилятор, к примеру, реально крутится)))для этого достаточно добавить в css классы "spiner" или "blinker".
В общем не буду томить - вот код

Шаблон класса 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: 5px;
 padding-top: 5px;
}
.time {
  font-size: 60%;
  color:grey;
}
 
//animations 
.blinker {
  -webkit-animation: blink 2s linear infinite;
  animation: blink 2s linear infinite;
}
@-webkit-keyframes blink {
  50% { color: rgb(34, 34, 34); }
  51% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink {
  50% { color: rgb(34, 34, 34); }
  51% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 0); }
}
 .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">
    <div class="left_top">
        <div style='display:%.temperature|"none;block"%'><i class="fa fa-thermometer" aria-hidden="true"></i> %.temperature%°C</div>
        <div style='display:%.humidity|"none;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>

Одно "НО"...надо сформировать полноценную html строку в свойстве .deviceString каждой комнаты с иконками включенных девайсов, к примеру

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

<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-television" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true" ></i>

- примерно то, что отображается сейчас в зале.

[Vovix]

Продолжаем эксперементировать с шаблонами)) на этот раз шаблон класса Rooms.
Благодаря последнему обновлению (да, да, которое сломало меню)) - стало возможно создавать более универсальные шаблоны.
Вот вам пример:

11.jpg

1 шаблон может отображать как маленькие строчки типа как кухня или улица, так и большой объем инфы со статусом и значками, как зал.
У комнат имеются свойства temperature и humidity. Если выставить датчик температуры и влажности в простых устройствах, как основные сенсоры помещения - эти значения и будут попадать в свойства комнаты. И за счет шаблона можно сделать - если свойство есть - отобразить его, если нет - скрыть целиком блок...
Бонусом добавлено пару анимаций (вращение и мигание). Вентилятор, к примеру, реально крутится)))для этого достаточно добавить в css классы "spiner" или "blinker".
В общем не буду томить - вот код

Шаблон класса 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: 5px;
 padding-top: 5px;
}
.time {
  font-size: 60%;
  color:grey;
}
 
//animations 
.blinker {
  -webkit-animation: blink 2s linear infinite;
  animation: blink 2s linear infinite;
}
@-webkit-keyframes blink {
  50% { color: rgb(34, 34, 34); }
  51% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink {
  50% { color: rgb(34, 34, 34); }
  51% { color: rgba(34, 34, 34, 0); }
  100% { color: rgba(34, 34, 34, 0); }
}
 .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">
    <div class="left_top">
        <div style='display:%.temperature|"none;block"%'><i class="fa fa-thermometer" aria-hidden="true"></i> %.temperature%°C</div>
        <div style='display:%.humidity|"none;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>

Одно "НО"...надо сформировать полноценную html строку в свойстве .deviceString каждой комнаты с иконками включенных девайсов, к примеру

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

<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-television" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true" ></i>

- примерно то, что отображается сейчас в зале.

Никита, а не имеет ли смысл, этим виджетам (этот и пользователи) делать класс с несколько разным названием (class="container")?
Гипотетически, если они попадут на одну страницу, то последний объект перебьет своим стилем предыдущие, и пока они у тебя почти одинаковые, но....
или браузер пройдет по ним последовательно, что-то я не задавался этим вопросом ранее!
и потом именно class="container" довольно распространенное наименование класса!
хотя возможно я не прав, но вдруг!?
т.е. я думаю, что названия классов, в данном случае, должны быть уникальны!

[igorewa]

А можно поподробнее об этом, вообще не понял где это и куда это.

Одно "НО"...надо сформировать полноценную html строку в свойстве .deviceString каждой комнаты с иконками включенных девайсов, к примеру

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

<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-television" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true"></i>
<i class="fa fa-plug" aria-hidden="true" ></i>

- примерно то, что отображается сейчас в зале.

[Jilber]

Я так понимаю, что сюда:

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

1.jpg (122.2 КБ) 6922 просмотра

2.jpg (14.61 КБ) 6922 просмотра

[nick7zmail]

Я так понимаю, что сюда:

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

1.jpg

2.jpg

Верно, туда. Ширину виджета, если что, я расчитывал от 270 пикселей...а то они у вас маленькие какие-то вышли)) Более того, как выяснилось - туда можно закидывать надписи тоже с условиями. По идее можно даже обойтись без формирующего скрипта.

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

<div style="display:%Relay12.status|"none;block"%"><img src="/cms/icons/fan.png" class="spiner" style="width:32px; height:32px"></div>

Никита, а не имеет ли смысл, этим виджетам (этот и пользователи) делать класс с несколько разным названием (class="container")?
Гипотетически, если они попадут на одну страницу, то последний объект перебьет своим стилем предыдущие, и пока они у тебя почти одинаковые, но....
или браузер пройдет по ним последовательно, что-то я не задавался этим вопросом ранее!
и потом именно class="container" довольно распространенное наименование класса!
хотя возможно я не прав, но вдруг!?
т.е. я думаю, что названия классов, в данном случае, должны быть уникальны!

Возможно имеет. Но на сколько я замечал - стили переписываются. т.е. грузится 1 виджет с 1 стилем, грузится второй - переписывает его, грузится третий с 1 стилем - опять переписывает...т.к. стили грузятся из разных мест (типа elemnt9.container, elemtnt10.container и т.д. - вроде они друг другу не мешают....другой вопрос, если у 1 виджета будет этот стиль, а у второго нет. Тогда он точно перепишется предыдущим - и могут быть глюки с отображением. К примеру на сцене у меня переопределён стиль fa (картинки шрифта font awesome), и если я их не переопределяю в конкретном виджете - они подхватывают стиль со сцены, и отображаются коряво.
Да и тем более разные классы стараюсь переименовывать. т.е. loc и time к примеру в этом и в предыдущем виджете - одно и то же, и конфликта точно не будет. container - да, чуть чуть поправил...но с переименованием не заморочился)). Вроде пока траблов не было (пробовал вставлять на 1 страницу - вроде всё ок.

[nick7zmail]

Сергей...какая-то проблемка с

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

<img src="/cms/icons/fan.png" class="spiner" style="width:32px; height:32px; display:%Relay12.status|"none;block"%">

(это записано в свойстве, которое выводится в шаблоне)
В сценах и дашборде работает, а в боковом меню не хочет переключаться, пока меню открыто...только при обновлении страницы. Мне кажется дело в вебсокетах...как "вручную" оформить подписку со страницы на свойство?? Мне кажется это из-за того способа, что я выше указал))) то есть когда условие вбито в свойстве, а в шаблоне ссылка на это свойство. Страница не видит, что на "свойство внутри свойства" подписываться надо...

[Logrus]

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

Снимок.PNG (7.28 КБ) 6876 просмотров

Никита, можно подробнее расписать, нет названия комнаты (%.object_description%), нет значка детектора движения (%.RoomMsg%), 1 и 2 ряд наехали друг на друга, со всем этим у меня масштаб/размеры, что-то не так (хз, что там с определенной высотой, даже пустое)
да, по второй строке - это просто значки они ни на какие изменения не реагируют? (ага, а как формируешь ?) (вроде б понял, иконки нет /cms/icons/fan.png)(в дашборде без перезагрузки не изменяется)

(.Title)

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

Снимок2.PNG (8.11 КБ) 6870 просмотров

на датчик движения код какой-то на действия висит?

п.с. еще вопрос: если будут еще к комнате привязаны освещенность и давление, как быть с первой строкой?
датчик протечки, возгорания - как бы отдельной строкой как датчик движения?