Как на сцене создать элемент bar

Если вы только начинаете осваивать систему MajorDoMo и чего-то не знаете или не можете понять, то задавайте свои вопросы в этой ветке.

Модератор: immortal

Ответить
Qdesnikmak
Сообщения: 34
Зарегистрирован: Ср июл 22, 2020 1:30 pm
Благодарил (а): 6 раз
Поблагодарили: 1 раз

Как на сцене создать элемент bar

Сообщение Qdesnikmak » Вт мар 28, 2023 7:39 am

Доброго всем, камрады. Решил сделать себе показометр уровня в септике, но не нашел в Графиках элемента Bar - либо графики либо Gauge.
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
Jilber
Сообщения: 682
Зарегистрирован: Ср май 03, 2017 7:41 pm
Благодарил (а): 111 раз
Поблагодарили: 107 раз

Re: Как на сцене создать элемент bar

Сообщение Jilber » Вт мар 28, 2023 1:17 pm

Можно попробовать тут глянуть:
viewtopic.php?f=4&t=3735
https://www.highcharts.com/demo
Qdesnikmak
Сообщения: 34
Зарегистрирован: Ср июл 22, 2020 1:30 pm
Благодарил (а): 6 раз
Поблагодарили: 1 раз

Re: Как на сцене создать элемент bar

Сообщение Qdesnikmak » Вт мар 28, 2023 3:25 pm

не совсем то - тут всякие спидометры, графики из эти самых баров. А мне нужен "показометр" типа как на этой картинке на емкостях
http://www.revolution.be/ETP-200/synop1.gif
Изображение
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
Qdesnikmak
Сообщения: 34
Зарегистрирован: Ср июл 22, 2020 1:30 pm
Благодарил (а): 6 раз
Поблагодарили: 1 раз

Re: Как на сцене создать элемент bar

Сообщение Qdesnikmak » Вт мар 28, 2023 4:20 pm

Jilber писал(а):
Вт мар 28, 2023 1:17 pm
Можно попробовать тут глянуть:
viewtopic.php?f=4&t=3735
https://www.highcharts.com/demo
Не совсем то - нужен просто "прямоугольник" с изменяющимся столбиком заливки как на ёмкостях на картинке http://www.revolution.be/ETP-200/synop1.gif
Ну то бишь я нарисую (где нють перепишу) изображение бочки-септика и положу на нее этот прямоугольник с заливкой в зависимости от наполненности.
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Как на сцене создать элемент bar

Сообщение Chainik » Вт мар 28, 2023 6:32 pm

Для этого дела вам вполне подойдет svg-разметка. Вот пример: viewtopic.php?f=4&t=2110&start=9
Однажды для решения такой же задачи я успешно переворачивал такой "столбик" в вертикальное положение. А высота "закраски" столбика, помню, успешно завязывалась на объект.свойство. Так что принципиально все работает.

Вот тот же "столбик", повернутый вертикально. Можете поиграться с цифрой "30".

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

<svg width="105" height="405">
  <defs>
    <linearGradient id="Gradient1" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#BBC42A" />
      <stop offset="30%" stop-color="#00C42A" />
      <stop offset="0%" stop-color="#ED6E46" />
    </linearGradient>
  </defs>
  <rect x="2" y="2" width="100" height="400" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>
Можно также развернуть прогресс бар вертикально:

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

<html>
<head>

 <style>
 progress {
   -webkit-transform: rotate(270deg); // разворот элемента для разных бразуеров
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
 -webkit-transform-origin: 100% 0%; 
 -ms-transform-origin: 100% 0%; 
  transform-origin: 100% 0%;
   }
 </style>

</head>
<body>

<div>
   <progress id="progressbar" value="60" max="100"></progress>
</div>

</body>
</html>
Последний раз редактировалось Chainik Ср мар 29, 2023 10:58 am, всего редактировалось 1 раз.
Sergey.Chek
Сообщения: 107
Зарегистрирован: Ср фев 13, 2019 9:50 pm
Благодарил (а): 219 раз
Поблагодарили: 19 раз

Re: Как на сцене создать элемент bar

Сообщение Sergey.Chek » Ср мар 29, 2023 9:41 am

Qdesnikmak писал(а):
Вт мар 28, 2023 7:39 am
Доброго всем, камрады. Решил сделать себе показометр уровня в септике, но не нашел в Графиках элемента Bar - либо графики либо Gauge.
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
А что за датчик? Можно поподробнее.
Raspberry pi 4
Qdesnikmak
Сообщения: 34
Зарегистрирован: Ср июл 22, 2020 1:30 pm
Благодарил (а): 6 раз
Поблагодарили: 1 раз

Re: Как на сцене создать элемент bar

Сообщение Qdesnikmak » Ср мар 29, 2023 11:23 am

Sergey.Chek писал(а):
Ср мар 29, 2023 9:41 am
Qdesnikmak писал(а):
Вт мар 28, 2023 7:39 am
Доброго всем, камрады. Решил сделать себе показометр уровня в септике, но не нашел в Графиках элемента Bar - либо графики либо Gauge.
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
А что за датчик? Можно поподробнее.
Датчика пока нет - придумал имитацию для ориентировки. С момента откачки начинает добавлять процент к уровню каждые сутки. Зная, сколько времени нужно для наполнения вычислил сколько нужно добавлять и решил попробовать.
В качестве датчика планировал связку JSN-SR04T (похож на датчик парковки для авто) и Ардуино или ESP, но что-то в колодце он показывает пока что чушь полную. Еще взял с известного китайского сайта ультразвуковой датчик с внешней станцией и радио-передачей, но тоже пока ума не дал. Так что пока только имитатор и электрод датчика ВАУ (верхнего аварийного уровня) на ESP-01 +mqtt
За это сообщение автора Qdesnikmak поблагодарил:
Sergey.Chek (Чт мар 30, 2023 10:25 pm)
Рейтинг: 1.16%
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
Qdesnikmak
Сообщения: 34
Зарегистрирован: Ср июл 22, 2020 1:30 pm
Благодарил (а): 6 раз
Поблагодарили: 1 раз

Re: Как на сцене создать элемент bar

Сообщение Qdesnikmak » Ср мар 29, 2023 11:33 am

Chainik писал(а):
Вт мар 28, 2023 6:32 pm
Для этого дела вам вполне подойдет svg-разметка. Вот пример: viewtopic.php?f=4&t=2110&start=9
Однажды для решения такой же задачи я успешно переворачивал такой "столбик" в вертикальное положение. А высота "закраски" столбика, помню, успешно завязывалась на объект.свойство. Так что принципиально все работает.

Вот тот же "столбик", повернутый вертикально. Можете поиграться с цифрой "30".

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

<svg width="105" height="405">
  <defs>
    <linearGradient id="Gradient1" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#BBC42A" />
      <stop offset="30%" stop-color="#00C42A" />
      <stop offset="0%" stop-color="#ED6E46" />
    </linearGradient>
  </defs>
  <rect x="2" y="2" width="100" height="400" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>
Можно также развернуть прогресс бар вертикально:

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

<html>
<head>

 <style>
 progress {
   -webkit-transform: rotate(270deg); // разворот элемента для разных бразуеров
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
 -webkit-transform-origin: 100% 0%; 
 -ms-transform-origin: 100% 0%; 
  transform-origin: 100% 0%;
   }
 </style>

</head>
<body>

<div>
   <progress id="progressbar" value="60" max="100"></progress>
</div>

</body>
</html>
Первый пример самое то! Благодарю. Допилю напильником и буду вставлять в мнемосхему (точнее Сцену по тутошнему :) )
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
Ответить