25.09.2016 13:06
Mikhus 17 8200 Источник
image

Приветствую! В сегодняшнем посте хочу рассказать вам об обновлении своей библиотеки измерительных приборов до версии 2 и обо всех тех изменениях, которые теперь доступны публике.


Как и раньше, библиотека OpenSource и распространяется по лицензии MIT, так что берите, используйте и, вообще, далайте что хотите без каких-либо ограничений.



Что нового?


  • Добавлен новый тип приборов — LinearGauge. Примеры. Данный вид поможет реализовать всевозможные термометры, индикаторы нагрузок и тому подобные вещи.
  • Полностью отрефакторен код и внесены необратимые изменения в API библиотеки. Если кто-то пользовался библиотекой ранее, не забудьте заглянуть в руководство по миграции.
  • Приборы теперь полноценные веб-компоненты.
  • Добавлена поддержка async-подгрузки кода библиотеки на страницу.
  • Теперь дистрибутив распространяется через NPM, тем не менее bower все еще поддерживается.
  • Улучшена документация.
  • Исправлены многочисленные ошибки и неточности в работе библиотеки.
  • Реализованы некоторые улучшения в работе, в частности те, которые просили пользователи. Например, RadialGauge теперь может анимировать или стрелку, или циферблат — на выбор. Это может быть удачным решением, например, при построении компасов.

В целом, библиотека получила большое, качественное обновление. Неизменной осталась лишь философия библиотеки — минимальный код, отсутствие каких-либо зависимостей. С этой точки зрения библиотека должа подойти тем, кто ищет минимальную кодовую базу в своих решениях. Например, это может быть актуальным для построения веб-интерфейсов к различным IoT девайсам. Кроме того, библиотека также доступна через CDN, поэтому при наличии постоянного доступа в интернет можно вообще отказаться от локального размещения ее кода.


Кроме того, библиотека поставляется минимальными пакетами. Например, если вам нужен только один вид приборов, можно устанавливать только его (или ссылаться только на него). Подробнее смотрите на странице загрузки библиотеки.


Ну, и конечно же, далее я дам несколько рецептов использования.


Как готовить?


В базовом варианте, достаточно лишь подключить библиотеку на страницу и в нужном месте вставить нужный компонент прибора:


<!doctype html>
<html>
<head>
  <title>Базовый пример использования</title>
  <!-- Подключаем библиотеку, делаем это асинхронно, чтобы не блокировать загрузку страницы -->
  <script async src="gauge.min.js"></script>
</head>
<body>
<h2>RadialGauge</h2>
<canvas data-type="radial-gauge"
              data-width="400"
              data-height="400"
></canvas>
<h2>LinearGauge</h2>
<canvas data-type="linear-gauge"
              data-width="120"
              data-height="400"
></canvas>
</body>
</html>

Приборы — это компоненты с обширным количеством опций по кастомизации. Достаточно лишь прописывать нужные атрибуты, чтобы получить тот внешний и функциональный вид прибора, который вам нужен. Все доступные опции по конфигурации вы сможете найти на этой странице.


Конечно же, при реальной разработке может возникнуть необходимость сборки всех скриптов на странице в один файл. Данная библиотека прекрасно работает с системами сборки, которые поддерживают CommonJS, поэтому данная задача не составит никакого труда. Просто ставьте приборы через NPM и используйте require:


$ npm install canvas-gauges

require('canvas-gauges');

Естественно, приборы спроектированы и предназначены для работы в браузерах. Вам также будет доступен способ инициализации приборов через скрипт, например:


require('canvas-gauges');

var gauge = new RadialGauge({
  renderTo: document.createElement('canvas'),
  width: 300,
  height: 300
}).draw();

document.body.appendChild(gauge);

gauge.value = 55.3;

gauge.update({
  width: 400,
  height: 400
});

// и так далее...

Canvas Gauges поддерживают TypeScript (через DefinitelyTyped), при этом не требуют каких-либо специфических действий при интеграции с какими-либо фреймворками, так как сами по себе являются полноценными веб-компонентами. Поэтому они легко дружат, например, с Angular и Angular2.


Если вы хотите использовать canvas-gauges с TypeScript, просто установите нужные тайпинги:


  • для TypeScript v < 2
    typings install --save --global --source=dt canvas-gauges
  • для TypeScript >= 2
    npm install @types/canvas-gauges

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


И загляните на страницу с примерами, чтобы получить общее представление о возможностях кастомизации приборов. Хотя возможностей, конечно же существенно больше, чем вы найдете в примерах, просто мне физически сложно продемонстрировать их все :)


Благодарности


Мне хотелось бы поблагодарить компанию Lohika за помощь при разработке этой библиотеки, а также SauceLabs за возможность безвозмездного тестирования, и, конечно же, замечательное сообщество контрибьюторов.


P.S. Если вам понравилась данная библиотека и вы хотите поблагодарить автора — просто поставьте звездочку на гитхабе, форкните репозиторий и расскажите о библиотеке своим друзьям.

