Canvas Gauges 2.025.09.2016 13:48

image

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


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



Что нового?


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

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


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


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


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


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





  Базовый пример использования
  
  



RadialGauge



LinearGauge

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


Конечно же, при реальной разработке может возникнуть необходимость сборки всех скриптов на странице в один файл. Данная библиотека прекрасно работает с системами сборки, которые поддерживают 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. Если вам понравилась данная библиотека и вы хотите поблагодарить автора — просто поставьте звездочку на гитхабе, форкните репозиторий и расскажите о библиотеке своим друзьям.

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

© Habrahabr.ru