diff --git a/misc/jenkins/generate_pinouts/gen_upload_pinouts.sh b/misc/jenkins/generate_pinouts/gen_upload_pinouts.sh index 8802419b67..a3f09a158b 100644 --- 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 diff --git a/misc/pinout-gen/append.sh b/misc/pinout-gen/append.sh new file mode 100644 index 0000000000..68ae4b1883 --- /dev/null +++ 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 diff --git a/misc/pinout-gen/gen.sh b/misc/pinout-gen/gen.sh index cb930aaad2..a7bc2da38a 100644 --- 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 diff --git a/misc/pinout-gen/pinout.html b/misc/pinout-gen/pinout.html index c1d1c40d3d..b41ddb017f 100644 --- a/misc/pinout-gen/pinout.html +++ b/misc/pinout-gen/pinout.html @@ -1,3 +1,4 @@ + @@ -16,12 +17,6 @@
-
-
- -
-
- - - - - - - - - - - - - -
Pin NumberFirmware IDTypeTypical FunctionPigtail Color
+ diff --git a/misc/pinout-gen/script.js b/misc/pinout-gen/script.js index 9fc2cf05b7..161ec51e8a 100644 --- 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() { diff --git a/misc/pinout-gen/style.css b/misc/pinout-gen/style.css index a1f7dece52..cc4b9a7ab6 100644 --- 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; }