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
This commit is contained in:
David Holdeman 2021-02-10 17:52:19 -06:00 committed by GitHub
parent 6385859cc8
commit 3cca8df571
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 120 additions and 93 deletions

View File

@ -8,8 +8,12 @@ for c in $CONNECTORS; do
NAME=$(basename $c .yaml) NAME=$(basename $c .yaml)
echo "NAME "$NAME echo "NAME "$NAME
mkdir -p $DIR mkdir -p $DIR
bash misc/pinout-gen/gen.sh $c > $DIR/$NAME.html if [ -f $DIR/index.html ]; then
file $DIR/$NAME.html 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') IMG=$(yq r $c 'info.image.file')
echo "IMG "$IMG echo "IMG "$IMG
if [ $IMG ]; then if [ $IMG ]; then

View File

@ -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

View File

@ -1,4 +1,5 @@
#!/usr/bin/env bash #!/usr/bin/env bash
DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)"/" 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

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
@ -16,12 +17,6 @@
<div class="pin-marker"></div> <div class="pin-marker"></div>
</template> </template>
<div id="connector-container">
<div id="connector-div">
<img id="connector-img"></img>
</div>
</div>
<template id="table-template"> <template id="table-template">
<tr class="data"> <tr class="data">
<td class="pin-data"></td> <td class="pin-data"></td>
@ -32,39 +27,52 @@
</tr> </tr>
</template> </template>
<table id="info-table"> <template id="connector-template">
<thead> <div class="container">
<tr> <div class="connector-container">
<th>Pin Number</th> <div class="connector-div">
<th>Firmware ID</th> <img class="connector-img"></img>
<th>Type</th> </div>
<th>Typical Function</th> </div>
<th>Pigtail Color</th> <table class="info-table">
</tr> <thead>
</thead> <tr>
<tbody> <th>Pin Number</th>
</tbody> <th>Firmware ID</th>
</table> <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> <h2>Full Pinout Table</h2>
<table id="pinout-table"> <table class="pinout-table">
<thead> <thead>
<tr> <tr>
<th>Pin Number</th> <th>Pin Number</th>
<th>Firmware ID</th> <th>Firmware ID</th>
<th>Type</th> <th>Type</th>
<th>Typical Function</th> <th>Typical Function</th>
<th>Pigtail Color</th> <th>Pigtail Color</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<br/>
<br/>
<br/>
<br/>
</div>
</template>
</body> </body>
</html> </html>

View File

@ -1,6 +1,6 @@
var connectorYaml = ` var connectorYaml = [
###DATA### ///DATA///
`; ];
function addRow(table, pin, pdiv) { function addRow(table, pin, pdiv) {
var template = document.getElementById("table-template"); var template = document.getElementById("table-template");
@ -22,8 +22,7 @@ function addRow(table, pin, pdiv) {
table.appendChild(clone); table.appendChild(clone);
} }
function clickPin(pin, pdiv) { function clickPin(table, pin, pdiv) {
var table = document.getElementById("info-table").querySelector("tbody");
table.innerHTML = ""; table.innerHTML = "";
if (Array.isArray(pin.id)) { if (Array.isArray(pin.id)) {
var pinIds = pin.id.filter((value, index) => { var pinIds = pin.id.filter((value, index) => {
@ -47,56 +46,67 @@ function clickPin(pin, pdiv) {
pdiv.classList.add("selected"); pdiv.classList.add("selected");
} }
function adjustMarkers() { function adjustMarkers(cdiv) {
var cdiv = document.getElementById("connector-div"); var cdiv = document.querySelectorAll(".connector-div");
cdiv.style.width = document.getElementById("connector-img").clientWidth; for (var c = 0; c < cdiv.length; c++) {
var pins = document.querySelectorAll(".pin-marker"); cdiv[c].style.width = cdiv[c].querySelector(".connector-img").clientWidth + "px";
for (var i = 0; i < pins.length; i++) { var pins = cdiv[c].querySelectorAll(".pin-marker");
var height = cdiv.clientHeight * 0.05; for (var i = 0; i < pins.length; i++) {
pins[i].style.height = height + "px"; var height = cdiv[c].clientHeight * 0.05;
pins[i].style.width = height + "px"; pins[i].style.height = height + "px";
pins[i].style.marginTop = "-" + (height * 0.5) + "px"; pins[i].style.width = height + "px";
pins[i].style.marginLeft = "-" + (height * 0.5) + "px"; pins[i].style.marginTop = "-" + (height * 0.5) + "px";
pins[i].style.fontSize = (height * 0.5) + "px"; pins[i].style.marginLeft = "-" + (height * 0.5) + "px";
pins[i].style.fontSize = (height * 0.5) + "px";
}
} }
} }
window.addEventListener('load', function() { window.addEventListener('load', function() {
var connector = YAML.parse(connectorYaml); for (var c = 0; c < connectorYaml.length; c++) {
document.getElementById("connector-img").addEventListener('load', function() { var connector = YAML.parse(connectorYaml[c]);
for (var i = 0; i < connector.pins.length; i++) { var template = document.getElementById("connector-template");
var pin = connector.pins[i]; var clone = template.content.cloneNode(true);
if (!pin.pin) { document.body.appendChild(clone);
continue; var sdiv = document.body.lastChild.previousSibling;
} var img = sdiv.querySelector(".connector-img");
var pinfo; img.addEventListener('load', function(connector, sdiv, img) {
for (var ii = 0; ii < connector.info.pins.length; ii++) { var ccont = sdiv.querySelector(".connector-container");
if (connector.info.pins[ii].pin == pin.pin) { ccont.style.height = (document.documentElement.clientHeight / 2) + 'px';
pinfo = connector.info.pins[ii]; var cdiv = sdiv.querySelector(".connector-div");
break; var ptemplate = document.getElementById("pin-template");
}
}
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 imgHeight = img.naturalHeight;
var imgWidth = img.naturalWidth; var imgWidth = img.naturalWidth;
pdiv.textContent = pinfo.pin; var table = sdiv.querySelector(".info-table").querySelector("tbody");
pdiv.style.top = ((pinfo.y / imgHeight) * 100) + "%"; var fullTable = sdiv.querySelector(".pinout-table").querySelector("tbody");
pdiv.style.left = ((pinfo.x / imgWidth) * 100) + "%"; for (var i = 0; i < connector.pins.length; i++) {
pdiv.dataset.type = pin.type; var pin = connector.pins[i];
pdiv.addEventListener("click", function(pin, pdiv) { if (!pin.pin) {
clickPin(pin, pdiv); continue;
}.bind(null, pin, pdiv)); }
cdiv.appendChild(pdiv); var pinfo;
var fullTable = document.getElementById("pinout-table").querySelector("tbody"); for (var ii = 0; ii < connector.info.pins.length; ii++) {
addRow(fullTable, connector.pins[i], pdiv); if (connector.info.pins[ii].pin == pin.pin) {
} pinfo = connector.info.pins[ii];
adjustMarkers(); break;
}); }
document.getElementById("connector-img").src = connector.info.image.file; }
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() { window.addEventListener('resize', function() {

View File

@ -25,20 +25,19 @@
background-color: #fc935a; background-color: #fc935a;
} }
#connector-container { .connector-container {
width: 100%; width: 100%;
height: 50%;
overflow-x: scroll; overflow-x: scroll;
position: relative; position: relative;
} }
#connector-div { .connector-div {
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 0; z-index: 0;
} }
#connector-img { .connector-img {
height: 100%; height: 100%;
z-index: 0; z-index: 0;
} }