Гаджет JSMeter - стрелочный измерительный прибор


Оглавление



Введение


Гаджет JSMeter отображает на WEB-странице стрелочный измерительный прибор. Для отрисовки измерителя используется JavaScript и HTML5 элемент <CANVAS>. Гаджет допускает адаптацию диапазона измерения и внешнего вида под Ваш вкус и требования путем передачи различных опций в конструктор JavaScript компонента и использования CSS оформления. Различные варианты использования и оформления гаджета можно посмотреть на примерах ниже.

Для загрузки минифицированного JavaScript файла гаджета JSMeter перейдите по ссылке jsmeter-1.1.2.min.js
Для загрузки исходного JavaScript файла гаджета JSMeter перейдите по ссылке jsmeter-1.1.2.src.js


Демонстрация


Для просмотра/сокрытия исходного HTML, CSS и JavaScript кода, воспользуйтесь кнопкой Показать/Скрыть код.
Для просмотра результата работы кода, воспользуйтесь кнопкой Показать результат.


Минимализм


В этом примере показан минимальный объем кода, необходимый для отображения простейшего измерительного прибора.

HTML

CSS

JavaScript

В начало страницы

Шкалы


В этом примере показано, как передавая различные параметры в конструктор можно управлять отображением шкалы измерительного прибора.

HTML

CSS

JavaScript

В начало страницы

Стрелка


В этом примере показано, как передавая различные параметры в конструктор можно управлять отображением стрелки измерительного прибора.

HTML

CSS

JavaScript

В начало страницы

Обрамление CSS


В этом примере показано, как с помощью CSS обрамления придать гаджету отдаленное сходство с реальными измерительными приборами.

HTML

CSS

JavaScript

В начало страницы

Динамика


В этом примере показано, как с помощью гаджета отобразить динамически изменяющееся значение параметра.

HTML

CSS

JavaScript

В начало страницы

Описание API


Данное описание актуально для текущей версии 1.1.2 JavaScript компонента.


Пространство имен


Для уменьшения вероятности конфликта имен с другими JavaScript библиотеками, все компоненты проекта JSGadget входят в единое пространство имен JSGadget.

В начало страницы

Конструктор JSGadget.Meter()


Вызов: var meter = new JSGadget.Meter(owner, options, val);

meter - переменная, которой присваивается созданный объект.

owner - обязательный параметр, представляющий собой родительский блочный элемент HTML страницы, обычно <div>. Родитель может передаваться как в виде объекта jQuery, так и в виде строки, понятной библиотеке jQuery.

options - необязательный параметр, представляющий собой объект, определяющий различные опции. Обект options должен содержать только те поля, значения которых отличаются от значений по умолчанию. Структура объекта options и значения полей по умолчанию:

{
  title: "", //надпись посередине шкалы
  gap: 14, //зазор вокруг шкалы
  angle: 120, //угол отклонения стрелки
  min: 0, //нижняя граница диапазона измерения
  max: 100, //верхняя граница диапазона измерения
  scale: { //шкала
    c: "black", //цвет
    w: 2, //толщина
    lm: { //большие деления
      s: 20, //шаг
      c: "black", //цвет
      w: 2, //толщина
      l: 3, //длина
      f: 8, //размер шрифта
      fc: "black" //цвет шрифта
    },
    sm: { //маленькие деления
      s: 10, //шаг
      c: "black", //цвет
      w: 1, //толщина
      l: 2 //длина
    }
  },
  hand: { //стрелка
    c: "red", //цвет
    w: 1, //толщина
    l: 33, //длина
    l0: 0, //длина обратного конца
    cr: 3, //радиус центрального круга
    f: "l" //форма: l-линия, t-треугольник
  },
  font: { //шрифт надписи посередине шкалы
    size: 12, //размер в px, опционально начертание (напр. "bold 16")
    family: "sans-serif", //семейство
    color: "black" //цвет
  }
};
Все размеры, за исключением размера шрифта надписи, задаются в процентах от ширины родительского элемента.

val - необязательный параметр, представляющий собой начальное отображаемое значение (по умолчанию - 0). Если данное значение выходит за границы диапазона, то утанавливается значение, равное ближайшей границе. Если данный параметр используется, то параметр options тоже должен присутствовать, хотя бы в виде пустого объекта {}.

В начало страницы

Функция resize()


Данная функция должна вызываться после изменения размеров родительского элемента.

Вызов: meter.resize();

meter - переменная, которой был присвоен объект, созданный при вызове конструктора.

В начало страницы

Функция setVal()


Данная функция вызывается для установки отображаемого значения.

Вызов: meter.setVal(val);

meter - переменная, которой был присвоен объект, созданный при вызове конструктора.

val - новое отображаемое значение. Если данное значение выходит за границы диапазона, то утанавливается значение, равное ближайшей границе.

В начало страницы

История версий


1.1.2
Исправлена ошибка некорретной отрисовки шкалы при ненулевой нижней границе диапазона.

1.1.1
Первый релиз JavaScript компонента JSMeter.

В начало страницы
Демонстрация