430 lines
23 KiB
HTML
430 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<meta name="author" content="Stewart Allen">
|
|
<meta name="keywords" content="3d slicer,slicer,3d slicing,cnc,cam,toolpaths,toolpath generation,kiri,kirimoto,kiri:moto,gcode,cura,simplify 3d,prusaslicer,fdm,sla" />
|
|
<meta name="copyright" content="stewart allen [sa@grid.space]">
|
|
<meta name="description" content="Browser-based 3D slicer, gcode and CNC toolpath generator">
|
|
<meta property="og:description" content="Kiri:Moto is a unique 3D slicer that runs entirely in browser and creates output for your favorite maker tools: 3D Printers, CNC Mills and Laser Cutters.">
|
|
<meta property="og:title" content="Browser-based 3D Slicer">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://grid.space/kiri/">
|
|
<meta property="og:image" content="https://static.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="/kiri/index.css?{{version}}">
|
|
<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
|
|
<script src="/code/kiri.js?{{version}}"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="f-col">
|
|
<div id="curtain" class="j-center a-center"><img id="gsbox"/>loading...</div>
|
|
<div id="container"></div>
|
|
<div id="tracker"></div>
|
|
<div id="top-sep"></div>
|
|
<div id="top" class="f-row">
|
|
<div id="app-mode">
|
|
<div id="app-mode-name"></div>
|
|
<div id="mode-info" class="f-col">
|
|
<div><label>Device:</label><div id="mode-device">123</div></div>
|
|
<div><label>Profile:</label><div id="mode-profile">456</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<div id="app-name" class="f-col a-center">
|
|
<div>Kiri:Moto</div>
|
|
<div id="app-info">version</div>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<div id="app-acct">
|
|
<i class="fas fa-user-cog"></i>
|
|
<div id="acct-pop" class="f-col">
|
|
<div id="acct-menu" class="f-col">
|
|
<div id="acct-lang">
|
|
<label><i class="fas fa-caret-left"></i> language</label>
|
|
<div id="lang-pop" class="f-col">
|
|
<div id="lset-en">english</div>
|
|
<!-- <div id="lset-da">danish</div> -->
|
|
</div>
|
|
</div>
|
|
<div id="acct-export" class="f-col a-end">
|
|
<label>export</label>
|
|
</div>
|
|
<div id="acct-help" class="f-col a-end">
|
|
<label>help</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mid-sep"></div>
|
|
<div id="mid" class="grow f-row">
|
|
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
|
|
<div id="mid-lcol" class="f-col j-center noshow">
|
|
<div id="lt-back" class="lt-menu lt-enabled">
|
|
<i class="fas fa-arrow-circle-left"></i>
|
|
</div>
|
|
<div id="lt-trash" class="lt-menu lt-enabled">
|
|
<i class="fas fa-times-circle"></i>
|
|
</div>
|
|
<div id="lt-top"></div>
|
|
<div id="lt-setup" class="lt-menu lt-enabled">
|
|
<i class="fas fa-cogs"></i>
|
|
<label>setup</label>
|
|
<div id="set-pop" class="pop-lcol f-row">
|
|
<div id="set-device">
|
|
<i class="fas fa-cube"></i>
|
|
<label>machine</label>
|
|
</div>
|
|
<div id="set-tools">
|
|
<i class="fas fa-tools"></i>
|
|
<label>tools<label>
|
|
</div>
|
|
<div id="set-prefs">
|
|
<i class="fas fa-sliders-h"></i>
|
|
<label>prefs<label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="lt-file" class="lt-menu lt-enabled">
|
|
<i class="fas fa-folder"></i>
|
|
<label>files</label>
|
|
<div id="file-pop" class="pop-lcol f-row">
|
|
<div id="file-recent">
|
|
<i class="fas fa-list"></i>
|
|
<label>recent</label>
|
|
</div>
|
|
<div id="file-import">
|
|
<i class="fas fa-file-upload"></i>
|
|
<label>import<label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="act-sep"></div>
|
|
<div id="lt-view" class="lt-menu lt-enabled">
|
|
<i class="fas fa-eye"></i>
|
|
<label>view</label>
|
|
<div id="pop-view" class="pop-lcol f-row">
|
|
<div id="view-arrange">
|
|
<i class="fas fa-th"></i>
|
|
<label>arrange</label>
|
|
</div>
|
|
<div id="view-top">
|
|
<i class="fas fa-square"></i>
|
|
<label>top</label>
|
|
</div>
|
|
<div id="view-home">
|
|
<i class="fas fa-home"></i>
|
|
<label>home</label>
|
|
</div>
|
|
<div id="view-clear">
|
|
<i class="far fa-square"></i>
|
|
<label>clear</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="act-slice" class="lt-menu lt-enabled">
|
|
<i class="fas fa-bars"></i>
|
|
<label id="label-slice" title="analyze parts">slice</label>
|
|
<div id="pop-slice" class="pop-lcol f-row">
|
|
<div id="act-preview">
|
|
<i class="fas fa-cubes"></i>
|
|
<label id="label-preview" title="show routing and paths">preview</label>
|
|
</div>
|
|
<div id="act-animate">
|
|
<i class="fas fa-running"></i>
|
|
<label id="label-animate" title="render routing on a mesh">animate</label>
|
|
</div>
|
|
<div id="act-export">
|
|
<i class="fas fa-file-download"></i>
|
|
<label id="label-export" title="generate downloadable files">export</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="lt-sep"></div>
|
|
<div id="lt-render" class="lt-menu lt-enabled">
|
|
<i class="fas fa-border-style"></i>
|
|
<label>render</label>
|
|
<div id="pop-render" class="pop-lcol f-row">
|
|
<div id="render-solid" class="grow a-center">
|
|
<i class="fas fa-th-large"></i>
|
|
<label>solid</label>
|
|
</div>
|
|
<div id="render-wire" class="grow a-center">
|
|
<i class="fas fa-border-all"></i>
|
|
<label>wire</label>
|
|
</div>
|
|
<div id="render-ghost" class="grow a-center">
|
|
<i class="fas fa-border-none"></i>
|
|
<label>ghost</label>
|
|
</div>
|
|
<div id="render-hide" class="grow a-center">
|
|
<label>hide</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="lt-rotate" class="lt-menu">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<label>rotate</label>
|
|
<div id="pop-rotate" class="pop-lcol f-row russo">
|
|
<div>
|
|
<div class="grow a-center">
|
|
<i id="rot_x_lt" class="fas fa-chevron-left"></i>
|
|
<label>X</label>
|
|
<i id="rot_x_gt" class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<input id="rot_x" class="value center" size="5"/ value="0">
|
|
</div>
|
|
<div>
|
|
<div class="grow a-center">
|
|
<i id="rot_y_lt" class="fas fa-chevron-left"></i>
|
|
<label>Y</label>
|
|
<i id="rot_y_gt" class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<input id="rot_y" class="value center" size="5"/ value="0">
|
|
</div>
|
|
<div>
|
|
<div class="grow a-center">
|
|
<i id="rot_z_lt" class="fas fa-chevron-left"></i>
|
|
<label>Z</label>
|
|
<i id="rot_z_gt" class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<input id="rot_z" class="value center" size="5"/ value="0">
|
|
</div>
|
|
<!-- <div id="lay-flat" class="f-col j-center center">lay flat</div> -->
|
|
<div id="unrotate" class="f-col j-center">reset</div>
|
|
</div>
|
|
</div>
|
|
<div id="lt-scale" class="lt-menu">
|
|
<i class="fas fa-expand"></i>
|
|
<label>scale</label>
|
|
<div id="pop-scale" class="pop-lcol f-row russo">
|
|
<div>
|
|
<input id="lock_x" type="checkbox" checked/>
|
|
<div><label>X</label></div>
|
|
<div><input id="size_x" xsize="8" class="value"/></div>
|
|
<div><input id="scale_x" xsize="8" class="value" value="1"/></div>
|
|
</div>
|
|
<div>
|
|
<input id="lock_y" type="checkbox" checked/>
|
|
<div><label>Y</label></div>
|
|
<div><input id="size_y" xsize="8" class="value"/></div>
|
|
<div><input id="scale_y" xsize="8" class="value" value="1"/></div>
|
|
</div>
|
|
<div>
|
|
<input id="lock_z" type="checkbox" checked/>
|
|
<div><label>Z</label></div>
|
|
<div><input id="size_z" xsize="8" class="value"/></div>
|
|
<div><input id="scale_z" xsize="8" class="value" value="1"/></div>
|
|
</div>
|
|
<div class="f-col j-center">
|
|
<div><label>axis</label></div>
|
|
<div><label>size</label></div>
|
|
<div><label>scale</label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="lt-nozzle" class="lt-menu noshow">
|
|
<i class="fas fa-map-marker"></i>
|
|
<label>nozzle</label>
|
|
<div id="pop-nozzle" class="pop-lcol f-row fillh russo"></div>
|
|
</div>
|
|
<div id="lt-end"></div>
|
|
</div>
|
|
<div id="mid-mcol" class="grow">
|
|
<div id="modal">
|
|
<div id="modal-box" class="f-col">
|
|
|
|
<div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
|
|
<div id="mod-help" class="mdialog f-col">
|
|
<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>
|
|
<div id="mod-setup" class="mdialog f-row">
|
|
<div class="f-col left a-stretch">
|
|
<label class="header">select a device type</label>
|
|
<div class="f-col">
|
|
<table><tr>
|
|
<th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
|
|
<th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
|
|
</tr><tr>
|
|
<th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
|
|
<th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
|
|
</tr></table>
|
|
</div>
|
|
<label class="header sub">standard devices</label>
|
|
<div class="f-col mh0 mh35 j-center a-stretch">
|
|
<div id="device-list" class="devlist f-col overy"></div>
|
|
</div>
|
|
<label class="header sub">my devices</label>
|
|
<div class="f-col grow">
|
|
<div id="device-my" class="devlist f-col grow overy"></div>
|
|
<div class="f-row footer">
|
|
<div class="grow"></div>
|
|
<button id="device-add">copy</button>
|
|
<button id="device-del">delete</button>
|
|
<button id="device-exp">export</button>
|
|
<div class="grow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="f-col grow a-stretch">
|
|
<label class="header">selected device</label>
|
|
<div class="f-row">
|
|
<div id="device1" class="f-col t-body t-inset overy grow"></div>
|
|
<div class="t-pad"></div>
|
|
<div id="device2" class="f-col t-body t-inset overy grow"></div>
|
|
</div>
|
|
<div class="t-pad"></div>
|
|
<div id="gcode-edit" class="f-col grow">
|
|
<div id="dg" class="f-col t-body t-inset"></div>
|
|
<div class="t-pad"></div>
|
|
<div id="dev-gcode" class="grow"></div>
|
|
</div>
|
|
<div id="device-action" class="f-row footer">
|
|
<div class="grow"></div>
|
|
<button id="device-save">save</button>
|
|
<div class="grow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mod-files" class="mdialog f-col">
|
|
<label class="set-header">recent files</label>
|
|
<div id="catalogList" class="f-col"></div>
|
|
</div>
|
|
<div id="mod-saves" class="mdialog f-col">
|
|
<label class="set-header">saved settings</label>
|
|
<div id="settingsList" class="f-col"></div>
|
|
</div>
|
|
<div id="mod-tools" class="mdialog">
|
|
<div class="f-col">
|
|
<div class="f-row t-head">
|
|
<label class="t-33">tool</label>
|
|
<div class="t-pad"></div>
|
|
<label class="t-33">detail</label>
|
|
<div class="t-pad"></div>
|
|
<label class="t-33">view</label>
|
|
</div>
|
|
<div class="f-row">
|
|
<div class="f-col t-33">
|
|
<select id="tool-select" size="10" class="grow"></select>
|
|
</div>
|
|
<div class="t-pad"></div>
|
|
<div class="f-col t-33 t-body t-inset">
|
|
<div class="f-row var-row"><label>name</label><input id="tool-name" size="15"></input></div>
|
|
<div class="f-row var-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="f-row var-row" title="tool number to use
in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div>
|
|
<div class="f-row var-row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
|
|
<div class="set-header f-col">shaft</div>
|
|
<div class="f-row var-row" title="shaft diameter in inches
unless metric is checked
then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
|
|
<div class="f-row var-row" title="shaft length in inches
unless metric is checked
then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
|
|
<div class="set-header f-col">flute</div>
|
|
<div class="f-row var-row" title="flute diameter in inches
unless metric is checked
then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
|
|
<div class="f-row var-row" title="flute length in inches
unless metric is checked
then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
|
|
<div class="set-header f-col">taper</div>
|
|
<!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
|
|
<div class="f-row var-row" title="tip width in inches
unless metric is checked
then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
|
|
</div>
|
|
<div class="t-pad"></div>
|
|
<div id="tool-view" class="f-col t-33 t-body"></div>
|
|
</div>
|
|
<div id="tool-action" class="f-row j-center">
|
|
<button id="tool-add"><i class="fas fa-plus"></i></button>
|
|
<button id="tool-del"><i class="fas fa-minus"></i></button>
|
|
<div class="t-pad2"></div>
|
|
<button id="tools-save">save</button>
|
|
<button id="tools-close">done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mod-prefs" class="mdialog f-col a-center">
|
|
<b>Application Preferences</b>
|
|
<hr width="80%">
|
|
<div class="f-row">
|
|
<div id="prefs-gen1" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
<div id="prefs-gen2" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
<div id="prefs-lay" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
<div id="prefs-xpo" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
<div id="prefs-prt" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
<div id="prefs-add" class="f-col"></div>
|
|
<div class="t-pad2"></div>
|
|
</div>
|
|
</div>
|
|
<div id="mod-local" class="mdialog f-col"></div>
|
|
<div id="mod-print" class="mdialog f-col"></div>
|
|
<div id="mod-any" class="mdialog f-col"></div>
|
|
<!-- hidden file input loader -->
|
|
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
|
|
<div class="mod-end"></div></div>
|
|
</div>
|
|
<div id="layer-slider" class="f-col a-stretch">
|
|
<div id="layers" class="f-row j-center"></div>
|
|
<div id="slider" class="f-row russo">
|
|
<div id="slider-zero">0</div>
|
|
<div id="slider-center" class="grow">
|
|
<div id="slider-hold" class="f-row">
|
|
<div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
|
|
<div id="slider-mid"> </div>
|
|
<div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
|
|
</div>
|
|
</div>
|
|
<div id="slider-max">∞</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mid-rcol" class="f-col j-center noshow">
|
|
<div id="set-menu" class="f-col">
|
|
<div id="speeds"><div id="speedbar" class="f-col a-stretch j-center"></div></div>
|
|
<div id="set-top" class="set-group"><a>settings</a></div>
|
|
<div id="settings" class="f-col"></div>
|
|
<div id="set-end" class="set-group"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="end" class="f-col a-center">
|
|
<div id="bottom"></div>
|
|
<div id="alert-area">
|
|
<div id="alert-border">
|
|
<div id="alert-text">alerts<br>alerts<br>alerts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="gdpr" class="noshow">
|
|
<p>this site uses <A href="/privacy.html" target="privacy">cookies</a> to preserve application preferences</p>
|
|
<button id="gotit" class="f-col j-center">got it</button>
|
|
</div>
|
|
<div id="tool-info" class="noshow"></div>
|
|
<div id="context-menu">
|
|
<button id="context-clear-workspace">clear workspace</button>
|
|
<button id="context-export-workspace">export workspace</button>
|
|
<div class="sep"></div>
|
|
<button id="context-mirror">mirror</button>
|
|
<button id="context-duplicate">duplicate</button>
|
|
<div class="sep"></div>
|
|
<button id="context-export-stl">export as STL</button>
|
|
</div>
|
|
<div id="fps" class="noshow"></div>
|
|
<div id="layer-animate" class="f-col a-center"></div>
|
|
<div id="layer-toolpos" class="f-row a-center"></div>
|
|
<div id="winfo" class="noshow"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|