Merge pull request #301 from eReuse/feature/2972-add-logo-to-label

Feature/2972 add logo to label

ereuse_devicehub/static/js/print.pdf.js

@@ -5,6 +5,9 @@ $(document).ready(function() {
     change_size();
     load_settings();
     change_check();
+    $("#imgInp").change(function(){
+        readURL(this);
+    });
 })
 
 function qr_draw(url, id) {
@@ -18,11 +21,36 @@ function qr_draw(url, id) {
     });
 }
 
+function previewLogo(logo) {
+    const img = "<img style='max-width: 150px' src='"+logo+"' />";
+    $("#logo-preview").html(img);
+    $(".label-logo-dev").html(img);
+}
+
+function readURL(input) {
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+
+        reader.onload = function (e) {
+            previewLogo(e.target.result);
+            $("#logoCheck").prop('disabled', '');
+        }
+
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+
+
 function save_settings() {
+    var logo = $('#logo-preview img').attr('src');
     var height = $("#height-tag").val();
     var width = $("#width-tag").val();
     var sizePreset = $("#printerType").val();
-    var data = {"height": height, "width": width, "sizePreset": sizePreset};
+    var data = {"height": height, "width": width, "sizePreset": sizePreset, 'logoImg': ''};
+    if (logo) {
+        data['logoImg'] = logo;
+    };
+    data['logo'] = $("#logoCheck").prop('checked');
     data['dhid'] = $("#dhidCheck").prop('checked');
     data['sid'] = $("#sidCheck").prop('checked');
     data['qr'] = $("#qrCheck").prop('checked');
@@ -44,6 +72,14 @@ function load_settings() {
         $("#serialNumberCheck").prop('checked', data.serial_number);
         $("#manufacturerCheck").prop('checked', data.manufacturer);
         $("#modelCheck").prop('checked', data.model);
+        if (data.logo) {
+            $("#logoCheck").prop('checked', data.sid);
+            previewLogo(data.logoImg);
+            $("#logoCheck").prop('checked', data.logo);
+        } else {
+            $("#logoCheck").prop('checked', false);
+            $("#logoCheck").prop('disabled', 'disabled');
+        }
     };
 }
 
@@ -54,8 +90,10 @@ function reset_settings() {
     $("#dhidCheck").prop('checked', true);
     $("#sidCheck").prop('checked', true);
     $("#serialNumberCheck").prop('checked', false);
+    $("#logoCheck").prop('checked', false);
     $("#manufacturerCheck").prop('checked', false);
     $("#modelCheck").prop('checked', false);
+    $('#logo-preview').html('');
     change_size();
     change_check();
 }
@@ -72,36 +110,54 @@ function change_size() {
 }
 
 function change_check() {
+    if ($('#logo-preview img').attr('src')) {
+        $("#logoCheck").prop('disabled', '');
+    } else {
+        $("#logoCheck").prop('checked', false);
+        $("#logoCheck").prop('disabled', 'disabled');
+    };
+
+    if ($("#logoCheck").prop('checked') && $('#logo-preview img').attr('src')) {
+        $(".label-logo").show();
+    } else {
+        $(".label-logo").hide();
+    };
+
     if ($("#dhidCheck").prop('checked')) {
         $(".dhid").show();
     } else {
         $(".dhid").hide();
-    }
+    };
+
     if ($("#sidCheck").prop('checked')) {
         $(".sid").show();
     } else {
         $(".sid").hide();
-    }
+    };
+
     if ($("#serialNumberCheck").prop('checked')) {
         $(".serial_number").show();
     } else {
         $(".serial_number").hide();
-    }
+    };
+
     if ($("#manufacturerCheck").prop('checked')) {
         $(".manufacturer").show();
     } else {
         $(".manufacturer").hide();
-    }
+    };
+
     if ($("#modelCheck").prop('checked')) {
         $(".model").show();
     } else {
         $(".model").hide();
-    }
+    };
+
     if ($("#qrCheck").prop('checked')) {
         $(".qr").show();
     } else {
         $(".qr").hide();
-    }
+    };
 }
 
 function printpdf() {
@@ -109,76 +165,106 @@ function printpdf() {
     var line = 5;
     var height = parseInt($("#height-tag").val());
     var width = parseInt($("#width-tag").val());
-    var img_side = Math.min(height, width) - 2*border;
+    var logo = '';
-    max_tag_side = (Math.max(height, width)/2) + border;
+    var _rel = 1;
-    if (max_tag_side < img_side) {
+    if ($('#logoCheck').prop('checked')) {
-        max_tag_side = img_side + 2*border;
+        logo = $("#logo-preview img").attr("src");
-    };
+        if (logo) {
-    min_tag_side = (Math.min(height, width)/2) + border;
+            var _img = new Image();
+            _img.src = logo;
+            _rel = parseInt(_img.height)/parseInt(_img.width);
+        }
+    }
+    var img_side = (width/2) - 2*border;
     var last_tag_code = '';
 
+    var height_need = border*2;
+    if (logo) {
+        height_need += width*_rel + border;
+    };
+    if ($("#qrCheck").prop('checked')) {
+        height_need += img_side;
+    } else if ($("#dhidCheck").prop('checked')) {
+        height_need += line;
+    };
     if ($("#sidCheck").prop('checked')) {
-        height += line;
+        height_need += line;
     };
     if ($("#serialNumberCheck").prop('checked')) {
-        height += line;
+        height_need += line;
     };
     if ($("#manufacturerCheck").prop('checked')) {
-        height += line;
+        height_need += line;
     };
     if ($("#modelCheck").prop('checked')) {
-        height += line;
+        height_need += line;
+    };
+    height = Math.max(height, height_need);
+
+    if (width > height) {
+        var pdf = new jsPDF('l', 'mm', [width, height]);
+    } else {
+        var pdf = new jsPDF('p', 'mm', [height, width]);
     };
 
-    var pdf = new jsPDF('l', 'mm', [width, height]);
+    var hlogo = 0;
     $(".tag").map(function(x, y) {
         if (x != 0){
             pdf.addPage();
         };
-        var space = line + border;
+        var hspace = border;
-        if ($("#qrCheck").prop('checked')) {
-            space += img_side;
-        }
         var tag = $(y).text();
         last_tag_code = tag;
+        if (logo) {
+            var wlogo = (width - border*2);
+            hlogo = wlogo*_rel;
+            pdf.addImage(logo, 'PNG', border, hspace, wlogo, hlogo);
+            hspace += hlogo + border;
+        };
         if ($("#qrCheck").prop('checked')) {
             var imgData = $('#'+tag+' img').attr("src");
-            pdf.addImage(imgData, 'PNG', border, border, img_side, img_side);
+            pdf.addImage(imgData, 'PNG', border, hspace, img_side, img_side);
+            hspace += img_side;
+        } else {
+            hspace += line;
         };
 
         if ($("#dhidCheck").prop('checked')) {
+            pdf.setFontSize(15);
             if ($("#qrCheck").prop('checked')) {
-               pdf.setFontSize(15);
+                var h = hspace + border - img_side/2;
-               pdf.text(tag, max_tag_side, min_tag_side);
+                var w = border*2 + img_side;
+                pdf.text(tag, w, h);
             } else {
-               pdf.setFontSize(15);
+                pdf.text(tag, border, hspace);
-               pdf.text(tag, border, space);
-               space += line;
             }
+            hspace += line;
         };
         if ($("#sidCheck").prop('checked')) {
             var sn = $(y).data('sid');
-            pdf.setFontSize(15);
+            pdf.setFontSize(12);
-            pdf.text(sn, border, space);
+            if (sn) {
-            space += line;
+                pdf.text(sn, border, hspace);
+                hspace += line;
+            }
         };
         if ($("#serialNumberCheck").prop('checked')) {
             var sn = $(y).data('serial-number');
             pdf.setFontSize(12);
-            pdf.text(sn, border, space);
+            pdf.text(sn, border, hspace);
-            space += line;
+            hspace += line;
         };
         if ($("#manufacturerCheck").prop('checked')) {
             var sn = $(y).data('manufacturer');
             pdf.setFontSize(12);
-            pdf.text(sn, border, space);
+            pdf.text(sn, border, hspace);
-            space += line;
+            hspace += line;
         };
         if ($("#modelCheck").prop('checked')) {
             var sn = $(y).data('model');
             pdf.setFontSize(8);
-            pdf.text(sn, border, space);
+            pdf.text(sn, border, hspace);
-            space += line;
+            hspace += line;
         };
     });
 

ereuse_devicehub/templates/labels/print_labels.html

@@ -27,6 +27,9 @@
                   {% for dev in devices %}
                   <div style="width:256px; min-height:148px; border: solid 1px; padding: 10px;">
                     <div>
+                      <div class="row label-logo" style="display: none">
+                        <div class="col label-logo-dev"></div>
+                      </div>
                       <div class="row">
                         <div class="col qr">
                           <div id="{{ dev.devicehub_id }}"></div>
@@ -73,6 +76,15 @@
                 <div class="col-1">
                 </div>
                 <div class="col label">
+                  <label class="col-form-label col-sm-2">Logo</label>
+
+                  <div class="col-sm-10">
+                    <div class="input-group mb-3" id="logo-preview">
+                    </div>
+                    <div class="input-group mb-3">
+                      <input class="form-control" type='file' id="imgInp" />
+                    </div>
+                  </div>
                   <label class="col-form-label col-sm-2">Size</label>
                   <div class="col-sm-10">
                     <div class="input-group mb-3">
@@ -101,6 +113,10 @@
                     </div>
                   </div>
                   <div class="col-sm-10">
+                    <div class="form-switch">
+                      <input class="form-check-input" name="logoCheck" type="checkbox" id="logoCheck">
+                      <label class="form-check-label" for="logoCheck">Logo</label>
+                    </div>
                     <div class="form-switch">
                       <input class="form-check-input" name="qr" type="checkbox" id="qrCheck" checked="">
                       <label class="form-check-label" for="qrCheck">QR</label>