diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css index 5eae5f1f..5a78c321 100644 --- a/InteractiveHtmlBom/web/ibom.css +++ b/InteractiveHtmlBom/web/ibom.css @@ -67,23 +67,26 @@ button:focus { button#tb-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.32 290.12h5.82M1.32 291.45h5.82' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 292.5v4.23M.26 292.63H8.2' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='1.35' y='295.73'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A"); - background-size: 32px 32px; - background-position: 5px 5px; - background-repeat: no-repeat; } button#lr-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.06 290.12H3.7m-2.64 1.33H3.7m-2.64 1.32H3.7m-2.64 1.3H3.7m-2.64 1.33H3.7' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 288.8v7.94m0-4.11h3.96' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='5.11' y='291.96'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A"); - background-size: 32px 32px; - background-position: 5px 5px; - background-repeat: no-repeat; } button#bom-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)' fill='none' stroke='%23000' stroke-width='.4'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' stroke-linejoin='round'/%3E%3Cpath d='M1.59 290.12h5.29M1.59 291.45h5.33M1.59 292.75h5.33M1.59 294.09h5.33M1.59 295.41h5.33'/%3E%3C/g%3E%3C/svg%3E"); - background-size: 32px 32px; - background-position: 5px 5px; - background-repeat: no-repeat; +} + +button#bom-grouped-btn { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m4 0h5m4 0h3M6.1 22h3m3.9 0h5m4 0h4m-16-8h4m4 0h4'/%3E%3Cpath stroke-linecap='null' d='M5 17.5h22M5 26.6h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E"); +} + +button#bom-ungrouped-btn { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m-4 8h3m-3 8h4'/%3E%3Cpath stroke-linecap='null' d='M5 13.5h22m-22 8h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E"); +} + +button#bom-netlist-btn { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23000' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-width='2' d='M6 26l6-6v-8m13.8-6.3l-6 6v8'/%3E%3Ccircle cx='11.8' cy='9.5' r='2.8' stroke-width='2'/%3E%3Ccircle cx='19.8' cy='22.8' r='2.8' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); } button#copy { @@ -138,6 +141,12 @@ textarea.clipboard-temp { filter: invert(1); } +.button-container button { + background-size: 32px 32px; + background-position: 5px 5px; + background-repeat: no-repeat; +} + @media print { .hideonprint { display: none; diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html index 39b9064c..499994ec 100644 --- a/InteractiveHtmlBom/web/ibom.html +++ b/InteractiveHtmlBom/web/ibom.html @@ -136,6 +136,15 @@ +
+ + + +
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js index 3a319661..2ab67c1d 100644 --- a/InteractiveHtmlBom/web/ibom.js +++ b/InteractiveHtmlBom/web/ibom.js @@ -9,6 +9,7 @@ var currentSortOrder = null; var currentHighlightedRowId; var highlightHandlers = []; var moduleIndexToHandler = {}; +var netsToHandler = {}; var highlightedModules = []; var highlightedNet = null; var lastClicked; @@ -165,10 +166,11 @@ function clearHighlightedModules() { document.getElementById(currentHighlightedRowId).classList.remove("highlighted"); currentHighlightedRowId = null; highlightedModules = []; + highlightedNet = null; } } -function createRowHighlightHandler(rowid, refs) { +function createRowHighlightHandler(rowid, refs, net) { return function() { if (currentHighlightedRowId) { if (currentHighlightedRowId == rowid) { @@ -178,12 +180,17 @@ function createRowHighlightHandler(rowid, refs) { } document.getElementById(rowid).classList.add("highlighted"); currentHighlightedRowId = rowid; - highlightedModules = refs.map(r => r[1]); + highlightedModules = refs ? refs.map(r => r[1]) : []; + highlightedNet = net; drawHighlights(); } } function entryMatches(entry) { + if (settings.bommode == "netlist") { + // entry is just a net name + return entry.toLowerCase().indexOf(filter) >= 0; + } // check refs for (var ref of entry[3]) { if (ref[0].toLowerCase().indexOf(filter) >= 0) { @@ -328,46 +335,57 @@ function populateBomHeader() { return 0; } } - for (var checkbox of settings.checkboxes) { - th = createColumnHeader( - checkbox, "bom-checkbox", checkboxCompareClosure(checkbox)); - th.onclick = fancyDblClickHandler( - th, th.onclick.bind(th), checkboxSetUnsetAllHandler(checkbox)); + if (settings.bommode == "netlist") { + th = createColumnHeader("Net name", "bom-netname", (a, b) => { + if (a > b) return -1; + if (a < b) return 1; + return 0; + }); tr.appendChild(th); - } - tr.appendChild(createColumnHeader("References", "References", (a, b) => { - var i = 0; - while (i < a[3].length && i < b[3].length) { - if (a[3][i] != b[3][i]) return a[3][i] > b[3][i] ? 1 : -1; - i++; + } else { + for (var checkbox of settings.checkboxes) { + th = createColumnHeader( + checkbox, "bom-checkbox", checkboxCompareClosure(checkbox)); + th.onclick = fancyDblClickHandler( + th, th.onclick.bind(th), checkboxSetUnsetAllHandler(checkbox)); + tr.appendChild(th); } - return a[3].length - b[3].length; - })); - // Extra fields - if (config.extra_fields.length > 0) { - var extraFieldCompareClosure = function(fieldIndex) { - return (a, b) => { - var fa = a[4][fieldIndex]; - var fb = b[4][fieldIndex]; - if (fa != fb) return fa > fb ? 1 : -1; - else return 0; + tr.appendChild(createColumnHeader("References", "References", (a, b) => { + var i = 0; + while (i < a[3].length && i < b[3].length) { + if (a[3][i] != b[3][i]) return a[3][i] > b[3][i] ? 1 : -1; + i++; + } + return a[3].length - b[3].length; + })); + // Extra fields + if (config.extra_fields.length > 0) { + var extraFieldCompareClosure = function(fieldIndex) { + return (a, b) => { + var fa = a[4][fieldIndex]; + var fb = b[4][fieldIndex]; + if (fa != fb) return fa > fb ? 1 : -1; + else return 0; + } + } + for (var i in config.extra_fields) { + tr.appendChild(createColumnHeader( + config.extra_fields[i], "extra", extraFieldCompareClosure(i))); } } - for (var i in config.extra_fields) { - tr.appendChild(createColumnHeader( - config.extra_fields[i], "extra", extraFieldCompareClosure(i))); + tr.appendChild(createColumnHeader("Value", "Value", (a, b) => { + return valueCompare(a[5], b[5], a[1], b[1]); + })); + tr.appendChild(createColumnHeader("Footprint", "Footprint", (a, b) => { + if (a[2] != b[2]) return a[2] > b[2] ? 1 : -1; + else return 0; + })); + if (settings.bommode == "grouped") { + tr.appendChild(createColumnHeader("Quantity", "Quantity", (a, b) => { + return a[3].length - b[3].length; + })); } } - tr.appendChild(createColumnHeader("Value", "Value", (a, b) => { - return valueCompare(a[5], b[5], a[1], b[1]); - })); - tr.appendChild(createColumnHeader("Footprint", "Footprint", (a, b) => { - if (a[2] != b[2]) return a[2] > b[2] ? 1 : -1; - else return 0; - })); - tr.appendChild(createColumnHeader("Quantity", "Quantity", (a, b) => { - return a[3].length - b[3].length; - })); bomhead.appendChild(tr); } @@ -377,84 +395,115 @@ function populateBomBody() { } highlightHandlers = []; moduleIndexToHandler = {}; + netsToHandler = {}; currentHighlightedRowId = null; var first = true; - switch (settings.canvaslayout) { - case 'F': - bomtable = pcbdata.bom.F; - break; - case 'FB': - bomtable = pcbdata.bom.both; - break; - case 'B': - bomtable = pcbdata.bom.B; - break; + if (settings.bommode == "netlist") { + bomtable = pcbdata.nets.slice(); + } else { + switch (settings.canvaslayout) { + case 'F': + bomtable = pcbdata.bom.F.slice(); + break; + case 'FB': + bomtable = pcbdata.bom.both.slice(); + break; + case 'B': + bomtable = pcbdata.bom.B.slice(); + break; + } + if (settings.bommode == "ungrouped") { + // expand bom table + expandedTable = [] + for (var bomentry of bomtable) { + for (var ref of bomentry[3]) { + expandedTable.push([1, bomentry[1], bomentry[2], [ref], bomentry[4], bomentry[5]]); + } + } + bomtable = expandedTable; + } } if (bomSortFunction) { - bomtable = bomtable.slice().sort(bomSortFunction); + bomtable = bomtable.sort(bomSortFunction); } for (var i in bomtable) { var bomentry = bomtable[i]; if (filter && !entryMatches(bomentry)) { continue; } - var references = bomentry[3]; - if (reflookup) { - references = findRefInEntry(bomentry); - if (references.length == 0) { - continue; - } - } + var references = null; + var netname = null; var tr = document.createElement("TR"); var td = document.createElement("TD"); var rownum = +i + 1; tr.id = "bomrow" + rownum; td.textContent = rownum; tr.appendChild(td); - // Checkboxes - for (var checkbox of settings.checkboxes) { - if (checkbox) { + if (settings.bommode == "netlist") { + netname = bomentry; + td = document.createElement("TD"); + td.innerHTML = highlightFilter(netname ? netname : "<no net>"); + tr.appendChild(td); + } else { + if (reflookup) { + references = findRefInEntry(bomentry); + if (references.length == 0) { + continue; + } + } else { + references = bomentry[3]; + } + // Checkboxes + for (var checkbox of settings.checkboxes) { + if (checkbox) { + td = document.createElement("TD"); + var input = document.createElement("input"); + input.type = "checkbox"; + input.onchange = createCheckboxChangeHandler(checkbox, references); + setBomCheckboxState(checkbox, input, references); + td.appendChild(input); + tr.appendChild(td); + } + } + // References + td = document.createElement("TD"); + td.innerHTML = highlightFilter(references.map(r => r[0]).join(", ")); + tr.appendChild(td); + // Extra fields + for (var i in config.extra_fields) { td = document.createElement("TD"); - var input = document.createElement("input"); - input.type = "checkbox"; - input.onchange = createCheckboxChangeHandler(checkbox, references); - setBomCheckboxState(checkbox, input, references); - td.appendChild(input); + td.innerHTML = highlightFilter(bomentry[4][i]); tr.appendChild(td); } - } - // References - td = document.createElement("TD"); - td.innerHTML = highlightFilter(references.map(r => r[0]).join(", ")); - tr.appendChild(td); - // Extra fields - for (var i in config.extra_fields) { + // Value + td = document.createElement("TD"); + td.innerHTML = highlightFilter(bomentry[1]); + tr.appendChild(td); + // Footprint td = document.createElement("TD"); - td.innerHTML = highlightFilter(bomentry[4][i]); + td.innerHTML = highlightFilter(bomentry[2]); tr.appendChild(td); + if (settings.bommode == "grouped") { + // Quantity + td = document.createElement("TD"); + td.textContent = bomentry[3].length; + tr.appendChild(td); + } } - // Value - td = document.createElement("TD"); - td.innerHTML = highlightFilter(bomentry[1]); - tr.appendChild(td); - // Footprint - td = document.createElement("TD"); - td.innerHTML = highlightFilter(bomentry[2]); - tr.appendChild(td); - // Quantity - td = document.createElement("TD"); - td.textContent = bomentry[3].length; - tr.appendChild(td); bom.appendChild(tr); - var handler = createRowHighlightHandler(tr.id, references); + var handler = createRowHighlightHandler(tr.id, references, netname); tr.onmousemove = handler; highlightHandlers.push({ id: tr.id, handler: handler, - refs: references }); - for (var refIndex of references.map(r => r[1])) { - moduleIndexToHandler[refIndex] = handler; + if (references !== null) { + for (var refIndex of references.map(r => r[1])) { + moduleIndexToHandler[refIndex] = handler; + } + } + if (netname !== null) { + netsToHandler[netname] = handler; } if ((filter || reflookup) && first) { handler(); @@ -519,6 +568,17 @@ function modulesClicked(moduleIndexes) { } } +function netClicked(net) { + if (net in netsToHandler) { + netsToHandler[net](); + smoothScrollToRow(currentHighlightedRowId); + } else { + clearHighlightedModules(); + highlightedNet = net; + drawHighlights(); + } +} + function updateFilter(input) { filter = input.toLowerCase(); populateBomTable(); @@ -555,7 +615,7 @@ function changeCanvasLayout(layout) { settings.canvaslayout = layout; writeStorage("canvaslayout", layout); resizeAll(); - populateBomTable(); + changeBomMode(settings.bommode); } function populateMetadata() { @@ -676,6 +736,31 @@ function changeBomLayout(layout) { changeCanvasLayout(settings.canvaslayout); } +function changeBomMode(mode) { + document.getElementById("bom-grouped-btn").classList.remove("depressed"); + document.getElementById("bom-ungrouped-btn").classList.remove("depressed"); + document.getElementById("bom-netlist-btn").classList.remove("depressed"); + switch (mode) { + case 'grouped': + document.getElementById("bom-grouped-btn").classList.add("depressed"); + break; + case 'ungrouped': + document.getElementById("bom-ungrouped-btn").classList.add("depressed"); + break; + case 'netlist': + document.getElementById("bom-netlist-btn").classList.add("depressed"); + } + writeStorage("bommode", mode); + if (mode != settings.bommode) { + settings.bommode = mode; + bomSortFunction = null; + currentSortColumn = null; + currentSortOrder = null; + clearHighlightedModules(); + } + populateBomTable(); +} + function focusFilterField() { focusInputField(document.getElementById("filter")); } @@ -822,6 +907,12 @@ document.onkeydown = function(e) { } } +function hideNetlistButton() { + document.getElementById("bom-ungrouped-btn").classList.remove("middle-button"); + document.getElementById("bom-ungrouped-btn").classList.add("right-most-button"); + document.getElementById("bom-netlist-btn").style.display = "none"; +} + window.onload = function(e) { initUtils(); initRender(); @@ -834,6 +925,9 @@ window.onload = function(e) { bomhead = document.getElementById("bomhead"); filter = ""; reflookup = ""; + if (!("nets" in pcbdata)) { + hideNetlistButton(); + } initDone = true; prepCheckboxes(); // Triggers render diff --git a/InteractiveHtmlBom/web/render.js b/InteractiveHtmlBom/web/render.js index fdd521b8..19a4eb14 100644 --- a/InteractiveHtmlBom/web/render.js +++ b/InteractiveHtmlBom/web/render.js @@ -419,11 +419,11 @@ function drawHighlightsOnLayer(canvasdict, clear = true) { if (highlightedModules.length > 0) { drawModules(canvasdict.highlight, canvasdict.layer, canvasdict.transform.s * canvasdict.transform.zoom, true); - } + } if (highlightedNet !== null) { drawNets(canvasdict.highlight, canvasdict.layer, true); - } -} + } +} function drawHighlights() { drawHighlightsOnLayer(allcanvas.front); @@ -682,9 +682,7 @@ function handleMouseClick(e, layerdict) { if ("nets" in pcbdata) { var net = netHitScan(layerdict.layer, ...v); if (net !== highlightedNet) { - highlightedNet = net; - clearHighlightedModules(); - drawHighlights(); + netClicked(net); } } if (highlightedNet === null) { diff --git a/InteractiveHtmlBom/web/util.js b/InteractiveHtmlBom/web/util.js index dcecca12..6036c583 100644 --- a/InteractiveHtmlBom/web/util.js +++ b/InteractiveHtmlBom/web/util.js @@ -280,7 +280,7 @@ function saveImage(layer) { bgcolor = style.getPropertyValue("background-color"); } if (!width || !height) return; - + // Prepare image var canvas = document.createElement("canvas"); var layerdict = { @@ -375,8 +375,9 @@ function loadSettings() { function overwriteSettings(newSettings) { initDone = false; - settings = newSettings; + Object.assign(settings, newSettings); writeStorage("bomlayout", settings.bomlayout); + writeStorage("bommode", settings.bommode); writeStorage("canvaslayout", settings.canvaslayout); writeStorage("bomCheckboxes", settings.checkboxes.join(",")); document.getElementById("bomCheckboxes").value = settings.checkboxes.join(","); @@ -433,6 +434,7 @@ function dataURLtoBlob(dataurl) { var settings = { canvaslayout: "default", bomlayout: "default", + bommode: "grouped", checkboxes: [], checkboxStoredRefs: {}, darkMode: false, @@ -457,6 +459,13 @@ function initDefaults() { if (!['bom-only', 'left-right', 'top-bottom'].includes(settings.bomlayout)) { settings.bomlayout = config.bom_view; } + settings.bommode = readStorage("bommode"); + if (settings.bommode === null) { + settings.bommode = "grouped"; + } + if (!["grouped", "ungrouped", "netlist"].includes(settings.bommode)) { + settings.bommode = "grouped"; + } settings.canvaslayout = readStorage("canvaslayout"); if (settings.canvaslayout === null) { settings.canvaslayout = config.layer_view; diff --git a/icons/bom-grouped-32px.svg b/icons/bom-grouped-32px.svg new file mode 100644 index 00000000..e4c73cd9 --- /dev/null +++ b/icons/bom-grouped-32px.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/icons/bom-netlist-32px.svg b/icons/bom-netlist-32px.svg new file mode 100644 index 00000000..350df2b0 --- /dev/null +++ b/icons/bom-netlist-32px.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/icons/bom-ungrouped-32px.svg b/icons/bom-ungrouped-32px.svg new file mode 100644 index 00000000..9fb2d594 --- /dev/null +++ b/icons/bom-ungrouped-32px.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file