Newer
Older
<!-- Quentin Bolsee and Jake Read, MIT Center for Bits and Atoms, 2023 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<script type="module" crossorigin src="/assets/main-e1885530.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/index-c5b4e48b.css">
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
</head>
<body style="background-color: rgb(255, 255, 255);">
<h1>gerber2png</h1>
<div id="dropZone"><p id="dropText">↑</p></div>
<input type="file" id="fileInput" multiple hidden></input>
<canvas id="canvas" hidden></canvas>
<div class="container">
<div class="panel">
<h2>Viewer</h2>
<div class="preview">
<svg id="previewSVG"></svg>
</div>
<div>
<!-- <button class="interface" id="loadButton">Load file(s)...</button></input> -->
<button class="interface" id="downloadRenderButton">Download render</button>
<button class="interface" id="downloadlayersButton">Download layers</button>
</div>
</div>
<div class="panel">
<h2>Settings</h2>
<div class="settings">
<h3>Rendering</h3>
<div>
<input type="checkbox" id="settingsFill" checked=checked>
<label for="settingsFill">Fill edge cut</label>
</div>
<div>
<input type="checkbox" id="settingsAsSVG" checked=unchecked>
<label for="settingsAsSVG">Download as SVG</label>
</div>
<h3>Resolution [DPI]</h3>
<div>
<input id="settingsDPI" step=1 min=1 type="number" value="1000">
</div>
<h3>Origin [mm]</h3>
<div>
<label for="settingsOrigX">x:</label>
<input id="settingsOrigX" step=0.1 type="number">
<label for="settingsOrigY">y:</label>
<input id="settingsOrigY" step=0.1 type="number">
<button class="lock" id="settingsLockOrig">🔓</button>
</div>
<h3>Dimensions [mm]</h3>
<div>
<label for="settingsDimX">x:</label>
<input id="settingsDimX" step=0.1 type="number">
<label for="settingsDimY">y:</label>
<input id="settingsDimY" step=0.1 type="number">
<button class="lock" id="settingsLockDim">🔓</button>
</div>
<h3>Margins [mm]</h3>
<div>
<label for="settingsMarginX">x:</label>
<input id="settingsMarginX" step=0.1 min=0 type="number" value=3>
<label for="settingsMarginY">y:</label>
<input id="settingsMarginY" step=0.1 min=0 type="number" value=3>
</div>
</div>
</div>
</div>