Angular plugin for displaying 7segments
npm install angular-7segmentsAngular plugin for displaying 7segments
npm install angular-7segments
bower
bower install angular-7segments --save
browser
html
...
...
`Example
Live example$3
javascript
//app.js
app.controller('basicCtrl', function($scope){
$scope.value = '0123456789';
});
`html
`$3
- 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]
$3
- number
- alphabet: 'SEG' ( It has a relation with module name :) )
- special character: hyphen(-), lodash(_), dot(.), space( )
$3
javascript
app.controller('optCtrl', function($scope){
$scope.value = '_-SEG.0123';
$scope.options = {
size: 15,
align: 'left',
watch: true,
};
`html
`$3
javascript
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
};
);
`css
.custom-on-class {
fill: black;
}.custom-digit-class {
fill: #ddd;
background-color: white;
}
`html
seg-digit-options="digitOptions">
$3
Allow to add custom segment pattern by inserting it into segMap
javascript
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
}
});
`html
`
$3
Allow to modify segment part coordinates by updating segPoints
javascript
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
};
});
`html
``