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 Number |
- Firmware ID |
- Type |
- Typical Function |
- Pigtail Color |
+
+
+
+
+
-
-
-
-
-
-
Full Pinout Table
-
-
-
- Pin Number |
- Firmware ID |
- Type |
- Typical Function |
- Pigtail 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;
+ }
+}