Render log in UI

client/glyph.js

@@ -186,6 +186,12 @@ Template.glyph.helpers({
     var glyph = Session.get('glyph.data');
     return glyph && glyph.manual.verified ? 'verified' : undefined;
   },
+  log: function() {
+    var glyph = Session.get('glyph.data');
+    return glyph ? glyph.render.log.map(function(pair) {
+      return {log_class: pair[0], log_message: pair[1]};
+    }) : [];
+  },
   base_color: function() {
     return Session.get('glyph.show_strokes') ? 'black' : 'gray';
   },

client/index.html

@@ -59,6 +59,11 @@
 
 <template name="glyph">
   <div id="glyph" class="{{verified}}">
+    <div class="log">
+      {{#each log}}
+        <div class="log-line {{log_class}}">{{log_message}}</div>
+      {{/each}}
+    </div>
     <svg viewbox="0 0 1024 1024">
       <g transform="scale(1, -1) translate(0, -900)">
         {{#if glyph}}

client/style.css

@@ -52,6 +52,26 @@
   text-align: center;
 }
 
+#glyph .log {
+  position: absolute;
+  text-align: left;
+  left: 40px;
+  top: 76px;
+}
+
+#glyph .log .log-line {
+  font-size: 20px;
+  margin-bottom: 16px;
+}
+
+#glyph .log .log-line.error {
+  color: red;
+}
+
+#glyph .log .log-line.success {
+  color: green;
+}
+
 #glyph.verified {
   background-color: #dfc;
 }