From bcc106342222084885339d0ea29c5e452f08b54d Mon Sep 17 00:00:00 2001 From: qu1ck Date: Sun, 17 Nov 2019 20:25:34 -0800 Subject: [PATCH] Implement image export Fixes #110 --- InteractiveHtmlBom/web/ibom.css | 51 ++++++++++++++++---- InteractiveHtmlBom/web/ibom.html | 43 +++++++++++++---- InteractiveHtmlBom/web/ibom.js | 19 ++++---- InteractiveHtmlBom/web/render.js | 76 +++++++++++++++++------------- InteractiveHtmlBom/web/util.js | 80 ++++++++++++++++++++++++++++++++ icons/io-36px.svg | 4 ++ 6 files changed, 215 insertions(+), 58 deletions(-) create mode 100644 icons/io-36px.svg diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css index f9eca784..1b8c0106 100644 --- 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 index 8362389d..cb4129a4 100644 --- a/InteractiveHtmlBom/web/ibom.html +++ b/InteractiveHtmlBom/web/ibom.html @@ -48,7 +48,7 @@
-
+
+ style="float: right; position: relative; top: 8px"> @@ -128,7 +128,7 @@
+ style="float: right; position: relative; top: 8px">
-
+
@@ -181,6 +181,33 @@
+
+ +
+ +
+
@@ -195,7 +222,7 @@
- Kicad version + Company Date @@ -208,11 +235,11 @@
- - -
+
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js index d2d51b31..8501e68c 100644 --- 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 index 4d817aa4..7b2a2df1 100644 --- 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); } diff --git a/InteractiveHtmlBom/web/util.js b/InteractiveHtmlBom/web/util.js index 79565dc3..14940c9d 100644 --- a/InteractiveHtmlBom/web/util.js +++ b/InteractiveHtmlBom/web/util.js @@ -253,3 +253,83 @@ function valueCompare(a, b, stra, strb) { else return 0; } } + +function validateSaveImgDimension(element) { + var valid = false; + var intValue = 0; + if (/^[1-9]\d*$/.test(element.value)) { + intValue = parseInt(element.value); + if (intValue <= 16000) { + valid = true; + } + } + if (valid) { + element.classList.remove("invalid"); + } else { + element.classList.add("invalid"); + } + return intValue; +} + +function saveImage(layer) { + var width = validateSaveImgDimension(document.getElementById("render-save-width")); + var height = validateSaveImgDimension(document.getElementById("render-save-height")); + var bgcolor = null; + if (!document.getElementById("render-save-transparent").checked) { + var style = getComputedStyle(topmostdiv); + bgcolor = style.getPropertyValue("background-color"); + } + if (!width || !height) return; + + // Prepare image + var canvas = document.createElement("canvas"); + var layerdict = { + transform: { + x: 0, + y: 0, + s: 1, + panx: 0, + pany: 0, + zoom: 1, + }, + bg: canvas, + fab: canvas, + silk: canvas, + highlight: canvas, + layer: layer, + } + // Do the rendering + recalcLayerScale(layerdict, width, height); + prepareLayer(layerdict); + clearCanvas(canvas, bgcolor); + drawBackground(layerdict, false); + drawHighlightsOnLayer(layerdict, false); + + // Save image + var imgdata = canvas.toDataURL("image/png"); + + var filename = pcbdata.metadata.title; + if (pcbdata.metadata.revision) { + filename += `.${pcbdata.metadata.revision}`; + } + filename += `.${layer}.png`; + saveFile(filename, imgdata); +} + +function saveFile(filename, data) { + var link = document.createElement("a"); + var blob = dataURLtoBlob(data); + var objurl = URL.createObjectURL(blob); + link.download = filename; + link.href = objurl; + link.click(); +} + +function dataURLtoBlob(dataurl) { + var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); + while(n--){ + u8arr[n] = bstr.charCodeAt(n); + } + return new Blob([u8arr], {type:mime}); +} diff --git a/icons/io-36px.svg b/icons/io-36px.svg new file mode 100644 index 00000000..b30e30e9 --- /dev/null +++ b/icons/io-36px.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file