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

@@ -37,40 +37,32 @@
     <table class="info-table">
       <thead>
         <tr>
-          <th>Pin Number</th>
-          <th>Firmware ID</th>
-          <th>Type</th>
-          <th>Typical Function</th>
-          <th>Pigtail Color</th>
+          <th class="pin-header">Pin Number</th>
+          <th class="id-header">Firmware ID</th>
+          <th class="type-header">Type</th>
+          <th class="function-header">Typical Function</th>
+          <th class="color-header">Pigtail Color</th>
         </tr>
       </thead>
       <tbody>
       </tbody>
     </table>
-
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-
     <h2>Full Pinout Table</h2>
-    <table class="pinout-table">
-      <thead>
-        <tr>
-          <th>Pin Number</th>
-          <th>Firmware ID</th>
-          <th>Type</th>
-          <th>Typical Function</th>
-          <th>Pigtail Color</th>
-        </tr>
-      </thead>
-      <tbody>
-      </tbody>
-    </table>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
+    <div class="table-wrapper">
+      <table class="pinout-table">
+        <thead>
+          <tr>
+            <th class="pin-header">Pin Number</th>
+            <th class="id-header">Firmware ID</th>
+            <th class="type-header">Type</th>
+            <th class="function-header">Typical Function</th>
+            <th class="color-header">Pigtail Color</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 

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();
-});

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;
+  }
+}