<!-- Quentin Bolsee and Jake Read, MIT Center for Bits and Atoms, 2023 --> <!DOCTYPE html> <html> <head> <link rel="icon" type="image/x-icon" href="images/logo.png"> <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="https://quentinbolsee.pages.cba.mit.edu/gerber2img/assets/main-8501a109.js"></script> <link rel="stylesheet" href="https://quentinbolsee.pages.cba.mit.edu/gerber2img/assets/index-c5b4e48b.css"> </head> <body style="background-color: rgb(255, 255, 255);"> <h1>gerber2img</h1> <p>Drag and drop multiple Gerber files to start</p> <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" disabled="true" checked=checked> <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> </body> </html>