Поделиться с друзьями
-->

Комментарии (17)


  1. tsmar
    25.09.2016 14:18
    #9827088
    +1

    Отличная работа, спасибо!


  1. doti
    25.09.2016 14:39
    #9827098
    +1

    Простите, если вопрос не в тему, а zabbix это можно прикрутить?


    1. Mikhus
      25.09.2016 18:12
      #9827242

      Поскольку zabbix имеет веб-интерфейс, не думаю, что это невозможно :)


      1. tot0ro
        26.09.2016 15:29
        #9828272

        к zabbix можно нужно только чуть чуть подпилить напильником.


  1. unixwz
    25.09.2016 18:10
    #9827240

    Очень интересный проект, обязательно возьму на заметку.


  1. ZaytsevArtem
    25.09.2016 21:39
    #9827398
    +2

    Первое, что бросилось в глаза — нельзя выделить и скопировать текстовые значения (впрочем, слово «canvas» уже намекает на это). На всякий случай зашёл на страницу «All configuration options», но поиск «copy» выдал 0. Правда для случаев быстрых изменений значений было бы более практичным копировать их одним быстрым действием (пока выделишь, пока нажмёшь Ctrl+C, а значение уже изменилось), что-нибудь типа отдельной кнопки. Не знаю, насколько это может быть востребовано. Это я так, фантазирую, самому мне это не нужно. А так, да красивые приборчики, плюсую в уме)


    1. Mikhus
      25.09.2016 21:42
      #9827404
      +1

      Прошу прощения, но, как вы сказали, как бы "«canvas» уже намекает на это" — это все-таки динамически создаваемая растровая графика (bitmap) а не текст. Возможно вы хотели бы SVG, но
      это таки canvas gauges. :)


      1. netgoblin
        25.09.2016 22:32
        #9827444

        ZaytsevArtem намекает на отсутствие функции Copy в классе Gauge, а реализовать его можно используя Clipboard API, например.


        1. Mikhus
          25.09.2016 22:53
          #9827460
          +4

          Функцию реализовать можно, но для чего? Приборы призваны отображать значения которые вы им даете. Зачем вам их копировать (если вы их и так знаете)? :)

          Кроме того, если даже такая функция с какой-то целью и понадобилась — должно ли это быть частью самих приборов? Ведь ничто не мешает это реализовать «сбоку», равно как и можно реализовать сохранение в картинку (снэпшот) и т.д.

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

          Например, пользователи обратились и просят добавить возможность анимировать не стрелку, а циферблат, т.к. они делают компас на приборной панели и это для них критично. И сделать это они ну никак не могут без изменения библиотеки. С другой стороны, раньше с библиотекой поставлялся цифровой шрифт, но пользователи жаловались, что это не вмещается в концепцию минималистичности кода, поэтому его теперь нет, но есть возможность прикручивать любой шрифт по желанию сбоку. Поэтому у меня вопрос — а нужно ли реализовывать копирование в самих приборах? Не теоретически «это бвыло бы круто», а практически — «действительно ли это нужно»?

          Ведь можно приделать стотыщпиццот функций, в том числе функию нанесения ответного ядерного удара Марса по Венере, но зачем?


  1. xenohunter
    26.09.2016 12:01
    #9827924

    Спасибо, очень здорово! Кстати, если много раз нажимать на Animate, рандомные анимации почти нейтрализуют друг друга, и стрелки едва дёргаются под напором противоположных по знаку чисел.


    1. Mikhus
      26.09.2016 12:05
      #9827926
      +1

      Это естественно. Там анимация просто для примера через setInterval, поэтому много раз нажали — много таймеров запустили :) Здесь цель была просто показать что анимация есть и работает…


  1. golf2109
    27.09.2016 17:42
    #9830020

    а что-то похожее на построителя графиков или графического логгера планируется?


    1. Mikhus
      27.09.2016 17:46
      #9830026

      Опишите подробнее, что имеете ввиду, все что попадает под категорию «gauges» готов рассматривать как потенциальную идею для расширения библиотеки…


      1. golf2109
        27.09.2016 17:55
        #9830044
        +1

        например прибор, который показывает изменение температуры в реальном масштабе времени
        например подобно как в LABViev элемент индикации waveform chart


        1. Mikhus
          27.09.2016 18:03
          #9830068

          Спасибо, интересно, возьму себе «на карандаш»… Как минимум в планах были knob-buttons, arc-gauges. Подобные чарты тоже выглядят интересно


    1. dimao79
      28.09.2016 10:50
      #9830826

      Highcharts


  1. Bluefox
    28.09.2016 19:16
    #9831892
    +1

    Я подключил библиотеку в свой проект. :)
    Поиграться с настройками можно здесь:
    https://iobroker.net:8080/vis/index.html?CanvasGauges#Gauges

    Просто посмотреть здесь:
    http://iobroker.net:8082/vis/edit.html?CanvasGauges#Gauges