Update exmamples for new features.

gaaon · Dec 15, 2015 · fde6afa · fde6afa
1 parent aae2dd0
commit fde6afa
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 49 deletions.
diff --git a/example/index.html b/example/index.html
@@ -33,10 +33,15 @@ <h1 class="display-3" data-ng-init="title = '7SEG';">
 
         <div class="main-wrapper container bg-white">
             <br><br>
+
             <div card card-title="Basic Example" card-name="first" card-ctrl="firstEgCtrl"></div>
 
             <br>
 
+            <div card card-title="Time Example" card-name="time" card-ctrl="timeEgCtrl"></div>
+
+            <br> 
+
             <div card card-title="Dots example" card-name="second" 
                 card-ctrl="secondEgCtrl"></div>
 
@@ -45,8 +50,21 @@ <h1 class="display-3" data-ng-init="title = '7SEG';">
             <div card card-title="Options example" card-name="third"
                 card-ctrl="thirdEgCtrl"></div>
 
+            <br>
+
             <div card card-title="Custom style" card-name="fourth"
                 card-ctrl="fourthEgCtrl"></div>
+
+            <br>
+
+            <div card card-title="Custom pattern" card-name="fifth"
+                card-ctrl="fifthEgCtrl"></div>
+
+            <br>
+
+            <div card card-title="Custom shape" card-name="sixth"
+                card-ctrl="sixthEgCtrl"></div>
+
             <br><br>
         </div>
 

diff --git a/example/partials/fifthEg.html b/example/partials/fifthEg.html
@@ -0,0 +1 @@
+<div seg-group data-ng-model="value" seg-options="options"></div>
diff --git a/example/partials/sixthEg.html b/example/partials/sixthEg.html
@@ -0,0 +1 @@
+<div seg-group data-ng-model="value" seg-digit-options="digitOptions"></div>
diff --git a/example/partials/timeEg.html b/example/partials/timeEg.html
@@ -0,0 +1 @@
+<div seg-group data-ng-model="value"></div>
diff --git a/example/scripts/angular-7segments.js b/example/scripts/angular-7segments.js
@@ -150,6 +150,29 @@ function minErr(module, ErrorConstructor) {
 }
 
 
+/**
+ * https://github.com/tadeuszwojcik/angular-once
+ * Modify some codes
+ */
+
+function once() {
+    return function (scope, element, attrs) {
+        console.log(attrs);
+        angular.forEach(attrs, function (attr, attrName) {
+
+            if (!/^onceAttr[A-Z]/.test(attrName)) return;
+
+            var dashedName = attrName.replace(/[A-Z]/g, function (match) { return '-' + match.toLowerCase(); });
+
+            var name = dashedName.substr(10);
+
+            element.attr(name, attr);
+
+        });
+    };
+}
+
+
 /**
  * @ngdoc directive
  * 
@@ -158,7 +181,7 @@ function minErr(module, ErrorConstructor) {
  * 
  */
 
