Add Print on Zebra action

Modified version of HackerspaceKRK:printer-web-interface

src/index.html

@@ -87,6 +87,8 @@
       </div>
       <div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
       <div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
+      <div class="separator"></div>
+      <div data-action="print" id="tool_print" class="menu_item">Print on Zebra <span class="shortcut">⌘P</span></div>
     </div>
   </div>
 
@@ -152,12 +154,12 @@
 
 
       <label data-title="Change canvas width" class="draginput">
-        <input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
+        <input id="canvas_width" type="text" pattern="[0-9]*" value="600" />
         <span class="icon_label">Width</span>
       </label>
 
       <label data-title="Change canvas height" class="draginput">
-        <input id="canvas_height" type="text" pattern="[0-9]*" value="600" />
+        <input id="canvas_height" type="text" pattern="[0-9]*" value="400" />
         <span class="icon_label">Height</span>
       </label>
       
@@ -174,12 +176,18 @@
       </label>
 
       <div class="draginput">
-        <span>Sizes</span>
+        <span>Size</span>
         <select id="resolution">
 
-          <option id="selectedPredefined" selected="selected">Custom</option>
+          <option id="selectedPredefined">Custom</option>
           <option id="fitToContent" value="content">Fit to Content</option>
 
+          <optgroup label="HSWAW">
+            <option value="356x144">Small Label / DYMO (89 × 36mm)</option>
+            <option value="600x400" selected="selected">Large Label Landscape / 4x6 / Zebra (150 × 100mm)</option>
+            <option value="400x600">Large Label Portrait / 4x6 / Zebra (100 × 150mm)</option>
+          </optgroup>
+
           <optgroup label="Social Media">
             <option value="1012x506">Twitter Post (1012 × 506)</option>
             <option value="1500x500">Twitter Header (1500 × 500)</option>
@@ -234,7 +242,7 @@
           </optgroup>
         </select>
         <div class="caret"></div>
-        <label id="resolution_label">Custom</label>
+        <label id="resolution_label">600x400</label>
       </div>
 
     </div>
@@ -662,7 +670,11 @@
   <div class="tool_button" id="tool_eyedropper" data-mode="eyedropper" title="Eyedropper Tool [E]">
     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27" style="transform: scale(-1, 1)"><path d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
   </div>
-  
+
+  <div class="tool_button" id="tool_qr" data-mode="qr" title="QR Code">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-qr-code"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></svg>
+  </div>
+
   <div id="color_tools">
         <div id="tool_switch" title="Switch stroke and fill colors [X]">
           <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M3.01 2A6 6 0 019 8h1.83l-2.91 2.91L5 8h2a4 4 0 00-3.99-4v1.93L.1 3.02 3.01.1V2z' /></svg>
@@ -749,6 +761,7 @@
   <script type="text/javascript" src="js/loading.js"></script>
   <!-- endbuild -->
   <!-- build:js all.js -->
+  <script type="text/javascript" src="js/lib/qrcode.min.js"></script>
   <script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" src="js/lib/pathseg.js"></script>
   <script type="text/javascript" src="js/lib/jquery.hotkeys.min.js"></script>

src/js/Keyboard.js

