From ec6dc2c171099da2fc5e5ad070fee9ae15473d23 Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Fri, 24 May 2024 22:49:10 -0400 Subject: [PATCH] checkpoint ui refactor --- src/kiri-mode/cam/client.js | 7 ++-- src/kiri-mode/fdm/client.js | 13 ++++--- src/kiri/init.js | 4 +- src/kiri/main.js | 10 ++++- src/kiri/platform.js | 4 +- src/kiri/ui.js | 11 ++++-- web/kiri/index.css | 25 ++++++------ web/kiri/index.html | 76 +++++++++++++++++++------------------ 8 files changed, 82 insertions(+), 68 deletions(-) diff --git a/src/kiri-mode/cam/client.js b/src/kiri-mode/cam/client.js index 15463d93..c7bc36d0 100644 --- a/src/kiri-mode/cam/client.js +++ b/src/kiri-mode/cam/client.js @@ -144,8 +144,11 @@ CAM.init = function(kiri, api) { isIndexed = undefined; isCamMode = mode === 'CAM'; SPACE.platform.setColor(isCamMode ? 0xeeeeee : 0xcccccc); - api.uc.setClass($('right-work'), 'slim-hide', !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) { func.clearPops(); func.tabClear(); @@ -162,7 +165,6 @@ CAM.init = function(kiri, api) { isAnimate = false; animFn().animate_clear(api); func.clearPops(); - api.uc.setClass($('right-work'), 'slim-hide', !isCamMode); if (isCamMode && isPreview) { for (let widget of API.widgets.all()) { widget.setAxisIndex(0); @@ -460,7 +462,6 @@ CAM.init = function(kiri, api) { oplist = oplist.filter(rec => !Array.isArray(rec)); let mark = Date.now(); let html = []; - $('ophint').style.display = oplist.length > (isIndexed ? 1 : 0) ? 'none' : ''; let bind = {}; let scale = API.view.unit_scale(); let notime = false; diff --git a/src/kiri-mode/fdm/client.js b/src/kiri-mode/fdm/client.js index 87637320..1a4eea10 100644 --- a/src/kiri-mode/fdm/client.js +++ b/src/kiri-mode/fdm/client.js @@ -101,11 +101,11 @@ FDM.init = function(kiri, api) { function clearRanges() { api.conf.get().process.ranges = []; - ui.rangeGroup.firstElementChild.innerHTML = ''; + ui.fdmRanges.innerHTML = ''; } + // re-render ranges menu function updateRanges(ranges = []) { - ui.rangeGroup.style.display = isFdmMode && ranges && ranges.length ? 'flex' : 'none'; let html = []; let bind = []; let now = Date.now(); @@ -120,7 +120,7 @@ FDM.init = function(kiri, api) { ]); bind.push({id, range}); } - ui.rangeGroup.firstElementChild.innerHTML = html.join(''); + ui.fdmRanges.innerHTML = html.join(''); for (let rec of bind) { $(`sel_${rec.id}`).onclick = () => { api.show.layer(rec.range.hi, rec.range.lo); @@ -159,6 +159,10 @@ FDM.init = function(kiri, api) { api.event.on("mode.set", mode => { isFdmMode = mode === 'FDM'; lastMode = mode; + // hide/show fdm mode elements + for (let el of [...document.getElementsByClassName('mode-fdm')]) { + api.uc.setClass(el, 'hide', !isFdmMode); + } updateVisiblity(); }); 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("settings.load", (settings) => { @@ -191,8 +194,6 @@ FDM.init = function(kiri, api) { }); api.event.on("settings.saved", (settings) => { 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 => { switch (target) { diff --git a/src/kiri/init.js b/src/kiri/init.js index 322d7a97..ab7947c8 100644 --- a/src/kiri/init.js +++ b/src/kiri/init.js @@ -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}), slaAntiAlias: uc.newSelect(LANG.sa_opaa_s, {title:LANG.sa_opaa_l, modes:SLA}, "antialias"), - rangeGroup: uc.newGroup("ranges", null, {modes:FDM, group:"ranges"}), - rangeList: uc.newRow([], {}), + fdmRanges: $('fdm-ranges'), settingsSave: $('settingsSave'), settingsName: $('settingsName'), @@ -2964,7 +2963,6 @@ gapp.register("kiri.init", [], (root, exports) => { $('tool-rotate').onclick = event.bind("tool.show", "rotate"); $('tool-scale').onclick = event.bind("tool.show", "scale"); $('tool-mesh').onclick = event.bind("tool.show", "mesh"); - $('tool-selector').onclick = event.bind("tool.show", "select"); } // warn users they are running a beta release diff --git a/src/kiri/main.js b/src/kiri/main.js index e4f3ba6f..46a9646b 100644 --- a/src/kiri/main.js +++ b/src/kiri/main.js @@ -898,8 +898,14 @@ gapp.register("kiri.main", [], (root, exports) => { current.mode = mode; MODE = MODES[mode]; DRIVER = kiri.driver[mode]; - // update mode display - $('app-mode-name').innerHTML = mode === 'CAM' ? 'CNC' : mode; + // update mode drop-down + { + 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 ["fdm","sla","cam","laser"].forEach(dev => { let cl = $(`mode-${dev}`).classList; diff --git a/src/kiri/platform.js b/src/kiri/platform.js index 52280477..33dbd5bc 100644 --- a/src/kiri/platform.js +++ b/src/kiri/platform.js @@ -566,8 +566,10 @@ function platformDeletePost() { platformChanged(); } +// render list of current widgets 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; return [ h.button({ diff --git a/src/kiri/ui.js b/src/kiri/ui.js index 6713c3ee..3942c2e6 100644 --- a/src/kiri/ui.js +++ b/src/kiri/ui.js @@ -280,12 +280,17 @@ gapp.register("kiri.ui", [], (root, exports) => { div.appendChild(row); if (label) { + // let l1 = DOC.createElement('hr'); + // l1.classList.add('set-header-line'); + // row.appendChild(l1); + link = DOC.createElement('a'); link.appendChild(DOC.createTextNode(label)); row.appendChild(link); - let line = DOC.createElement('hr'); - line.classList.add('set-header-line'); - row.appendChild(line); + + let l2 = DOC.createElement('hr'); + l2.classList.add('set-header-line'); + row.appendChild(l2); } addModeControls(row, opt); diff --git a/web/kiri/index.css b/web/kiri/index.css index 369274ad..d6077728 100644 --- a/web/kiri/index.css +++ b/web/kiri/index.css @@ -376,6 +376,9 @@ th, tr, td, label { font-weight: bold; } +.contents { + display: contents; +} .hide { display: none !important; } @@ -536,15 +539,18 @@ th, tr, td, label { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; } -#mode-info span { +#mode-info span, #mode-info select { margin: 2px 5px 2px 0; font-size: smaller; padding: 2px 5px 2px 5px; color: var(--fg-gray); background-color: white; + border-top-left-radius: 0; border-top-right-radius: 5px; + border-bottom-left-radius: 0; border-bottom-right-radius: 5px; border-top: 1px solid #ddd; + border-left: 0; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } @@ -625,16 +631,14 @@ th, tr, td, label { left: 0; right: 0; bottom: 0; - /* flex-grow: true; */ pointer-events: none; - /* max-height: 99%; */ } #mod-print button, #catalogList button, #settingsList button { text-transform: none !important; } -#mid-left { +#mid-left, #right-work { max-height: 100%; background-color: var(--work-area); } @@ -645,6 +649,9 @@ th, tr, td, label { #mid-left label, #mid-left svg { pointer-events: none; } +#right-work > div { + padding: 0 5px 0 5px; +} .slim-hide { width: 0; @@ -807,7 +814,7 @@ th, tr, td, label { font-family: monospace; padding-left: 4px; } -#ft-mesh, #ft-select { +#ft-mesh { min-width: 200px; } #mesh-info { @@ -820,13 +827,6 @@ th, tr, td, label { right: 2px; top: 7px; } -#ft-select { - max-height: 300px; - overflow-y: auto; -} -#ft-select button { - text-transform: none; -} #lay-flat.selected { background-color: var(--main-color); } @@ -931,7 +931,6 @@ th, tr, td, label { display: block; } #camops { - background-color: var(--work-area); display: flex; padding: 5px 0 0 0; } diff --git a/web/kiri/index.html b/web/kiri/index.html index 9cf12e8b..58dc4008 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -116,10 +116,6 @@ -
- - -
@@ -261,9 +257,13 @@
-
-
+
@@ -460,39 +460,43 @@
-
-
+
workspace
-
- +
+
+
+
-
CNCoperations
-
-
-
-
-
use + menu to add milling operations
-
drag to re-order
+
+
+
+
+ CNC + operations
-
- -
-
-
index
-
lathe
-
laser on
-
laser off
-
flip
-
register
-
drill
-
level
-
trace
-
gcode
-
rough
-
outline
-
contour
-
pocket
+
+
+
+
+ +
+
+
index
+
lathe
+
laser on
+
laser off
+
flip
+
register
+
drill
+
level
+
trace
+
gcode
+
rough
+
outline
+
contour
+
pocket
+
@@ -567,7 +571,6 @@
-
@@ -615,7 +618,6 @@
-