ng-knob
Angular.js directive to Knob component powered by d3.js (without jQuery)
Features
- very easy to implement
- without jQuery dependencies
- powered by d3.js
- 2-way data binding
- configurable minimum, maximum values and step
- animated
- shows previous value
- tiny - 11.5kb minified
- great ability to configure
- configurable scale
- touch, click and drag events implemented
Dependencies
- AngularJS (tested with 1.4.x although it probably works with older versions)
- D3.js (tested with 3.5.x although it probably works with older versions)
Browser Support
- Chrome, Firefox, Safari, Opera, IE9+
Get started
Installation
You can also use bower to install the component:
$ bower install ng-knob --saveUsage
HTML:
<body ng-app="KnobDemoApp">
<div ng-controller="knobCtrl">
<ui-knob value="value" options="options"></ui-knob>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>Angular.js:
var app = angular.module('KnobDemoApp', ['ui.knob'])
app.controller('knobCtrl', function ($scope) {
$scope.value = 65;
$scope.options = {
size: 300
//other options
};
});Options
You can pass these options to the initialize function to set a custom look and feel for the plugin.
| Property | Type | Default | Description |
|---|---|---|---|
| skin | object | { type: 'simple', width: 10, color: 'rgba(255,0,0,.5)', spaceWidth: 5 } | Type: simple or tron |
| animate | object | { enabled: true, duration: 1000, ease: 'bounce' } | Duration in milliseconds, Ease: linear, bounce, sin, cubic, quad, exp, circle |
| size | integer | 200 | Size of knob in px. It will always be a square |
| startAngle | integer | 0 | Start angle in degrees |
| endAngle | integer | 360 | End angle in degrees |
| unit | string | '' | Unit values |
| displayInput | boolean | true | Display input value (true or false) |
| inputFormatter | function | function(value){ return value; } | Formats the input value before appending the unit and displaying it to the DOM |
| readOnly | boolean | false | Disabled change value (true or false) |
| trackWidth | integer | 50 | Width track bar in px |
| barWidth | integer | 50 | Width bar value in px |
| trackColor | string | 'rgba(0,0,0,0)' | Color track bar |
| barColor | string | 'rgba(255,0,0,.5)' | Color bar value |
| prevBarColor | string | 'rgba(0,0,0,0)' | Color bar previous value |
| textColor | string | '#222' | Text color |
| barCap | integer | 0 | Defines how the ending of the bar line looks like in radius |
| trackCap | integer | 0 | Defines how the ending of the track line looks like in radius |
| fontSize | string | 'auto' | Font size in px. auto: automatic change |
| subText | object | { enabled: false, text: '', color: 'gray', font: 'auto' } | Subtext options |
| bgColor | string | '' | Background color |
| bgFull | string | false | Paints the background of the whole circle ignoring startAngle and endAngle |
| scale | object | { enabled: false, type: 'lines', color: 'gray', width: 4, quantity: 20, height: 10, spaceWidth: 15 } | Scale options, type: lines or dots |
| step | integer | 1 | Step change, min 0.1 |
| displayPrevious | boolean | false | Display previous value (true or false) |
| min | integer | 0 | Min value (start value), only integer |
| max | integer | 100 | Max value (end value), only integer |
| dynamicOptions | boolean | false | Dynamic change options (true or false) |
Contributing
- Fork the repo
- Install dependencies:
npm installandbower install - Run:
grunt - Make your changes
- Submit pull request
License
Licensed under the MIT license