Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpage version (js) #13

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
form.form-example {
display: table;
}

div.form-example {
display: table-row;
}

label,
input {
display: table-cell;
margin-bottom: 10px;
}

label {
padding-right: 10px;
}

.scroll {


height: 400px;
background: #f1f1f1;
padding: 10px;
overflow: hidden;
overflow-y: scroll;

}
164 changes: 164 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@


data.addEventListener("submit", function (e) {
e.preventDefault();
let data = document.querySelector('#data');
let bedWidth = Number(document.querySelector('#bedWidth').value);
let bedLength = Number(document.querySelector('#bedLength').value);
let bedMargin = Number(document.querySelector('#bedMargin').value);
let filamentDiameter = Number(document.querySelector('#filamentDiameter').value);
let movementSpeed = Number(document.querySelector('#movementSpeed').value);
let stabilizationTime = Number(document.querySelector('#stabilizationTime').value);
let bedTemp = Number(document.querySelector('#bedTemp').value);
let fanSpeed = Number(document.querySelector('#fanSpeed').value);
let primeLength = Number(document.querySelector('#primeLength').value);
let primeAmount = Number(document.querySelector('#primeAmount').value);
let primeSpeed = Number(document.querySelector('#primeSpeed').value);
let wipeLength = Number(document.querySelector('#wipeLength').value);
let retractionDistance = Number(document.querySelector('#retractionDistance').value);
let retractionSpeed = Number(document.querySelector('#retractionSpeed').value);
let blobHeight = Number(document.querySelector('#blobHeight').value);
let extrusionAmount = Number(document.querySelector('#extrusionAmount').value);
let direction = document.querySelector('#direction');
let xSpacing = Number(document.querySelector('#temperatureSpacing').value);
let ySpacing = Number(document.querySelector('#flowSpacing').value);
let startFlow = Number(document.querySelector('#startFlow').value);
let flowOffset = Number(document.querySelector('#flowOffset').value);
let flowSteps = Number(document.querySelector('#flowSteps').value);
let endFlow = Number(document.querySelector('#endFlow').value);
let startTemp = Number(document.querySelector('#startTemp').value);
let tempOffset = Number(document.querySelector('#tempOffset').value);
let tempSteps = Number(document.querySelector('#tempSteps').value);
let endTemp = Number(document.querySelector('#endTemp').value);
let comment = document.querySelector('#comment');
let code = document.querySelector('#code');
let resultado = [];
let slot = 0;
//Varibles

if (tempSteps == 1) {

tempSteps = Math.ceil(flowSteps / Math.floor((bedLength - 2 * bedMargin) / ySpacing));
flowSteps = Math.floor((bedLength - 2 * bedMargin) / ySpacing);
tempOffset = 0;
}

if (direction.checked == true) {

bedLength = 0
bedMargin = bedMargin * -1
ySpacing = ySpacing * -1
}


for (let i = 1; i <= tempSteps; i++) {


if (tempOffset == 0) {

startFlow = startFlow + flowSteps * flowOffset;
}

slot = slot + 1
resultado[slot] =
`####### ${startTemp + (i - 1) * tempOffset} C
G4 S0; Dwell
M109 R${startTemp + (i - 1) * tempOffset}

`

for (j = 1; j < flowSteps; j++) {

if (tempOffset == 0) {
if (i == tempSteps) {

if (startFlow + (j - 2) * flowOffset == endFlow) {

}
}
}

extrusionSpeed = Math.round(blobHeight / (extrusionAmount / ((startFlow + (j - 1) * flowOffset) / (Math.atan(1) * filamentDiameter * filamentDiameter) * 60)), 2)

slot = slot + 1;
resultado[slot] =
`;---------------------------####### ${startFlow + (j - 1) * flowOffset} mm3/s
M117 ; ${startTemp + (i - 1) * tempOffset} °C // " ${startFlow + (j - 1) * flowOffset} mm3/s
G0 X${Math.abs(bedMargin) + ((i - 1) * (primeLength + wipeLength + xSpacing))} Y${(bedLength - bedMargin) - (j - 1) * ySpacing} Z${0.5 + blobHeight + 5} F${movementSpeed * 60}
G4 S${stabilizationTime}; Stabalize
G0 Z0.3; Drop down")
G1 X${Math.abs(bedMargin) + primeLength + ((i - 1) * (primeLength + wipeLength + xSpacing))} E${primeAmount} F${(primeSpeed * 60)} ;Prime
G1 E${-1 * retractionDistance} F${retractionSpeed * 60}; Retract
G0 X${Math.abs(bedMargin) + primeLength + wipeLength + ((i - 1) * (primeLength + wipeLength + xSpacing))} F${movementSpeed * 60}; Wipe
G0 Z0.5; Lift")
G1 E${retractionDistance} F${retractionSpeed * 60}; De - Retract
G1 Z${0.5 + blobHeight} E${extrusionAmount} F${extrusionSpeed}; Extrude
G1 E${-1 * retractionDistance} F${retractionSpeed * 60}; Retract
G0 Z${0.5 + blobHeight + 5}; Lift
G0 X${Math.abs(bedMargin) + ((i - 1) * (primeLength + wipeLength + xSpacing))} Y${(bedLength - bedMargin) - (j - 1) * ySpacing} F${movementSpeed * 60}
G92 E0; Reset Extruder")
`
}
}

code.innerText =
` *** CNC Kitchen Auto Flow Pattern Generator 0.93"
*** 02/04/26 Stefan Hermann"

Generation Setting
####### Settings
${comment.value}

bedWidth = ${bedWidth}
bedLength = ${bedLength}
bedMargin =${Math.abs(bedMargin)}
filamentDiameter =${filamentDiameter}
movementSpeed =${movementSpeed}
stabilizationTime =${stabilizationTime}
bedTemp =${bedTemp}
primeLength =${primeLength}
primeAmount =${primeAmount}
primeSpeed =${primeSpeed}
retractionDistance =${retractionDistance}
retractionSpeed =${retractionSpeed}
blobHeight =${blobHeight}
extrusionAmount =${extrusionAmount}
xSpacing =${xSpacing}
ySpacing =${ySpacing}
startFlow =${startFlow}
flowOffset =${flowOffset}
flowSteps =${flowSteps}
startTemp =${startTemp}
tempOffset =${tempOffset}
tempSteps =${tempSteps}
direction =${direction}

M104 S${startTemp} ; Set Nozzle Temperature
M140 S${bedTemp}; Set Bed Temperature
G90
G28 ; Move to home position
G0 Z10 ; Lift nozzle
G21; unit in mm
G92 E0; reset extruder
M83; set extruder to relative mode
M190 S ${bedTemp}; Set Bed Temperature & Wait
M106 S${Math.round(fanSpeed * 255 / 100, 0)} ; Set Fan Speed

${resultado}

M104 S0
M140 S0
;Retract the filament
G92 E1
G1 E-1 F300
G28 X0 Y0
M84
`
})

