Use POST instead of GET for the preview / printing

brother_ql_web.py

@@ -53,14 +53,17 @@ def labeldesigner():
 def get_label_context(request):
     """ might raise LookupError() """
 
+    d = request.params.decode() # UTF-8 decoded form data
+
     context = {
-      'font_size': int(request.query.get('font_size', 100)),
+      'text':          d.get('text', None),
-      'font_family':   request.query.get('font_family'),
+      'font_size': int(d.get('font_size', 100)),
-      'font_style':    request.query.get('font_style'),
+      'font_family':   d.get('font_family'),
-      'label_size':    request.query.get('label_size', "62"),
+      'font_style':    d.get('font_style'),
-      'margin':    int(request.query.get('margin', 10)),
+      'label_size':    d.get('label_size', "62"),
-      'threshold': int(request.query.get('threshold', 70)),
+      'margin':    int(d.get('margin', 10)),
-      'align':         request.query.get('align', 'center'),
+      'threshold': int(d.get('threshold', 70)),
+      'align':         d.get('align', 'center'),
     }
     context['margin_top']    = int(context['font_size']*0.24)
     context['margin_bottom'] = int(context['font_size']*0.45)
@@ -118,20 +121,29 @@ def create_label_im(text, **kwargs):
     draw.multiline_text(offset, text, (0), font=im_font, align=kwargs['align'])
     return im
 
-@route('/api/preview/text/<text>')
+@get('/api/preview/text')
-def get_preview_image(text):
+@post('/api/preview/text')
+def get_preview_image():
     context = get_label_context(request)
+    im = create_label_im(**context)
+    return_format = request.query.get('return_format', 'png')
+    if return_format == 'base64':
+        import base64
+        response.set_header('Content-type', 'text/plain')
+        return base64.b64encode(image_to_png_bytes(im))
+    else:
+        response.set_header('Content-type', 'image/png')
+        return image_to_png_bytes(im)
+
+def image_to_png_bytes(im):
     image_buffer = BytesIO()
-    im = create_label_im(text, **context)
     im.save(image_buffer, format="PNG")
     image_buffer.seek(0)
-    response.set_header('Content-type', 'image/png')
     return image_buffer.read()
 
-@route('/api/print/text')
+@post('/api/print/text')
-@route('/api/print/text/')
+@get('/api/print/text')
-@route('/api/print/text/<content>')
+def print_text():
-def print_text(content=None):
     """
     API to print a label
 
@@ -143,17 +155,17 @@ def print_text(content=None):
 
     return_dict = {'success': False}
 
-    if content is None:
-        return_dict['error'] = 'Please provide the text for the label'
-        return return_dict
-
     try:
         context = get_label_context(request)
     except LookupError as e:
         return_dict['error'] = e.msg
         return return_dict
 
-    im = create_label_im(content, **context)
+    if context['text'] is None:
+        return_dict['error'] = 'Please provide the text for the label'
+        return return_dict
+
+    im = create_label_im(**context)
     if DEBUG: im.save('sample-out.png')
 
     qlr = BrotherQLRaster(MODEL)
@@ -168,7 +180,6 @@ def print_text(content=None):
         except Exception as e:
             return_dict['message'] = str(e)
             logger.warning('Exception happened: %s', e)
-            response.status = 500
             return return_dict
 
     return_dict['success'] = True

views/labeldesigner.jinja2

@@ -79,9 +79,17 @@
     <div class="col-md-4">
       <fieldset class="form-group">
         <label for="previewImg">Label Preview:</label>
-        <img id="previewImg" src="/api/preview/text/%20" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
+        <img id="previewImg" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
          <button type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">Print</button>
       </fieldset>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Status</h3>
+        </div>
+        <div id="statusPanel" class="panel-body">
+          - undefined -
+        </div>
+      </div>
     </div>
   </div>
 {% endblock %}
@@ -89,51 +97,49 @@
 {% block javascript %}
 var text = $('#labelText');
 
-//text.oninput = function(){
+function formData() {
-//var callcount = 0;
+  //var text = $('#labelText').val().replace(/\n/g, "%0A");
-//    var action = function(){
+  var text = $('#labelText').val();
-//        alert('changed');
+  if (text == '') text = ' ';
-//    }
+  return {
-//    var delayAction = function(action, time){
+    text:        text,
-//        var expectcallcount = callcount;
+    font_family: $('#fontFamily option:selected').text(),
-//        var delay = function(){
+    font_size:   $('#fontSize').val(),
-//            if(callcount == expectcallcount){
+    label_size:  $('#labelSize option:selected').val(),
-//                action();
+    align:       $('input[name=fontAlign]:checked').val()
-//            }
+  }
-//        }
-//        setTimeout(delay, time);
-//    }
-//    return function(eventtrigger){
-//        ++callcount;
-//        delayAction(action, 1200);
-//    }
-//}();
-
-function last_url_part() {
-  text =        $('#labelText').val().replace(/\n/g, "%0A");
-  font_family = $('#fontFamily option:selected').text();
-  font_size =   $('#fontSize').val();
-  label_size =  $('#labelSize option:selected').val();
-  align =       $('input[name=fontAlign]:checked').val();
-  if (text == '') text = '%20';
-  return text + '?font_family=' + font_family + '&font_size=' + font_size + '&label_size=' + label_size + '&align=' + align;
 }
 
 function preview() {
-  $('#previewImg').attr('src', '/api/preview/text/' + last_url_part() );
-}
-
-function print() {
   $.ajax({
-    dataType: "json",
+    type:        'POST',
-    url: '/api/print/text/' + last_url_part(),
+    url:         '/api/preview/text?return_format=base64',
+    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+    data:        formData(),
     success: function( data ) {
-      console.log(data['success']);
+      $('#previewImg').attr('src', 'data:image/png;base64,' + data);
     }
   });
 }
 
+function setStatus(data) {
+  if (data['success'])
+    $('#statusPanel').html('Printing was successful.');
+  else
+    $('#statusPanel').html('Printing was unsuccessful:<br />'+data['message']);
+}
 
+function print() {
+  $.ajax({
+    type:     'POST',
+    dataType: 'json',
+    data:     formData(),
+    url:      '/api/print/text',
+    success:  setStatus,
+    error:    setStatus
+  });
+}
 
+preview()
 
 {% endblock %}