Pinouts Improvements (#2263)

* redo pinout generation in ci script

* missing operand

* fix some errors

* copy yaml

* more bugs

* fix bug

* wait for image to load

* set background color for hover in dark theme

* add feature: click on rows to select pin

* change cursor to pointer

* undo accidental submodule bump

* oops

.github/workflows/gen-docs.yaml

@@ -14,11 +14,13 @@ jobs:
         submodules: recursive
         fetch-depth: 0
 
-    - name: Install ncftp, kicad, and doxygen
+    - name: Install ncftp, kicad, doxygen, and yq
       run: |
+        sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
+        sudo add-apt-repository ppa:rmescandon/yq
         sudo add-apt-repository ppa:kicad/kicad-5.1-releases
         sudo apt-get update
-        sudo apt-get install ncftp kicad doxygen
+        sudo apt-get install ncftp kicad doxygen yq
 
     - name: Set FTP variables
       env:

firmware/config/boards/hellen/hellen128/connectors/main.yaml

@@ -258,7 +258,7 @@ pins:
     type: inj
 
   - pin: E4
-    function: 230: 1.5A low side VVT solenoid / 430 injector output 4
+    function: "230: 1.5A low side VVT solenoid / 430 injector output 4"
     type: inj
 
   - pin: E5

misc/jenkins/generate_doxygen/gen_upload_docs.sh

@@ -24,23 +24,20 @@ if [ -n "$RUSEFI_FTP_SERVER" ]; then
 fi
 [ $? -eq 0 ] || { echo "upload FAILED"; exit 1; }
 
-# I should make this automatic, but that would require reading the image file from the yaml, which I don't feel like doing right now
 cd ..
-mkdir pinouts
-mkdir pinouts/proteus
-bash misc/pinout-gen/gen.sh firmware/config/boards/proteus/black23.yaml > pinouts/proteus/black23.html
-cp firmware/config/boards/proteus/connectors/black23.jpg pinouts/proteus/black23.jpg
-bash misc/pinout-gen/gen.sh firmware/config/boards/proteus/black35.yaml > pinouts/proteus/black35.html
-cp firmware/config/boards/proteus/connectors/black35.jpg pinouts/proteus/black35.jpg
-bash misc/pinout-gen/gen.sh firmware/config/boards/proteus/white35.yaml > pinouts/proteus/white35.html
-cp firmware/config/boards/proteus/connectors/black35.jpg pinouts/proteus/white35.jpg
-mkdir pinouts/hellen
-mkdir pinouts/hellen/hellen72
-bash misc/pinout-gen/gen.sh firmware/config/boards/hellen/hellen72/main.yaml > pinouts/hellen/hellen72/main.html
-cp firmware/config/boards/hellen/hellen72/connectors/main.jpg pinouts/hellen/hellen72/main.jpg
-mkdir pinouts/hellen/hellen128
-bash misc/pinout-gen/gen.sh firmware/config/boards/hellen/hellen128/main.yaml > pinouts/hellen/hellen128/main.html
-cp firmware/config/boards/hellen/hellen128/connectors/main.jpg pinouts/hellen/hellen128/main.jpg
+
+CONNECTORS=$(find -path "./firmware/config/boards/*/connectors/*.yaml")
+for c in $CONNECTORS; do
+  DIR="pinouts/"$(echo $c | tr '/' '\n' | tail -n +5 | head -n -2 | tr '\n' '/')
+  NAME=$(basename $c .yaml)
+  mkdir -p $DIR
+  bash misc/pinout-gen/gen.sh $c > $DIR/$NAME.html
+  IMG=$(yq r $c 'info.image.file')
+  if [ $IMG ]; then
+    cp $(dirname $c)/$IMG $DIR
+  fi
+  cp misc/pinout-gen/yaml.min.js $DIR
+done
 
 if [ -n "$RUSEFI_FTP_SERVER" ]; then
   echo "Uploading Pinouts"

misc/pinout-gen/script.js

@@ -2,22 +2,51 @@ var connectorYaml = `
 ###DATA###
 `;
 
-function addRow(table, info) {
+function addRow(table, pin, pdiv) {
   var template = document.getElementById("table-template");
   var clone = template.content.cloneNode(true);
+  var row = clone.querySelector(".data");
   var pdata = clone.querySelector(".pin-data");
   var idata = clone.querySelector(".id-data");
   var tdata = clone.querySelector(".type-data");
   var fdata = clone.querySelector(".function-data");
   var cdata = clone.querySelector(".color-data");
-  pdata.textContent = info.pin;
-  idata.textContent = info.id;
-  tdata.textContent = info.type
-  fdata.textContent = info.function;
-  cdata.textContent = info.color
+  pdata.textContent = pin.pin;
+  idata.textContent = pin.id;
+  tdata.textContent = pin.type
+  fdata.textContent = pin.function;
+  cdata.textContent = pin.color
+  row.addEventListener('click', function(pin, pdiv) {
+    clickPin(pin, pdiv);
+  }.bind(null, pin, pdiv));
   table.appendChild(clone);
 }
 
+function clickPin(pin, pdiv) {
+  var table = document.getElementById("info-table").querySelector("tbody");
+  table.innerHTML = "";
+  if (Array.isArray(pin.id)) {
+    var pinIds = pin.id.filter((value, index) => {
+      return pin.id.indexOf(value) === index;
+    });
+    for (var i = 0; i < pinIds.length; i++) {
+      addRow(table, {pin: pin.pin, id: pinIds[i], function: pin.function}, pdiv);
+    }
+  } else {
+    addRow(table, pin, pdiv);
+  }
+  var pins = document.querySelectorAll(".pin-marker");
+  for (var i = 0; i < pins.length; i++) {
+    if (pins[i].dataset.type == pin.type) {
+      pins[i].classList.add("highlight");
+    } else {
+      pins[i].classList.remove("highlight");
+    }
+    pins[i].classList.remove("selected");
+  }
+  pdiv.classList.add("selected");
+}
+
 function adjustMarkers() {
   var cdiv = document.getElementById("connector-div");
   cdiv.style.width = document.getElementById("connector-img").clientWidth;
@@ -34,60 +63,38 @@ function adjustMarkers() {
 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");
+      var imgHeight = img.naturalHeight;
+      var imgWidth = img.naturalWidth;
+      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;
-
-  for (var i = 0; i < connector.pins.length; i++) {
-    var pin = connector.pins[i];
-    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");
-    var imgHeight = img.naturalHeight;
-    var imgWidth = img.naturalWidth;
-    pdiv.style.top = ((pinfo.y / imgHeight) * 100) + "%";
-    pdiv.style.left = ((pinfo.x / imgWidth) * 100) + "%";
-    pdiv.dataset.type = pin.type;
-    pdiv.addEventListener("click", function(pin, div) {
-      var table = document.getElementById("info-table").querySelector("tbody");
-      table.innerHTML = "";
-      if (Array.isArray(pin.id)) {
-        var pinIds = pin.id.filter((value, index) => {
-          return pin.id.indexOf(value) === index;
-        });
-        for (var i = 0; i < pinIds.length; i++) {
-          addRow(table, {pin: pin.pin, id: pinIds[i], function: pin.function});
-        }
-      } else {
-        addRow(table, pin);
-      }
-      var pins = document.querySelectorAll(".pin-marker");
-      for (var i = 0; i < pins.length; i++) {
-        if (pins[i].dataset.type == pin.type) {
-          pins[i].classList.add("highlight");
-        } else {
-          pins[i].classList.remove("highlight");
-        }
-        pins[i].classList.remove("selected");
-      }
-      div.classList.add("selected");
-    }.bind(null, pin, pdiv));
-    cdiv.appendChild(pdiv);
-  }
-
-  for (var i = 0; i < connector.pins.length; i++) {
-    var table = document.getElementById("pinout-table").querySelector("tbody");
-    addRow(table, connector.pins[i]);
-  }
 });
 
 window.addEventListener('resize', function() {

misc/pinout-gen/style.css

@@ -4,6 +4,7 @@
   border-radius: 50%;
   background-color: white;
   border: 2px blue solid;
+  cursor: pointer;
 }
 
 .pin-marker:hover {
@@ -55,6 +56,10 @@ table {
   }
 }
 
+table tbody tr {
+  cursor: pointer;
+}
+
 table td, table th {
   border: 1px solid black;
   padding: 8px;
@@ -94,5 +99,9 @@ table th {
     background-color: #230c00;
     color: white;
   }
+
+  table tr:hover {
+    background-color: #f15a24;
+  }
 }