@@ -15,6 +15,7 @@ MD.Keyboard = function(){
 "shift_x":   { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
     "alt":   { name: false,                 cb: ()=> $("#workarea").toggleClass("out", state.get("canvasMode") === "zoom" )},  
     "cmd_s": { name: "Save SVG File",       cb: ()=> editor.save()},
+    "cmd_p": { name: "Print on Zebra",      cb: ()=> editor.print()},
     "cmd_z": { name: "Undo",                cb: ()=> editor.undo()},
     "cmd_y": { name: "Redo",                cb: ()=> editor.redo()},
 "cmd_shift_z": { name: "Redo",              cb: ()=> editor.redo()},

src/js/Toolbar.js

@@ -1,8 +1,27 @@
 MD.Toolbar = function(){
 
   // tools left
-  $("#tools_left .tool_button").on("click", function(){ 
+  $("#tools_left .tool_button").on("click", function(){
     const mode = this.getAttribute("data-mode");
+
+    if (mode === "qr") {
+      const contents = prompt("Enter QR contents:", "");
+      if (!contents) return;
+
+      var svgNode = QRCode({
+        msg :  contents,
+        dim :   100,
+        pad :   6,
+        mtx :   7,
+        ecl :  "H",
+        ecb :   0,
+        pal : ["#000000", "#ffffff"],
+        vrb :   1,
+      });
+      const svg = new XMLSerializer().serializeToString(svgNode);
+      svgCanvas.importSvgString(svg, true);
+    }
+
     state.set("canvasMode", mode)
     if (mode === "shapelib") showShapeLib()
   });
@@ -19,4 +38,4 @@ MD.Toolbar = function(){
   }
 
   this.setMode = setMode;
-}
+}

src/js/dao.js

@@ -15,7 +15,7 @@ const dao = [
     name: "canvasTitle",
     label: "Canvas Title",
     type: "string",
-    default: "Drawing",
+    default: "Label",
     private: false,
     save: true
   },
@@ -24,7 +24,7 @@ const dao = [
     name: "canvasSize",
     label: "Canvas Size",
     type: "array",
-    default: [800, 600],
+    default: [600, 400],
     private: false,
     save: true
   },
@@ -60,7 +60,12 @@ const dao = [
     name: "canvasContent",
     label: "Canvas Content",
     type: "string",
-    default: "<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'></svg>",
+    default: `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'>
+      <g>
+        <title>Layer 1</title>
+        <text font-weight="normal" font-style="normal" stroke="#000" xml:space="preserve" text-anchor="start" font-family="'Open Sans'" font-size="42" id="svg_1" y="54.90625" x="10" stroke-width="0" fill="#000000">Sample text</text>
+      </g>
+    </svg>`,
     private: true,
     save: true
   },

src/js/editor.js

@@ -278,7 +278,23 @@ MD.Editor = function(){
     c.width = svgCanvas.contentW;
     c.height = svgCanvas.contentH;
     canvg(c, data.svg, {renderCallback: function() {
-      var datauri = c.toDataURL('image/png');  
+      if (data.shouldPrint) {
+        c.toBlob((blob) => {
+          fetch('/print?printer=zebra', {
+            method: 'POST',
+            body: blob
+          }).then(response => {
+            if (response.ok) {
+              $.alert("Printed successfully")
+            } else {
+              $.alert("Error printing")
+            }
+          })
+        })
+        return
+      }
+
+      var datauri = c.toDataURL('image/png');
       if (!datauri) return false;
       var filename = "Method Draw Image";
       var type = 'image/png';
@@ -409,14 +425,22 @@ MD.Editor = function(){
   this.saveCanvas = saveCanvas;
   this.loadFromUrl = loadFromUrl;
 
-  this.export = function(){ 
+  this.export = function(shouldPrint = false){
     if(window.canvg) {
-        svgCanvas.rasterExport();
+        svgCanvas.rasterExport(shouldPrint);
       } else {
         $.getScript('js/lib/rgbcolor.js', function() {
           $.getScript('js/lib/canvg.js', function() {
-            svgCanvas.rasterExport();
+            svgCanvas.rasterExport(shouldPrint);
           });
         });
       }}
+
+
+  function print() {
+    editor.menu.flash($('#file_menu'));
+    if (!confirm("Do you want to print?")) return;
+    this.export(true)
+  }
+  this.print = print
 }

src/js/method-draw.js

@@ -5,7 +5,7 @@ window.methodDraw = function() {
     canvas_expansion: 1, 
     dimensions: [800,600], 
     initFill: {color: 'fff', opacity: 1},
-    initStroke: {width: 1.5, color: '000', opacity: 1},
+    initStroke: {width: 3, color: '000', opacity: 1},
     initOpacity: 1,
     imgPath: 'images/',
     extPath: 'extensions/',

src/js/svgcanvas.js

@@ -45,12 +45,12 @@ var svgns = "http://www.w3.org/2000/svg",
 var curConfig = {
   show_outside_canvas: true,
   selectNew: true,
-  dimensions: [800, 600],
+  dimensions: [600, 400],
   initFill: {color: 'fff', opacity: 1},
-  initStroke: {width: 1, color: '000', opacity: 1},
+  initStroke: {width: 3, color: '000', opacity: 1},
   imgPath: 'images/',
   baseUnit: 'px',
-  defaultFont: "Noto Sans JP"
+  defaultFont: "Open Sans"
 };
 
 // Update config with new one if given
@@ -146,7 +146,7 @@ all_properties.text = $.extend(true, {}, all_properties.shape);
 $.extend(all_properties.text, {
   fill: "#000000",
   stroke_width: 0,
-  font_size: 24,
+  font_size: 42,
   font_family: curConfig.defaultFont
 });
 
@@ -5364,7 +5364,7 @@ this.save = function() {
 // Function: rasterExport
 // Generates a PNG Data URL based on the current image, then calls "exported" 
 // with an object including the string and any issues found
-this.rasterExport = function() {
+this.rasterExport = function(shouldPrint) {
   // remove the selected outline before serializing
   clearSelection();
   
@@ -5391,7 +5391,7 @@ this.rasterExport = function() {
   });
 
   var str = this.svgCanvasToString();
-  call("exported", {svg: str, issues: issues});
+  call("exported", {svg: str, issues: issues, shouldPrint});
 };
 
 // Function: getSvgString