Implement image export

Fixes #110
openscopeproject · Nov 25, 2019 · bcc1063 · bcc1063
1 parent a143bd9
commit bcc1063
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 58 deletions.
diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css
@@ -14,6 +14,7 @@
   --track-color-highlight: #D04040;
   --zone-color: #def5f1;
   --zone-color-highlight: #d0404080;
+  background-color: white;
 }
 
 html, body {
@@ -131,6 +132,7 @@ textarea.clipboard-temp {
 
 .button-container {
   font-size: 0;
+  margin: 10px 10px 10px 0px;
 }
 
 .dark .button-container {
@@ -418,10 +420,44 @@ mark.highlight {
   background-repeat: no-repeat;
 }
 
-.dark .statsbtn {
+.iobtn {
+  background-color: white;
+  border: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M3 33v-7l6.8-7h16.5l6.7 7v7H3zM3.2 26H33M21 9l5-5.9 5 6h-2.5V15h-5V9H21zm-4.9 0l-5 6-5-6h2.5V3h5v6h2.5z'/%3E%3Cpath fill='none' stroke='%23000' d='M6.1 29.5H10'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.dark .statsbtn, .dark .savebtn, .dark .menubtn, .dark .iobtn {
   filter: invert(1);
 }
 
+.flexbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.savebtn {
+  background-color: #d6d6d6;
+  width: auto;
+  height: 30px;
+  flex-grow: 1;
+  margin: 5px;
+  border-radius: 4px;
+}
+
+.savebtn:active {
+  background-color: #0a0;
+  color: white;
+}
+
+.dark .savebtn:active {
+  /* This will be inverted */
+  background-color: #b3b;
+}
+
 .stats {
   border-collapse: collapse;
   font-size: 12pt;
@@ -457,13 +493,10 @@ mark.highlight {
   background-color: rgba(28, 251, 0, 0.6);
 }
 
-.dark .menubtn {
-  filter: invert(1);
-}
-
 .menu {
   position: relative;
   display: inline-block;
+  margin: 10px 10px 10px 0px;
 }
 
 .menu-content {
@@ -485,12 +518,10 @@ mark.highlight {
   display: block;
 }
 
-.menu:hover .menubtn {
+.menu:hover .menubtn, .menu:hover .iobtn, .menu:hover .statsbtn {
   background-color: #eee;
 }
 
-.dark .menu:hover .menubtn {}
-
 .menu-label {
   display: inline-block;
   padding: 8px;
@@ -519,6 +550,10 @@ mark.highlight {
   width: calc(100% - 10px);
 }
 
+.menu-textbox.invalid, .dark .menu-textbox.invalid {
+  color: red;
+}
+
 .dark .menu-textbox {
   background-color: #222;
   color: #eee;

diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html
@@ -48,7 +48,7 @@
 <div id="topmostdiv" style="width: 100%; height: 100%">
   <div id="top">
     <div style="float: right; height: 100%;">
-      <div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
+      <div class="hideonprint menu" style="float: right; top: 8px;">
         <button class="menubtn"></button>
         <div class="menu-content">
           <label class="menu-label menu-label-top">
@@ -116,7 +116,7 @@
         </div>
       </div>
       <div class="button-container hideonprint"
-           style="float: right; margin: 10px; position: relative; top: 8px">
+           style="float: right; position: relative; top: 8px">
         <button id="fl-btn" class="left-most-button" onclick="changeCanvasLayout('F')"
                 title="Front only">F
         </button>
@@ -128,15 +128,15 @@
         </button>
       </div>
       <div class="button-container hideonprint"
-           style="float: right; margin: 10px; position: relative; top: 8px">
+           style="float: right; position: relative; top: 8px">
         <button id="bom-btn" class="left-most-button" onclick="changeBomLayout('bom-only')"
                 title="BOM only"></button>
         <button id="lr-btn" class="middle-button" onclick="changeBomLayout('left-right')"
                 title="BOM left, drawings right"></button>
         <button id="tb-btn" class="right-most-button" onclick="changeBomLayout('top-bottom')"
                 title="BOM top, drawings bot"></button>
       </div>
-      <div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
+      <div class="hideonprint menu" style="float: right; top: 8px;">
         <button class="statsbtn"></button>
         <div class="menu-content">
           <table class="stats">
@@ -181,6 +181,33 @@
           </table>
         </div>
       </div>
+      <div class="hideonprint menu" style="float: right; top: 8px;">
+        <button class="iobtn"></button>
+        <div class="menu-content">
+          <label class="menu-label menu-label-top">
+            <div style="margin-left: 5px;">Save board image</div>
+            <div class="flexbox">
+              <input id="render-save-width" class="menu-textbox" type="text" value="1000" placeholder="Width"
+                  style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
+              <span>X</span>
+              <input id="render-save-height" class="menu-textbox" type="text" value="1000" placeholder="Height"
+                  style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
+            </div>
+            <input id="render-save-transparent" type="checkbox">
+            Transparent background
+            <div class="flexbox">
+              <button class="savebtn" onclick="saveImage('F')">Front</button>
+              <button class="savebtn" onclick="saveImage('B')">Back</button>
+            </div>
+          </label>
+          <label class="menu-label">
+            <span style="margin-left: 5px;">Config and checkbox state</span>
+            <div class="flexbox">
+              <button class="savebtn">Export</button>
+              <button class="savebtn">Import</button>
+            </div>
+        </div>
+      </div>
     </div>
     <div id="fileinfodiv" style="overflow: auto;">
       <table class="fileinfo">
@@ -195,7 +222,7 @@
           </tr>
           <tr>
             <td id="company">
-              Kicad version
+              Company
             </td>
             <td id="filedate">
               Date
@@ -208,11 +235,11 @@
   <div id="bot" class="split" style="height: calc(100% - 80px)">
     <div id="bomdiv" class="split split-horizontal">
       <div style="width: 100%">
-        <input id="reflookup" class="searchbox reflookup hideonprint" type="text" placeholder="Ref lookup"
+        <input id="reflookup" class="textbox searchbox reflookup hideonprint" type="text" placeholder="Ref lookup"
                oninput="updateRefLookup(this.value)">
-        <input id="filter" class="searchbox filter hideonprint" type="text" placeholder="Filter"
+        <input id="filter" class="textbox searchbox filter hideonprint" type="text" placeholder="Filter"
                oninput="updateFilter(this.value)">
-        <div class="button-container hideonprint" style="float: left">
+        <div class="button-container hideonprint" style="float: left; margin: 0;">
           <button id="copy" title="Copy bom table to clipboard"
                onclick="copyToClipboard()"></button>
         </div>

diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js
@@ -75,19 +75,16 @@ function setDarkMode(value) {
   redrawIfInitDone();
 }
 
-function layerVisible(visible, frontCavnas, backCanvas, storageString) {
-  var display = (visible) ? "" : "none";
-  frontCavnas.style.display = display;
-  backCanvas.style.display = display;
-  writeStorage(storageString, visible);
-}
-
-function fabricationVisible(visible) {
-  layerVisible(visible, allcanvas.front.fab, allcanvas.back.fab, "fabricationVisible");
+function fabricationVisible(value) {
+  renderFabrication = value;
+  writeStorage("fabricationVisible", value);
+  redrawIfInitDone();
 }
 
-function silkscreenVisible(visible) {
-  layerVisible(visible, allcanvas.front.silk, allcanvas.back.silk, "silkscreenVisible");
+function silkscreenVisible(value) {
+  renderSilkscreen = value;
+  writeStorage("silkscreenVisible", value);
+  redrawIfInitDone();
 }
 
 function setHighlightPin1(value) {

diff --git a/InteractiveHtmlBom/web/render.js b/InteractiveHtmlBom/web/render.js
@@ -5,6 +5,8 @@ var boardRotation = 0;
 var renderPads = true;
 var renderReferences = true;
 var renderValues = true;
+var renderSilkscreen = true;
+var renderFabrication = true;
 var renderDnpOutline = false;
 var renderTracks = true;
 var renderZones = true;
@@ -383,11 +385,16 @@ function drawZones(canvas, layer, color, highlight) {
   }
 }
 
-function clearCanvas(canvas) {
+function clearCanvas(canvas, color = null) {
   var ctx = canvas.getContext("2d");
   ctx.save();
   ctx.setTransform(1, 0, 0, 1, 0, 0);
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (color) {
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  } else {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
   ctx.restore();
 }
 
@@ -416,8 +423,10 @@ function drawNets(canvas, layer, highlight) {
   }
 }
 
-function drawHighlightsOnLayer(canvasdict) {
-  clearCanvas(canvasdict.highlight);
+function drawHighlightsOnLayer(canvasdict, clear = true) {
+  if (clear) {
+    clearCanvas(canvasdict.highlight);
+  }
   if (highlightedModules.length > 0) {
     drawModules(canvasdict.highlight, canvasdict.layer,
       canvasdict.transform.s * canvasdict.transform.zoom, true);
@@ -432,10 +441,12 @@ function drawHighlights() {
   drawHighlightsOnLayer(allcanvas.back);
 }
 
-function drawBackground(canvasdict) {
-  clearCanvas(canvasdict.bg);
-  clearCanvas(canvasdict.fab);
-  clearCanvas(canvasdict.silk);
+function drawBackground(canvasdict, clear = true) {
+  if (clear) {
+    clearCanvas(canvasdict.bg);
+    clearCanvas(canvasdict.fab);
+    clearCanvas(canvasdict.silk);
+  }
 
   drawNets(canvasdict.bg, canvasdict.layer, false);
   drawModules(canvasdict.bg, canvasdict.layer,
@@ -447,18 +458,21 @@ function drawBackground(canvasdict) {
   var edgeColor = style.getPropertyValue('--silkscreen-edge-color');
   var polygonColor = style.getPropertyValue('--silkscreen-polygon-color');
   var textColor = style.getPropertyValue('--silkscreen-text-color');
-  drawBgLayer(
-    "silkscreen", canvasdict.silk, canvasdict.layer,
-    canvasdict.transform.s * canvasdict.transform.zoom,
-    edgeColor, polygonColor, textColor);
-
+  if (renderSilkscreen) {
+    drawBgLayer(
+      "silkscreen", canvasdict.silk, canvasdict.layer,
+      canvasdict.transform.s * canvasdict.transform.zoom,
+      edgeColor, polygonColor, textColor);
+  }
   edgeColor = style.getPropertyValue('--fabrication-edge-color');
   polygonColor = style.getPropertyValue('--fabrication-polygon-color');
   textColor = style.getPropertyValue('--fabrication-text-color');
-  drawBgLayer(
-    "fabrication", canvasdict.fab, canvasdict.layer,
-    canvasdict.transform.s * canvasdict.transform.zoom,
-    edgeColor, polygonColor, textColor);
+  if (renderFabrication) {
+    drawBgLayer(
+      "fabrication", canvasdict.fab, canvasdict.layer,
+      canvasdict.transform.s * canvasdict.transform.zoom,
+      edgeColor, polygonColor, textColor);
+  }
 }
 
 function prepareCanvas(canvas, flip, transform) {
@@ -506,13 +520,7 @@ function applyRotation(bbox) {
   }
 }
 
-function recalcLayerScale(canvasdict) {
-  var canvasdivid = {
-    "F": "frontcanvas",
-    "B": "backcanvas"
-  } [canvasdict.layer];
-  var width = document.getElementById(canvasdivid).clientWidth * devicePixelRatio;
-  var height = document.getElementById(canvasdivid).clientHeight * devicePixelRatio;
+function recalcLayerScale(layerdict, width, height) {
   var bbox = applyRotation(pcbdata.edges_bbox);
   var scalefactor = 0.98 * Math.min(
     width / (bbox.maxx - bbox.minx),
@@ -521,16 +529,16 @@ function recalcLayerScale(canvasdict) {
   if (scalefactor < 0.1) {
     scalefactor = 1;
   }
-  canvasdict.transform.s = scalefactor;
-  var flip = (canvasdict.layer == "B");
+  layerdict.transform.s = scalefactor;
+  var flip = (layerdict.layer == "B");
   if (flip) {
-    canvasdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5;
+    layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5;
   } else {
-    canvasdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5;
+    layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5;
   }
-  canvasdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5;
+  layerdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5;
   for (var c of ["bg", "fab", "silk", "highlight"]) {
-    canvas = canvasdict[c];
+    canvas = layerdict[c];
     canvas.width = width;
     canvas.height = height;
     canvas.style.width = (width / devicePixelRatio) + "px";
@@ -545,7 +553,13 @@ function redrawCanvas(layerdict) {
 }
 
 function resizeCanvas(layerdict) {
-  recalcLayerScale(layerdict);
+  var canvasdivid = {
+    "F": "frontcanvas",
+    "B": "backcanvas"
+  } [layerdict.layer];
+  var width = document.getElementById(canvasdivid).clientWidth * devicePixelRatio;
+  var height = document.getElementById(canvasdivid).clientHeight * devicePixelRatio;
+  recalcLayerScale(layerdict, width, height);
   redrawCanvas(layerdict);
 }