Skip to content

Instantly share code, notes, and snippets.

@corburn
Last active August 29, 2015 14:20
Show Gist options
  • Save corburn/41d5e3a4e32b9287574e to your computer and use it in GitHub Desktop.
Save corburn/41d5e3a4e32b9287574e to your computer and use it in GitHub Desktop.
AngularJs directive for https://code.google.com/p/jsgauge/
/**
* @ngdoc directive
* @name ioBridgeDial
* @restrict E
*
* @description
*
* @element io-bridge-dial
* @param {expression} label The name of the device being monitored will be displayed on the dial.
* @param {expression} value Current dial value.
* @param {expression} min Minimum value of the band representing operating range.
* @param {expression} max Maximum value of the band representing operating range.
*
* @example
* <io-bridge-dial label="Auburn" value="72" min="70" max="73"></io-bridge-dial>
*/
.directive('ioBridgeDial', function ($log) {
return {
restrict: 'E',
scope: {
label: '=',
value: '=',
min: '=',
max: '='
},
template: '<canvas width="100%" height="100%""></canvas>',
link: function (scope, element, attributes, controller, transcludeFn) {
function toString() {
return 'ioBridgeDial(label=' + scope.label + ', value=' + scope.value + ', min=' + scope.min + ', max=' + scope.max + ')';
}
var options = {
value: Number(scope.value) || 0,
label: scope.label || '',
unitsLabel: 'F',
min: 20,
max: 80,
majorTicks: 4,
minorTicks: 3,
colorOfCenterCircleFill: 'rgba(154, 204, 83, 1)',
colorOfCenterCircleStroke: 'rgba(47, 67, 128, 1)',
colorOfText: 'rgba(47, 67, 128, 1)',
bands: [
// Leaf Green
{ color: '#55AE3A', from: Number(scope.min), to: Number(scope.max) }
]
};
var ioGauge = new Gauge(element.find('canvas')[0], options);
scope.$watch('value', function(newValue, oldValue) {
ioGauge.setValue(Number(newValue));
});
scope.$watchGroup(['min', 'max'], function(newValues, oldValues) {
// Leaf Green
options.bands = [{ color: '#55AE3A', from: Number(newValues[0]), to: Number(newValues[1]) }];
ioGauge.setOptions(options);
ioGauge.draw();
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment