added qrcode

admin/app/app.js

@@ -15,7 +15,8 @@
         //'ngDragDrop',
         'hjc.directives.dragdrop',
         'angular-loading-bar',
-        'thatisuday.dropzone'
+        'thatisuday.dropzone',
+        'monospaced.qrcode'
     ])
 })();
 

admin/app/translations.js

@@ -511,6 +511,7 @@ function config($translateProvider) {
                 SELECT_MASTER_METER: 'Select Master Meter',
                 TREE_VIEW: 'Tree View',
                 CHILD_METERS: 'Child Meters',
+                QR_CODE: 'Qr Code'
             },
             SENSOR: {
                 ADD_SENSOR: 'Add Sensor',
@@ -1500,6 +1501,7 @@ function config($translateProvider) {
                 SELECT_MASTER_METER: '选择上级计量表',
                 TREE_VIEW: '树视图',
                 CHILD_METERS: '下级计量表',
+                QR_CODE: '二维码'
             },
             SENSOR: {
                 ADD_SENSOR: '添加传感器',
@@ -2490,6 +2492,7 @@ function config($translateProvider) {
                 SELECT_MASTER_METER: 'Wählen Sie das übergeordnete Messgerät aus',
                 TREE_VIEW: 'Baumsicht',
                 CHILD_METERS: 'Unterer Füllstandsmesser',
+                QR_CODE: ''
             },
             SENSOR: {
                 ADD_SENSOR: 'Sensor hinzufügen',

admin/index.html

@@ -76,6 +76,11 @@
 <script src="js/plugins/angular-loading-bar/loading-bar.js"></script>
 <script src="js/angular/angular-cookies.min.js"></script>
 <script src="js/plugins/jsTree/jstree.min.js"></script>
+<!-- qrocde scripts-->
+<script src="js/angular/qrcode.js"></script>
+<script src="js/angular/qrcode_UTF8.js"></script>
+<script src="js/angular/angular-qrcode.js"></script>
+
 
 <!-- Custom and plugin javascript -->
 <script src="app/inspinia.js"></script>

admin/js/angular/angular-qrcode.js

@@ -0,0 +1,233 @@
+/*
+ * angular-qrcode
+ * (c) 2017 Monospaced http://monospaced.com
+ * License: MIT
+ */
+
+if (typeof module !== 'undefined' &&
+    typeof exports !== 'undefined' &&
+    module.exports === exports){
+  module.exports = 'monospaced.qrcode';
+}
+
+angular.module('monospaced.qrcode', [])
+  .directive('qrcode', ['$window', function($window) {
+
+    var canvas2D = !!$window.CanvasRenderingContext2D,
+        levels = {
+          'L': 'Low',
+          'M': 'Medium',
+          'Q': 'Quartile',
+          'H': 'High'
+        },
+        draw = function(context, qr, modules, tile, color) {
+          for (var row = 0; row < modules; row++) {
+            for (var col = 0; col < modules; col++) {
+              var w = (Math.ceil((col + 1) * tile) - Math.floor(col * tile)),
+                  h = (Math.ceil((row + 1) * tile) - Math.floor(row * tile));
+
+              context.fillStyle = qr.isDark(row, col) ? color.foreground : color.background;
+              context.fillRect(Math.round(col * tile),
+                               Math.round(row * tile), w, h);
+            }
+          }
+        };
+
+    return {
+      restrict: 'E',
+      template: '<canvas class="qrcode"></canvas>',
+      link: function(scope, element, attrs) {
+        var domElement = element[0],
+            $canvas = element.find('canvas'),
+            canvas = $canvas[0],
+            context = canvas2D ? canvas.getContext('2d') : null,
+            download = 'download' in attrs,
+            href = attrs.href,
+            link = download || href ? document.createElement('a') : '',
+            trim = /^\s+|\s+$/g,
+            error,
+            version,
+            errorCorrectionLevel,
+            data,
+            size,
+            modules,
+            tile,
+            qr,
+            $img,
+            color = {
+              foreground: '#000',
+              background: '#fff'
+            },
+            setColor = function(value) {
+              color.foreground = value || color.foreground;
+            },
+            setBackground = function(value) {
+              color.background = value || color.background;
+            },
+            setVersion = function(value) {
+              version = Math.max(1, Math.min(parseInt(value, 10), 40)) || 5;
+            },
+            setErrorCorrectionLevel = function(value) {
+              errorCorrectionLevel = value in levels ? value : 'M';
+            },
+            setData = function(value) {
+              if (!value) {
+                return;
+              }
+
+              data = value.replace(trim, '');
+              qr = qrcode(version, errorCorrectionLevel);
+              qr.addData(data);
+
+              try {
+                qr.make();
+              } catch (e) {
+                var newVersion;
+                if (version >= 40) {
+                  throw new Error('Data is too long', e);
+                }
+                newVersion = version + 1;
+                setVersion(newVersion);
+                console.warn('qrcode version is too low and has been incremented to', newVersion)
+                setData(value);
+                return;
+              }
+
+              error = false;
+              modules = qr.getModuleCount();
+            },
+            setSize = function(value) {
+              size = parseInt(value, 10) || modules * 2;
+              tile = size / modules;
+              canvas.width = canvas.height = size;
+            },
+            render = function() {
+              if (!qr) {
+                return;
+              }
+
+              if (error) {
+                if (link) {
+                  link.removeAttribute('download');
+                  link.title = '';
+                  link.href = '#_';
+                }
+                if (!canvas2D) {
+                  domElement.innerHTML = '<img src width="' + size + '"' +
+                                         'height="' + size + '"' +
+                                         'class="qrcode">';
+                }
+                scope.$emit('qrcode:error', error);
+                return;
+              }
+
+              if (download) {
+                domElement.download = 'qrcode.png';
+                domElement.title = 'Download QR code';
+              }
+
+              if (canvas2D) {
+                draw(context, qr, modules, tile, color);
+
+                if (download) {
+                  domElement.href = canvas.toDataURL('image/png');
+                  return;
+                }
+              } else {
+                domElement.innerHTML = qr.createImgTag(tile, 0);
+                $img = element.find('img');
+                $img.addClass('qrcode');
+
+                if (download) {
+                  domElement.href = $img[0].src;
+                  return;
+                }
+              }
+
+              if (href) {
+                domElement.href = href;
+              }
+            };
+
+        if (link) {
+          link.className = 'qrcode-link';
+          $canvas.wrap(link);
+          domElement = domElement.firstChild;
+        }
+
+        setColor(attrs.color);
+        setBackground(attrs.background);
+        setVersion(attrs.version);
+        setErrorCorrectionLevel(attrs.errorCorrectionLevel);
+        setSize(attrs.size);
+
+        attrs.$observe('version', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setVersion(value);
+          setData(data);
+          setSize(size);
+          render();
+        });
+
+        attrs.$observe('errorCorrectionLevel', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setErrorCorrectionLevel(value);
+          setData(data);
+          setSize(size);
+          render();
+        });
+
+        attrs.$observe('data', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setData(value);
+          setSize(size);
+          render();
+        });
+
+        attrs.$observe('size', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setSize(value);
+          render();
+        });
+
+        attrs.$observe('color', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setColor(value);
+          render();
+        });
+
+        attrs.$observe('background', function(value) {
+          if (!value) {
+            return;
+          }
+
+          setBackground(value);
+          render();
+        });
+
+        attrs.$observe('href', function(value) {
+          if (!value) {
+            return;
+          }
+
+          href = value;
+          render();
+        });
+      }
+    };
+  }]);

