Skip to content

Commit

Permalink
Prow front functioning
Browse files Browse the repository at this point in the history 
.html: added values to format radio buttons.

.js: Prow front functioning
  • Loading branch information
@Bloodaxe980
Bloodaxe980 committed Jun 28, 2023
1 parent 1620a1b commit d77dd19
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 98 deletions.
10 changes: 5 additions & 5 deletions designer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,11 @@ <h3>MENU &nbsp; <div class="mt-check-garden" style="font-size: 6px;">
</span><p />
<fieldset id="rackFormat">
<legend>Format</legend>
Buchla <input type="radio" name="format" id="buchla" /> &nbsp;
BX <input type="radio" name="format" id="bx" /> &nbsp;
&nbsp; Eurorack <input type="radio" name="format" id="eurorack" checked />
&nbsp; <nobr>Serge&nbsp;<input type="radio" name="format" id="serge" /></nobr>
&nbsp; Mixed <input type="radio" name="format" id="mixed" />
Buchla <input type="radio" name="format" id="buchla" value="buchla" /> &nbsp;
BX <input type="radio" name="format" id="bx" value="bx" /> &nbsp;
&nbsp; Eurorack <input type="radio" name="format" id="eurorack" value="eurorack" checked />
&nbsp; <nobr>Serge&nbsp;<input type="radio" name="format" id="serge" value="serge" /></nobr>
&nbsp; Mixed <input type="radio" name="format" id="mixed" value="mixed" />
&nbsp;
</fieldset>
<p />
Expand Down
159 changes: 66 additions & 93 deletions designer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@

"use strict";

var canvas, canvasDiv, calcRiseCb, ctx, e,frontPanelCb, h,
init, input, inputDepth, matThickness, measureCb, price, pxDepthInput,
quantity, roundToPlace, setStandard, showInches, standardHtCb, w, xStart;
var canvas, canvasDiv, calcRiseCb, ctx, e,frontPanelCb, h, init, input,
inputDepth, matThickness, measureCb, price, pxDepthInput, quantity,
radioGpFormat, roundToPlace, setStandard, showInches, standardHtCb,
w, xStart;

var i = 0;
var rowUnitsH = [3, 3, 1];
Expand Down Expand Up @@ -49,14 +50,6 @@ var unitHeight = 3;
var unitPlp = 43.2; //mm
var useStaticRise = false;

/*function addGobalEventListener(type, selector, callback) {
var e = '';
document.addEventListener(type, e => {
if (e.target.matches(selector)) callback(e)
})
};
*/

document.addEventListener("DOMContentLoaded", function () {
init();
});
Expand Down Expand Up @@ -84,40 +77,39 @@ function themeCb() {
bod.classList.toggle("white");
}

/*
function formatCb() {
// Set height for front panel

// depricated: there are now four different formats requireing a
different selection method. i.e. caseOf
var frontHeight = useStaticRise
? actualPanelDepth
: Math.abs(actualPanelDepth * Math.sin(Math.PI / 2 - rad(firstAngle)));

var checked = document.getElementById("format");
checked ? hp=25.4 : hp = 5.08; //mm
// Get selected format
/*function tuneRadio() {
var radios = document.getElementsByName("format");
var selected = Array.from(radios).find(radio => radio.checked);
var station = selected.value;
console.info("station: ", station);
}
*/
radios.addEventListener("change", tuneRadio);*/


// Set height for front panel

var frontHeight = useStaticRise
? actualPanelDepth
: Math.abs(actualPanelDepth * Math.sin(Math.PI / 2 - rad(firstAngle)));
// Given one leg and the angle opposite the missing segment, find the missing leg of a right triangle
function trig90(leg, angleOpp) {
var need = leg * Math.tan(angleOpp * Math.PI / 180);
var missing = roundToPlace(Math.abs(need), 2);
return missing;
}

// Horizontal starting position on the canvas
function startX() {
return 50;
/*var sx;
function prow() {
var sx;
if (prowTrue) {
var firstAngle = rowAngles[0];
var secondAngle = 90 - firstAngle;
sx = trig90(frontHeight, firstAngle)
var angleMissing = rowAngles[0];
sx = trig90(frontHeight, angleMissing);
}
else sx = 50;
return sx;*/
}

function trig90(leg, angleOpp) {
var missing = leg * Math.tan(angleOpp);
return missing;
else sx = 0;
return sx;
}

