[Дизайн] Элемент сцены ИБП (UPS)

Оформление сцен, меню, страниц

Модераторы: immortal, newz20

Аватара пользователя
Bagir
Сообщения: 1487
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 187 раз
Поблагодарили: 338 раз

[Дизайн] Элемент сцены ИБП (UPS)

Сообщение Bagir » Ср мар 04, 2015 1:33 am

Разработка элемента, показывающего текущие данные ИБП. Вариант не окончательный.
Изображение

Поиском в коде найти все _121 и заменить на свой номер элемента чтобы сохранить уникальность имен.
Объект.Свойства:
UPS.batCharge - Уровень заряда батареи в процентах. Значение должно быть от 0 до 100.
UPS.load - Уровень загрузки ИБП в процентах. Значение должно быть от 0 до 100.
UPS.outVoltage - Вольты. Измеряемые стрелкой значения 210-240 (можно будет редактировать). цифровой индикатор - любое значение.
UPS.frequency - Цифровой индикатор частоты тока. Полезен при работе от генератора.
UPS.inTemp - Цифровой индикатор температуры ИБП. Полезен для мощных ИБП при долговременной работе от батарей.
UPS.alive - Стандартный признак, что объект ИБП обновляется.
UPS.status - Комплексное значение статусов ИБП. Пока читается только первая цифра. 0-сеть, 1-батарея.
Заточено под UPS Assistant Но переделать совсем просто.

Элемент не реагирует на задаваемые ему ширину и высоту. Эти значения прописаны в коде. <style> ... width: 110px; ... </style> задает ширину всего элемента. <svg ... height="75px"> задает высоту. Все элементы рисуются в теге <defs>. Затем use выводит их на экран. У тегов use можно изменить координаты датчиков.
КодПоказать

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

<style>
div.element_121 {
  border-radius: 10px;
  padding: 5px;
  width: 110px;
  background-color: DarkTurquoise;
}
</style>

<script> 
 var r, p, fx, fy, v, f, d;
 // Заряд батареи
 r=20;
 p=%UPS.batCharge%;
 if (p>=100) { p=99.999; }
 f=(p / 50 - 0.5) * Math.PI;
 fx=Math.sin(f) * r + r;
 fy=Math.cos(f) * r;
 v=Math.floor(p / 50);
 d="M-11,7 a" + r + "," + r + " 0 " + v + ",0 " + fx + "," + fy;
 document.getElementById('e_121batsegment').setAttribute('d', d);

 // Напряжение
 p=%UPS.outVoltage%;
 // p=%ThisComputer.textBoxTest%;
 document.getElementById('e_121voltval').innerHTML =  Math.round(p); 
 // установим ограничения, чтобы стрелка не вышла за пределы  
 if (p<210) { p=210; }
 if (p>240) { p=240; }  
 // Корректируем значение угла. множитель это цена деления.
 // Вычитаемое как та крутилка внизу прибора для калибровки стрелки.
 p=(p-108.28)*2.32;
 // переводим градусы отклонения стрелки в радианы
 p=p * Math.PI / 180;
 // радиус стрелки.
 // Расчет координат верхней точки.
 r=35; // большой радиус
 fx=Math.cos(p) * r + 26;
 fy=Math.sin(p) * r + 35;
 // Расчет координаты нижней точки.
 r=17; // малый радиус
 f=Math.cos(p) * r + 26;
 // сборка полигона стрелки
 d=(f-1) + ",16 " + fx + "," + fy + " " + (f+1) + ",16";
 document.getElementById('e_121voltst').setAttribute('points', d);

 // Частота
 document.getElementById('e_121freqval').innerHTML =  Math.round(%UPS.frequency%) + "Hz"; 

 // Температура
 document.getElementById('e_121tempval').innerHTML =  Math.round(%UPS.inTemp%) + "℃"; 

 // Режим работы и статус
 d='';
 p='%UPS.status%';
 if (%UPS.alive% == 0) {
   d='#e_121questico';
 } else { 
  if (p.charAt(0) == 0) { d='#e_121plugico'; } else { d='#e_121batico'; }
 }
 document.getElementById('e_121workmode').setAttribute('xlink:href', d);
</script>

<svg width="100%" height="75px">
 <defs>
   <!-- Градиент для мощности -->
   <linearGradient id="e_121loadgradient" x1="0" y1="0" x2="100%" y2="0"> <!-- spreadMethod="repeat" -->
     <stop offset="%UPS.load%%" stop-color="Cornsilk" />
     <stop offset="0%" stop-color="transparent" />
   </linearGradient>

   <!-- Круговой индикатор уровня заряда АКБ -->
   <g id="e_121sensor_akb">
     <!-- Круги и сегмент процента -->
     <circle r="26" cx="9" cy="7" fill="none" stroke="white" stroke-width="2" />
     <circle r="14" cx="9" cy="7" fill="none" stroke="white" stroke-width="2" />
     <path id="e_121batsegment" d="M1,1" fill="none" stroke="Cornsilk" stroke-width="7" stroke-dasharray="5.2 0.5" />
     <!-- иконка аккумулятора -->
     <rect x="1" y="3" rx="2" height="10" width="16" fill="DodgerBlue" stroke="Black" stroke-width="0.8" />
     <rect x="4" y="1" height="2" width="2" fill="none" stroke="Black" stroke-width="0.8" />
     <rect x="12.3" y="1" height="2" width="2" fill="none" stroke="Black" stroke-width="0.8" />
     <line x1="3" y1="7" x2="7" y2="7" fill="Black" stroke="Black" stroke-width="1" />
     <line x1="11" y1="7" x2="15" y2="7" fill="Black" stroke="Black" stroke-width="1" />
     <line x1="13" y1="5" x2="13" y2="9" fill="Black" stroke="Black" stroke-width="1" />
   </g>

   <!-- Мощность -->
   <g id="e_121sensor_power">
     <path d="M1,7 q0,3 3,3 h56 q3,0 3,-3 v-24 q0,-3 -3,-3 l-56 19 q-3,1 -3,3" 
                fill="none" stroke="white" stroke-width="2" stroke-linecap="round" />
     <path d="M6,1 q-3,1 -3,3 q0,3 3,3 h 51 q3,0 3,-3 v-17 q0,-3 -3,-3 z" 
                fill="url(#e_121loadgradient)" stroke="none" stroke-width="1" />
     <path d="M55,-14 l-1,8 l3,-1 l-6,10 l1,-8 l-3,1 z" 
               fill="none" stroke="black" stroke-width="0.8" stroke-linecap="round" />
   </g>

  <!-- Вольты -->
  <g id="e_121sensor_volt">
    <path d="M1,1 q25,-14 50,0 v26 q0,3 -3,3 h-32 v-12h20v12 h-32 q-3,0 -3,-3 z" 
               fill="none" stroke="White" stroke-width="2" stroke-linejoin="round" />
    <text x="6" y="21" fill="black" stroke="none" font-size="8px">V</text>
    <text x="40" y="21" fill="black" stroke="none" font-size="8px">~</text>
    <text id="e_121voltval" x="26" y="27" fill="black" stroke="none" font-size="9px" word-spacing="1" text-anchor="middle" />
    <path d="M7,6 q18,-11 39,0" fill="none" stroke="Cornsilk" stroke-width="7" stroke-dasharray="13 1" /> 
    <!-- стрелка -->
    <polygon id="e_121voltst" fill="black" stroke="black" stroke-width="1" />
    <!-- отладочные круги
    <circle r="35" cx="26" cy="35" fill="none" stroke="red" stroke-width="1" />
    <path d="M26,35 L6.93,5.56" fill="none" stroke="green" stroke-width="1"/>
    <circle r="20" cx="26" cy="35" fill="none" stroke="red" stroke-width="1" />
    -->
  </g>

  <!-- Герцы -->
  <g id="e_121sensor_hz">
    <rect x="1" y="1" width="26" height="13" rx="2" stroke-width="2" fill="none" stroke="white" />
    <text id="e_121freqval" x="3" y="11" fill="black" stroke="none" font-size="9px" />
  </g>

  <!-- Температура -->
  <g id="e_121sensor_temp">
    <rect x="1" y="1" width="26" height="13" rx="2" stroke-width="2" fill="none" stroke="white" />
    <text id="e_121tempval" x="3" y="11" fill="black" stroke="none" font-size="9px" />
  </g>

  <!-- Батарейка -->
  <g id="e_121batico">
    <rect  x="1" y="4" width="10" height="17" rx="2" stroke-width="2" fill="none" stroke="white" />
    <rect  x="3" y="6" width="6" height="13" fill="white" stroke="none" />
    <rect  x="4" y="1" width="4" height="3" rx="1" stroke-width="2" fill="white" stroke="none" />
  </g>

  <!-- Вилка -->
  <g id="e_121plugico">
    <path d="M1,8 v-2 h2   v-5 q1,-2 2,0 v5   h4   v-5 q1,-2 2,0 v5   h2 v2 z" fill="white" stroke="white" stroke-width="0.5" />  
    <path d="M2,9.4 h10   v2 q0,4 -4,4   v6 h-2 v-6   q-4,0 -4,-4 v-2 z" fill="white" stroke="white" stroke-width="0.5" />  
  </g>

  <!-- н/д -->
  <g id="e_121questico">
    <text x="4" y="2" fill="white" stroke="none" font-size="12px" writing-mode="tb">N/A</text>
  </g>
 </defs>

 <use xlink:href="#e_121sensor_akb" x="18" y="20" />
 <use xlink:href="#e_121sensor_power" x="15" y="63" />
 <use xlink:href="#e_121sensor_volt" x="58" y="7" />
 <use xlink:href="#e_121sensor_hz" x="82" y="41" />
 <use xlink:href="#e_121sensor_temp" x="82" y="59" />
 <use id="e_121workmode" xlink:href="#e_121questico" x="1" y="52" />
</svg>
Дальнейшая разработка:
1. Цвет фона будет дублировать статус сеть/батарея/ошибка/неживой.
2. Покраснение шкалы приборов при выходе за допустимые показания.

Будут вопросы по коду или предложения, пишите!
Вложения
Elements22-34-33.zip
(7.98 КБ) 330 скачиваний
Последний раз редактировалось Bagir Сб мар 07, 2015 10:36 pm, всего редактировалось 1 раз.
За это сообщение автора Bagir поблагодарил:
Molostov (Чт янв 12, 2017 11:44 pm)
Рейтинг: 1.18%
Windows 7, HTTP, MegaD, Z-Wave, 1-Wire
Jager
Сообщения: 708
Зарегистрирован: Сб авг 18, 2012 10:21 am
Благодарил (а): 26 раз
Поблагодарили: 180 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Jager » Ср мар 04, 2015 8:52 am

Bagir писал(а):Хотелось бы обсудить дальнейшую доработку элемента. Что и где размещать.
1. Режим работы. Батарея/сеть/неисправен/тест. Если есть на примере красивые svg картинки, присылайте.
2. Кружок с температурой ИБП. Цвет кружка будет изменяться ступенчато, либо плавно.
3. Критическое превышение нагрузки. что то должно покраснеть. Либо шкала, либо ее рамка.
4. Большой разряд батареи. Изменяем цвет иконки аккумулятора, либо шкалы, либо круга.
5. Уровень напряжения в вольтах. Как и куда пока не придумал.
6. Герцы. Полезно при питании от генератора. но много места тратить а это не хочется.
7. Признак что опрос ИБП проходит успешно (свойство alive). Либо рисуем красную точку, либо изменяем цвет фона элемента.
1. При аварии менять весь фон с голубого на красный, как в самом ippon реализовано.
2. Можно что бы пару последних сегментов красными становились
3. Аналогично, последние сегменты
4. Без разницы, можно сделать пульсирующим
5. Можно под шкалой, как то так
Изображение
6. Условно нужный параметр, на него никак повлиять нельзя.
7. Точка пойдет.
Аватара пользователя
Bagir
Сообщения: 1487
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 187 раз
Поблагодарили: 338 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Bagir » Ср мар 04, 2015 12:42 pm

Менять весь фон элемента действительно лучше только при аварии, а при не ответе рисовать точку.
Сегодня попробую прикрутить вольтметр. Шкала интересный вариант. Можно ее попробовать изогнуть аркой, поделить на сегменты и залить градиентом одного цвета. А при отклонении показаний за установленные пределы, менять градиент в этого края на. Посмотрим чего получится.

