Adding a Web GUI

2024-05-25 11:56:53 +03:00 · 2016-11-25 21:21:42 +01:00
parent 91ffde97ef
commit 894dc456ad
7 changed files with 146 additions and 11 deletions
--- a/views/base.jinja2
+++ b/views/base.jinja2
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="/static/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+
+    <title>{% block page_title %}{% endblock %} | Brother QL</title>
+  </head>
+  <body>
+    <h1>{% block page_headline %}{% endblock %}</h1>
+    {% block content %}{% endblock %}
+
+    <!-- jQuery first, then Bootstrap JS. -->
+    <script src="/static/js/jquery.min.js"></script>
+    <script src="/static/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+      {% block javascript %}{% endblock %}
+    </script>
+  </body>
+</html>
+
--- a/views/labeldesigner.jinja2
+++ b/views/labeldesigner.jinja2
@@ -0,0 +1,82 @@
+{% extends "base.jinja2" %}
+
+{% block page_title %}{{ title }}{% endblock %}
+
+{% block content %}
+  <div class="row">
+    <div class="col-md-4">
+      <fieldset class="form-group">
+        <label for="labelText">Label Text:</label>
+        <textarea rows="4" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
+        <label for="fontFamily">Font Selection:</label>
+        <select class="form-control" id="fontFamily" onChange="preview()">
+          {% for font in fonts %}<option>{{font}}</option> {% endfor %}
+        </select>
+        <label for="fontSize">Font Size:</label>
+        <input id="fontSize" type="text" name="quant[2]" class="form-control input-number" value="70" min="1" max="120" onChange="preview()">
+      </fieldset>
+    </div>
+    <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%;"/>
+         <button type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">Print</button>
+      </fieldset>
+    </div>
+  </div>
+{% endblock %}
+
+{% block page_headline %}
+  {{message}}
+{% endblock %}
+
+
+{% block javascript %}
+var text = $('#labelText');
+
+//text.oninput = function(){
+//var callcount = 0;
+//    var action = function(){
+//        alert('changed');
+//    }
+//    var delayAction = function(action, time){
+//        var expectcallcount = callcount;
+//        var delay = function(){
+//            if(callcount == expectcallcount){
+//                action();
+//            }
+//        }
+//        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();
+  if (text == '') text = '%20';
+  return text + '?font_family=' + font_family + '&font_size=' + font_size;
+}
+
+function preview() {
+  $('#previewImg').attr('src', '/api/preview/text/' + last_url_part() );
+}
+
+function print() {
+  $.ajax({
+    dataType: "json",
+    url: '/api/print/text/' + last_url_part(),
+    success: function( data ) {
+      console.log(data['success']);
+    }
+  });
+}
+
+
+
+
+{% endblock %}