Ng-ui-knob NPM

ng-knob

Angular.js directive to Knob component powered by d3.js (without jQuery)

screenshot

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 --save

Usage

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 install and bower install
Run: grunt
Make your changes
Submit pull request

License

Licensed under the MIT license

angular d3 control ui gauge knob

@everything-registry/sub-chunk-2276 @infinitebrahmanuniverse/nolb-ng-u

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago