AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

checkpoint reflow

Browse source
This commit is contained in:
Stewart Allen 2024-05-22 18:20:02 -04:00
commit 76171c2474
5 changed files with 345 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/kiri-mode/cam/client.js
View file

@ -144,7 +144,7 @@ CAM.init = function(kiri, api) {
isIndexed = undefined; isIndexed = undefined;
isCamMode = mode === 'CAM'; isCamMode = mode === 'CAM';
SPACE.platform.setColor(isCamMode ? 0xeeeeee : 0xcccccc); SPACE.platform.setColor(isCamMode ? 0xeeeeee : 0xcccccc);
api.uc.setVisible($('camops'), isCamMode && isArrange); api.uc.setClass($('right-work'), 'slim-hide', isCamMode);
api.uc.setVisible(UI.func.animate, isCamMode); api.uc.setVisible(UI.func.animate, isCamMode);
if (!isCamMode) { if (!isCamMode) {
func.clearPops(); func.clearPops();
@ -162,8 +162,7 @@ CAM.init = function(kiri, api) {
isAnimate = false; isAnimate = false;
animFn().animate_clear(api); animFn().animate_clear(api);
func.clearPops(); func.clearPops();
api.uc.setVisible($('camops'), isCamMode && isArrange); api.uc.setClass($('right-work'), 'slim-hide', isCamMode);
// $('camops').style.display = isCamMode && isArrange ? 'flex' : '';
if (isCamMode && isPreview) { if (isCamMode && isPreview) {
for (let widget of API.widgets.all()) { for (let widget of API.widgets.all()) {
widget.setAxisIndex(0); widget.setAxisIndex(0);
@ -636,13 +635,13 @@ CAM.init = function(kiri, api) {
for (let el of bounds) { for (let el of bounds) {
if (el === target) continue; if (el === target) continue;
let rect = el.getBoundingClientRect(); let rect = el.getBoundingClientRect();
let left = rect.left; let top = rect.top;
let right = rect.left + rect.width; let bottom = rect.bottom;// + rect.height;
let tar = mobile ? ev.touches[0] : ev; let tar = mobile ? ev.touches[0] : ev;
if (tar.pageX >= left && tar.pageX <= right) { if (tar.pageY >= top && tar.pageY <= bottom) {
let mid = (left + right) / 2; let mid = (top + bottom) / 2;
try { listel.removeChild(target); } catch (e) { } try { listel.removeChild(target); } catch (e) { }
el.insertAdjacentElement(tar.pageX < mid ? "beforebegin" : "afterend", target); el.insertAdjacentElement(tar.pageY < mid ? "beforebegin" : "afterend", target);
} }
} }
} }

4
src/kiri/main.js
View file

@ -961,8 +961,8 @@ gapp.register("kiri.main", [], (root, exports) => {
} }
function setControlsVisible(show) { function setControlsVisible(show) {
$('mid-lcol').style.display = show ? 'flex' : 'none'; $('mid-left').style.display = show ? 'flex' : 'none';
$('mid-rcol').style.display = show ? 'flex' : 'none'; $('mid-right').style.display = show ? 'flex' : 'none';
} }
function downloadBlob(data, filename) { function downloadBlob(data, filename) {

7
src/kiri/ui.js
View file

@ -80,10 +80,13 @@ gapp.register("kiri.ui", [], (root, exports) => {
alert, alert,
onBlur, onBlur,
setVisible(el, bool) { setVisible(el, bool) {
kiri.ui.setClass(el, 'hide', bool);
},
setClass(el, clazz, bool) {
if (bool) { if (bool) {
el.classList.remove('hide'); el.classList.remove(clazz);
} else { } else {
el.classList.add('hide'); el.classList.add(clazz);
} }
} }
}; };

528
web/kiri/index.css
View file

@ -2,234 +2,53 @@
--fg-gray: #495057; --fg-gray: #495057;
--bg-gray: rgba(0,0,0,0.25); --bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd); --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--gradbar-vert: linear-gradient(to bottom, #ddd, #666, #ddd);
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1)); --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1)); --holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important; --holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
--highlight: rgba(126,153,183,0.4); --highlight: rgba(126,153,183,0.4);
--main-color: rgba(126,153,183,1); --main-color: rgba(126,153,183,1);
--main-color-hover: rgb(96, 127, 164); --main-color-hover: rgb(96, 127, 164);
--top: rgba(255,255,255,0.75); --work-area: rgba(255,255,255,0.75);
--menu: #f0f0f0; --menu: #f0f0f0;
--menu-text: #222; --menu-text: #222;
--menu-border: #555; --menu-border: #555;
--dark-menu-text: #111; --dark-menu-text: #111;
--menu-hover: #ddd; --menu-hover: #ddd;
} }
/* surface size configuration and font import */
@font-face { @font-face {
font-family: 'Russo One'; font-family: 'Russo One';
src: url('/moto/russo-one.ttf'); src: url('/moto/russo-one.ttf');
} }
a, a:hover, a:visited {
border: none;
color: inherit;
text-decoration: none;
}
#app {
position: fixed;
overflow: hidden;
font-weight: normal;
font-family: sans-serif;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media only screen and (max-width : 1024px) { @media only screen and (max-width : 1024px) {
#top { #top {
font-size: smaller; font-size: smaller;
} }
} }
@media only screen and (max-height : 750px) {
#top { .lt-menu, .pop-lcol {
text-transform: capitalize; font-size: 16px !important;
background-color: var(--top); }
z-index: 15; .lt-menu svg {
font-family: sans-serif; font-size: 30px !important;
} }
#top > div { .pop-lcol svg {
margin: 0 5px 0 5px; font-size: 20px !important;
} }
#mod-x {
.top-menu {
display: flex;
gap: 3px;
align-items: center;
white-space: nowrap;
}
.top-menu > span {
padding: 3px 6px 3px 6px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.top-menu hr {
width: calc(100% - 3px);
margin: 0;
border: 0;
padding: 0;
height: 0.5px;
background-color: var(--menu-border);
}
.top-menu label {
color: #444;
}
.dark .top-menu label {
color: var(--dark-menu-text)
}
.top-menu svg {
color: var(--main-color);
}
.top-menu > span {
position: relative;
display: flex;
gap: 5px;
align-items: center;
}
.top-menu > span:hover label {
color: var(--menu-text);
}
.dark .top-menu > span:hover label {
color: var(--dark-menu-text) !important;
}
.top-menu > span:hover > svg {
color: var(--main-color-hover);
}
.top-menu > span:hover {
background-color: var(--menu);
border-left: 1px solid var(--menu-border);
border-right: 1px solid var(--menu-border);
}
.top-menu > span:hover .top-menu-drop {
display: flex;
}
.top-menu-left {
align-items: self-start;
}
.top-menu-left .content {
border-top-right-radius: 4px;
}
.top-menu-right {
align-items: self-end;
}
.top-menu-center .content > div > label {
text-align: center !important;
}
.top-menu-right .content {
border-top-left-radius: 4px;
}
.top-menu-drop {
position: absolute; position: absolute;
display: none; font-size: 30px;
top: 100%; top: 8px;
left: -1px; }
right: -1px;
flex-direction: column;
font-family: sans-serif;
}
.top-menu-drop svg {
width: 15px;
}
#top .content {
gap: 2px;
display: flex;
align-items: center;
flex-direction: column;
background-color: var(--menu);
border-top: 1px dashed var(--menu-border);
border-left: 1px solid var(--menu-border);
border-right: 1px solid var(--menu-border);
border-bottom: 1px solid var(--menu-border);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
#top .content {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 2px;
}
#top .content > div {
display: flex;
flex-direction: row;
}
#top .content > div > label {
text-align: left;
flex-grow: 1;
}
#top .content > div > span {
text-align: right;
}
#top .content > div > span {
padding: 2px 7px 2px 7px;
padding-left: 10px;
text-align: center;
}
#top .content > div > label {
padding: 2px 7px 2px 7px;
justify-self: stretch;
align-self: stretch;
border-radius: 3px;
}
#top .content > div:hover {
background-color: var(--menu-hover);
} }
#app-name { /* default element configuration */
position: absolute; a, a:hover, a:visited {
top: 50%; border: none;
left: 50%; color: inherit;
transform: translateX(-50%) translateY(-50%); text-decoration: none;
z-index: 50;
}
#app-name {
cursor: pointer;
}
.km-font {
font-family: 'Russo One', sans-serif;
}
.menu-title {
font-size: larger;
font-weight: bold;
}
#app-name hr {
margin: 1px;
}
#app-name:hover #app-name-pop {
display: flex;
}
#app-name-pop {
color: var(--fg-gray);
font-family: sans-serif;
position: absolute;
top: 100%;
}
#app-name-pop .content {
text-align: center;
}
#app-lang {
justify-content: flex-end;
}
#app-lang:hover #lang-pop {
display: flex;
}
#app,div {
display: flex;
padding: 0;
border: 0;
margin: 0;
}
#gsbox {
width: 40px;
height: 40px;
padding-right: 15px;
position: fixed;
display: none;
} }
div { div {
position: relative; position: relative;
@ -332,6 +151,200 @@ th, tr, td, span, div, label, button {
th, tr, td, label { th, tr, td, label {
white-space: nowrap; white-space: nowrap;
} }
/* container for entire page / app */
#app {
position: fixed;
overflow: hidden;
font-weight: normal;
font-family: sans-serif;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* top menu bar, drop menus */
#top {
background-color: var(--work-area);
text-transform: capitalize;
font-family: sans-serif;
z-index: 15;
}
#top > div {
margin: 0 5px 0 5px;
}
.top-menu {
display: flex;
gap: 3px;
align-items: center;
white-space: nowrap;
}
.top-menu > span {
padding: 3px 6px 3px 6px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.top-menu hr {
width: calc(100% - 3px);
margin: 0;
border: 0;
padding: 0;
height: 0.5px;
background-color: var(--menu-border);
}
.top-menu label {
color: #444;
}
.dark .top-menu label {
color: var(--dark-menu-text)
}
.top-menu svg {
color: var(--main-color);
}
.top-menu > span {
position: relative;
display: flex;
gap: 5px;
align-items: center;
}
.top-menu > span:hover label {
color: var(--menu-text);
}
.dark .top-menu > span:hover label {
color: var(--dark-menu-text) !important;
}
.top-menu > span:hover > svg {
color: var(--main-color-hover);
}
.top-menu > span:hover {
background-color: var(--menu);
border-left: 1px solid var(--menu-border);
border-right: 1px solid var(--menu-border);
}
.top-menu > span:hover .top-menu-drop {
display: flex;
}
.top-menu-left {
align-items: self-start;
}
.top-menu-left .content {
border-top-right-radius: 4px;
}
.top-menu-right {
align-items: self-end;
}
.top-menu-center .content > div > label {
text-align: center !important;
}
.top-menu-right .content {
border-top-left-radius: 4px;
}
.top-menu-drop {
position: absolute;
display: none;
top: 100%;
left: -1px;
right: -1px;
flex-direction: column;
font-family: sans-serif;
}
.top-menu-drop svg {
width: 15px;
}
#top .content {
gap: 2px;
display: flex;
align-items: center;
flex-direction: column;
background-color: var(--menu);
border-top: 1px dashed var(--menu-border);
border-left: 1px solid var(--menu-border);
border-right: 1px solid var(--menu-border);
border-bottom: 1px solid var(--menu-border);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
#top .content {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 2px;
}
#top .content > div {
display: flex;
flex-direction: row;
}
#top .content > div > label {
text-align: left;
flex-grow: 1;
}
#top .content > div > span {
text-align: right;
}
#top .content > div > span {
padding: 2px 7px 2px 7px;
padding-left: 10px;
text-align: center;
}
#top .content > div > label {
padding: 2px 7px 2px 7px;
justify-self: stretch;
align-self: stretch;
border-radius: 3px;
}
#top .content > div:hover {
background-color: var(--menu-hover);
}
#app-name {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 50;
}
#app-name {
cursor: pointer;
}
#app-name hr {
margin: 1px;
}
#app-name:hover #app-name-pop {
display: flex;
}
#app-name-pop {
color: var(--fg-gray);
font-family: sans-serif;
position: absolute;
top: 100%;
}
#app-name-pop .content {
text-align: center;
}
#app-lang {
justify-content: flex-end;
}
#app-lang:hover #lang-pop {
display: flex;
}
#app,div {
display: flex;
padding: 0;
border: 0;
margin: 0;
}
#loading {
width: 40px;
height: 40px;
padding-right: 15px;
position: fixed;
display: none;
}
.noselect { .noselect {
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -339,6 +352,14 @@ th, tr, td, label {
user-select: none; user-select: none;
} }
.km-font {
font-family: 'Russo One', sans-serif;
}
.menu-title {
font-size: larger;
font-weight: bold;
}
.hide { .hide {
display: none !important; display: none !important;
} }
@ -469,17 +490,19 @@ th, tr, td, label {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: -1;
}
.chonk {
height: 15px;
min-width: 100px;
background-color: rgba(0,0,0,0.25);
} }
#mode-info { #mode-info {
/* display: none; */
white-space: nowrap; white-space: nowrap;
font-size: smaller; font-size: smaller;
font-family: sans-serif; font-family: sans-serif;
top: 50%;
height: 100%;
/* transform: translateY(-50%); */
padding: 1px 0 1px 0; padding: 1px 0 1px 0;
align-items: center; align-items: stretch;
justify-content: center; justify-content: center;
padding: 3px; padding: 3px;
} }
@ -496,7 +519,7 @@ th, tr, td, label {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
#mode-info > div { #mode-info span {
font-size: smaller; font-size: smaller;
padding: 2px 5px 2px 5px; padding: 2px 5px 2px 5px;
color: var(--fg-gray); color: var(--fg-gray);
@ -586,23 +609,37 @@ th, tr, td, label {
text-transform: none !important; text-transform: none !important;
} }
#mid-lcol, #mid-rcol, #modal { #mid-left {
background-color: var(--work-area);
}
#mid-left, #mid-right, #modal {
pointer-events: visible; pointer-events: visible;
text-transform: capitalize; text-transform: capitalize;
} }
#mid-left label, #mid-left svg {
#mid-lcol label, #mid-lcol svg {
pointer-events: none; pointer-events: none;
} }
#right-work {
overflow: hidden;
}
.slim-hide {
width: 0;
}
#top-sep { #top-sep {
display: none; display: none;
} }
#top-sep, #mid-sep { #top-sep, #top-mid-sep {
z-index: 14; z-index: 14;
height: 1px; height: 1px;
background-image: var(--gradbar); background-image: var(--gradbar);
} }
.mid-sep {
z-index: 14;
width: 1px;
background-image: var(--gradbar-vert);
}
.movable { .movable {
margin: 5px; margin: 5px;
@ -816,22 +853,6 @@ th, tr, td, label {
.lt-menu label { .lt-menu label {
font-size: small; font-size: small;
} }
@media only screen and (max-height : 750px) {
.lt-menu, .pop-lcol {
font-size: 16px !important;
}
.lt-menu svg {
font-size: 30px !important;
}
.pop-lcol svg {
font-size: 20px !important;
}
#mod-x {
position: absolute;
font-size: 30px;
top: 8px;
}
}
.dev-buttons { .dev-buttons {
margin: 1px -1px 0 -1px; margin: 1px -1px 0 -1px;
@ -871,6 +892,7 @@ th, tr, td, label {
text-align: center; text-align: center;
font-size: smaller; font-size: smaller;
} }
#camop_dialog { #camop_dialog {
flex-direction: column; flex-direction: column;
} }
@ -884,35 +906,22 @@ th, tr, td, label {
display: block; display: block;
} }
#camops { #camops {
background-color: var(--work-area);
display: flex; display: flex;
padding: 0; padding: 5px 0 0 0;
height: 38px;
margin: 0 0 max(4px, env(safe-area-inset-bottom)) 0;
}
#camops .left {
width: 12px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: var(--main-color);
margin-right: 1px;
}
#camops .right {
width: 12px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background-color: var(--main-color);
margin-left: 1px;
} }
.cam-pop-op { .cam-pop-op {
text-align: left; text-align: left;
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
flex-direction: column; flex-direction: column;
bottom: 40px; top: 0;
right: 100%;
/* transform: translateY(-30%); */
background-color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
margin-right: 5px; margin-right: 6px;
padding: 5px; padding: 5px;
} }
.pop-tics { .pop-tics {
@ -936,6 +945,10 @@ th, tr, td, label {
word-break: break-word; word-break: break-word;
white-space: normal; white-space: normal;
} }
#oplist {
gap: 3px;
margin-bottom: 3px;
}
#oplist > div, .opdiv { #oplist > div, .opdiv {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -943,8 +956,8 @@ th, tr, td, label {
justify-content: center; justify-content: center;
border: 1px solid rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.25);
border-radius: 4px; border-radius: 4px;
margin: 0 2px 0 2px; margin: 0 5px 0 5px;
padding: 2px 10px 2px 10px; padding: 5px 10px 5px 10px;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
white-space: nowrap; white-space: nowrap;
} }
@ -1006,8 +1019,9 @@ th, tr, td, label {
#op-add-pop { #op-add-pop {
position: absolute; position: absolute;
display: none; display: none;
padding: 5px; right: 100%;
bottom: 35px; top: 0;
transform: translateY(-50%);
} }
#op-add:hover #op-add-pop { #op-add:hover #op-add-pop {
display: flex; display: flex;
@ -1795,10 +1809,6 @@ th, tr, td, label {
align-items: stretch; align-items: stretch;
text-transform: capitalize; text-transform: capitalize;
background-color: rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.5);
/* border: 1px solid var(--menu-border); */
border: 1px solid #aaa;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
padding: 5px; padding: 5px;
gap: 5px; gap: 5px;
} }
@ -1997,7 +2007,7 @@ th, tr, td, label {
#rnfo label { #rnfo label {
text-align: right; text-align: right;
} }
#tool-info { /* #tool-info {
position: fixed; position: fixed;
white-space: pre; white-space: pre;
background-color: rgba(255,255,255,0.25); background-color: rgba(255,255,255,0.25);
@ -2007,7 +2017,7 @@ th, tr, td, label {
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
color: #000; color: #000;
} } */
#context-menu { #context-menu {
display: none; display: none;
position: absolute; position: absolute;

