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 ui refactor

Browse source
This commit is contained in:
Stewart Allen 2024-05-24 22:49:10 -04:00
commit ec6dc2c171
8 changed files with 82 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -144,8 +144,11 @@ 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.setClass($('right-work'), 'slim-hide', !isCamMode);
api.uc.setVisible(UI.func.animate, isCamMode); api.uc.setVisible(UI.func.animate, isCamMode);
// hide/show cam mode elements
for (let el of [...document.getElementsByClassName('mode-cam')]) {
api.uc.setClass(el, 'hide', !isCamMode);
}
if (!isCamMode) { if (!isCamMode) {
func.clearPops(); func.clearPops();
func.tabClear(); func.tabClear();
@ -162,7 +165,6 @@ CAM.init = function(kiri, api) {
isAnimate = false; isAnimate = false;
animFn().animate_clear(api); animFn().animate_clear(api);
func.clearPops(); func.clearPops();
api.uc.setClass($('right-work'), 'slim-hide', !isCamMode);
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);
@ -460,7 +462,6 @@ CAM.init = function(kiri, api) {
oplist = oplist.filter(rec => !Array.isArray(rec)); oplist = oplist.filter(rec => !Array.isArray(rec));
let mark = Date.now(); let mark = Date.now();
let html = []; let html = [];
$('ophint').style.display = oplist.length > (isIndexed ? 1 : 0) ? 'none' : '';
let bind = {}; let bind = {};
let scale = API.view.unit_scale(); let scale = API.view.unit_scale();
let notime = false; let notime = false;

13
src/kiri-mode/fdm/client.js
View file

@ -101,11 +101,11 @@ FDM.init = function(kiri, api) {
function clearRanges() { function clearRanges() {
api.conf.get().process.ranges = []; api.conf.get().process.ranges = [];
ui.rangeGroup.firstElementChild.innerHTML = ''; ui.fdmRanges.innerHTML = '';
} }
// re-render ranges menu
function updateRanges(ranges = []) { function updateRanges(ranges = []) {
ui.rangeGroup.style.display = isFdmMode && ranges && ranges.length ? 'flex' : 'none';
let html = []; let html = [];
let bind = []; let bind = [];
let now = Date.now(); let now = Date.now();
@ -120,7 +120,7 @@ FDM.init = function(kiri, api) {
]); ]);
bind.push({id, range}); bind.push({id, range});
} }
ui.rangeGroup.firstElementChild.innerHTML = html.join(''); ui.fdmRanges.innerHTML = html.join('');
for (let rec of bind) { for (let rec of bind) {
$(`sel_${rec.id}`).onclick = () => { $(`sel_${rec.id}`).onclick = () => {
api.show.layer(rec.range.hi, rec.range.lo); api.show.layer(rec.range.hi, rec.range.lo);
@ -159,6 +159,10 @@ FDM.init = function(kiri, api) {
api.event.on("mode.set", mode => { api.event.on("mode.set", mode => {
isFdmMode = mode === 'FDM'; isFdmMode = mode === 'FDM';
lastMode = mode; lastMode = mode;
// hide/show fdm mode elements
for (let el of [...document.getElementsByClassName('mode-fdm')]) {
api.uc.setClass(el, 'hide', !isFdmMode);
}
updateVisiblity(); updateVisiblity();
}); });
api.event.on("view.set", view => { api.event.on("view.set", view => {
@ -180,7 +184,6 @@ FDM.init = function(kiri, api) {
} }
} }
} }
// ui.rangeGroup.style.display = ranges && ranges.length ? 'flex' : 'none';
}); });
api.event.on("range.updates", updateRanges); api.event.on("range.updates", updateRanges);
api.event.on("settings.load", (settings) => { api.event.on("settings.load", (settings) => {
@ -191,8 +194,6 @@ FDM.init = function(kiri, api) {
}); });
api.event.on("settings.saved", (settings) => { api.event.on("settings.saved", (settings) => {
updateRanges(settings.process.ranges); updateRanges(settings.process.ranges);
// let ranges = settings.process.ranges;
// ui.rangeGroup.style.display = isFdmMode && ranges && ranges.length ? 'flex' : 'none';
}); });
api.event.on("button.click", target => { api.event.on("button.click", target => {
switch (target) { switch (target) {

4
src/kiri/init.js
View file

@ -2084,8 +2084,7 @@ gapp.register("kiri.init", [], (root, exports) => {
slaFirstOffset: uc.newInput(LANG.sa_opzo_s, {title:LANG.sa_opzo_l, convert:uc.toFloat, bound:uc.bound(0,1), modes:SLA}), slaFirstOffset: uc.newInput(LANG.sa_opzo_s, {title:LANG.sa_opzo_l, convert:uc.toFloat, bound:uc.bound(0,1), modes:SLA}),
slaAntiAlias: uc.newSelect(LANG.sa_opaa_s, {title:LANG.sa_opaa_l, modes:SLA}, "antialias"), slaAntiAlias: uc.newSelect(LANG.sa_opaa_s, {title:LANG.sa_opaa_l, modes:SLA}, "antialias"),
rangeGroup: uc.newGroup("ranges", null, {modes:FDM, group:"ranges"}), fdmRanges: $('fdm-ranges'),
rangeList: uc.newRow([], {}),
settingsSave: $('settingsSave'), settingsSave: $('settingsSave'),
settingsName: $('settingsName'), settingsName: $('settingsName'),
@ -2964,7 +2963,6 @@ gapp.register("kiri.init", [], (root, exports) => {
$('tool-rotate').onclick = event.bind("tool.show", "rotate"); $('tool-rotate').onclick = event.bind("tool.show", "rotate");
$('tool-scale').onclick = event.bind("tool.show", "scale"); $('tool-scale').onclick = event.bind("tool.show", "scale");
$('tool-mesh').onclick = event.bind("tool.show", "mesh"); $('tool-mesh').onclick = event.bind("tool.show", "mesh");
$('tool-selector').onclick = event.bind("tool.show", "select");
} }
// warn users they are running a beta release // warn users they are running a beta release

10
src/kiri/main.js
View file

@ -898,8 +898,14 @@ gapp.register("kiri.main", [], (root, exports) => {
current.mode = mode; current.mode = mode;
MODE = MODES[mode]; MODE = MODES[mode];
DRIVER = kiri.driver[mode]; DRIVER = kiri.driver[mode];
// update mode display // update mode drop-down
$('app-mode-name').innerHTML = mode === 'CAM' ? 'CNC' : mode; {
const modename = $('mode-name');
const options = modename.options;
const optlist = ["FDM","CAM","SLA","LASER"];
options.selectedIndex = optlist.indexOf(mode);
modename.onchange = (ev) => setMode(optlist[options.selectedIndex]);
}
// highlight relevant device mode button // highlight relevant device mode button
["fdm","sla","cam","laser"].forEach(dev => { ["fdm","sla","cam","laser"].forEach(dev => {
let cl = $(`mode-${dev}`).classList; let cl = $(`mode-${dev}`).classList;

4
src/kiri/platform.js
View file

@ -566,8 +566,10 @@ function platformDeletePost() {
platformChanged(); platformChanged();
} }
// render list of current widgets
function platformChanged() { function platformChanged() {
h.bind($('ft-select'), api.widgets.all().map(w => { h.bind($('ws-widgets'), api.widgets.all().map(w => {
console.log('widget ...',w);
let color; let color;
return [ return [
h.button({ h.button({

11
src/kiri/ui.js
View file

@ -280,12 +280,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
div.appendChild(row); div.appendChild(row);
if (label) { if (label) {
// let l1 = DOC.createElement('hr');
// l1.classList.add('set-header-line');
// row.appendChild(l1);
link = DOC.createElement('a'); link = DOC.createElement('a');
link.appendChild(DOC.createTextNode(label)); link.appendChild(DOC.createTextNode(label));
row.appendChild(link); row.appendChild(link);
let line = DOC.createElement('hr');
line.classList.add('set-header-line'); let l2 = DOC.createElement('hr');
row.appendChild(line); l2.classList.add('set-header-line');
row.appendChild(l2);
} }
addModeControls(row, opt); addModeControls(row, opt);

25
web/kiri/index.css
View file

@ -376,6 +376,9 @@ th, tr, td, label {
font-weight: bold; font-weight: bold;
} }
.contents {
display: contents;
}
.hide { .hide {
display: none !important; display: none !important;
} }
@ -536,15 +539,18 @@ 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 span { #mode-info span, #mode-info select {
margin: 2px 5px 2px 0; margin: 2px 5px 2px 0;
font-size: smaller; font-size: smaller;
padding: 2px 5px 2px 5px; padding: 2px 5px 2px 5px;
color: var(--fg-gray); color: var(--fg-gray);
background-color: white; background-color: white;
border-top-left-radius: 0;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-left: 0;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
@ -625,16 +631,14 @@ th, tr, td, label {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* flex-grow: true; */
pointer-events: none; pointer-events: none;
/* max-height: 99%; */
} }
#mod-print button, #catalogList button, #settingsList button { #mod-print button, #catalogList button, #settingsList button {
text-transform: none !important; text-transform: none !important;
} }
#mid-left { #mid-left, #right-work {
max-height: 100%; max-height: 100%;
background-color: var(--work-area); background-color: var(--work-area);
} }
@ -645,6 +649,9 @@ th, tr, td, label {
#mid-left label, #mid-left svg { #mid-left label, #mid-left svg {
pointer-events: none; pointer-events: none;
} }
#right-work > div {
padding: 0 5px 0 5px;
}
.slim-hide { .slim-hide {
width: 0; width: 0;
@ -807,7 +814,7 @@ th, tr, td, label {
font-family: monospace; font-family: monospace;
padding-left: 4px; padding-left: 4px;
} }
#ft-mesh, #ft-select { #ft-mesh {
min-width: 200px; min-width: 200px;
} }
#mesh-info { #mesh-info {
@ -820,13 +827,6 @@ th, tr, td, label {
right: 2px; right: 2px;
top: 7px; top: 7px;
} }
#ft-select {
max-height: 300px;
overflow-y: auto;
}
#ft-select button {
text-transform: none;
}
#lay-flat.selected { #lay-flat.selected {
background-color: var(--main-color); background-color: var(--main-color);
} }
@ -931,7 +931,6 @@ th, tr, td, label {
display: block; display: block;
} }
#camops { #camops {
background-color: var(--work-area);
display: flex; display: flex;
padding: 5px 0 0 0; padding: 5px 0 0 0;
} }

76
web/kiri/index.html
View file

@ -116,10 +116,6 @@
<label lk="mesh">mesh</label> <label lk="mesh">mesh</label>
<span><i class="fas fa-dice-d20"></i></span> <span><i class="fas fa-dice-d20"></i></span>
</div> </div>
<div id="tool-selector">
<label lk="select">select</label>
<span><i class="fas fa-mouse-pointer"></i></span>
</div>
<hr> <hr>
<div id="view-clear"> <div id="view-clear">
<label lk="clear">clear</label> <label lk="clear">clear</label>
@ -261,9 +257,13 @@
<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>
<!-- always up --> <!-- always up -->
<div class="chonk"></div>
<div id="mode-info" class="f-col"> <div id="mode-info" class="f-col">
<div><label>Mode</label><span id="app-mode-name"></span></div> <div><label>Mode</label><select id="mode-name">
<option>FDM</option>
<option>CNC</option>
<option>SLA</option>
<option>Laser</option>
</select></div>
<div><label>Device</label><span id="mode-device"></span></div> <div><label>Device</label><span id="mode-device"></span></div>
<div><label>Profile</label><span id="mode-profile"></span></div> <div><label>Profile</label><span id="mode-profile"></span></div>
</div> </div>
@ -460,39 +460,43 @@
</div> </div>
<!-- vertical separation between workspace and right tray --> <!-- vertical separation between workspace and right tray -->
<div class="mid-sep"></div> <div class="mid-sep"></div>
<div id="right-work" class="f-col j-center slim-hide"> <div id="right-work" class="f-col j-start">
<div class="chonk"></div>
<div class="work-header"><span>workspace</span></div> <div class="work-header"><span>workspace</span></div>
<div class="chonk"></div> <div class="chonk"></div>
<div id="workspace-tool"> <div id="ws-widgets" class="f-col"></div>
<div class="contents mode-fdm">
<div class="chonk"></div>
<div id="fdm-ranges" class="f-col"></div>
</div> </div>
<div class="work-header"><span>CNC</span><span>operations</span></div> <div id="workspace-tool"></div>
<div class="chonk"></div> <div class="contents mode-cam">
<div id="camops" class="f-col a-stretch grow"> <div class="chonk"></div>
<div id="oplist" class="f-col j-center"></div> <div class="work-header">
<div id="ophint" class="f-row"> <span>CNC</span>
<div class="opdiv">use + menu to add milling operations</div> <span>operations</span>
<div class="opdiv">drag to re-order</div>
</div> </div>
<div id="op-add" class="opdiv"> <div class="chonk"></div>
<i class="fas fa-plus"></i> <div id="camops" class="f-col a-stretch grow">
<div id="op-add-pop" class="f-col"> <div id="oplist" class="f-col j-center"></div>
<div id="op-add-list" class="opdiv op-grid"> <div id="op-add" class="opdiv">
<div id="cam-index" title="rotate index axis">index</div> <i class="fas fa-plus"></i>
<div id="cam-lathe" title="lathe operation">lathe</div> <div id="op-add-pop" class="f-col">
<div id="laser-on" title="turn on laser mode">laser on</div> <div id="op-add-list" class="opdiv op-grid">
<div id="laser-off" title="turn off laser mode">laser off</div> <div id="cam-index" title="rotate index axis">index</div>
<div id="cam-flip" title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div> <div id="cam-lathe" title="lathe operation">lathe</div>
<div id="cam-reg" title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div> <div id="laser-on" title="turn on laser mode">laser on</div>
<div title="drill any holes matching&#13;selected tool diameter">drill</div> <div id="laser-off" title="turn off laser mode">laser off</div>
<div title="clear stock face&#13;or top of part&#13;when no stock">level</div> <div id="cam-flip" title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
<div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div> <div id="cam-reg" title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
<div title="insert custom gcode">gcode</div> <div title="drill any holes matching&#13;selected tool diameter">drill</div>
<div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div> <div title="clear stock face&#13;or top of part&#13;when no stock">level</div>
<div title="clean up after roughing&#13;or perform a part cutout">outline</div> <div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
<div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div> <div title="insert custom gcode">gcode</div>
<div title="clear areas above&#13;selected surfaces">pocket</div> <div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div>
<div title="clean up after roughing&#13;or perform a part cutout">outline</div>
<div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div>
<div title="clear areas above&#13;selected surfaces">pocket</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -567,7 +571,6 @@
<div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div> <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="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="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>
<div id="ft-scale" class="grow grid"> <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">X</label><input id="lock_x" type="checkbox" checked></div>
@ -615,7 +618,6 @@
<button id="mesh-export-stl" lk="rc_xstl">export STL</button> <button id="mesh-export-stl" lk="rc_xstl">export STL</button>
<button id="mesh-swap" lk="rc_swap">replace vertices</button> <button id="mesh-swap" lk="rc_swap">replace vertices</button>
</div> </div>
<div id="ft-select" class="grow f-col"></div>
</div> </div>
<div class="footer"></div> <div class="footer"></div>
</div> </div>