From f5fc824afb9d6d383a45b122f192f1c32675881d Mon Sep 17 00:00:00 2001 From: David Holdeman Date: Mon, 1 Feb 2021 17:31:36 -0600 Subject: [PATCH] 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 | 6 +- .../hellen/hellen128/connectors/main.yaml | 2 +- .../generate_doxygen/gen_upload_docs.sh | 29 ++--- misc/pinout-gen/script.js | 121 +++++++++--------- misc/pinout-gen/style.css | 9 ++ 5 files changed, 91 insertions(+), 76 deletions(-) diff --git a/.github/workflows/gen-docs.yaml b/.github/workflows/gen-docs.yaml index bbe184be1f..8047c7f206 100644 --- a/.github/workflows/gen-docs.yaml +++ b/.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: diff --git a/firmware/config/boards/hellen/hellen128/connectors/main.yaml b/firmware/config/boards/hellen/hellen128/connectors/main.yaml index b93139f2c0..d7b821a4e7 100644 --- a/firmware/config/boards/hellen/hellen128/connectors/main.yaml +++ b/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 diff --git a/misc/jenkins/generate_doxygen/gen_upload_docs.sh b/misc/jenkins/generate_doxygen/gen_upload_docs.sh index f2cc17e123..76b321567d 100644 --- a/misc/jenkins/generate_doxygen/gen_upload_docs.sh +++ b/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" diff --git a/misc/pinout-gen/script.js b/misc/pinout-gen/script.js index d1c0316097..397da9a232 100644 --- a/misc/pinout-gen/script.js +++ b/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() { diff --git a/misc/pinout-gen/style.css b/misc/pinout-gen/style.css index 2d78d07317..594b6d8398 100644 --- a/misc/pinout-gen/style.css +++ b/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; + } }