-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
170 lines (146 loc) · 12.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en">
<head>
<title>Meshmill</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="app">
<div id="tabs">
<button id="model-tab" class="tab"><img class="dirty" src="img/refresh.svg">MODEL</button>
<div id="jobtabs"></div>
<button id="addjob-tab" class="tab">+<br>ADD JOB</button>
</div>
<div id="options">
<div id="model-options">
STL model: <input id="stlfile" type="file" accept=".stl"><br>
<small><button id="reloadstl">Reload from disk</button></small><br>
<span id="triangles"></span> triangles <div id="trianglewarning" class="has-warning"><div class="warning">This is a lot of triangles! This could make the "Process surface" operation very slow, but won't have an effect after that.</div></div>
<table>
<tr><td class="formlabel"><label for="rotary">Rotary carving</label></td><td><input type="checkbox" id="rotary"></td></tr>
</table>
<hr>
<table>
<tr><td class="formlabel">XY origin:</td><td><select id="xyorigin">
<option value="fromstl">From STL model</option>
<option value="centre">Centre</option>
<option value="topleft">Top left</option>
<option value="bottomleft">Bottom left</option>
<option value="topright">Top right</option>
<option value="bottomright">Bottom right</option>
<!-- TODO: custom coordinates? -->
</select></td></tr>
<tr><td class="formlabel">Z origin:</td><td><select id="zorigin">
<option value="fromstl">From STL model</option>
<option value="centre">Centre</option>
<option value="top">Top surface</option>
<option value="bottom">Bottom surface</option>
<!-- TODO: custom coordinates? -->
</select></td></tr>
</table>
<div class="has-tooltip"><div class="tooltip">The bounding box of the model. For each axis, the minimum, maximum, and total size is shown.<br><img src="img/diagrams/boundingbox.png"></div></div>Bounds:<br>
<span id="bounds"></span>
<hr>
<table>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">The physical size represented by each pixel of the heightmap.<br><img src="img/diagrams/xyresolution.png"></div></div>XY Resolution:</td><td><input type="text" id="resolution"> <span class="unit-mm"></span></td></tr>
<tr><td class="formlabel">Heightmap:</td><td><span id="heightmapsize"></span> px <div id="heightmapwarning" class="has-warning"><div class="warning">Large heightmaps increase processing time for all operations. Try increasing the "XY Resolution" value to reduce the size of the heightmap. Tip: start with a low-quality heightmap while setting up your jobs, and switch to a finer resolution at the end to export your G-code.</div></div></td></tr>
<tr><td class="formlabel"><label for="bottomside">Bottom side</label></td><td><input type="checkbox" id="bottomside"></td></tr>
</table>
<hr>
<button id="render-heightmap">Process surface</button><br>
<button id="model-cancel">Stop</button> <progress max="100" id="model-pct"></progress>
<span id="model-eta"></span><br>
<hr>
<img id="heightmap-img">
</div>
<div id="toolpath-options" style="display:none">
<table>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip"><img src="img/diagrams/toolshape.png"></div></div>Tool shape:</td><td><select id="toolshape">
<option value="ball">Ball-nose end mill</option>
<option value="flat">Flat end mill</option>
<option value="vbit90">90° V-bit</option>
<option value="vbit60">60° V-bit</option>
<option value="vbit30">30° V-bit</option>
</select></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip"><img src="img/diagrams/tooldiameter.png"></div></div>Tool diameter:</td><td><input type="text" id="tooldiameter"></input> <span class="unit-mm"></span></td></tr>
<tr><td class="formlabel">XY feed rate:</td><td><input type="text" id="xyfeed"></input> <span class="unit-mmmin"></span></td></tr>
<tr><td class="formlabel">Z feed rate:</td><td><input type="text" id="zfeed"></input> <span class="unit-mmmin"></span></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">Height to move above the part for rapid moves. This is relative to the top surface of the bounding box.<br><img src="img/diagrams/rapidz.png"></div></div>Rapid Z clearance:</td><td><input type="text" id="safez"></input> <span class="unit-mm"></span> <div id="safezwarning" class="has-warning"><div class="warning">Negative rapid Z clearance can cause rapid movements to crash into the part.</div></div></td></tr>
<tr><td class="formlabel">Spindle:</td><td><input type="text" id="rpm"> rpm</td></tr>
</table>
<hr>
<table>
<tr><td class="formlabel">Cut direction:</td><td colspan="2"><select id="direction">
<option value="horizontal">Horizontal (along X)</option>
<option value="vertical">Vertical (along Y)</option>
<option value="helical">Helical (rotary only)</option>
</select></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">Perpendicular distance between consecutive passes.<br><img src="img/diagrams/stepover.png"></div></div>Step over:</td><td><input type="text" id="stepover"></input> <span class="unit-mm"></span> <div id="stepoverwarning" class="has-warning"><div class="warning">Step over should be smaller than tool diameter.</div></div></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">Maximum deviation of a flat surface, if cut by a ball-nose end mill with the given diameter and given step over.<br><img src="img/diagrams/nominaldeviation.png"></div></div>Nominal deviation:</td><td><span id="surfacedeviation"></span> <span class="unit-mm"></span></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">Maximum depth of cut for a single pass. Where the required depth exceeds this amount, it will be achieved with multiple passes.<br><img src="img/diagrams/stepdown.png"></div></div>Step down:</td><td><input type="text" id="stepdown"></input> <span class="unit-mm"></span></td></tr>
<tr><td class="formlabel"><div class="has-tooltip"><div class="tooltip">Distance to keep tool away from finished model geometry. This leaves material for a finishing pass to clean up.<br><img src="img/diagrams/stocktoleave.png"></div></div>Stock to leave:</td><td><input type="text" id="clearance"></input> <span class="unit-mm"></span> <div id="clearancewarning" class="has-warning"><div class="warning">Negative stock to leave will make the part smaller than the model. This is untested and usually not what you want.</div></div></td></tr>
</table>
<hr>
<table>
<tr><td class="formlabel"><label for="roughingonly"><div class="has-tooltip"><div class="tooltip">Only generate roughing passes. Don't generate the finishing pass. If you only want the finishing pass, set the step down larger than the height of the model.<br><img src="img/diagrams/roughingonly.png"></div></div>Roughing only</label></td>
<td><input type="checkbox" id="roughingonly"></td></tr>
<tr><td class="formlabel"><label for="rampentry"><div class="has-tooltip"><div class="tooltip">Reduce plunge forces by ramping the cutter diagonally where possible.<br><img src="img/diagrams/rampentry.png"></div></div>Ramp entry</label></td>
<td><input type="checkbox" id="rampentry"></td></tr>
<tr><td class="formlabel"><label for="omittop"><div class="has-tooltip"><div class="tooltip">Don't cut the top surface of the part. This saves wasting time on slowly moving the cutter back and forth across flat top surfaces.<br><img src="img/diagrams/omittop.png"></div></div>Omit top</label></td>
<td><input type="checkbox" id="omittop"></td></tr>
<tr><td class="formlabel"><label for="clearbottom"><div class="has-tooltip"><div class="tooltip">Allow cutting below the bottom of the bounding box. This allows you to cut straight sides with a ball-nose end mill without leaving a radius at the bottom.<br><img src="img/diagrams/clearbottom.png"></div></div>Cut below bottom</label></td>
<td><input type="checkbox" id="clearbottom"></td></tr>
<tr><td class="formlabel"><label for="clearedges"><div class="has-tooltip"><div class="tooltip">Allow cutting beyond the edges of the bounding box. This allows you to cut the outside edges of the model.<br><img src="img/diagrams/clearedges.png"></div></div>Cut beyond edges</label></td>
<td><input type="checkbox" id="clearedges"></td></tr>
</table>
<hr>
<button id="generate-toolpath">Generate toolpath</button><br>
<button id="toolpath-cancel">Stop</button> <progress max="100" id="toolpath-pct"></progress>
<span id="toolpath-eta"></span><br>
<button id="save-gcode">Save G-code</button><br>
<div class="has-tooltip"><div class="tooltip">Rough estimate of how long it will take for the job to complete assuming infinite acceleration. Adjust your machine parameters using the "Edit -> Settings..." menu.</div></div>Cycle time estimate: <span id="cycletime">?</span><br>
<small><button id="deletejob">Delete job</button></small><br>
</div>
</div>
<div id="scene">
<div id="scene-view"></div>
<div id="toolpath-scene-controls"><label for="show-toolpath">Show toolpath</label><input type="checkbox" id="show-toolpath" checked></div>
</div>
</div>
<script src="js/lib/three.min.js"></script>
<script src="js/lib/STLLoader.js"></script>
<script src="js/lib/OrbitControls.js"></script>
<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/fmt.js"></script>
<script src="js/project.js"></script>
<script src="js/settings.js"></script>
<script src="js/heightmap.js"></script>
<script src="js/toolpath.js"></script>
<script src="js/3d.js"></script>
<script src="js/progress.js"></script>
<script src="js/ui.js"></script>
<script type="text/javascript">
// TODO: instead of running this every second, only do it after the window is resized or scrolled
setInterval(function() {
$('.tooltip').each(function() {
// move the tooltip back to its default position
$(this).css('position', '');
$(this).css('top', 'auto');
// find out how much space there is between the bottom of the tooltip and the bottom of the window
let tooltipbottom = $(this).offset().top + $(this).height();
let windowbottom = window.visualViewport.offsetTop + window.visualViewport.height - 30; // XXX: why -30?
let spacebelow = windowbottom - tooltipbottom;
// if it doesn't fit, position it manually
if (spacebelow < 0) {
$(this).css('position', 'fixed');
let newtop = $(this).offset().top + spacebelow;
if (newtop < 0) newtop = 0;
$(this).css('top', newtop);
}
});
}, 1000);
</script>
</body>
</html>