angular-7segments
Angular plugin for displaying 7segments
Usage
npm
npm install angular-7segments
bower
bower install angular-7segments --save
browser
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
...
</head>
<body>
...
<script src="path/to/bower_components/angular/angular.js"></script>
<script src="path/to/bower_components/angular-7segments/angular-7segments.js"></script>
<script>
var app = angular.module('demoApp', ['wo.7segments']);
</script>
</body>
</html>
Example
Live example
Basic
app.controller('basicCtrl', function($scope){
$scope.value = '0123456789';
});
<div data-ng-controller="basicCtrl">
<div seg-group data-ng-model="value"> </div>
</div>
Dot
-
Dot has some exceptions because try to reflect real seven digits.
-
Basically, dot doesn't reside in one distinct digit.
- eg) 12.34 --> [1][2.][3][4]
-
However, under the below conditions, it holds one digit.
-
Dot is the first character.
- eg) .1234 --> [.][1][2][3][4]
-
Dot's left character is a dot.
-
Dot's left character is a space.
- eg) 12 .45 --> [1][2][.][4][5]
Supported characters
- number
- alphabet: 'SEG' ( It has a relation with module name :) )
- special character: hyphen(-), lodash(_), dot(.), space( )
Options
app.controller('optCtrl', function($scope){
$scope.value = '_-SEG.0123';
$scope.options = {
size: 15,
align: 'left',
watch: true,
};
<div data-ng-controller="basicCtrl">
<div seg-group seg-options="options" data-ng-model="value"> </div>
</div>
Custom style
app.controlller('styleCtrl', function($scope){
$scope.value = '12345678';
$scope.digitOptions = {
onClass: 'custom-on-class',
digitClass: 'custom-digit-class'
};
);
.custom-on-class {
fill: black;
}
.custom-digit-class {
fill: #ddd;
background-color: white;
}
<div data-ng-controller="basicCtrl">
<div seg-group seg-options="options" data-ng-model="value"
seg-digit-options="digitOptions"> </div>
</div>
Custom pattern
Allow to add custom segment pattern by inserting it into segMap
app.controller('patternCtrl', function($scope, segment){
var copy = angular.copy(segment.defaults.group.map);
copy['r'] = segment.arrToSegNum([0, 0, 0, 0, 1, 0, 1]);
copy['o'] = segment.arrToSegNum([0, 0, 1, 1, 1, 0, 1]);
copy['b'] = segment.arrToSegNum([0, 0, 1 ,1 ,1, 1, 1]);
$scope.value = 'bro';
$scope.options = {
map: copy
}
});
<div data-ng-controller="patternCtrl">
<div seg-group data-ng-model="value" seg-options="options"></div>
</div>
Custom shape
Allow to modify segment part coordinates by updating segPoints
app.controller('shapeCtrl', function($scope, segment) {
var copy = angular.copy(segment.defaults.digit.points);
copy[1] = "38 11, 43 6, 48 11, 48 39, 43 39, 38 34";
copy[2] = "38 46, 43 41, 48 41, 48 69, 43 74, 38 69";
copy[4] = "0 41, 5 41, 10 46, 10 69, 5 74, 0 69";
copy[5] = "0 11, 5 6, 10 11, 10 34, 5 39, 0 39";
$scope.value = '0123';
$scope.digitOptions = {
points: copy
};
});
<div data-ng-controller="shapeCtrl">
<div seg-group data-ng-model="value" seg-digit-options="digitOptions"></div>
</div>
LICENSE
MIT