Внешний вид интерфейса панели управления оператора.
Внешний вид интерфейса панели управления оператора.
Всем доброго времени суток. Привожу в порядок внешний вид интерфейса умного дома с помощью сервера и собственно такой вопрос. Необходимо чтобы картинка была динамическая и менялась линейно допустим напряжению, в данном варианте емкость с водой. Меняется уровень содержимого - меняется напряжение ( с помощью какого датчика я это буду делать пожалуйста не спрашивайте, я привожу пример )Помогите пожалуйста мыслями.
- Вложения
-
- 55.png (35.51 КБ) 844 просмотра
Re: Внешний вид интерфейса панели управления оператора.
Первая мысль, посмотреть в сторону svg (https://mjdm.ru/forum/viewtopic.php?f=4&t=2110).
Я, конечно, "не шарю", но если поиграться с цифрой "30", эффект "налицо". Во всяком случае, в пределах двумерной графики. Осталось только передать туда (offset="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>
Re: Внешний вид интерфейса панели управления оператора.
Кстати, еще мысль. Можно развернуть прогресс бар вертикально:
Код: Выделить всё
<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>
Re: Внешний вид интерфейса панели управления оператора.
Спасибо большое за мысль:))Ruslan писал(а): ↑06 сен 2019, 21:45Кстати, еще мысль. Можно развернуть прогресс бар вертикально:Прогресс бар вертикально.pngКод: Выделить всё
<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>