Skip to content

Commit 4b66377

Browse files
epuzioepuzio
committed
Updated interfaces, examples
1 parent 79dfa99 commit 4b66377

File tree

13 files changed

+161
-59
lines changed

13 files changed

+161
-59
lines changed

‎examples/docs-examples/BooleanUnionVase.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Boolean Union Vase
1+
// BOOLEAN UNION VASE
22
// -- Complex example to demonstrate union between six smaller vessels and a main vase.
33

44
// POTTERBOT CONFIGURATION

‎examples/docs-examples/UnionDifferenceMug.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// UNION DIFFERENCE MUG
2+
// -- Mug with a handle made through a union function
3+
// -- and indentation made through a difference function.
4+
5+
// POTTERBOT CONFIGURATION
6+
var potterbot_printSpeed = 30;
7+
var potterbot_nozzleDiameter = 5;
8+
var potterbot_layerHeight = potterbot_nozzleDiameter*.5;
9+
var potterbot_extrusionMultiplier = 1.0;
10+
var potterbot_bedSize = [280, 265, 305];
11+
12+
// MAIN VESSEL PARAMETERS
13+
var position = [150, 150, potterbot_layerHeight*2];
14+
var radius = 48;
15+
var nbLayers = 40;
16+
var nbPointsInLayer = 50;
17+
18+
// HANDLE PARAMETERS (UNION)
19+
var handlePosition = [140, 150, 20];
20+
var handleRadius = 20;
21+
var handleNbLayers = 34;
22+
var handleNbPointsInLayer = 30;
23+
24+
// INDENT PARAMETERS (DIFFERENCE)
25+
var indentPosition = [-10, 150, 50];
26+
var indentRadius = 60;
27+
var indentNbLayers = 22;
28+
var indentNbPointsInLayer = 30;
29+
30+
// -- Shaping parameters for union and difference
31+
var radiusParameter = sinusoidal(5, 15, 1.5, handleNbPointsInLayer, [], "");
32+
var translateParameter = sinusoidal2D(60, 120, 5.3, 0.5, 5, 1, handleNbLayers, [], "");
33+
34+
// BUILD VESSEL
35+
var mugToolpath = toolpathUnitGenerator(position, radius, potterbot_layerHeight, nbLayers, nbPointsInLayer, [], [], [], [], [], []);
36+
var handleToolpath = toolpathUnitGenerator(handlePosition, handleRadius, potterbot_layerHeight, handleNbLayers, handleNbPointsInLayer, radiusParameter, [], [], translateParameter, [], []);
37+
var indentToolpath = toolpathUnitGenerator(indentPosition, indentRadius, potterbot_layerHeight, indentNbLayers, indentNbPointsInLayer, radiusParameter, [], [], translateParameter, [], []);
38+
var toolpathBase = base(position, radius, potterbot_layerHeight, nbPointsInLayer, potterbot_nozzleDiameter, mugToolpath);
39+
var toolpath = union(difference(mugToolpath, indentToolpath), handleToolpath);
40+
toolpath = spiralize(toolpath, potterbot_layerHeight);
41+
toolpath = toolpathBase.concat(toolpath);
42+
updatePath(toolpath);
43+
44+
// GENERATE GCODE
45+
var gcode = generateGCode(toolpath, potterbot_layerHeight, potterbot_nozzleDiameter);
46+
// downloadGCode(gcode, "union_difference_mug.gcode");

‎examples/web-editor/BooleanUnionDish.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ var nbLayers = 15;
1111
var nbPointsInLayer = 60;
1212
var radius = 76;
1313
var mainRadius = 82;
14-
var position = [0.0, 0.0, potterbot_layerHeight*2];
14+
var position = [0.0, 0.0, potterbot_layerHeight*3];
1515

