From 7935fd0940f94fb09bf6816438292cf0a3d239ea Mon Sep 17 00:00:00 2001
From: Philipp Klaus <klaus@physik.uni-frankfurt.de>
Date: Mon, 6 Feb 2017 15:11:45 +0100
Subject: [PATCH] State width&height of label in cm

---
 views/labeldesigner.jinja2 | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/views/labeldesigner.jinja2 b/views/labeldesigner.jinja2
index 0fcbc9a..aa7ea6b 100644
--- a/views/labeldesigner.jinja2
+++ b/views/labeldesigner.jinja2
@@ -95,9 +95,10 @@
       <fieldset class="form-group">
         <label for="previewImg">Label Preview:</label><br />
         <img id="previewImg" style="border: 1px solid #444; max-height: 350px; width: auto; max-width: 100%; margin-bottom: 10px;"/>
-         <button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
-           <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
-         </button>
+        <p>Printed size w/o margins: <span id="labelWidth">?</span> cm x <span id="labelHeight">?</span> cm</p>
+        <button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
+          <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
+        </button>
       </fieldset>
       <div class="panel panel-default">
         <div class="panel-heading">
@@ -136,6 +137,11 @@ function preview() {
     data:        formData(),
     success: function( data ) {
       $('#previewImg').attr('src', 'data:image/png;base64,' + data);
+      var img = $('#previewImg')[0];
+      img.onload = function() {
+        $('#labelWidth').html( (img.naturalWidth /300*2.54).toFixed(1));
+        $('#labelHeight').html((img.naturalHeight/300*2.54).toFixed(1));
+      };
     }
   });
 }