Add label sizes, hswaw default size

src/index.html

@@ -152,12 +152,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 +174,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 +240,7 @@
           </optgroup>
         </select>
         <div class="caret"></div>
-        <label id="resolution_label">Custom</label>
+        <label id="resolution_label">600x400</label>
       </div>
 
     </div>

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,7 @@ 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'></svg>",
     private: true,
     save: true
   },

src/js/svgcanvas.js

@@ -45,7 +45,7 @@ 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},
   imgPath: 'images/',