Страница 1 из 1
Внешний вид интерфейса панели управления оператора.
Добавлено: 01 сен 2019, 21:06
artem521
Всем доброго времени суток. Привожу в порядок внешний вид интерфейса умного дома с помощью сервера и собственно такой вопрос. Необходимо чтобы картинка была динамическая и менялась линейно допустим напряжению, в данном варианте емкость с водой. Меняется уровень содержимого - меняется напряжение ( с помощью какого датчика я это буду делать пожалуйста не спрашивайте, я привожу пример
)Помогите пожалуйста мыслями.
Re: Внешний вид интерфейса панели управления оператора.
Добавлено: 01 сен 2019, 23:26
Ruslan
artem521 писал(а): ↑01 сен 2019, 21:06
...Помогите пожалуйста мыслями.
Первая мысль, посмотреть в сторону 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>
- Пример svg-графики
- Opera Снимок_2019-09-01_221109_127.0.0.1.png (1.12 КБ) 816 просмотров
Re: Внешний вид интерфейса панели управления оператора.
Добавлено: 06 сен 2019, 21:45
Ruslan
Кстати, еще мысль. Можно развернуть прогресс бар вертикально:
Код: Выделить всё
<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>
- Прогресс бар вертикально
- Прогресс бар вертикально.png (200 байт) 706 просмотров
Re: Внешний вид интерфейса панели управления оператора.
Добавлено: 07 сен 2019, 11:01
artem521
Ruslan писал(а): ↑06 сен 2019, 21:45
Кстати, еще мысль. Можно развернуть прогресс бар вертикально:
Код: Выделить всё
<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>
Прогресс бар вертикально.png
Спасибо большое за мысль:))