mirror of https://github.com/rusefi/rusefi-1.git
Interactive Pinout printing (#2411)
* initial print css * more print layout changes, and better zoom support * oopsies * more improvements maybe * please don't grow * color cells * fettling * fettling * fettling * fettling * keep image from getting too big * try auto * hmm * rounded * try auto sizing * bugfix * It verks? * make em bigger * bugfix * auto sizing
This commit is contained in:
parent
c8c444e6c4
commit
5c2fdb6a00
|
@ -37,40 +37,32 @@
|
|||
<table class="info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pin Number</th>
|
||||
<th>Firmware ID</th>
|
||||
<th>Type</th>
|
||||
<th>Typical Function</th>
|
||||
<th>Pigtail Color</th>
|
||||
<th class="pin-header">Pin Number</th>
|
||||
<th class="id-header">Firmware ID</th>
|
||||
<th class="type-header">Type</th>
|
||||
<th class="function-header">Typical Function</th>
|
||||
<th class="color-header">Pigtail Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<h2>Full Pinout Table</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="pinout-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pin Number</th>
|
||||
<th>Firmware ID</th>
|
||||
<th>Type</th>
|
||||
<th>Typical Function</th>
|
||||
<th>Pigtail Color</th>
|
||||
<th class="pin-header">Pin Number</th>
|
||||
<th class="id-header">Firmware ID</th>
|
||||
<th class="type-header">Type</th>
|
||||
<th class="function-header">Typical Function</th>
|
||||
<th class="color-header">Pigtail Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -12,6 +12,7 @@ function addRow(table, pin, pdiv) {
|
|||
var fdata = clone.querySelector(".function-data");
|
||||
var cdata = clone.querySelector(".color-data");
|
||||
pdata.textContent = pin.pin;
|
||||
pdata.dataset.type = pin.type;
|
||||
idata.textContent = pin.id;
|
||||
tdata.textContent = pin.type
|
||||
fdata.textContent = pin.function;
|
||||
|
@ -46,22 +47,6 @@ function clickPin(table, pin, pdiv) {
|
|||
pdiv.classList.add("selected");
|
||||
}
|
||||
|
||||
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() {
|
||||
for (var c = 0; c < connectorYaml.length; c++) {
|
||||
var connector = YAML.parse(connectorYaml[c]);
|
||||
|
@ -71,8 +56,6 @@ window.addEventListener('load', function() {
|
|||
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;
|
||||
|
@ -84,13 +67,22 @@ window.addEventListener('load', function() {
|
|||
if (!pin.pin) {
|
||||
continue;
|
||||
}
|
||||
var pinfo;
|
||||
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;
|
||||
}
|
||||
}
|
||||
if (!pinfo.x) continue;
|
||||
var closest = 1000000;
|
||||
for (var ii = 0; ii < connector.info.pins.length; ii++) {
|
||||
var tinfo = connector.info.pins[ii];
|
||||
var distance = Math.pow((tinfo.x - pinfo.x), 2) + Math.pow((tinfo.y - pinfo.y), 2);
|
||||
if (tinfo.pin != pin.pin && (!closest || distance < closest)) {
|
||||
closest = distance;
|
||||
}
|
||||
}
|
||||
var pclone = ptemplate.content.cloneNode(true);
|
||||
var pdiv = pclone.querySelector("div");
|
||||
pdiv.textContent = pinfo.pin;
|
||||
|
@ -100,15 +92,26 @@ window.addEventListener('load', function() {
|
|||
pdiv.addEventListener("click", function(table, pin, pdiv) {
|
||||
clickPin(table, pin, pdiv);
|
||||
}.bind(null, table, pin, pdiv));
|
||||
closest = Math.sqrt(closest);
|
||||
var divheight = cdiv.clientHeight;
|
||||
var divwidth = cdiv.clientWidth;
|
||||
var mult = cdiv.querySelector("img").naturalHeight / divheight;
|
||||
var newheight = (closest / mult)
|
||||
var pxheight = divheight * 0.08;
|
||||
if (newheight < pxheight) {
|
||||
pxheight = newheight - 6;
|
||||
}
|
||||
var height = (pxheight / divheight) * 100;
|
||||
var width = (pxheight / divwidth) * 100;
|
||||
pdiv.style.height = height + "%";
|
||||
pdiv.style.width = width + "%";
|
||||
pdiv.style.marginTop = "-" + (width / 2) + "%";
|
||||
pdiv.style.marginLeft = "-" + (width / 2) + "%";
|
||||
pdiv.style.fontSize = (height / 7.5) + "vw";
|
||||
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() {
|
||||
adjustMarkers();
|
||||
});
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
border: 3px black solid;
|
||||
border: 0.21vw black solid;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
@ -118,17 +118,19 @@
|
|||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
height: max(3in, 50vh);
|
||||
}
|
||||
|
||||
.connector-div {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.connector-img {
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
|
@ -154,6 +156,12 @@ table tbody tr {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
td.pin-data {
|
||||
border-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
|
@ -181,12 +189,16 @@ table th {
|
|||
color: white;
|
||||
}
|
||||
|
||||
td.pin-data {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
color: white
|
||||
color: white;
|
||||
}
|
||||
|
||||
table tr:nth-child(even){
|
||||
|
@ -199,3 +211,59 @@ table th {
|
|||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.container {
|
||||
height: 99vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.info-table, .id-data, .id-header, .type-data, .type-header, .color-data, .color-header, thead {
|
||||
display: none;
|
||||
}
|
||||
.connector-container {
|
||||
flex: 0 1 auto;
|
||||
height: unset;
|
||||
min-height: 2in;
|
||||
}
|
||||
.connector-div {
|
||||
max-width: 100%;
|
||||
height: unset;
|
||||
}
|
||||
.connector-img {
|
||||
max-width: 100% !important;
|
||||
max-height: 3in;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
th {
|
||||
font-size: 12px;
|
||||
}
|
||||
td {
|
||||
font-size: 10px;
|
||||
}
|
||||
td:not(.pin-data) {
|
||||
border: none !important;
|
||||
}
|
||||
td.pin-data {
|
||||
border-width: 3px;
|
||||
border-radius: 10px;
|
||||
width: 10px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
html, tr {
|
||||
background-color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
table {
|
||||
width: auto;
|
||||
border-collapse: separate;
|
||||
}
|
||||
.table-wrapper {
|
||||
column-count: 4;
|
||||
}
|
||||
table, tbody, tr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue