From 5c2fdb6a00b45db1b617143fd7c5c9de3e321b37 Mon Sep 17 00:00:00 2001 From: David Holdeman Date: Sat, 27 Feb 2021 19:15:15 -0600 Subject: [PATCH] Interactive Pinout printing (#2411) * initial print css * more print layout changes, and better zoom support * oopsies * more improvements maybe * please don't grow * color cells * fettling * fettling * fettling * fettling * keep image from getting too big * try auto * hmm * rounded * try auto sizing * bugfix * It verks? * make em bigger * bugfix * auto sizing --- misc/pinout-gen/pinout.html | 48 ++++++++++------------- misc/pinout-gen/script.js | 51 +++++++++++++------------ misc/pinout-gen/style.css | 76 +++++++++++++++++++++++++++++++++++-- 3 files changed, 119 insertions(+), 56 deletions(-) diff --git a/misc/pinout-gen/pinout.html b/misc/pinout-gen/pinout.html index b41ddb017f..50bf978b29 100644 --- a/misc/pinout-gen/pinout.html +++ b/misc/pinout-gen/pinout.html @@ -37,40 +37,32 @@ - - - - - + + + + +
Pin NumberFirmware IDTypeTypical FunctionPigtail ColorPin NumberFirmware IDTypeTypical FunctionPigtail Color
- -
-
-
-
-

Full Pinout Table

- - - - - - - - - - - - -
Pin NumberFirmware IDTypeTypical FunctionPigtail Color
-
-
-
-
+
+ + + + + + + + + + + + +
Pin NumberFirmware IDTypeTypical FunctionPigtail Color
+
diff --git a/misc/pinout-gen/script.js b/misc/pinout-gen/script.js index 774f39bc64..736749faa9 100644 --- a/misc/pinout-gen/script.js +++ b/misc/pinout-gen/script.js @@ -12,6 +12,7 @@ function addRow(table, pin, pdiv) { var fdata = clone.querySelector(".function-data"); var cdata = clone.querySelector(".color-data"); pdata.textContent = pin.pin; + pdata.dataset.type = pin.type; idata.textContent = pin.id; tdata.textContent = pin.type fdata.textContent = pin.function; @@ -46,22 +47,6 @@ function clickPin(table, pin, pdiv) { pdiv.classList.add("selected"); } -function adjustMarkers(cdiv) { - var cdiv = document.querySelectorAll(".connector-div"); - for (var c = 0; c < cdiv.length; c++) { - cdiv[c].style.width = cdiv[c].querySelector(".connector-img").clientWidth + "px"; - var pins = cdiv[c].querySelectorAll(".pin-marker"); - for (var i = 0; i < pins.length; i++) { - var height = cdiv[c].clientHeight * 0.05; - pins[i].style.height = height + "px"; - pins[i].style.width = height + "px"; - pins[i].style.marginTop = "-" + (height * 0.5) + "px"; - pins[i].style.marginLeft = "-" + (height * 0.5) + "px"; - pins[i].style.fontSize = (height * 0.5) + "px"; - } - } -} - window.addEventListener('load', function() { for (var c = 0; c < connectorYaml.length; c++) { var connector = YAML.parse(connectorYaml[c]); @@ -71,8 +56,6 @@ window.addEventListener('load', function() { var sdiv = document.body.lastChild.previousSibling; var img = sdiv.querySelector(".connector-img"); img.addEventListener('load', function(connector, sdiv, img) { - var ccont = sdiv.querySelector(".connector-container"); - ccont.style.height = (document.documentElement.clientHeight / 2) + 'px'; var cdiv = sdiv.querySelector(".connector-div"); var ptemplate = document.getElementById("pin-template"); var imgHeight = img.naturalHeight; @@ -84,13 +67,22 @@ window.addEventListener('load', function() { if (!pin.pin) { continue; } - var pinfo; + var pinfo = {}; for (var ii = 0; ii < connector.info.pins.length; ii++) { if (connector.info.pins[ii].pin == pin.pin) { pinfo = connector.info.pins[ii]; break; } } + if (!pinfo.x) continue; + var closest = 1000000; + for (var ii = 0; ii < connector.info.pins.length; ii++) { + var tinfo = connector.info.pins[ii]; + var distance = Math.pow((tinfo.x - pinfo.x), 2) + Math.pow((tinfo.y - pinfo.y), 2); + if (tinfo.pin != pin.pin && (!closest || distance < closest)) { + closest = distance; + } + } var pclone = ptemplate.content.cloneNode(true); var pdiv = pclone.querySelector("div"); pdiv.textContent = pinfo.pin; @@ -100,15 +92,26 @@ window.addEventListener('load', function() { pdiv.addEventListener("click", function(table, pin, pdiv) { clickPin(table, pin, pdiv); }.bind(null, table, pin, pdiv)); + closest = Math.sqrt(closest); + var divheight = cdiv.clientHeight; + var divwidth = cdiv.clientWidth; + var mult = cdiv.querySelector("img").naturalHeight / divheight; + var newheight = (closest / mult) + var pxheight = divheight * 0.08; + if (newheight < pxheight) { + pxheight = newheight - 6; + } + var height = (pxheight / divheight) * 100; + var width = (pxheight / divwidth) * 100; + pdiv.style.height = height + "%"; + pdiv.style.width = width + "%"; + pdiv.style.marginTop = "-" + (width / 2) + "%"; + pdiv.style.marginLeft = "-" + (width / 2) + "%"; + pdiv.style.fontSize = (height / 7.5) + "vw"; cdiv.appendChild(pdiv); addRow(fullTable, connector.pins[i], pdiv); } - adjustMarkers(); }.bind(null, connector, sdiv, img)); img.src = connector.info.image.file; } }); - -window.addEventListener('resize', function() { - adjustMarkers(); -}); diff --git a/misc/pinout-gen/style.css b/misc/pinout-gen/style.css index f1b1bd68e7..2f85cadc70 100644 --- a/misc/pinout-gen/style.css +++ b/misc/pinout-gen/style.css @@ -3,7 +3,7 @@ z-index: 1; border-radius: 50%; background-color: white; - border: 3px black solid; + border: 0.21vw black solid; cursor: pointer; color: black; text-align: center; @@ -118,17 +118,19 @@ width: 100%; overflow-x: scroll; position: relative; + height: max(3in, 50vh); } .connector-div { height: 100%; position: relative; z-index: 0; + width: max-content; } .connector-img { height: 100%; - z-index: 0; + min-width: 100%; } table { @@ -154,8 +156,14 @@ table tbody tr { cursor: pointer; } +@media screen { + td.pin-data { + border-color: black; + } +} + table td, table th { - border: 1px solid black; + border: 1px solid black; padding: 8px; } @@ -181,12 +189,16 @@ table th { color: white; } + td.pin-data { + border: 1px solid #ddd; + } + table td, table th { border: 1px solid #ddd; } table th { - color: white + color: white; } table tr:nth-child(even){ @@ -199,3 +211,59 @@ table th { } } +@media print { + .container { + height: 99vh; + display: flex; + flex-direction: column; + } + .info-table, .id-data, .id-header, .type-data, .type-header, .color-data, .color-header, thead { + display: none; + } + .connector-container { + flex: 0 1 auto; + height: unset; + min-height: 2in; + } + .connector-div { + max-width: 100%; + height: unset; + } + .connector-img { + max-width: 100% !important; + max-height: 3in; + } + h2 { + font-size: 14px; + } + th { + font-size: 12px; + } + td { + font-size: 10px; + } + td:not(.pin-data) { + border: none !important; + } + td.pin-data { + border-width: 3px; + border-radius: 10px; + width: 10px; + margin: 0px; + padding: 0px; + } + html, tr { + background-color: white !important; + color: black !important; + } + table { + width: auto; + border-collapse: separate; + } + .table-wrapper { + column-count: 4; + } + table, tbody, tr { + display: block; + } +}