show tape margin

web/index.html

@@ -28,10 +28,12 @@
         <option value="mm">mm</option>
     </select>
 </p>
-<canvas id="preview" height="32" width="300"></canvas>
+<div id='tape'>
+    <canvas id="preview" height="32" width="300"></canvas>
+</div>
 
 <p>
-<input type="button" value="Print" id="print"/>
+    <input type="button" value="Print" id="print"/>
 </p>
 
 <script src="label.js"></script>

web/label.js

@@ -1,6 +1,7 @@
 const elementsTable = document.getElementById('elements');
 /** @type HTMLCanvasElement preview */
 const preview = document.getElementById('preview');
+const tapeDiv = document.getElementById('tape');
 const renderCtx = preview.getContext("2d");
 const elementsTableBody = elementsTable.getElementsByTagName('tbody')[0];
 const addTextButton = document.getElementById('add-text');
@@ -244,6 +245,13 @@ fetch(apiRoot + '/status')
         backgroundColor = status.tape_color;
         textColor = status.text_color;
         tapeWidthMM = status.media_width;
+
+        const pxPerMM = preview.height / tapeWidthMM;
+        const marginPx = status.margin_width * pxPerMM;
+
+        tapeDiv.style.padding = `${marginPx}px 0`;
+        tapeDiv.style.height = `${status.pixel_width}px`;
+
         render();
         addTextElement();
     })

web/style.css

@@ -1,6 +1,7 @@
 :root {
     --background-color: #ffffff;
     --font-color: #000000;
+    --margin-color: #888;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -60,4 +61,10 @@ input {
             width: auto;
         }
     }
+}
+
+#tape {
+    display: inline-block;
+    width: auto;
+    background: var(--margin-color);
 }