Pinouts pages merged (#2329)

* try adding z flag (resume) * modify pinout gen to put all connectors in one page * modify script to call append * modify gen.sh to match usage of append.sh * fix indents and add brs * fix zoom issues
2021-02-10 17:52:19 -06:00 · 2021-02-10 17:52:19 -06:00 · 3cca8df571
parent 6385859cc8
commit 3cca8df571
6 changed files with 120 additions and 93 deletions
--- a/misc/jenkins/generate_pinouts/gen_upload_pinouts.sh
+++ b/misc/jenkins/generate_pinouts/gen_upload_pinouts.sh
@ -8,8 +8,12 @@ for c in $CONNECTORS; do
  NAME=$(basename $c .yaml)
  echo "NAME "$NAME
  mkdir -p $DIR
-  bash misc/pinout-gen/gen.sh $c > $DIR/$NAME.html
-  file $DIR/$NAME.html
+  if [ -f $DIR/index.html ]; then
+    bash misc/pinout-gen/append.sh $c $DIR/index.html
+  else
+    bash misc/pinout-gen/gen.sh $c $DIR/index.html
+  fi
+  file $DIR/index.html
  IMG=$(yq r $c 'info.image.file')
  echo "IMG "$IMG
  if [ $IMG ]; then
--- a/misc/pinout-gen/append.sh
+++ b/misc/pinout-gen/append.sh
@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)"/"
+TEXT=$(sed -e "/\/\/\/DATA\/\/\//{a \ \`" -e "r $1"  -e "a \ \`,\n///DATA///" -e "d}" $2)
+echo "$TEXT" > $2
--- a/misc/pinout-gen/gen.sh
+++ b/misc/pinout-gen/gen.sh
@ -1,4 +1,5 @@
 #!/usr/bin/env bash

 DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)"/"
-sed -e "/###CSS###/{r ${DIR}style.css" -e 'd}' -e "/###JS###/{r ${DIR}script.js" -e 'd}' ${DIR}pinout.html | sed -e "/###DATA###/{r $1" -e 'd}'
+TEXT=$(sed -e "/###CSS###/{r ${DIR}style.css" -e 'd}' -e "/###JS###/{r ${DIR}script.js" -e 'd}' ${DIR}pinout.html | sed -e "/\/\/\/DATA\/\/\//{a \ \`" -e "r $1"  -e "a \ \`,\n///DATA///" -e "d}")
+echo "$TEXT" > $2
--- a/misc/pinout-gen/pinout.html
+++ b/misc/pinout-gen/pinout.html
@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>

@ -16,12 +17,6 @@
  <div class="pin-marker"></div>
 </template>

-<div id="connector-container">
-  <div id="connector-div">
-    <img id="connector-img"></img>
-  </div>
-</div>
-
 <template id="table-template">
  <tr class="data">
    <td class="pin-data"></td>
@ -32,39 +27,52 @@
  </tr>
 </template>

-<table id="info-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>
+<template id="connector-template">
+  <div class="container">
+    <div class="connector-container">
+      <div class="connector-div">
+        <img class="connector-img"></img>
+      </div>
+    </div>
+    <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>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>

-<br/>
-<br/>
-<br/>
-<br/>
+    <br/>
+    <br/>
+    <br/>
+    <br/>

-<h2>Full Pinout Table</h2>
-<table id="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>
+    <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>
+</template>

 </body>
 </html>
--- a/misc/pinout-gen/script.js
+++ b/misc/pinout-gen/script.js
@ -1,6 +1,6 @@
-var connectorYaml = `
-###DATA###
-`;
+var connectorYaml = [
+///DATA///
+];

 function addRow(table, pin, pdiv) {
  var template = document.getElementById("table-template");
@ -22,8 +22,7 @@ function addRow(table, pin, pdiv) {
  table.appendChild(clone);
 }

-function clickPin(pin, pdiv) {
-  var table = document.getElementById("info-table").querySelector("tbody");
+function clickPin(table, pin, pdiv) {
  table.innerHTML = "";
  if (Array.isArray(pin.id)) {
    var pinIds = pin.id.filter((value, index) => {
@ -47,56 +46,67 @@ function clickPin(pin, pdiv) {
  pdiv.classList.add("selected");
 }

-function adjustMarkers() {
-  var cdiv = document.getElementById("connector-div");
-  cdiv.style.width = document.getElementById("connector-img").clientWidth;
-  var pins = document.querySelectorAll(".pin-marker");
-  for (var i = 0; i < pins.length; i++) {
-    var height = cdiv.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";
+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() {
-  var connector = YAML.parse(connectorYaml);
-  document.getElementById("connector-img").addEventListener('load', function() {
-    for (var i = 0; i < connector.pins.length; i++) {
-      var pin = connector.pins[i];
-      if (!pin.pin) {
-        continue;
-      }
-      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;
-        }
-      }
-      var cdiv = document.getElementById("connector-div");
-      var template = document.getElementById("pin-template");
-      var clone = template.content.cloneNode(true);
-      var pdiv = clone.querySelector("div");
-      var img = document.getElementById("connector-img");
+  for (var c = 0; c < connectorYaml.length; c++) {
+    var connector = YAML.parse(connectorYaml[c]);
+    var template = document.getElementById("connector-template");
+    var clone = template.content.cloneNode(true);
+    document.body.appendChild(clone);
+    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;
      var imgWidth = img.naturalWidth;
-      pdiv.textContent = pinfo.pin;
-      pdiv.style.top = ((pinfo.y / imgHeight) * 100) + "%";
-      pdiv.style.left = ((pinfo.x / imgWidth) * 100) + "%";
-      pdiv.dataset.type = pin.type;
-      pdiv.addEventListener("click", function(pin, pdiv) {
-        clickPin(pin, pdiv);
-      }.bind(null, pin, pdiv));
-      cdiv.appendChild(pdiv);
-      var fullTable = document.getElementById("pinout-table").querySelector("tbody");
-      addRow(fullTable, connector.pins[i], pdiv);
-    }
-    adjustMarkers();
-  });
-  document.getElementById("connector-img").src = connector.info.image.file;
+      var table = sdiv.querySelector(".info-table").querySelector("tbody");
+      var fullTable = sdiv.querySelector(".pinout-table").querySelector("tbody");
+      for (var i = 0; i < connector.pins.length; i++) {
+        var pin = connector.pins[i];
+        if (!pin.pin) {
+          continue;
+        }
+        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;
+          }
+        }
+        var pclone = ptemplate.content.cloneNode(true);
+        var pdiv = pclone.querySelector("div");
+        pdiv.textContent = pinfo.pin;
+        pdiv.style.top = ((pinfo.y / imgHeight) * 100) + "%";
+        pdiv.style.left = ((pinfo.x / imgWidth) * 100) + "%";
+        pdiv.dataset.type = pin.type;
+        pdiv.addEventListener("click", function(table, pin, pdiv) {
+          clickPin(table, pin, pdiv);
+        }.bind(null, table, pin, pdiv));
+        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() {
--- a/misc/pinout-gen/style.css
+++ b/misc/pinout-gen/style.css
@ -25,20 +25,19 @@
  background-color: #fc935a;
 }

-#connector-container {
+.connector-container {
  width: 100%;
-  height: 50%;
  overflow-x: scroll;
  position: relative;
 }

-#connector-div {
+.connector-div {
  height: 100%;
  position: relative;
  z-index: 0;
 }

-#connector-img {
+.connector-img {
  height: 100%;
  z-index: 0;
 }