function startY() {
Expand Down Expand Up @@ -178,7 +170,7 @@ function drawSide() {
ctx.strokeStyle = "#999999";
ctx.setLineDash([]); //([1, 5]);

var backPanelLocation = 0;
var backPanelLocation = 0;
var maxX = 0,
maxY = 0;
var x, y;
Expand All @@ -187,16 +179,15 @@ function drawSide() {
function add(xn, yn, noWriteMarker) {
x = xn;
y = yn;
var aa = getActualRowAngle();
for (var i = 0; i < panels.length; i++){
var aa = getActualRowAngle(i);
var aa = getActualRowAngle(i);
}

maxX = Math.max(maxX, xn);
if ((maxX > backPanelLocation) && (aa < 91)){
backPanelLocation = maxX;
};
console.info("Back panel loc:", backPanelLocation, " aa: ", aa);
maxX = Math.max(maxX, xn);
if ((maxX > backPanelLocation) && (aa < 91)) {
backPanelLocation = maxX;
};
console.info("MaxX: ", maxX, " Back panel loc:", backPanelLocation, " aa: ", aa);
maxY = Math.max(maxY, yn);
p.push(xn, yn);
if (noWriteMarker) {
Expand All @@ -210,21 +201,20 @@ function drawSide() {
coords: [],
};
});
console.info("panels", panels, "rowAngles", rowAngles);

// Set the starting point of the drawing

var frontPieceOutline = [];
var backPieceOutline = [];

add(xStart, 0); //0, 0
add(prow(), 0);

// bottom panel goes underneath the sides, front, and back
// Front panel goes up from the starting point

var frontHeight = useStaticRise
? actualPanelDepth
: Math.abs(actualPanelDepth * Math.sin(Math.PI / 2 - rad(firstAngle)));
add(x, y + frontHeight);
add(0, y + frontHeight);
console.info("y+fht: ", y+frontHeight);

// Add the points for drawing the dotted line representing the cardboard
Expand All @@ -233,14 +223,16 @@ function drawSide() {
x + Math.cos(rad(firstAngle)) * caseMaterialThickness,
y + Math.sin(rad(firstAngle)) * caseMaterialThickness
);
frontPieceOutline.push(x + Math.cos(rad(firstAngle)) * caseMaterialThickness, 0);
frontPieceOutline.push(xStart, 0); // 0, 0
frontPieceOutline.push(prow() + Math.cos(rad(firstAngle)) * caseMaterialThickness, 0);
frontPieceOutline.push(prow(), 0); // 0, 0
add(
x + Math.cos(rad(firstAngle)) * caseMaterialThickness,
y + Math.sin(rad(firstAngle)) * caseMaterialThickness,
"nowrite"
);

// For each row, evaluate the height and get the angle.

rowAngles.forEach((angle, i) => {
panels[i].coords.push(x, y);
if (rowUnitsH[i] == 1) {
Expand All @@ -249,11 +241,10 @@ function drawSide() {
else {
actualPanelHeight = rowUnitsH[i] * 44.45;
};
console.info("APH ", actualPanelHeight, " oneUSTD: ", oneUnitStandard);
add(
x + Math.cos(rad(getActualRowAngle(i))) * actualPanelHeight,
y + Math.sin(rad(getActualRowAngle(i))) * actualPanelHeight,
// If it is the last row, then the outline will continue for the
// If it is the last row, then the outline will continue for the
//width of the material, so we'll just write the coord marker at
// the end of that instead of the end of the row outline.
i === rowAngles.length - 1
Expand Down Expand Up @@ -283,24 +274,19 @@ function drawSide() {
y - Math.cos(rad(getActualRowAngle())) * actualPanelDepth
);
add(x, 0);
add(0, 0);
add(prow(), 0);

ctx.setLineDash([1, 5]);
ctx.beginPath();
// Draw the base board outline
drawPath(
false,
0, // X
0, // Y
backPanelLocation, // X
0, // Y
backPanelLocation, // X
+caseMaterialThickness, // Y
0, // X
+caseMaterialThickness, // Y
0, // X
0 // Y
prow()+caseMaterialThickness, // X
caseMaterialThickness, // Y
maxX-caseMaterialThickness, // X
caseMaterialThickness, // Y
);
console.info("backPanelLocation", backPanelLocation);
ctx.closePath();

// draw the front and back side outlines
Expand Down Expand Up @@ -350,7 +336,7 @@ function writeSummary(width, height, back, outlinePoints, railScrewCoords) {
var footnote = [
"*Note: rail spacing based on the measurements provided by " +
'<a target="_blank" href="http://www.musicradar.com/tuition/tech/how-to-build-your-own-cardboard-' +
"eurorack-modular-case-625196\">Future Music's cardboard DIY case</a> " +
"eurorack-modular-case-625196\">Future Music's cardboard DIY case</a><br /> " +
"using TipTop Audio Z-Rails.",
"",
];
Expand Down Expand Up @@ -420,7 +406,7 @@ function writeSummary(width, height, back, outlinePoints, railScrewCoords) {
*/
function getPlot(x, y) {
return {
x: startX() + x / heightRatio,
x: 50 + x / heightRatio,
y: startY() - y / heightRatio,
};
}
Expand Down Expand Up @@ -580,7 +566,6 @@ function updateAngles() {
for (let i = 0; i < angles.length; i++) {
const aa = getActualRowAngle(i);
angles[i].innerHTML = " deg. Angle: " + aa;
console.info("i: ", i, " angle: ", aa);
}
//focusEl.focus();
return;
Expand Down Expand Up @@ -636,31 +621,17 @@ function createRowInput(i, uValue, aValue) {
const unitIndex = parseInt(event.target.id.split(unitsIdPrefix)[1], 10);
rowUnitsH[unitIndex] = parseFloat(event.target.value, 10);
unitHeight = rowUnitsH[unitIndex];
console.info(
"Unit Index: ", unitIndex,
" rowUnitsH: ", rowUnitsH,
" unitHeight: ", unitHeight,
" Actual panel height: ",
actualPanelHeight
);

const inputIndex = parseInt(event.target.id.split(inputIdPrefix)[1], 10);
rowAngles[inputIndex] = parseFloat(event.target.value, 10);
console.info(
"Input change: ",
event.target.value,
event.target.id,
inputIndex,
rowAngles
);

drawSide();
updateAngles();
}, 0);
};
uni.addEventListener("blur", onChange);
// uni.addEventListener("input", onChange);
// uni.addEventListener("change", onChange);
uni.addEventListener("change", onChange);
uni.addEventListener("keypress", onChange);

// inp.addEventListener("input", onChange);
Expand All @@ -686,7 +657,6 @@ function createRowInput(i, uValue, aValue) {
* @param {number} c The row count.
*/
function resetRowInputs(c) {
/*backPanelLocation = 0;*/
const rowInputs = document.getElementById("row-inputs");
while (rowInputs.firstChild) {
rowInputs.removeChild(rowInputs.firstChild);
Expand Down Expand Up @@ -734,7 +704,6 @@ function init() {
}
});
rowCountSelector.addEventListener("change", (event) => {
console.info("event", event.target.value);
rowCount = event.target.value;
resetRowInputs(rowCount);
drawSide();
Expand Down Expand Up @@ -771,18 +740,24 @@ function init() {
};
calcRiseCb.addEventListener("change", onCalcRiseChange);

var firstAngle = rowAngles[0];
radioGpFormat = document.getElementsByName("format");
const onFormatChange = (event) => {
setTimeout(() => {
var setFormat = Array.from(radioGpFormat).find(radio => radio.checked);
console.info("setFormat: ", setFormat);
}, 0);
};
// radioGpFormat.addEventListener("change", onFormatChange);

frontPanelCb = document.getElementById("frontPanel");
frontPanelCb.checked = prowTrue;
const onFrontPanelChange = (event) => {
setTimeout(() => {
prowTrue = event.target.checked;
drawSide();
frontPanelCb.checked = prowTrue;
const onFrontPanelChange = (event) => {
setTimeout(() => {
prowTrue = event.target.checked;
drawSide();
}, 0);
};
frontPanelCb.addEventListener("change", onFrontPanelChange);
prowTrue ? xStart = 20 : xStart = 0;

standardHtCb = document.getElementById("standardHt");
const onStandardHtChange = (event) => {
Expand All @@ -793,6 +768,8 @@ function init() {
};
standardHtCb.addEventListener("change", onStandardHtChange);

var firstAngle = rowAngles[0];

matThickness = document.getElementById("material-thickness");
matThickness.value = caseMaterialThickness;
const onMaterialThicknessChange = (event) => {
Expand Down Expand Up @@ -830,10 +807,8 @@ function init() {
drawSide();

window.onresize = function () {
backPanelLocation = 0;
w = canvasDiv.clientWidth;
h = canvasDiv.clientHeight;
// console.info(w,h);
canvas.width = w*.8;
canvas.height = h*.8;
ctx.clearRect(0, 0, w, h);
Expand Down Expand Up @@ -1098,7 +1073,6 @@ function openFile () {

// CREATE FILEPICKER


// (B) READ CSV ON FILE PICK */
picker.onchange = () => reader.readAsText(picker.files[0]);

Expand Down Expand Up @@ -1126,7 +1100,6 @@ reader.onloadend = () => {
};
};


function download_csv(csv, filename) {
var csvFile;
var downloadLink;
Expand Down

0 comments on commit d77dd19

Please sign in to comment.