angular-7segments
v0.2.0
Published
Angular plugin for displaying 7segments
Downloads
28
Maintainers
woooooReadme
angular-7segments
Angular plugin for displaying 7segments
Usage
npm
npm install angular-7segmentsbower
bower install angular-7segments --savebrowser
<!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.js
app.controller('basicCtrl', function($scope){
$scope.value = '0123456789';
});<!--index.html-->
<div data-ng-controller="basicCtrl">
<div seg-group data-ng-model="value"> </div>
<!-- [0][1][2][3][4][5][6][7][8][9] -->
</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.
- eg) 1... --> [1.][.][.]
- Dot's left character is a space.
- eg) 12 .45 --> [1][2][.][4][5]
- Dot is the first character.
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>
<!-- [_][-][S][E][G.][0][1][2][3][ ][ ][ ][ ][ ][ ]-->
</div>Custom style
app.controlller('styleCtrl', function($scope){
$scope.value = '12345678';
$scope.digitOptions = {
onClass: 'custom-on-class', // class name for light-on part
digitClass: 'custom-digit-class' // class name for entire digit
};
);.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>
<!-- [1][2][3][4][5]6][7][8] -->
<!-- background color is white and light-on part color is black -->
</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>
<!-- [r][o][b] -->
<!-- They are not provided basically -->
</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>
<!-- [0][1][2][3] -->
<!-- It has right angle at middle part -->
</div>