1616
// -- Shaping parameters
1717
var radiusParameter = sinusoidal(11.0, 12.0, 1.8, nbPointsInLayer, [], "multiplicative");
@@ -24,7 +24,7 @@ var mainToolpath = toolpathUnitGenerator(position, mainRadius, potterbot_layerHe
2424
var toolpathBase = base(position, mainRadius, potterbot_layerHeight, nbPointsInLayer, potterbot_nozzleDiameter, mainToolpath);
2525
var toolpath = spiralize(union(starShapedToolpath, mainToolpath), potterbot_layerHeight);
2626
toolpath = (toolpathBase.concat(toolpath));
27-
toolpath = centerPrint(toolpath, position, potterbot_bedSize, potterbot_layerHeight);
27+
toolpath = centerPrint(toolpath, [0,0,0], potterbot_bedSize);
2828
updatePath(toolpath);
2929

3030
// GENERATE GCODE

‎examples/web-editor/CandleHolder.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ var potterbot_nozzleDiameter = 5.0;
66
var potterbot_layerHeight = potterbot_nozzleDiameter/2;
77

88
// VESSEL PARAMETERS
9-
var position = [0.0, 0.0, potterbot_layerHeight*2];
9+
var position = [0.0, 0.0, potterbot_layerHeight*3];
1010
var radius = 30;
1111
var nbLayers = 60;
1212
var nbPointsInLayer = 50;
@@ -21,6 +21,7 @@ var rotationParameter = linear(15, 0, nbLayers, 0, "");
2121
var toolpath = toolpathUnitGenerator(position, radius, potterbot_layerHeight, nbLayers, nbPointsInLayer, radiusParameter, scaleParameter, scalingParameter, [], rotationParameter, []);
2222
var toolpathBase = base(position, radius, potterbot_layerHeight, nbPointsInLayer, potterbot_nozzleDiameter, toolpath);
2323
toolpath = toolpathBase.concat(spiralize(toolpath, potterbot_layerHeight));
24+
toolpath = centerPrint(toolpath, [0,0,0]);
2425
updatePath(toolpath);
2526

2627
// GENERATE GCODE

‎examples/web-editor/CheckerboardBowl.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ var potterbot_nozzleDiameter = 4.0;
66
var potterbot_layerHeight = potterbot_nozzleDiameter/2;
77

88
// BOWL PARAMETERS
9-
var position = [150, 150, potterbot_layerHeight*2];
10-
var radius = 40;
9+
var position = [150, 150, potterbot_layerHeight*3];
10+
var radius = 42;
1111
var nbLayers = 24;
1212
var nbPointsInLayer = nbLayers*2;
1313

@@ -20,8 +20,9 @@ var thicknessParameter = square(1, nbPointsInLayer/8, 0, 4, nbLayers*nbPointsInL
2020
var toolpath = toolpathUnitGenerator(position, radius, potterbot_layerHeight, nbLayers, nbPointsInLayer, [], scaleParameter, [], [], rotationParameter, thicknessParameter);
2121
var toolpathBase = base(position, radius, potterbot_layerHeight, nbPointsInLayer, potterbot_nozzleDiameter, toolpath)
2222
toolpath = toolpathBase.concat(toolpath);
23+
toolpath = centerPrint(toolpath, [0,0,0]);
2324
updatePath(toolpath);
2425

2526
// GENERATE GCODE
2627
var gcode = generateGCode(toolpath, potterbot_layerHeight, potterbot_nozzleDiameter);
27-
//downloadGCode(gcode, "union_mug_example.gcode");
28+
//downloadGCode(gcode, "checkerboard_bowl_example.gcode");

‎examples/web-editor/SimpleVase.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var potterbot_bedSize = [280, 265, 305];
1212
var nbLayers = 50;
1313
var nbPointsInLayer = 50;
1414
var mainRadius = 35;
15-
var position = [0, 0, potterbot_layerHeight*1.5];
15+
var position = [0, 0, potterbot_layerHeight*3];
1616

1717
// -- Shaping parameters
1818
var scaleParameterValues0 = linear(-.2, 0, nbLayers, 0, "");
@@ -25,7 +25,7 @@ var starShapedToolpath = toolpathUnitGenerator(position, mainRadius, potterbot_l
2525
var upperBase = baseSpiral(position, mainRadius+12, nbPointsInLayer, potterbot_nozzleDiameter);
2626
var lowerBase = baseFill([0, 0, 0], mainRadius, nbPointsInLayer, potterbot_nozzleDiameter, starShapedToolpath);
2727
var toolpath = lowerBase.concat(upperBase.concat(spiralize(starShapedToolpath, potterbot_layerHeight)));
28-
toolpath = centerPrint(toolpath, position, potterbot_bedSize, potterbot_layerHeight);
28+
toolpath = centerPrint(toolpath, [0, 0, 0]);
2929
updatePath(toolpath);
3030

3131
// GENERATE GCODE

‎examples/web-editor/UnionMug.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var nbLayers = 60;
1515
var nbPointsInLayer = 60;
1616

1717
// HANDLE PARAMETERS
18-
var position = [0.0, 0.0, potterbot_layerHeight*2];
18+
var position = [0.0, 0.0, potterbot_layerHeight*3];
1919
var radius = 40;
2020
var nbLayers = 35;
2121

@@ -31,7 +31,7 @@ var toolpath = union(mugToolpath, handleToolpath);
3131
var toolpathBase = base(position, radius, potterbot_layerHeight, nbPointsInLayer, potterbot_nozzleDiameter, toolpath);
3232
toolpath = spiralize(toolpath, potterbot_layerHeight);
3333
toolpath = toolpathBase.concat(toolpath);
34-
toolpath = enterPrint(toolpath, position, potterbot_bedSize, potterbot_layerHeight);
34+
toolpath = centerPrint(toolpath, [0,0,0], potterbot_bedSize);
3535
updatePath(toolpath);
3636

3737
// GENERATE GCODE

‎index.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
<!-- UI + updatePath functionality (for online editor) -->
1616
<script type="module" src="interface.js"></script>
1717

18+
<!-- Fontawesome icons -->
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
20+
1821
<script> //test CoilCAM library on load
1922
document.addEventListener("DOMContentLoaded", () => {
2023
try{
@@ -62,12 +65,16 @@ <h2 style="white-space: nowrap;">coilCAM-js</h2>
6265
<a id="super_pb">super potterbot</a>
6366
</div>
6467
</div>
65-
<button type="button" id="b_docs">documentation</button>
6668
</div>
6769
<div class = "CC-header-buttons-right">
68-
<a href="https://github.com/sambourgault/coilCAM-js" target="_blank">
70+
<a href="https://sambourgault.github.io/coilCAM-docs" target="_blank" title="Documentation">
71+
<button type="button" id="b_docs">
72+
<i class="fa-solid fa-book"></i>
73+
</button>
74+
</a>
75+
<a href="https://github.com/sambourgault/coilCAM-js" target="_blank" title="Source Code">
6976
<button type="button" id="b_github">
70-
<img src="./assets/icons/github-logo.png" height="22px" width="22px">
77+
<i class="fa-brands fa-github"></i>
7178
</button>
7279
</a>
7380
</div>

‎interface.js‎

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function updatePath(newPath, referencePath=null){
3131
//Call in codemirror to initialize path in layerViewer
3232
function updateLayer(radius, nbPointsInLayer, pos=[0, 0, 0]){
3333
let iframe = document.getElementById("layerVieweriFrame");
34-
if(radius != null && nbPointsInLayer != null){
34+
if(iframe && radius != null && nbPointsInLayer != null){
3535
iframe.contentWindow.state.radius = radius;
3636
iframe.contentWindow.state.nbPointsInLayer = nbPointsInLayer;
3737
}
@@ -41,7 +41,7 @@ function updateLayer(radius, nbPointsInLayer, pos=[0, 0, 0]){
4141
//Call in codemirror to initialize path in profileViewer
4242
function updateProfile(layerHeight, nbLayers, pos=[0, 0, 0]){
4343
let iframe = document.getElementById("profileVieweriFrame");
44-
if(nbLayers != null && layerHeight != null){
44+
if(iframe && nbLayers != null && layerHeight != null){
4545
iframe.contentWindow.state.layerHeight = layerHeight;
4646
iframe.contentWindow.state.nbLayers = nbLayers;
4747
}
@@ -58,6 +58,18 @@ function setBedDimensions(printerType){
5858
}
5959
}
6060

61+
function getCoilCAMExample(){
62+
// Check URL parameters for example vessel to load in
63+
// since there are no buttons in the simple viewer
64+
// Structure should be (ex: folder=some-folder&example=some-example (ex: folder=tutorial-functions&example=functions_sine)
65+
const currentUrl = window.location.href;
66+
const url = new URL (currentUrl);
67+
const params = url.searchParams;
68+
var folder = params.get('folder'); //specifies folder
69+
var vesselName = params.get('example'); //specifies name of file
70+
return [folder, vesselName];
71+
}
72+
6173
function setUpCodeMirror(){
6274
let textArea, textArea2;
6375
let editorCodeMirror;
@@ -73,15 +85,8 @@ function setUpCodeMirror(){
7385
getExampleVessel(defaultPathToVessel)
7486
.then(text => {editorCodeMirror.setValue(text)});
7587

76-
// Check URL parameters for example vessel to load in
77-
// since there are no buttons in the simple viewer
78-
// Structure should be (ex: folder=some-folder&example=some-example (ex: folder=tutorial-functions&example=functions_sine)
79-
const currentUrl = window.location.href;
80-
const url = new URL (currentUrl);
81-
const params = url.searchParams;
82-
var folder = params.get('folder'); //specifies folder
83-
var vesselName = params.get('example'); //specifies name of file
8488

89+
var [folder, vesselName] = getCoilCAMExample();
8590
if(vesselName !== null){
8691
if(folder == null){ folder = ""; }
8792
var pathToVessel = "examples/" + folder+'/'+vesselName+'.js'; //from URL parameters
@@ -97,17 +102,32 @@ function setUpCodeMirror(){
97102
mode: 'javascript',
98103
lineWrapping: true,
99104
});
100-
window.onload = function() { //shortcut to comment out line
101-
editorCodeMirror.setOption("extraKeys", {"Cmd-/":function(cm) {
102-
let cursor = cm.getCursor();
103-
let lineNumber = cursor.line;
104-
let currentLine = cm.getLine(lineNumber);
105-
if(currentLine.startsWith("//")){
106-
editorCodeMirror.replaceRange(currentLine.slice(2), CodeMirror.Pos(lineNumber, 0), CodeMirror.Pos(lineNumber), 0);
107-
} else{
108-
editorCodeMirror.replaceRange("//"+currentLine, CodeMirror.Pos(lineNumber, 0), CodeMirror.Pos(lineNumber), 0);
105+
window.onload = function() { //shortcut to comment out single line
106+
editorCodeMirror.setOption("extraKeys", {
107+
"Cmd-/":function(cm) {
108+
let cursor = cm.getCursor();
109+
let lineNumber = cursor.line;
110+
let currentLine = cm.getLine(lineNumber);
111+
if(currentLine.startsWith("//")){
112+
editorCodeMirror.replaceRange(currentLine.slice(2), CodeMirror.Pos(lineNumber, 0), CodeMirror.Pos(lineNumber), 0);
113+
} else{
114+
editorCodeMirror.replaceRange("//"+currentLine, CodeMirror.Pos(lineNumber, 0), CodeMirror.Pos(lineNumber), 0);
115+
}
116+
},
117+
"Cmd-Enter":function(cm) {
118+
runCode();
119+
},
120+
"Shift-Enter":function(cm) {
121+
runCode();
109122
}
110-
}},);}
123+
});
124+
}
125+
126+
editorCodeMirror.setOption("extraKeys", {"Cmd-Enter":function(cm) {
127+
console.log("working");
128+
runCode();
129+
}});
130+
111131

112132
editorCodeMirror.setSize("100%", "100%");
113133

@@ -119,14 +139,13 @@ function setUpCodeMirror(){
119139
textArea2.style.width = 140+'%';
120140
textArea2.style.height = 200+'px';
121141

122-
123142
// configs
124143
consoleCodeMirror = CodeMirror.fromTextArea(textArea2, {
125144
lineNumbers: true,
126145
mode: 'javascript',
127146
lineWrapping: true,
128147

129-
//extraKeys: {"Ctrl-Space":"autocomplete"}
148+
// extraKeys: {"Ctrl-Space":"autocomplete"}
130149
});
131150
consoleCodeMirror.setSize("100%", "100%");
132151

@@ -191,10 +210,17 @@ function setUpCodeMirror(){
191210
});
192211
}
193212

194-
195-
196-
197-
213+
var webEditorButton = document.getElementById("b_editor");
214+
if(webEditorButton){
215+
webEditorButton.addEventListener("click", function(){
216+
var [folder, vesselName] = getCoilCAMExample();
217+
if(vesselName !== null || folder !== null){
218+
window.location.href = "https://sambourgault.github.io/coilCAM-js/?folder="+folder+"&example="+vesselName;
219+
} else{
220+
window.location.href = "https://sambourgault.github.io/coilCAM-js";
221+
}
222+
});
223+
}
198224

199225
document.getElementById("b_run").addEventListener("click", runCode);
200226
function runCode() {
@@ -220,17 +246,6 @@ function setUpCodeMirror(){
220246
anchor.click();
221247
}
222248

223-
const b_docs = document.getElementById("b_docs")
224-
if(b_docs){
225-
b_docs.addEventListener("click", newTab, {capture: true});
226-
function newTab(){
227-
let newTab = document.createElement('a');
228-
newTab.href = "https://github.com/sambourgault/coilCAM-docs";
229-
newTab.target = "_blank";
230-
newTab.click();
231-
}
232-
}
233-
234249
document.getElementById("baby_pb")?.addEventListener("click", function(){setBedDimensions("baby")});
235250
document.getElementById("super_pb")?.addEventListener("click", function(){setBedDimensions("super")});
236251

‎node_modules/.package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)