data.addEventListener("reset", function (e) {

document.getElementById('data').reset();
code.innerText = `Here will be the gcode.`

})
188 changes: 188 additions & 0 deletions index2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">

<title>CNCKitchen Benckmark (JS version) </title>
</head>

<body>
<div>
<div class="container-fluid">
<h1>CNC Kitchen Hotend Benchmark</h1>
<div class="row">
<div class="col">
<h2>Printer Settings</h2>
<form class="row g-3 col" id="data">
<div class="col-md-3">
<label for="number" class="form-label">Bed Width</label>
<input type="number" class="form-control" value="220" id="bedWidth" required>
</div>

<div class="col-md-3">
<label for="number" class="form-label"> Bed Length: </label>
<input type="number" class="form-control" value="220" id="bedLength" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Bed Margin: </label>
<input type="number" class="form-control" value="5" id="bedMargin" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Filament Diameter: </label>
<input type="number" class="form-control" value="1.75" id="filamentDiameter" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Travel Speed: </label>
<input type="number" class="form-control" value="50" id="movementSpeed" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Stabilization Time: </label>
<input type="number" class="form-control" value="20" id="stabilizationTime" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Bed Temperature: </label>
<input type="number" class="form-control" value="40" id="bedTemp" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Fan Speed: </label>
<input type="number" class="form-control" value="0" id="fanSpeed" required>
</div>

<h2>Test Settings</h2>

<div class="col-md-3">
<label for="number" class="form-label">Prime Length: </label>
<input type="number" class="form-control" value="25" id="primeLength" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Prime Amount: </label>
<input type="number" class="form-control" value="20" id="primeAmount" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Prime Speed: </label>
<input type="number" class="form-control" value="5" id="primeSpeed" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Wipe Length: </label>
<input type="number" class="form-control" value="15" id="wipeLength" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Retraction Distance: </label>
<input type="number" class="form-control" value="4" id="retractionDistance" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Retraction Speed: </label>
<input type="number" class="form-control" value="60" id="retractionSpeed" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Blob Height: </label>
<input type="number" class="form-control" value="10" id="blobHeight" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Extrusion Amount: </label>
<input type="number" class="form-control" value="200" id="extrusionAmount" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Select for Front to Back: </label>
<input type="checkbox" id="direction">
</div>
<div class="col-md-3">
<label for="number" class="form-label">Temperature Spacing: </label>
<input type="number" class="form-control" value="40" id="temperatureSpacing" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Flow Spacing: </label>
<input type="number" class="form-control" value="25" id="flowSpacing" required>
</div>

<h2>DOE Settings</h2>
<h3>Flow Variation</h3>

<div class="col-md-3">
<label for="number" class="form-label">Start Flow: </label>
<input type="number" class="form-control" value="2" id="startFlow" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Offset: </label>
<input type="number" class="form-control" value="2" id="flowOffset" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Steps: </label>
<input type="number" class="form-control" value="8" id="flowSteps" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">End Flow: </label>
<input type="number" class="form-control" value="16" id="endFlow" required>
</div>


<h3>Temperature Variation</h3>

<div class="col-md-3">
<label for="number" class="form-label">Start Temperature: </label>
<input type="number" class="form-control" value="240" id="startTemp" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Offset: </label>
<input type="number" class="form-control" value="-20" id="tempOffset" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Steps: </label>
<input type="number" class="form-control" value="3" id="tempSteps" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">End Flow: </label>
<input type="number" class="form-control" value="200" id="endTemp" required>
</div>
<div class="col-md-3">
<label for="number" class="form-label">Comment: </label>
<input type="text" value="Brand of Printer" id="comment" required>
</div>

<div class="row mt-3">
<div class="col-2">
<button type="submit" class="btn btn-primary">Generate</button>
</div>

<div class="col-2">
<button type="reset" class="btn btn-secondary">Reset</button>
</div>
</div>
</form>
</div>
<div class="col">
<div class="row">
<div class="col border m-1">
<h3>Bed distribution</h3>
<img src="photo1.jpg" class="card-img-top" alt="...">
</div>
<div class="col border m-1">
<h3>Print distribution</h3>
<img src="photo2.jpg" class="card-img-top" alt="...">
</div>
</div>
<div class="row">
<div class="col">
<h2 id="gcode">G-CODE</h2>
<div class="card scroll">
<p class="card-text" id="code"> Here will be the gcode.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>

</html>
Binary file added photo1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added photo2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.