angular-7segments

0.2.0 • Public • Published

angular-7segments

Build Status Coverage Status Npm Version Npm License

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.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]

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>

LICENSE

MIT

Package Sidebar

Install

npm i angular-7segments

Weekly Downloads

3

Version

0.2.0

License

MIT

Last publish

Collaborators

  • wooooo