MajorDoMo

nick7zmail писал(а): Вт янв 15, 2019 10:24 am Совсем недавно вышел довольно интересный пак выключателей для сцен. В паке присутствует более 30 различных тумблеров, выключателей, переключателей, рычажков и т.п. различных размеров, цветов, форм.

nick7zmail писал(а): Пт дек 01, 2017 5:03 pm Дело было вечером делать было...дофигачего)) но я устал это всё делать, и сел "порисовать" элементы...решил оживить немного свою сцену с планом квартиры...а то она у меня как-то совсем не приживается =(...больше по душе интерфейсы панелей (без планов квартир)...не суть...
Короче скидал я индикаторы...вроде получилось неплохо...может кому понадобится...выглядят так
111.jpg
Для них нужна библиотека...название не помню - лень искать, если честно, но в гугле находится без проблем, но на всякий случай приложу. Надо закинуть в папку js.
gaugeMeter.rar

Создать HTML элемент на сцене, в дополнительный код css закинуть

код cssSPOILER_SHOW

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

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {
  width: 54%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  font-weight: 100;
  font-family: "Open Sans", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}
.GCont {
background-color: #000;
opacity: .8;
border-radius: 30px;
border:1px solid #777;
}

а в состояние

код элементаSPOILER_SHOW

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

<script src="/js/gaugeMeter.js"></script>
<script>$(".GaugeMeter").gaugeMeter();</script>
<div class="GCont">
<div class="GaugeMeter" id="test" data-total="40" data-used="%Sensor_temp03.value%"
     data-text="<font style='color:White;size:13px'>%Sensor_temp03.value%</font>"
     data-append="<font style='color:white'>°C</font>" data-prepend="<font style='color:white'>%Sensor_temp03.dynamic% </font>"
     data-size="140" data-theme="White" data-back="RGBa(255,255,255,.2)" data-width="15" data-label="Температура"
     data-label_color="#FFF" data-stripe="3"></div>
</div>

Параметры:
data-width="15" - высота деления
data-stripe="3" - ширина деления
data-size="140" - диаметр круга
data-label="Температура" - подпись под значением
data-style="Full" - Full, Semi or Arch (полный круг, полукруг или арка)
Все параметры тут
по мануалу только положительные числа, однако и отрицательные использовать можно, в таком случае data-total и data-used должны быть отрицательными

Мож кому интересно будет =).
Теперь правда выключатели света неказисто смотрятся рядом с такими "Мощными" информерами =D. Надо будет тоже что нить городить...либо перейти на что нить менее громоздкое...

nick7zmail писал(а): Чт фев 07, 2019 6:44 am Для направления я создавал отдельное свойство, и туда заносил ASCII символ стрелки. Тогда родного функционала сохранения изменения направления не было...собственно после этого оно и появилось =D.

nick7zmail писал(а): Ср фев 06, 2019 1:02 pm Если что то простенькое - то примерно так viewtopic.php?f=4&t=2047
т.е. назвать особым образом, и создать соответствующие состояния...
Если по-сложнее (убрать надпись, рамку, фон, изменить размер и т.п.) - надо к элементу ещё css дописать, делающий это.

nick7zmail писал(а): Пт фев 08, 2019 8:33 am назвали правильно.

nick7zmail писал(а): Пт фев 08, 2019 8:33 am Чтобы проверить без кэширования откройте окно в анонимном режиме (в хроме к примеру называется режим инкогнито), ...