ご挨拶！ 本日の投稿では、測定器のライブラリをバージョン2に更新することと、現在公開されているすべての変更についてお伝えしたいと思います。
前と同じように、OpenSourceライブラリはMITライセンスの下で配布されているので、それを取得して使用し、通常は制限なしで必要なものを提供します。
新機能
- 新しいタイプの機器が追加されました-LinearGauge。 例 このタイプは、あらゆる種類の温度計、負荷インジケータなどの実装に役立ちます。
- コードは完全にリファクタリングされ、ライブラリAPIに不可逆的な変更が加えられます。 誰かが以前にライブラリを使用したことがある場合は、必ず移行ガイドを確認してください 。
- インストゥルメントは完全なWebコンポーネントになりました。
- ページごとの非同期ロードライブラリコードのサポートが追加されました。
- 配布は現在NPMを介して配布されていますが、bowerは引き続きサポートされています。
- ドキュメントの改善。
- ライブラリの多数のエラーと不正確さを修正しました。
- いくつかの改善が実装されました。特に、ユーザーからのリクエストがありました。 たとえば、RadialGaugeは、矢印またはダイヤルをアニメーション化して、選択できるようになりました。 これは、 コンパスを作成する場合などに適したソリューションです。
一般に、ライブラリは大規模で高品質の更新を受け取りました。 ライブラリの哲学のみが変更されずに残っています-最小限のコード、依存関係の欠如。 この観点から、ライブラリは、ソリューションで最小限のコードベースを探している人に適している必要があります。 たとえば、これはさまざまなIoTデバイスへのWebインターフェイスの構築に関連する場合があります。 さらに、ライブラリはCDNからも利用できるため、インターネットに常時アクセスできる場合は、コードのローカル配置を完全に拒否できます。
さらに、ライブラリには最小限のパッケージが付属しています。 たとえば、1種類のデバイスのみが必要な場合は、そのデバイスのみをインストールできます（またはそれのみを参照できます）。 詳細については、ライブラリのダウンロードページを参照してください。
まあ、そしてもちろん、私は後で使用するためのいくつかのレシピを提供します。
料理の仕方は？
基本バージョンでは、ライブラリをページに接続し、デバイスの目的のコンポーネントを適切な場所に挿入するだけです。
<!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>
デバイスは、多数のカスタマイズオプションを備えたコンポーネントです。 必要なデバイスの外観と機能的な外観を得るために必要な属性を規定するだけで十分です。 このページで利用可能なすべての構成オプションを見つけることができます。
もちろん、実際の開発では、ページ上のすべてのスクリプトを1つのファイルにまとめる必要があります。 このライブラリは、CommonJSをサポートするビルドシステムで非常に機能するため、このタスクは難しくありません。 NPMを介してデバイスをインストールするだけで、次のものが必要です。
$ 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 Gaugeは（DefinitelyTypedを介して）TypeScriptをサポートし、フレームワーク自体が本格的なWebコンポーネントであるため、フレームワークと統合するときに特定のアクションを必要としません。 したがって、たとえば、AngularとAngular2とは簡単に友達になります。
TypeScriptでキャンバスゲージを使用する場合は、必要なチップを設定するだけです。
- TypeScript v <2の場合
typings install --save --global --source=dt canvas-gauges
- TypeScript> = 2の場合
npm install @types/canvas-gauges
また、デバイスの特定の使用または特定のカスタマイズに関するヒントを提供する高度な使用に関するヒントについては、ページを参照することを忘れないでください。
また、 例をカスタマイズしたページを見て、デバイスをカスタマイズする可能性についての一般的な考えを理解してください。 もちろん、可能性は例で見つけるよりもはるかに大きいですが、私がそれらすべてを実証するのは物理的に難しいだけです:)
謝辞
このライブラリの開発に協力してくれたLohikaと、無料のテストの可能性についてSauceLabsに感謝 します。もちろん、 貢献者の素晴らしいコミュニティにも感謝します。
PSこのライブラリが気に入っていて、作者に感謝したい場合は、アスタリスクをgithubに置き、リポジトリをフォークして、友人にライブラリについて知らせてください。