admin/js/angular/qrcode_UTF8.js

@@ -0,0 +1,26 @@
+//---------------------------------------------------------------------
+//
+// QR Code Generator for JavaScript UTF8 Support (optional)
+//
+// Copyright (c) 2011 Kazuhiko Arase
+//
+// URL: http://www.d-project.com/
+//
+// Licensed under the MIT license:
+//  http://www.opensource.org/licenses/mit-license.php
+//
+// The word 'QR Code' is registered trademark of
+// DENSO WAVE INCORPORATED
+//  http://www.denso-wave.com/qrcode/faqpatent-e.html
+//
+//---------------------------------------------------------------------
+
+!function(qrcode) {
+
+  //---------------------------------------------------------------------
+  // overwrite qrcode.stringToBytes
+  //---------------------------------------------------------------------
+
+  qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'];
+
+}(qrcode);

admin/views/settings/meter/meter.model.html

@@ -101,6 +101,13 @@
                   </div>
               </div>
             </div>
+            <div class="form-group"><label class="col-sm-4 control-label">{{'METER.MASTER_METER' | translate}} ({{'SETTING.OPTIONAL' | translate}})</label>
+             <div class="col-sm-8">
+                  <div>
+                       <qrcode data="{{meter.qrcode}}" version="1" error-correction-level="L" size="200" color="#fff" background="#000" download></qrcode>
+                  </div>
+              </div>
+            </div>
         </form>
     </div>
     <div class="modal-footer">