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:
parent
6385859cc8
commit
3cca8df571
|
@ -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
|
||||||
|
|
|
@ -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
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue