checkpoint settings, language, other modal dialog work
This commit is contained in:
Stewart Allen
parent
48f918b177
commit
28a1cd5051
10 changed files with 292 additions and 138 deletions
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
--fg-blue-gray: #89a;
|
||||
--bg-blue-gray: #abc;
|
||||
--fg-gray: #495057;
|
||||
--bg-gray: rgba(0,0,0,0.25);
|
||||
}
|
||||
setpopsetpopa, a:hover, a:visited {
|
||||
border: none;
|
||||
|
|
@ -29,6 +29,7 @@ div {
|
|||
position: relative;
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
outline: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
|
|
@ -179,6 +180,53 @@ th, tr, td {
|
|||
#app-acct {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#app-acct:hover #acct-pop {
|
||||
display: flex;
|
||||
}
|
||||
#acct-pop {
|
||||
display: none;
|
||||
color: var(--fg-gray);
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 100%;
|
||||
right: -3px;
|
||||
}
|
||||
#acct-pop > div {
|
||||
margin-top: 10px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 5px 0 5px 0;
|
||||
}
|
||||
#acct-pop > div > div {
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
#acct-pop > div:hover {
|
||||
color: #000;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
#acct-lang:hover #lang-pop {
|
||||
display: flex;
|
||||
}
|
||||
#lang-pop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: -6px;
|
||||
align-items: stretch;
|
||||
text-align: right;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
#lang-pop > div {
|
||||
padding: 4px 6px 4px 6px;
|
||||
}
|
||||
#lang-pop > div:hover {
|
||||
color: #000;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
#mid {
|
||||
pointer-events: none;
|
||||
|
|
@ -196,12 +244,12 @@ th, tr, td {
|
|||
#lt-top {
|
||||
height: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: var(--bg-blue-gray);
|
||||
background-color: var(--bg-gray);
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
#lt-sep {
|
||||
background-color: var(--bg-blue-gray);
|
||||
background-color: var(--bg-gray);
|
||||
height: 10px;
|
||||
left: -5px;
|
||||
}
|
||||
|
|
@ -209,7 +257,7 @@ th, tr, td {
|
|||
#lt-end {
|
||||
height: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: var(--bg-blue-gray);
|
||||
background-color: var(--bg-gray);
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +278,7 @@ th, tr, td {
|
|||
border: 1px solid rgba(0,0,0,0);
|
||||
border-radius: 3px;
|
||||
width: 60px;
|
||||
color: var(--fg-blue-gray);
|
||||
color: var(--fg-gray);
|
||||
}
|
||||
|
||||
.pop-lcol > div:hover {
|
||||
|
|
@ -246,7 +294,7 @@ th, tr, td {
|
|||
padding: 5px 5px 5px 10px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
border-radius: 3px;
|
||||
color: var(--fg-blue-gray);
|
||||
color: var(--fg-gray);
|
||||
left: -5px;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
|
@ -313,7 +361,7 @@ th, tr, td {
|
|||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 300px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
background-color: var(--bg-gray);
|
||||
border-bottom: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
overflow: hidden;
|
||||
|
|
@ -332,11 +380,12 @@ th, tr, td {
|
|||
font-family: monospace;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
#mod-top {
|
||||
|
||||
.mod-top {
|
||||
height: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
background-color: var(--bg-gray);
|
||||
}
|
||||
#mod-x {
|
||||
position: absolute;
|
||||
|
|
@ -344,11 +393,23 @@ th, tr, td {
|
|||
bottom: -20px;
|
||||
right: 5px;
|
||||
}
|
||||
#mod-end {
|
||||
.mod-end {
|
||||
height: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
background-color: var(--bg-gray);
|
||||
}
|
||||
|
||||
.dev-type {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
margin: 5px;
|
||||
}
|
||||
.dev-sel {
|
||||
color: #033;
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
#slider {
|
||||
|
|
@ -431,14 +492,14 @@ th, tr, td {
|
|||
padding: 1px 10px 2px 2px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: var(--bg-blue-gray);
|
||||
background-color: var(--bg-gray);
|
||||
}
|
||||
#set-end {
|
||||
color: black;
|
||||
padding: 1px 10px 2px 2px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
background-color: var(--bg-blue-gray);
|
||||
background-color: var(--bg-gray);
|
||||
height: 10px;
|
||||
}
|
||||
.set-group {
|
||||
|
|
@ -449,7 +510,7 @@ th, tr, td {
|
|||
border-radius: 3px;
|
||||
margin: 2px 0 2px 4px;
|
||||
padding: 8px 10px 8px 5px;
|
||||
color: var(--fg-blue-gray);
|
||||
color: var(--fg-gray);
|
||||
right: -5px;
|
||||
}
|
||||
.set-group:hover {
|
||||
|
|
@ -470,7 +531,7 @@ th, tr, td {
|
|||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.set-pop label {
|
||||
.var-row label {
|
||||
padding: 2px 4px 2px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,21 @@
|
|||
<div class="grow"></div>
|
||||
<div id="app-name">Kiri:Moto</div>
|
||||
<div class="grow"></div>
|
||||
<div id="app-acct"><i class="fas fa-user-cog"></i></div>
|
||||
<div id="app-acct">
|
||||
<i class="fas fa-user-cog"></i>
|
||||
<div id="acct-pop" class="col">
|
||||
<div class="col">
|
||||
<div id="acct-lang">
|
||||
<label><i class="fas fa-caret-left"></i> language</label>
|
||||
<div id="lang-pop" class="col">
|
||||
<div id="lset-en">english</div>
|
||||
<div id="lset-da">danish</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-sep"></div>
|
||||
<div id="mid" class="grow row">
|
||||
|
|
@ -37,6 +51,20 @@
|
|||
<div id="lt-setup" class="lt-menu">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<label>setup</label>
|
||||
<div id="set-pop" class="pop-lcol row">
|
||||
<div id="set-device">
|
||||
<i class="fas fa-tablet-alt"></i>
|
||||
<label>device</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">
|
||||
<i class="fas fa-folder"></i>
|
||||
|
|
@ -92,24 +120,29 @@
|
|||
<div id="lt-rotate" class="lt-menu noshow">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<label>rotate</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
<div id="pop-rotate" class="pop-lcol row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-scale" class="lt-menu noshow">
|
||||
<i class="fas fa-expand"></i>
|
||||
<label>scale</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
<div id="pop-scale" class="pop-lcol row">
|
||||
|
||||
</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 row"></div>
|
||||
</div>
|
||||
<div id="lt-end"></div>
|
||||
</div>
|
||||
<div id="mid-mcol" class="grow">
|
||||
<div id="modal">
|
||||
<div class="col">
|
||||
<div id="mod-top" class="row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
|
||||
|
||||
<div class="mod-top row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
|
||||
<div id="mod-help" class="mdialog 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>
|
||||
|
|
@ -118,18 +151,69 @@
|
|||
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
|
||||
</div>
|
||||
<div id="mod-setup" class="mdialog col">
|
||||
<div id="device">temp device</div>
|
||||
<div id="layers">temp layers</div>
|
||||
<div id="langpop">temp language</div>
|
||||
<div class="col a-center">select device type</div>
|
||||
<div class="row j-center">
|
||||
<button id="mode-fdm" class="dev-type"><label>FDM</label></button>
|
||||
<button id="mode-sla" class="dev-type"><label>SLA</label></button>
|
||||
<button id="mode-cam" class="dev-type"><label>CNC</label></button>
|
||||
<button id="mode-laser" class="dev-type"><label>LASER</label></button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="devices" class="col"><select id="device-list" size="15"></select></div>
|
||||
<div id="device" class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mod-files" class="mdialog"></div>
|
||||
<div id="mod-tools" class="mdialog"></div>
|
||||
<div id="mod-tools" class="mdialog">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<label>tool</label>
|
||||
<label>detail</label>
|
||||
<label>view</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<select id="tool-select" size="15"></select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="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="row"><label>name</label><input id="tool-name" size="15"></input></div>
|
||||
<div class="row" title="tool number to use
in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div>
|
||||
<div class="row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
|
||||
<div class="grouphead">shaft</div>
|
||||
<div class="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="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="grouphead">flute</div>
|
||||
<div class="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="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="grouphead">taper</div>
|
||||
<!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
|
||||
<div class="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 id="tool-view" class="col"></div>
|
||||
</div>
|
||||
<div id="tool-action" class="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>
|
||||
<div id="mod-prefs" class="mdialog col"></div>
|
||||
<div id="mod-local" class="mdialog"></div>
|
||||
<div id="mod-print" class="mdialog"></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 id="mod-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +236,9 @@
|
|||
</div>
|
||||
<div id="end" class="col a-center">
|
||||
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
|
||||
<div id="bottom"></div>
|
||||
<div id="bottom">
|
||||
<div id="layers">layers</div>
|
||||
</div>
|
||||
<div id="alert-area">
|
||||
<div id="alert-border">
|
||||
<div id="alert-text">alerts<br>alerts<br>alerts</div>
|
||||
|
|
|
|||
|
|
@ -361,7 +361,7 @@ kiri.lang['en-us'] = {
|
|||
or_topp_l: "origin is references from the top of objects",
|
||||
|
||||
// FDM ADVANCED
|
||||
ad_menu: "advanced",
|
||||
ad_menu: "expert",
|
||||
ad_rdst_s: "retract dist",
|
||||
ad_rdst_l: "amount to retract filament\nfor long moves. in millimeters",
|
||||
ad_rrat_s: "retract rate",
|
||||
|
|
|
|||
Loading…
Reference in a new issue