Как на сцене создать элемент bar
Модератор: immortal
-
- Сообщения: 34
- Зарегистрирован: Ср июл 22, 2020 1:30 pm
- Благодарил (а): 6 раз
- Поблагодарили: 1 раз
Как на сцене создать элемент bar
Доброго всем, камрады. Решил сделать себе показометр уровня в септике, но не нашел в Графиках элемента Bar - либо графики либо Gauge.
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
-
- Сообщения: 34
- Зарегистрирован: Ср июл 22, 2020 1:30 pm
- Благодарил (а): 6 раз
- Поблагодарили: 1 раз
Re: Как на сцене создать элемент bar
не совсем то - тут всякие спидометры, графики из эти самых баров. А мне нужен "показометр" типа как на этой картинке на емкостях
http://www.revolution.be/ETP-200/synop1.gif
http://www.revolution.be/ETP-200/synop1.gif
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
-
- Сообщения: 34
- Зарегистрирован: Ср июл 22, 2020 1:30 pm
- Благодарил (а): 6 раз
- Поблагодарили: 1 раз
Re: Как на сцене создать элемент bar
Не совсем то - нужен просто "прямоугольник" с изменяющимся столбиком заливки как на ёмкостях на картинке http://www.revolution.be/ETP-200/synop1.gifJilber писал(а): ↑Вт мар 28, 2023 1:17 pmМожно попробовать тут глянуть:
viewtopic.php?f=4&t=3735
https://www.highcharts.com/demo
Ну то бишь я нарисую (где нють перепишу) изображение бочки-септика и положу на нее этот прямоугольник с заливкой в зависимости от наполненности.
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...
-
- Сообщения: 1463
- Зарегистрирован: Вс янв 10, 2016 11:05 am
- Благодарил (а): 260 раз
- Поблагодарили: 454 раза
Re: Как на сцене создать элемент bar
Для этого дела вам вполне подойдет svg-разметка. Вот пример: viewtopic.php?f=4&t=2110&start=9
Однажды для решения такой же задачи я успешно переворачивал такой "столбик" в вертикальное положение. А высота "закраски" столбика, помню, успешно завязывалась на объект.свойство. Так что принципиально все работает.
Вот тот же "столбик", повернутый вертикально. Можете поиграться с цифрой "30".
Можно также развернуть прогресс бар вертикально:
Однажды для решения такой же задачи я успешно переворачивал такой "столбик" в вертикальное положение. А высота "закраски" столбика, помню, успешно завязывалась на объект.свойство. Так что принципиально все работает.
Вот тот же "столбик", повернутый вертикально. Можете поиграться с цифрой "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 раз.
-
- Сообщения: 107
- Зарегистрирован: Ср фев 13, 2019 9:50 pm
- Благодарил (а): 219 раз
- Поблагодарили: 19 раз
Re: Как на сцене создать элемент bar
А что за датчик? Можно поподробнее.Qdesnikmak писал(а): ↑Вт мар 28, 2023 7:39 amДоброго всем, камрады. Решил сделать себе показометр уровня в септике, но не нашел в Графиках элемента Bar - либо графики либо Gauge.
Хотелось бы нарисовать тупо колодец септика и поместить на него элемент Bar с процентом заполнения (по шкале 0-100%)
Много перекопал, перечитал, но ничего "из коробки" не нашел. Может кто сталкивался, как реализовать, где копать?
Raspberry pi 4
-
- Сообщения: 34
- Зарегистрирован: Ср июл 22, 2020 1:30 pm
- Благодарил (а): 6 раз
- Поблагодарили: 1 раз
Re: Как на сцене создать элемент bar
Датчика пока нет - придумал имитацию для ориентировки. С момента откачки начинает добавлять процент к уровню каждые сутки. Зная, сколько времени нужно для наполнения вычислил сколько нужно добавлять и решил попробовать.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 пока на стадии изучения...
-
- Сообщения: 34
- Зарегистрирован: Ср июл 22, 2020 1:30 pm
- Благодарил (а): 6 раз
- Поблагодарили: 1 раз
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>
Orange Pi Lite + Armbian + MJD Majordomo пока на стадии изучения...