grid-apps-cmms/web/kiri/index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="copyright" content="stewart allen [sa@grid.space]">
    <meta name="description" content="3d slice modeler, gcode and CNC toolpath generator">
    <meta name="keywords" content="3d slicer,slicer,3d slicing,cnc,cam,toolpaths,toolpath generation,kiri,kirimoto,kiri:moto,gcode" />
    <meta name="author" content="Stewart Allen">
    <meta property="og:description" content="Kiri:Moto is a unique multi-modal 3D slicer that runs entirely in browser and creates output for your favorite maker tools: 3D Printers, CNC Mills and Laser Cutters. Advanted layer view helps debug prints ahead of time.">
    <meta property="og:title" content="Browser-based Slicer for Makers">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://grid.space/kiri">
    <meta property="og:image" content="https://grid.space/img/logo_km_og.png">
    <title>Kiri:Moto</title>
    <link rel="icon" href="/kiri/favicon.ico">
    <link rel="apple-touch-icon" href="/kiri/favicon-mobile.png">
    <link rel="stylesheet" type="text/css" href="/moto/style.css?{{version}}">
    <link rel="stylesheet" type="text/css" href="/kiri/style.css?{{version}}">
    <script src="/code/kiri.js?{{version}}"></script>
</head>
<body>
    <!-- app title home page links -->
    <div id="appid">
        <span id="applang" title="language">A<div id="langpop"></div></span>
        <span><a href="/" id="appname" target="home">Kiri:Moto Slicer</a></span>
        <span id="apphelp" title="help">?</span>
    </div>
    <!-- left control menu -->
    <div id="control-left" class="control"><div id="assets"></div></div>
    <!-- right control menu -->
    <div id="control-right" class="control"><div id="control"></div></div>
    <!-- selected device and print profiles -->
    <div id="selected" class="control">
        <span id="selected-mode">mode</span>
        <span>&nbsp;&nbsp;:&nbsp;&nbsp;</span>
        <span id="selected-device">device</span>
        <span>&nbsp;&nbsp;:&nbsp;&nbsp;</span>
        <span id="selected-process">settings</span>
    </div>
    <!-- all modal dialogs -->
    <div id="modal">
        <div id="help">
        <a href="https://en.wikipedia.org/wiki/Slicer_(3D_printing)">wikipedia</a>
        <a href="https://www.onshape.com/cad-blog/partner-spotlight-kirimoto">Onshape</a>
        <a href="https://www.inov3d.net/3d-printing-slicer-software-download/">slicer news</a>
        <a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
        <a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
        </div>
        <!-- changeable print dialog -->
        <div id="print"></div>
        <!-- local devices dialog -->
        <div id="local" class="dialog">
            <button id="local-close" class="modal-x">X</button>
            <center><b><u>Grid.Local Devices</u></b></center>
            <br>
            <div id="local-dev" class="flow-col"></div>
        </div>
        <!-- hidden file input loader -->
        <input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
    </div>
    <!-- 3js -->
    <div id="container"></div>
    <!-- progress bar -->
    <div id="loading"><div id="progress"><span id="prostatus">status</span></div></div>
    <!-- file load catalog -->
    <div id="catalog" class="dialog">
        <div id="catalogBody" class="flow-col">
            <label id="localCache">recent files</label>
            <div id="catalogList"></div>
        </div>
    </div>
    <!-- settings load dialog -->
    <div id="settings" class="dialog">
        <div id="settingsBody" class="flow-col">
            <label id="settingsCache">saved settings</label>
            <div id="settingsList"></div>
        </div>
    </div>
    <!-- GCode filter editor -->
    <div id="devices" class="dialog flex-col">
        <div id="devices-body" class="flow-col">
            <div id="device-labels" class="flow-row">
                <label>device</label>
                <label>settings</label>
            </div>
            <div id="device-cols" class="flow-row">
                <div id="device-list" class="flow-col">
                    <select id="device-select" size="15"></select>
                </div>
                <div id="device-info">
                    <div id="device"></div>
                </div>
            </div>
            <div style="position:relative">
                <div id="insert" style="position:absolute"></div>
            </div>
            <div id="device-action" class="flow-row">
                <button id="device-add">+</button>
                <button id="device-del">-</button>
                <span id="device-spacer"></span>
                <button id="device-favorites">favorites</button>
                <button id="device-all">all</button>
                <span id="device-spacer"></span>
                <button id="device-save">save</button>
                <button id="device-close">close</button>
            </div>
        </div>
    </div>
    <!-- CAM tools dialog -->
    <div id="tools" class="dialog">
        <div id="tools-body" class="flow-col">
            <div id="tool-labels" class="flow-row">
                <label>tool</label>
                <label>detail</label>
                <label>view</label>
            </div>
            <div id="tool-cols" class="flow-row">
                <div id="tool-list" class="flow-col">
                    <select id="tool-select" size="15"></select>
                </div>
                <div id="tool-info" class="flow-col">
                    <div class="flow-row"><label>type</label>
                        <select id="tool-type">
                            <option value="endmill" selected>end</option>
                            <option value="ballmill">ball</option>
                            <option value="tapermill">taper</option>
                        </select>
                    </div>
                    <div class="flow-row"><label>name</label><input id="tool-name" size="15"></input></div>
                    <div class="flow-row" title="tool number to use&#010;in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div>
                    <div class="flow-row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
                    <div class="grouphead">shaft</div>
                    <div class="flow-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
                    <div class="flow-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
                    <div class="grouphead">flute</div>
                    <div class="flow-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
                    <div class="flow-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
                    <div class="grouphead">taper</div>
                    <!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
                    <div class="flow-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
                </div>
                <div id="tool-view" class="flow-col"></div>
            </div>
            <div id="tool-action" class="flow-row">
                <button id="tool-add">+</button>
                <button id="tool-del">-</button>
                <span id="tool-spacer"></span>
                <button id="tools-save">save</button>
                <button id="tools-close">done</button>
            </div>
        </div>
    </div>
    <!-- selection info -->
    <div id="widget-info">
        <div id="selection">
            <span class="sel-span">
                <label class="label">scale</label>
                <div class="sel-pop">
                    <table>
                        <tr>
                            <th></th>
                            <td><label>size</label></td>
                            <td><label>scale</label></td>
                            <td><label>lock</label></td>
                        </tr>
                        <tr>
                            <td><label>x</label></td>
                            <td><input id="size_x" size="8" class="value"/></td>
                            <td><input id="scale_x" size="3" class="value" value="1"/></td>
                            <td><input id="lock_x" type="checkbox" checked/></td>
                        </tr>
                        <tr>
                            <td><label>y</label></td>
                            <td><input id="size_y" size="8" class="value"/></td>
                            <td><input id="scale_y" size="3" class="value" value="1"/></td>
                            <td><input id="lock_y" type="checkbox" checked/></td>
                        </tr>
                        <tr>
                            <td><label>z</label></td>
                            <td><input id="size_z" size="8" class="value"/></td>
                            <td><input id="scale_z" size="3" class="value" value="1"/></td>
                            <td><input id="lock_z" type="checkbox" checked/></td>
                        </tr>
                    </table>
                </div>
            </span>
            <span class="sel-span">
                <label class="label">rotate</label>
                <div class="sel-pop">
                    <table>
                        <tr><td>
                            <label>z</label>
                            <input id="rot_z" class="value" size="5"/ value="0">
                        </td></tr>
                        <tr><td>
                            <label>y</label>
                            <input id="rot_y" class="value" size="5"/ value="0">
                        </td></tr>
                        <tr><td>
                            <label>x</label>
                            <input id="rot_x" class="value" size="5"/ value="0">
                        </td></tr>
                    </table>
                </div>
            </span>
            <span id="ext-sel" class="sel-span">
                <label class="label">extruder</label>
                <div class="sel-pop"><div id="sel-ext"></div></div>
            </span>
            <span id="stock" class="sel-span">
                <label class="label">stock</label>
                <label id="stock-width" class="value">mm</label> x
                <label id="stock-depth" class="value">mm</label> x
                <label id="stock-height" class="value">mm</label>
            </span>
        </div>
    </div>
    <!-- layer slider -->
    <div id="layer-view" class="flow-row">
        <button id="layer-toggle" title="toggle layers">layers</button>
        <div id="layers"></div>
        <input id="layer-id" size="4" title="selected layer">
        <input id="layer-slider" type="range" title="layer selection">
        <button id="layer-range" title="toggle section view">section</button>
        <input id="layer-span" size="4" value="1" title="layer span">
        <input id="opacity" type="range" title="opacity" min=0 max=100>
    </div>
    <!-- alert area -->
    <div id="alert-area">
        <div id="alert-border">
            <div id="alert-text"></div>
        </div>
    </div>
</body>
</html>