В индикаторе мощности я не придумал как поделить на сегменты. Этот легко сделать для обводки, но никак для заливки. Элемент по ширине не ровный, и обводку использовать никак. Заливку можно раскрасить повторяющимся градиентом, то тогда потеряю возможность заливать до указанного процента. Можно попробовать рисовать элемент внутри сразу нужного размена и не использовать градиентную заливку до процента. Но тогда нужно рассчитывать верхнюю точку чтобы она шла параллельно с рамкой. Вообщем еще поэкспериментирует.
Windows 7, HTTP, MegaD, Z-Wave, 1-Wire
Аватара пользователя
Bagir
Сообщения: 1487
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 187 раз
Поблагодарили: 338 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Bagir » Ср мар 04, 2015 7:45 pm

Пристроил вольтметр. Вечерком, на основе полоски, внизу сделаю частоту и температуру. Остался еще значок работы батарея/сеть. Думаю уменьшить длину индикатора мощности. Есть еще какие идеи?
Вложения
img6.png
img6.png (4.57 КБ) 19083 просмотра
Windows 7, HTTP, MegaD, Z-Wave, 1-Wire
Vittaly
Сообщения: 118
Зарегистрирован: Вт окт 14, 2014 9:19 pm
Благодарил (а): 48 раз
Поблагодарили: 12 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Vittaly » Ср мар 04, 2015 8:02 pm

Я думаю, при работе от сети значок аккумулятора в центре круга можно менять на значок молнии или штепселя от розетки
Cubietrunck + Debian
Jager
Сообщения: 708
Зарегистрирован: Сб авг 18, 2012 10:21 am
Благодарил (а): 26 раз
Поблагодарили: 180 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Jager » Ср мар 04, 2015 8:12 pm

Bagir писал(а): Есть еще какие идеи?
Немного увеличить и вписать цифрами напряжение
Изображение
И кстати внутри аккумулятора вместо +- тоже цифровое значение хорошо было бы.
Аватара пользователя
Bagir
Сообщения: 1487
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 187 раз
Поблагодарили: 338 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Bagir » Ср мар 04, 2015 8:40 pm

Vittaly писал(а):при работе от сети значок аккумулятора в центре круга можно менять на значок молнии или штепселя от розетки
Думал я об этом. И даже смотрел как он туда вписывается. Но тогда будет непонятно что это за элемент и чего он показывает. Пока что думаю уменьшить мощность и разместить вилку/батарейку справа от нее. А что действительно лучше, вилка или молния?
Jager писал(а):Немного увеличить и вписать цифрами напряжение
Мысль! И даже место есть. Сначала хотел туда маленькую полоску частоты загнать. Но очень уж места мало. Только я пока не умею работать с текстом в тегах svg. Похоже самое время научиться :)
Windows 7, HTTP, MegaD, Z-Wave, 1-Wire
Jager
Сообщения: 708
Зарегистрирован: Сб авг 18, 2012 10:21 am
Благодарил (а): 26 раз
Поблагодарили: 180 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Jager » Ср мар 04, 2015 10:00 pm

Bagir писал(а): А что действительно лучше, вилка или молния?
Вилка логичнее.
Аватара пользователя
Bagir
Сообщения: 1487
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 187 раз
Поблагодарили: 338 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Bagir » Ср мар 04, 2015 10:07 pm

Да, наверное. Молния больше даже на мощность пошла бы. У меня на юпсе мощность показана весами с маленьким и большим кружком.
А пока что вот итог добавления циферок на вольтметр
Изображение
Windows 7, HTTP, MegaD, Z-Wave, 1-Wire
Vittaly
Сообщения: 118
Зарегистрирован: Вт окт 14, 2014 9:19 pm
Благодарил (а): 48 раз
Поблагодарили: 12 раз

Re: Элемент сцены ИБП (UPS)

Сообщение Vittaly » Ср мар 04, 2015 11:09 pm

По-моему неплохо. По поводу батарейки/вилки. В любом случае, значёк будет мелким. Может стоит помимо этого менять общий цвет заливки в зависимости от режима сеть/батарейка?
Cubietrunck + Debian
Ответить