208
web/kiri/index.html
View file

@ -28,12 +28,10 @@
</head> </head>
<body> <body>
<div id="app" class="f-col"> <div id="app" class="f-col">
<div id="curtain" class="j-center a-center"><img id="gsbox">loading...</div> <div id="curtain" class="j-center a-center"><img id="loading">loading...</div>
<div id="container"></div>
<div id="tracker"></div>
<div id="top-sep"></div> <div id="top-sep"></div>
<!-- TOP MENU BAR -->
<div id="top" class="f-row"> <div id="top" class="f-row">
<div class="f-row top-menu"> <div class="f-row top-menu">
<span> <span>
@ -240,81 +238,22 @@
</div> </div>
<div id="set-prefs"> <div id="set-prefs">
<label lk="prefs">prefs</label> <label lk="prefs">prefs</label>
<span><i class="fa-solid fa-ssquare-check"></i></span> <span><i class="fa-solid fa-square-check"></i></span>
</div> </div>
</div> </div>
</div> </div>
</span> </span>
</div> </div>
</div> </div>
<div id="mid-sep"></div>
<div id="float-tools" class="f-col movable hide"> <div id="top-mid-sep"></div>
<div id="float-tools-title" class="title mover">
<label id="ft-label" class="grow">title bar</label>
<div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
</div>
<div class="body f-row">
<div class="f-col menu">
<div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div>
<div lkt="scale" class="tictac" select="ft-scale" label="ft-label"><i class="fas fa-expand"></i></div>
<div lkt="mesh" class="tictac" select="ft-mesh" label="ft-label"><i class="fas fa-dice-d20"></i></div>
<div lkt="select" class="tictac" select="ft-select" label="ft-label"><i class="fas fa-mouse-pointer"></i></div>
</div>
<div id="ft-scale" class="grow grid">
<div><label class="middle">X</label><input id="lock_x" type="checkbox" checked></div>
<div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked></div>
<div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked></div>
<div><label id="lab-axis" lk="axis">axis</label></div>
<div><input id="size_x" size="8" class="value"></div>
<div><input id="size_y" size="8" class="value"></div>
<div><input id="size_z" size="8" class="value"></div>
<div><label id="lab-size" lk="size">size</label></div>
<div><input id="scale_x" size="8" class="value" value="1"></div>
<div><input id="scale_y" size="8" class="value" value="1"></div>
<div><input id="scale_z" size="8" class="value" value="1"></div>
<div><label id="lab-scale" lk="scale">scale</label></div>
<button id="scale-reset" class="gr4">reset</button>
</div>
<div id="ft-rotate" class="grow grid">
<div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
<label>X</label>
<div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_x" class="value center" size="6" value="0">
<div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
<label>Y</label>
<div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_y" class="value center" size="6" value="0">
<div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
<label>Z</label>
<div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_z" class="value center" size="6" value="0">
<div class="buttons f-row">
<button id="lay-flat" class="grow">lay flat</button>
<button id="unrotate" class="grow" lk="reset">reset</button>
</div>
</div>
<div id="ft-mesh" class="grow f-col">
<div id="mesh-info" class="grid">
<label>object:</label>
<span id="mesh-name" class="value">[0]</span>
<label>points:</label>
<span id="mesh-points" class="value">-</span>
<label>faces:</label>
<span id="mesh-faces" class="value">-</span>
</div>
<button id="mesh-export-obj" lk="rc_xobj">export OBJ</button>
<button id="mesh-export-stl" lk="rc_xstl">export STL</button>
<button id="mesh-swap" lk="rc_swap">replace vertices</button>
</div>
<div id="ft-select" class="grow f-col"></div>
</div>
<div class="footer"></div>
</div>
<div id="mid" class="grow f-row"> <div id="mid" class="grow f-row">
<div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div> <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
<div id="mid-lcol" class="f-col j-center noshow">
<!-- left settings menu -->
<div id="mid-left" class="f-col j-left noshow">
<!-- ephemeral -->
<div id="lt-back" class="lt-menu lt-enabled"> <div id="lt-back" class="lt-menu lt-enabled">
<i class="fas fa-arrow-circle-left"></i> <i class="fas fa-arrow-circle-left"></i>
</div> </div>
@ -323,9 +262,21 @@
<div id="lt-w-enable"><i class="fas fa-check-circle"></i></div> <div id="lt-w-enable"><i class="fas fa-check-circle"></i></div>
<div id="lt-w-disable"><i class="fas fa-times-circle"></i></div> <div id="lt-w-disable"><i class="fas fa-times-circle"></i></div>
</div> </div>
<div id="settings" class="f-col"></div> <!-- always up -->
<div class="chonk"></div>
<div id="mode-info" class="f-col">
<div><label>Mode</label><span id="app-mode-name"></span></div>
<div><label>Device</label><span id="mode-device"></span></div>
<div><label>Profile</label><span id="mode-profile"></span></div>
</div> </div>
<div id="mid-mcol" class="grow"> <div class="chonk"></div>
<div id="settings" class="f-col grow"></div>
<div class="chonk"></div>
</div>
<div class="mid-sep"></div>
<div id="mid-mid" class="grow">
<div id="modal"> <div id="modal">
<div id="modal-box" class="f-col"> <div id="modal-box" class="f-col">
@ -501,20 +452,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="mid-rcol" class="f-col j-center noshow">
<div id="mid-right" class="f-row j-center">
<div id="set-menu" class="f-col"> <div id="set-menu" class="f-col">
<div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div> <div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div>
<!-- <div id="set-top" class="set-group"></div>
<div id="settings" class="f-col"></div>
<div id="set-end" class="set-group"></div> -->
</div> </div>
</div> <div class="mid-sep"></div>
</div> <div id="right-work" class="f-col j-center slim-hide">
<div id="end" class="f-col a-center"> <div class="chonk"></div>
<div id="bottom"> <div>operation chain</div>
<div id="camops" class="f-row a-stretch j-center"> <div class="chonk"></div>
<div class="left"></div> <div id="camops" class="f-col a-stretch grow">
<div id="oplist" class="f-row j-center"></div> <div id="oplist" class="f-col j-center"></div>
<div id="ophint" class="f-row"> <div id="ophint" class="f-row">
<div class="opdiv">use + menu to add milling operations</div> <div class="opdiv">use + menu to add milling operations</div>
<div class="opdiv">drag to re-order</div> <div class="opdiv">drag to re-order</div>
@ -540,15 +489,32 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right"></div> </div>
<div class="chonk"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="end" class="f-col a-center">
<div id="bottom">
</div>
</div>
<!-- ThreeJS container -->
<div id="container"></div>
<!-- click + drag mouse tracking -->
<div id="tracker"></div>
<!-- EU compliance -->
<div id="gdpr" class="noshow"> <div id="gdpr" class="noshow">
<p>this site uses <A href="/privacy.html" target="privacy">cookies</a> to preserve application preferences</p> <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> <button id="gotit" class="f-col j-center">got it</button>
</div> </div>
<div id="tool-info" class="noshow"></div>
<!-- <div id="tool-info" class="noshow"></div> -->
<!-- right click pop-up menu -->
<div id="context-menu"> <div id="context-menu">
<button id="context-export-workspace" lk="rc_xpws">export workspace</button> <button id="context-export-workspace" lk="rc_xpws">export workspace</button>
<button id="context-clear-workspace" lk="rc_clws">clear workspace</button> <button id="context-clear-workspace" lk="rc_clws">clear workspace</button>
@ -561,28 +527,98 @@
</div> </div>
<div id="app-state"> <div id="app-state">
<div id="mode-info" class="f-row"> <!-- <div id="mode-info" class="f-row">
<label>Mode</label><div id="app-mode-name"></div> <label>Mode</label><div id="app-mode-name"></div>
<label>Device</label><div id="mode-device"></div> <label>Device</label><div id="mode-device"></div>
<label>Profile</label><div id="mode-profile"></div> <label>Profile</label><div id="mode-profile"></div>
</div> </div> -->
</div> </div>
<!-- developer debugging -->
<div id="stats"> <div id="stats">
<div id="rms"></div> <div id="rms"></div>
<div id="fps"></div> <div id="fps"></div>
<div id="rnfo"></div> <div id="rnfo"></div>
</div> </div>
<!-- CAM animation controls and readout -->
<div id="layer-animate" class="f-col a-center"></div> <div id="layer-animate" class="f-col a-center"></div>
<div id="layer-toolpos" class="f-row a-center"></div> <div id="layer-toolpos" class="f-row a-center"></div>
<!-- ephemeral non-modal alerts -->
<div id="alert-area"> <div id="alert-area">
<div id="alert-border"> <div id="alert-border">
<div id="alert-text">alerts<br>alerts<br>alerts</div> <div id="alert-text">alerts<br>alerts<br>alerts</div>
</div> </div>
</div> </div>
<div id="top-slider" class="f-col grow"> <div id="top-slider" class="f-col grow">
<input id="anim-slider" type="range" min="0" max="1000" value="0"></input> <input id="anim-slider" type="range" min="0" max="1000" value="0"></input>
</div> </div>
<div id="float-tools" class="f-col movable hide">
<div id="float-tools-title" class="title mover">
<label id="ft-label" class="grow">title bar</label>
<div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
</div>
<div class="body f-row">
<div class="f-col menu">
<div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div>
<div lkt="scale" class="tictac" select="ft-scale" label="ft-label"><i class="fas fa-expand"></i></div>
<div lkt="mesh" class="tictac" select="ft-mesh" label="ft-label"><i class="fas fa-dice-d20"></i></div>
<div lkt="select" class="tictac" select="ft-select" label="ft-label"><i class="fas fa-mouse-pointer"></i></div>
</div>
<div id="ft-scale" class="grow grid">
<div><label class="middle">X</label><input id="lock_x" type="checkbox" checked></div>
<div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked></div>
<div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked></div>
<div><label id="lab-axis" lk="axis">axis</label></div>
<div><input id="size_x" size="8" class="value"></div>
<div><input id="size_y" size="8" class="value"></div>
<div><input id="size_z" size="8" class="value"></div>
<div><label id="lab-size" lk="size">size</label></div>
<div><input id="scale_x" size="8" class="value" value="1"></div>
<div><input id="scale_y" size="8" class="value" value="1"></div>
<div><input id="scale_z" size="8" class="value" value="1"></div>
<div><label id="lab-scale" lk="scale">scale</label></div>
<button id="scale-reset" class="gr4">reset</button>
</div>
<div id="ft-rotate" class="grow grid">
<div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
<label>X</label>
<div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_x" class="value center" size="6" value="0">
<div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
<label>Y</label>
<div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_y" class="value center" size="6" value="0">
<div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
<label>Z</label>
<div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
<input id="rot_z" class="value center" size="6" value="0">
<div class="buttons f-row">
<button id="lay-flat" class="grow">lay flat</button>
<button id="unrotate" class="grow" lk="reset">reset</button>
</div>
</div>
<div id="ft-mesh" class="grow f-col">
<div id="mesh-info" class="grid">
<label>object:</label>
<span id="mesh-name" class="value">[0]</span>
<label>points:</label>
<span id="mesh-points" class="value">-</span>
<label>faces:</label>
<span id="mesh-faces" class="value">-</span>
</div>
<button id="mesh-export-obj" lk="rc_xobj">export OBJ</button>
<button id="mesh-export-stl" lk="rc_xstl">export STL</button>
<button id="mesh-swap" lk="rc_swap">replace vertices</button>
</div>
<div id="ft-select" class="grow f-col"></div>
</div>
<div class="footer"></div>
</div>
</div> </div>
</body> </body>
</html> </html>