Add HTML markup support, change input type to textarea

render.py

@@ -27,11 +27,12 @@ class Renderer(object):
         width, height = [int(s * self.INCH_PER_MM * self.DPI) for s in size]
         surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
         context = cairo.Context(surface)
+
         # fill it white, while we're at it
         context.rectangle(0, 0, width, height)
         context.set_source_rgb(1, 1, 1)
         context.fill()
-        
+
         context.translate(width, 0)
         context.rotate(math.pi/2)
         # yolo
@@ -44,7 +45,7 @@ class Renderer(object):
         with open(name, 'w') as f:
             self.surface.write_to_png(f)
 
-    def render_text(self, text, fontname, x, y):
+    def render_text(self, text, fontname, x, y, html=False):
         self.context.save()
         if y != -1:
             self.context.translate(x, y)
@@ -52,13 +53,17 @@ class Renderer(object):
         pangocairo_context = pangocairo.CairoContext(self.context)
         pangocairo_context.set_antialias(cairo.ANTIALIAS_SUBPIXEL)
         layout = pangocairo_context.create_layout()
-
         layout.set_width(self.width*pango.SCALE)
-        font = pango.FontDescription(fontname)
-        layout.set_font_description(font)
-        layout.set_text(text)
         layout.set_alignment(pango.ALIGN_CENTER)
 
+        if html:
+            # Absolutely horrifying hack to fix broken text wrapping
+            layout.set_markup('<span font_desc="%s">%s</span>' % (fontname, text))
+        else:
+            font = pango.FontDescription(fontname)
+            layout.set_font_description(font)
+            layout.set_text(text)
+
         if y == -1:
             self.context.translate(0, (self.height - layout.get_size()[1]/pango.SCALE)/2)
 
@@ -100,8 +105,9 @@ def health():
 @app.route('/stuff/preview/<int:size>/')
 def stuff_preview(size):
     text = flask.request.args.get('text')
+    html = flask.request.args.get('html') == '1'
     r = Renderer()
-    r.render_text(text, 'Sans {}'.format(size), 0, -1)
+    r.render_text(text, 'Sans {}'.format(size), 0, -1, html)
 
     sio = StringIO.StringIO()
     r.surface.write_to_png(sio)
@@ -118,8 +124,9 @@ def stuff_print(size):
     if time.time() - last < DELAY:
         return 'Please wait {} more seconds before next print.'.format(int(DELAY - (time.time() - last)))
     text = flask.request.args.get('text')
+    html = flask.request.args.get('html') == '1'
     r = Renderer()
-    r.render_text(text, 'Sans {}'.format(size), 0, -1)
+    r.render_text(text, 'Sans {}'.format(size), 0, -1, html)
     path = '/tmp/hslabel'
     f = open(path, 'w')
 

templates/index.html

@@ -56,11 +56,17 @@ body {
                     <h4>Settings</h4>
                     <div class="form-group">
                         <label for="fontsize">Font Size</label>
-                        <input id="fontsize" value="60" style="width: 100px;" class="form-control" />
+                        <input id="fontsize" value="60" style="width: 100px;" class="form-control" type="number" />
                     </div>
                     <div class="form-group">
                         <label for="labeltext">Label Text</label>
-                        <input id="labeltext" value="Sample Text" style="width: 200px;" class="form-control" /> 
+                        <textarea id="labeltext" style="width: 200px;" class="form-control">Sample Text</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="parsehtml">
+                            <input id="parsehtml" value="1" type="checkbox" />
+                            Parse HTML
+                        </label>
                     </div>
                     <button type="button" id="btnpreview" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Preview</button>
                     <button type="button" id="btnprint" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print!</button>
@@ -68,9 +74,9 @@ body {
                 <div class="col-md-7">
                     <h4>API</h4>
                     <pre>$ # To get a label preview
-$ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar | feh -
+$ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar&amp;html=0 | feh -
 $ # To print the label
-$ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar</pre>
+$ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar&amp;html=0</pre>
                 </div>
             </div>
         </div>
@@ -85,16 +91,18 @@ $ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar</pre>
         <script>
 $(document).ready(function() {
     var generatePreview = function() {
+        var html = $("#parsehtml").is(':checked') ? 1 : 0;
         var fontsize = parseInt($("#fontsize").val());
         var text = encodeURIComponent($("#labeltext").val());
-        $("#preview").attr("src", "/stuff/preview/" + fontsize + "/?text=" + text);
+        $("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "&text=" + text);
     };
     $("#btnpreview").click(generatePreview);
     var asked = false;
     var print = function() {
+        var html = $("#parsehtml").is(':checked') ? 1 : 0;
         var fontsize = parseInt($("#fontsize").val());
         var text = encodeURIComponent($("#labeltext").val());
-        $.post("/stuff/print/" + fontsize + "/?text=" + text, function(data) {
+        $.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function(data) {
             if (data == "ok") {
                 $.bootstrapGrowl('Printed succesfully!', {'type': 'success'});
             } else {