Стрелочные индикаторы (transform+rotate)

[Lamantur]

Добрый день, коллеги!
Сегодня мы рассмотрим такую тему как трансформации объектов на странице. 
Вращение объекта на странице — без преувеличения одна из самых полезных функций. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки приложения.
Вращение объекта достигается путём использования функции rotate() свойства transform. В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:
deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
rad — Радианы. Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.
Если пользоваться CSS, то функция выглядит следующим образом:

 transform: rotate(15deg); // поворот на 15 градусов по часовой стрелке
 transform: translate(-50%, -50%); // перемещение на 50% вверх и 50% влево

Зная это мы можем написать функцию, которая будет менять угол и положение объекта в зависимости от внешних параметров. 
Для дальнейших экспериментов поставим задачу - оживить индикатор от 0 до 100%, в качестве сигнала возьмем загрузку процессора и выведем информацию в виде красивого индикатора, который соберем сами из нескольких элементов.

Наш индикатор будет состоять из трех элементов: фон, стрелка и цифровой индикатор для большей наглядности.
Поскольку стрелка это отдельный элемент, то нам понадобится индикатор без стрелки, либо стрелку нужно удалить самостоятельно


   

Подойдет абсолютно любой фон в зависимости от величин, которые мы будем демонстрировать. Проценты будут измеряться в диапазоне от 0 до 100, поэтому я выбрал такой же индикатор.


   

Следующий элемент - стрелочка. Его я нарисовал самостоятельно, если будете выбирать ее в интернете - важно, чтобы у нее не было фона. Еще фон можно удалить самостоятельно. Подбирать размеры и расположение нет необходимости, ось вращения можно корректировать в редакторе.

Когда два элемента подготовлены - можно переходить в редактор динамических приложений.

Создаем контейнер, назначаем ему фон - сам индикатор. Настраиваем, чтобы фон был посередине и не повторялся.
Внутри этого контейнера будет еще два: первый - это стрелочка, ему также настраиваем фон, второй контейнер - цифровая индикация.

Я настроил сигнал на странице при помощи стандартного интерфейса, сигнал назвал "Processor". Теперь я могу вызвать его из любого места страницы. 
Начнем с простого отображения сигнала, заодно проверим, что все правильно.
В контейнере, предназначенном для цифровой индикации создаем событие "Проигрывание в цикле".

Код:

//page id:C18FB6C5-962B-4EB6-9F78-716E2EABD2E3
//element id:0DE1C71A-E5AC-4698-AAE5-97AEC1E8E8BA
//LOOP_PLAY
function loop_0DE1C71A_E5A(){
   try {
    let elem = document.getElementById('0DE1C71A-E5AC-4698-AAE5-97AEC1E8E8BA');
    let value = baseSdkUtils.data['Processor'].value;
    elem.innerHTML = value;
   } catch ( e ) {
   }
   setTimeout(loop_0DE1C71A_E5A, 1000);
}
loop_0DE1C71A_E5A();

Очень важный момент - у вас element id будет другим, если вы создаете приложение самостоятельно.
Теперь запускаем экземпляр приложения и видим значение сигнала. 
Настало время заставить стрелку двигаться вместе со значением.
В поле html вставляем следующий код:

Код:

<div class='pivont-point'>&bull;</div>
<style>
.pivont-point {
  position: absolute;
  top: 50%;
  left: 79%;
  color: #363636;
  font-size: 30px;
  transform: translate(-50%, -50%);
}

</style>

Этот элемент мы создаем для того, чтобы "откалибровать нашу стрелку. 
Мы сразу увидим, что на нашей стрелке появилась точка - это и есть ось вращения. Изменяя элементы top и left - переместим точку в нужное нам место.
В данном случае  transform: translate(-50%, -50%) - переворачивает систему координат для того чтобы как раз параметры  top и left соответствовали оси вращения, которую мы уже будем задавать в событии.
Создаем событие "Проигрывание в цикле":

Код:

//page id:C18FB6C5-962B-4EB6-9F78-716E2EABD2E3
//element id:681DB916-6405-408C-8480-C5AEB30EF032
//LOOP_PLAY
function loop_681DB916_640(){
   try {
    let elem = document.getElementById('681DB916-6405-408C-8480-C5AEB30EF032');
    let value = (baseSdkUtils.data['Processor'].value);
   
    elem.style.transform = 'rotate(' + (16 + (value * 1.48)) + 'deg)';
    elem.style.transformOrigin = '79% 50%';
   } catch ( e ) {
   }
   setTimeout(loop_681DB916_640, 1000);
}
loop_681DB916_640();

elem.style.transformOrigin = '79% 50%' - эти параметры совпадают с ранее выбранными left И top
Теперь рассмотрим предыдущую строчку:
elem.style.transform = 'rotate(' + (16 + (value * 1.48)) + 'deg)';
Мы используем функцию rotate, в качестве единиц измерения я выбрал градусы, а значит полный круг = 360.
Путем подбора вычисляем, что стрелка показывает на 0 при значении 16 градусов. На 100 она показывает при значении 164 градуса. Таким образом вся шкала составляет 164 - 16 = 148. Делим на 100%  и получаем  (16 + (value * 1.48)) - теперь стрелка показывает на нужный параметр.
Если вы делаете индикатор с другим фоном или стрелка у вас находится в другом месте (выше или ниже), то числа у вас будут другие.
Шаблон приложения: 
  export (14).zip (Размер: 362.35 KB / Загрузок: 4)
На последок небольшой бонус: 
В скрипт, который мы создали для анимации стрелки добавим еще одну команду:
elem.style.transition = '1s';
И тогда изменение значения сигнала будет сопровождаться плавным переходом к следующему значению.
У свойства  transition есть еще много атрибутов, позволяющих делать нелинейные анимации или более сложные.
Спасибо за внимание.

Hello World!:

- Сообщений не найдено.