-function segDigitDirective(segment, segPoints){
+function segDigitDirective(segment){
     var directiveDefinitionObject = {
         strict: 'E',
         require: '^ngModel',
@@ -168,8 +191,9 @@ function segDigitDirective(segment, segPoints){
         },
         templateUrl: 'digit.html',
         link: function(scope, el, attr, ngModelCtrl) {
+
             scope.opt = angular.extend({}, segment.defaults.digit, scope.segDigitOptions);
-            scope.points = segPoints;
+            scope.points = scope.opt.points;
 
             el.addClass('seven-seg-digit-wrapper');
             el.css('width', scope.opt.width+'px');
@@ -179,7 +203,7 @@ function segDigitDirective(segment, segPoints){
 
     return directiveDefinitionObject;
 }
-segDigitDirective.$inject = ["segment", "segPoints"];
+segDigitDirective.$inject = ["segment"];
 
 
 /**
@@ -192,7 +216,7 @@ segDigitDirective.$inject = ["segment", "segPoints"];
 
 var segGroupMinErr = minErr('segGroup');
 
-function segDigitGroupDirective(segment){
+function segGroupDirective(segment){
     var directiveDefinitionObject = {
         strict: 'E',
         require: 'ngModel',
@@ -234,7 +258,7 @@ function segDigitGroupDirective(segment){
 
     return directiveDefinitionObject;
 }
-segDigitGroupDirective.$inject = ["segment"];
+segGroupDirective.$inject = ["segment"];
 
 
 function bitAnd(){
@@ -251,58 +275,58 @@ function bitAndWithBitwise() {
 }
 
 
-var segMap = {
-    '1': 6,
-    '2': 91,
-    '3': 79,
-    '4': 102,
-    '5': 109,
-    '6': 125,
-    '7': 39,
-    '8': 127,
-    '9': 111,
-    '0': 63,
-    '-': 64,
-    '_': 8,
-    '.': 128,
-    ' ': 0,
-    'S': 109,
-    'E': 121,
-    'G': 61
-}; 
-
-
-var segPoints = [
-    "11 0, 37 0, 42 5, 37 10, 11 10, 6 5",      //1
-    "38 11, 43 6, 48 11, 48 34, 43 39, 38 34",  //2
-    "38 46, 43 41, 48 46, 48 69, 43 74, 38 69", //4
-    "11 70, 37 70, 42 75, 37 80, 11 80, 6 75",  //8
-    "0 46, 5 41, 10 46, 10 69, 5 74, 0 69",     //16
-    "0 11, 5 6, 10 11, 10 34, 5 39, 0 34",      //32
-    "11 35, 37 35, 42 40, 37 45, 11 45, 6 40"   //64
-];
-
-
 var segMinErr = minErr('segment');
 
 function segmentProvider(){
     var $provider = this;
 
+    var segMap = {
+        '1': 6,
+        '2': 91,
+        '3': 79,
+        '4': 102,
+        '5': 109,
+        '6': 125,
+        '7': 39,
+        '8': 127,
+        '9': 111,
+        '0': 63,
+        '-': 64,
+        '_': 8,
+        '.': 128,
+        ' ': 0,
+        'S': 109,
+        'E': 121,
+        'G': 61
+    }; 
+
+    var segPoints = [
+        "11 0, 37 0, 42 5, 37 10, 11 10, 6 5",      //1
+        "38 11, 43 6, 48 11, 48 34, 43 39, 38 34",  //2
+        "38 46, 43 41, 48 46, 48 69, 43 74, 38 69", //4
+        "11 70, 37 70, 42 75, 37 80, 11 80, 6 75",  //8
+        "0 46, 5 41, 10 46, 10 69, 5 74, 0 69",     //16
+        "0 11, 5 6, 10 11, 10 34, 5 39, 0 34",      //32
+        "11 35, 37 35, 42 40, 37 45, 11 45, 6 40"   //64
+    ];
+
     this.defaults = {
         digit: {
             width: 75,
             height: 150,
             onClass: 'seven-seg-on',
-            digitClass: 'seven-seg-digit'
+            digitClass: 'seven-seg-digit',
+            points: segPoints
         },
 
         group: {
             align: undefined,   // align right
-            watch: undefined
+            watch: undefined,
+            map: segMap
         }
     };
 
-    this.$get = ["segMap", function(segMap){
+    this.$get = function(){
 
         function segmentService() {
             var that = this;
@@ -331,12 +355,12 @@ function segmentProvider(){
                     if( that.isDot(item) ){ // when item is dot
                         var prev = arr[i-1];
 
-                        if( prev === void 0 || that.isDot(prev) ) newArr[cnt] = segMap['.'];
-                        else newArr[--cnt] |= segMap['.'];
+                        if( prev === void 0 || that.isDot(prev) ) newArr[cnt] = opt.map['.'];
+                        else newArr[--cnt] |= opt.map['.'];
                     }
 
                     else if( angular.isString(item) ) {
-                        newArr[cnt] = segMap[item];
+                        newArr[cnt] = opt.map[item];
                     }
 
                     else if( angular.isNumber(item) ) {
@@ -347,7 +371,7 @@ function segmentProvider(){
                         throw new segMinErr('baditemtype', 'The type \'{0}\' is not supported.', (typeof item));
                     }
                 }
-                if( that.isDot(arr[i]) ) newArr[cnt-1] |= segMap['.'];
+                if( that.isDot(arr[i]) ) newArr[cnt-1] |= opt.map['.'];
 
                 size = opt.size === void 0 ? cnt : opt.size;
 
@@ -395,7 +419,7 @@ function segmentProvider(){
         }
 
         return new segmentService();
-    }];
+    };
 }
 
 
@@ -407,9 +431,8 @@ function segmentProvider(){
  */
 var app = angular.module('wo.7segments', []) /*jshint ignore:line*/
 .directive('segDigit', segDigitDirective)
-.directive('segGroup', segDigitGroupDirective)
-.value('segMap', segMap)
-.value('segPoints', segPoints)
+.directive('segGroup', segGroupDirective)
+.directive('once', once)
 .filter('bitAnd', bitAnd)
 .filter('bitAndWithBitwise', bitAndWithBitwise)
 .provider('segment', segmentProvider)
@@ -427,7 +450,7 @@ var app = angular.module('wo.7segments', []) /*jshint ignore:line*/
 
 
 /*global angular*/
-angular.module("wo.7segments").run(["$templateCache", function($templateCache) {$templateCache.put("digit.html","<svg data-ng-class=\"opt.digitClass\" viewBox=\"0 0 57 80\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" focusable=\"false\"> <g> <polyline data-ng-repeat=\"point in points\" ng-attr-points=\"{{point}}\" data-ng-class=\"(segVal | bitAndWithBitwise : $index) && opt.onClass\"></polyline> <circle cx=\"52\" cy=\"75\" r=\"5\" data-ng-class=\"(segVal | bitAnd : 128) && opt.onClass\"></circle> </g> </svg>");
+angular.module("wo.7segments").run(["$templateCache", function($templateCache) {$templateCache.put("digit.html","<svg data-ng-class=\"opt.digitClass\" viewBox=\"0 0 57 80\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" focusable=\"false\"> <g> <polyline data-ng-repeat=\"point in ::points\" ng-attr-points=\"{{point}}\" data-ng-class=\"(segVal | bitAndWithBitwise : $index) && opt.onClass\"></polyline> <circle cx=\"52\" cy=\"75\" r=\"5\" data-ng-class=\"(segVal | bitAnd : 128) && opt.onClass\"></circle> </g> </svg>");
 $templateCache.put("group.html","<div data-ng-repeat=\"dig in digits track by $index\" seg-digit data-ng-model=\"dig\" seg-digit-options=\"segDigitOptions\"> </div>");}]);
 
 })(window, window.angular);
diff --git a/example/scripts/app.js b/example/scripts/app.js
@@ -41,4 +41,46 @@ var app = angular.module('segment', ['wo.7segments', 'hljs'])
         onClass: 'custom-segment-on',
         digitClass: 'custom-segment-digit segment-digit-common'
     };
+})
+.controller('fifthEgCtrl', 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
+    }
+})
+.controller('sixthEgCtrl', 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,
+        height: 300,
+        width: 150
+    };
+})
+.controller('timeEgCtrl', function($scope, $interval){
+    function hhmmss(date) {
+        var hh = date.getHours().toString();
+        var mm = (date.getMinutes()+1).toString(); // getMonth() is zero-based
+        var ss  = date.getSeconds().toString();
+        return (hh[1]?hh:"0"+hh[0]) + '-'+ (mm[1]?mm:"0"+mm[0]) + '-' 
+            +(ss[1]?ss:"0"+ss[0]); // padding
+    }
+
+    $interval(function(){
+        $scope.value = hhmmss(new Date());
+    }, 500);
 });