Внешний вид интерфейса панели управления оператора.

Обсуждение статей, технологий домашней автоматизации, программных и аппаратных решений
Ответить
artem521
Сообщения: 80
Зарегистрирован: 19 окт 2017, 18:04

Внешний вид интерфейса панели управления оператора.

Сообщение artem521 » 01 сен 2019, 21:06

Всем доброго времени суток. Привожу в порядок внешний вид интерфейса умного дома с помощью сервера и собственно такой вопрос. Необходимо чтобы картинка была динамическая и менялась линейно допустим напряжению, в данном варианте емкость с водой. Меняется уровень содержимого - меняется напряжение ( с помощью какого датчика я это буду делать пожалуйста не спрашивайте, я привожу пример :) )Помогите пожалуйста мыслями.
Вложения
55.png
55.png (35.51 КБ) 360 просмотров

Ruslan
Сообщения: 595
Зарегистрирован: 06 янв 2014, 20:44

Re: Внешний вид интерфейса панели управления оператора.

Сообщение Ruslan » 01 сен 2019, 23:26

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>
Opera Снимок_2019-09-01_221109_127.0.0.1.png
Пример svg-графики
Opera Снимок_2019-09-01_221109_127.0.0.1.png (1.12 КБ) 339 просмотров

Ruslan
Сообщения: 595
Зарегистрирован: 06 янв 2014, 20:44

Re: Внешний вид интерфейса панели управления оператора.

Сообщение 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
Прогресс бар вертикально
Прогресс бар вертикально.png (200 байт) 229 просмотров

artem521
Сообщения: 80
Зарегистрирован: 19 окт 2017, 18:04

Re: Внешний вид интерфейса панели управления оператора.

Сообщение artem521 » 07 сен 2019, 11:01

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
Спасибо большое за мысль:))

Ответить