From d3680873febd48fde8a63cdffe51a45fd25283bc Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Fri, 5 Jun 2020 23:21:53 -0400 Subject: [PATCH] start a new look --- app.js | 2 +- src/kiri/init.js | 222 +++--- src/kiri/main.js | 94 +-- src/kiri/ui.js | 579 +++++++++++++++ web/kiri/index.css | 1435 ++++++------------------------------ web/kiri/index.html | 300 +++----- web/kiri/lang/en-help.html | 6 +- web/kiri/lang/en.js | 2 +- 8 files changed, 1088 insertions(+), 1552 deletions(-) create mode 100644 src/kiri/ui.js diff --git a/app.js b/app.js index 423042d6..19ae4ac6 100644 --- a/app.js +++ b/app.js @@ -235,7 +235,7 @@ const script = { "moto/space", "moto/load-stl", "moto/db", - "moto/ui", + "kiri/ui", "kiri/lang", "kiri/lang-en", "kiri/fill", diff --git a/src/kiri/init.js b/src/kiri/init.js index eaab2632..de9139d0 100644 --- a/src/kiri/init.js +++ b/src/kiri/init.js @@ -522,7 +522,7 @@ let code = devices[API.mode.get_lower()][devicename]; setDeviceCode(code, devicename); } - $('selected-device').innerHTML = devicename; + // $('selected-device').innerHTML = devicename; } // only for local filters @@ -535,6 +535,7 @@ } function setDeviceCode(code, devicename) { + return console.log('TODO setDeviceCode'); try { if (typeof(code) === 'string') code = js2o(code) || {}; @@ -1010,6 +1011,7 @@ } function updateCatalog(files) { + return console.log('TODO catalog render'); let table = UI.catalogList, list = []; table.innerHTML = ''; @@ -1126,9 +1128,9 @@ layerID: $('layer-id'), layerSpan: $('layer-span'), layerRange: $('layer-range'), - loading: $('loading').style, - progress: $('progress').style, - prostatus: $('prostatus'), + loading: $('progress').style, + progress: $('progbar').style, + prostatus: $('progtxt'), selection: $('selection'), sizeX: $('size_x'), sizeY: $('size_y'), @@ -1184,44 +1186,44 @@ gcodePre: UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3}), gcodePost: UC.newText(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, size:14, height:3}), - mode: UC.newGroup(LANG.mo_menu, assets, {region:"left", poprow:false}), - modeTable: UC.newTableRow([ - [ UI.modeFDM = UC.newButton(LANG.mo_fdmp, function() { API.mode.set('FDM',null,platform.update_size) }, {icon: icons.fdm}) ], - [ UI.modeSLA = UC.newButton(LANG.mo_slap, function() { API.mode.set('SLA',null,platform.update_size) }, {icon: icons.sla}) ], - [ UI.modeLASER = UC.newButton(LANG.mo_lazr, function() { API.mode.set('LASER',null,platform.update_size) }, {icon: icons.laser}) ], - [ UI.modeCAM = UC.newButton(LANG.mo_cncm, function() { API.mode.set('CAM',null,platform.update_size) }, {icon: icons.cam, id:"modeCAM"}) ] - ]), - system: UC.newGroup(LANG.su_menu), - sysTable: UC.newTableRow([ - [ UI.setupDevices = UC.newButton(LANG.su_devi, showDevices) ], - [ UI.setupTools = UC.newButton(LANG.su_tool, showTools, {modes:CAM}) ], - [ UI.setupExport = UC.newButton(LANG.su_xprt, settingsExport, {modes:ALL, expert:true}) ], - [ UI.localButton = UC.newButton(LANG.su_locl, API.show.local, {modes:FDM_CAM, expert:true}) ] - ]), - wsFile: UC.newGroup(LANG.fe_menu), - wsFileTable: UC.newTableRow([ - [ UI.import = UC.newButton(LANG.fn_recn, undefined, {class:"asym"}) ], - [ UI.load = UC.newButton(LANG.fn_impo, function() { API.event.import() }, {class:"asym"}) ] - ]), - wsFunc: UC.newGroup(LANG.fn_menu), - wsFuncTable: UC.newTableRow([ - [ UI.modeArrange = UC.newButton(LANG.fn_arra, platform.layout) ], - [ UI.modeSlice = UC.newButton(LANG.fn_slic, API.function.slice) ], - [ UI.modePreview = UC.newButton(LANG.fn_prev, API.function.print) ], - [ UI.modeExport = UC.newButton(LANG.fn_expo, API.function.export) ] - ]), - - workspace: UC.newGroup(LANG.ws_menu, undefined, {modes:ALL, expert:true}), - wsTable: UC.newTableRow([ - [ - UC.newButton(LANG.vu_sptp, SPACE.view.top), - UC.newButton(LANG.vu_home, SPACE.view.home), - ],[ - UI.saveButton = - UC.newButton(LANG.ws_save, API.space.save), - UC.newButton(LANG.ws_cler, API.space.clear) - ] - ], {modes:ALL, expert:true}), + // mode: UC.newGroup(LANG.mo_menu, assets, {region:"left", poprow:false}), + // modeTable: UC.newTableRow([ + // [ UI.modeFDM = UC.newButton(LANG.mo_fdmp, function() { API.mode.set('FDM',null,platform.update_size) }, {icon: icons.fdm}) ], + // [ UI.modeSLA = UC.newButton(LANG.mo_slap, function() { API.mode.set('SLA',null,platform.update_size) }, {icon: icons.sla}) ], + // [ UI.modeLASER = UC.newButton(LANG.mo_lazr, function() { API.mode.set('LASER',null,platform.update_size) }, {icon: icons.laser}) ], + // [ UI.modeCAM = UC.newButton(LANG.mo_cncm, function() { API.mode.set('CAM',null,platform.update_size) }, {icon: icons.cnc, id:"modeCAM"}) ] + // ]), + // system: UC.newGroup(LANG.su_menu), + // sysTable: UC.newTableRow([ + // [ UI.setupDevices = UC.newButton(LANG.su_devi, showDevices) ], + // [ UI.setupTools = UC.newButton(LANG.su_tool, showTools, {modes:CAM}) ], + // [ UI.setupExport = UC.newButton(LANG.su_xprt, settingsExport, {modes:ALL, expert:true}) ], + // [ UI.localButton = UC.newButton(LANG.su_locl, API.show.local, {modes:FDM_CAM, expert:true}) ] + // ]), + // wsFile: UC.newGroup(LANG.fe_menu), + // wsFileTable: UC.newTableRow([ + // [ UI.import = UC.newButton(LANG.fn_recn, undefined, {class:"asym"}) ], + // [ UI.load = UC.newButton(LANG.fn_impo, function() { API.event.import() }, {class:"asym"}) ] + // ]), + // wsFunc: UC.newGroup(LANG.fn_menu), + // wsFuncTable: UC.newTableRow([ + // [ UI.modeArrange = UC.newButton(LANG.fn_arra, platform.layout) ], + // [ UI.modeSlice = UC.newButton(LANG.fn_slic, API.function.slice) ], + // [ UI.modePreview = UC.newButton(LANG.fn_prev, API.function.print) ], + // [ UI.modeExport = UC.newButton(LANG.fn_expo, API.function.export) ] + // ]), + // + // workspace: UC.newGroup(LANG.ws_menu, undefined, {modes:ALL, expert:true}), + // wsTable: UC.newTableRow([ + // [ + // UC.newButton(LANG.vu_sptp, SPACE.view.top), + // UC.newButton(LANG.vu_home, SPACE.view.home), + // ],[ + // UI.saveButton = + // UC.newButton(LANG.ws_save, API.space.save), + // UC.newButton(LANG.ws_cler, API.space.clear) + // ] + // ], {modes:ALL, expert:true}), layout: UC.newGroup(LANG.op_menu), expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}), @@ -1234,9 +1236,9 @@ units: UC.newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, modes:CAM}, "units"), // allow modules to insert new items at the bottom of the left menu - appendLeft: UC.checkpoint(), + // appendLeft: UC.checkpoint(), - settingsGroup: UC.newGroup(LANG.se_menu, control, {region:"right"}), + settingsGroup: UC.newGroup(LANG.se_menu, $('settings'), {region:"right"}), settingsTable: UC.newTableRow([ [ UI.settingsLoad = @@ -1508,74 +1510,74 @@ } SPACE.onEnterKey([ - UI.layerSpan, function() { API.show.slices() }, - UI.layerID, function() { API.show.layer(UI.layerID.value) }, - UI.scaleX, selectionScale, - UI.scaleY, selectionScale, - UI.scaleZ, selectionScale, - UI.sizeX, selectionSize, - UI.sizeY, selectionSize, - UI.sizeZ, selectionSize, - UI.toolName, updateTool, - UI.toolNum, updateTool, - UI.toolFluteDiam, updateTool, - UI.toolFluteLen, updateTool, - UI.toolShaftDiam, updateTool, - UI.toolShaftLen, updateTool, - UI.toolTaperTip, updateTool, - $('rot_x'), selectionRotate, - $('rot_y'), selectionRotate, - $('rot_z'), selectionRotate + // UI.layerSpan, function() { API.show.slices() }, + // UI.layerID, function() { API.show.layer(UI.layerID.value) }, + // UI.scaleX, selectionScale, + // UI.scaleY, selectionScale, + // UI.scaleZ, selectionScale, + // UI.sizeX, selectionSize, + // UI.sizeY, selectionSize, + // UI.sizeZ, selectionSize, + // UI.toolName, updateTool, + // UI.toolNum, updateTool, + // UI.toolFluteDiam, updateTool, + // UI.toolFluteLen, updateTool, + // UI.toolShaftDiam, updateTool, + // UI.toolShaftLen, updateTool, + // UI.toolTaperTip, updateTool, + // $('rot_x'), selectionRotate, + // $('rot_y'), selectionRotate, + // $('rot_z'), selectionRotate ]); - UI.layerID.convert = UC.toFloat.bind(UI.layerID); - UI.layerSpan.convert = UC.toFloat.bind(UI.layerSpan); - UI.layerRange.onclick = function() { - UI.layerRange.checked = !(UI.layerRange.checked || false); - API.show.slices(); - }; + // UI.layerID.convert = UC.toFloat.bind(UI.layerID); + // UI.layerSpan.convert = UC.toFloat.bind(UI.layerSpan); + // UI.layerRange.onclick = function() { + // UI.layerRange.checked = !(UI.layerRange.checked || false); + // API.show.slices(); + // }; + // + // $('layer-toggle').onclick = function(ev) { + // let ls = UI.layers.style; + // ls.display = ls.display !== 'block' ? 'block' : 'none'; + // UI.layers.style.left = ev.target.getBoundingClientRect().left + 'px'; + // }; - $('layer-toggle').onclick = function(ev) { - let ls = UI.layers.style; - ls.display = ls.display !== 'block' ? 'block' : 'none'; - UI.layers.style.left = ev.target.getBoundingClientRect().left + 'px'; - }; + // UI.modelOpacity.onchange = UI.modelOpacity.onclick = function(ev) { + // API.widgets.opacity(parseInt(UI.modelOpacity.value)/100); + // }; + // + // UI.layerSlider.ondblclick = function() { + // UI.layerRange.checked = !UI.layerRange.checked; + // API.show.slices(); + // }; + // + // UI.layerSlider.onmousedown = function(ev) { + // if (ev.shiftKey) UI.layerRange.checked = !UI.layerRange.checked; + // }; + // + // UI.layerSlider.onclick = function() { + // API.show.layer(UI.layerSlider.value); + // }; + // + // UI.layerSlider.onmousemove = UI.layerSlider.onchange = function() { + // API.show.layer(UI.layerSlider.value); + // }; + // + // UI.layerSlider.onmouseup = function() { API.focus() }; + // + // UI.import.setAttribute("import","1"); + // UI.import.onclick = function() { + // UC.hidePoppers(); + // API.dialog.show("catalog"); + // }; + // + // $('cache-close').onclick = API.dialog.hide; + // + // UI.toolMetric.onclick = updateTool; + // UI.toolType.onchange = updateTool; - UI.modelOpacity.onchange = UI.modelOpacity.onclick = function(ev) { - API.widgets.opacity(parseInt(UI.modelOpacity.value)/100); - }; - - UI.layerSlider.ondblclick = function() { - UI.layerRange.checked = !UI.layerRange.checked; - API.show.slices(); - }; - - UI.layerSlider.onmousedown = function(ev) { - if (ev.shiftKey) UI.layerRange.checked = !UI.layerRange.checked; - }; - - UI.layerSlider.onclick = function() { - API.show.layer(UI.layerSlider.value); - }; - - UI.layerSlider.onmousemove = UI.layerSlider.onchange = function() { - API.show.layer(UI.layerSlider.value); - }; - - UI.layerSlider.onmouseup = function() { API.focus() }; - - UI.import.setAttribute("import","1"); - UI.import.onclick = function() { - UC.hidePoppers(); - API.dialog.show("catalog"); - }; - - $('cache-close').onclick = API.dialog.hide; - - UI.toolMetric.onclick = updateTool; - UI.toolType.onchange = updateTool; - - $('apphelp').onclick = API.help.show; + $('app-name').onclick = API.help.show; SPACE.platform.setSize( settings().device.bedWidth, @@ -1583,7 +1585,7 @@ settings().device.bedHeight ); - UI.selection.classList.add('compact'); + // UI.selection.classList.add('compact'); if (dark) { SPACE.platform.setGrid(25, 5, 0x999999, 0x333333); @@ -1765,7 +1767,7 @@ API.dialog.update(); // show version on startup - API.show.alert(`${LANG.version} ${KIRI.version}`); + $('app-vers').innerHTML = KIRI.version; if (!SETUP.s) console.log(`kiri | init main | ${KIRI.version}`); diff --git a/src/kiri/main.js b/src/kiri/main.js index 7197cbbc..eb30a58f 100644 --- a/src/kiri/main.js +++ b/src/kiri/main.js @@ -39,7 +39,7 @@ newWidget = kiri.newWidget, // --------------- UI = {}, - UC = MOTO.ui.prefix('kiri').inputAction(updateSettings).hideAction(updateDialogLeft), + UC = KIRI.ui.prefix('kiri').inputAction(updateSettings).hideAction(updateDialogLeft), MODE = MODES.FDM, onEvent = {}, currentPrint = null, @@ -502,6 +502,7 @@ } function updateSliderMax(set) { + return console.log('TODO updateSliderMax'); let max = 0; if (viewMode === VIEWS.PREVIEW && currentPrint) { max = currentPrint.getLayerCount(); @@ -558,8 +559,8 @@ layer = bound(layer, 0, API.var.layer_max); - UI.layerID.value = layer; - UI.layerSlider.value = layer; + // UI.layerID.value = layer; + // UI.layerSlider.value = layer; let j, slice, @@ -849,12 +850,12 @@ }); if (bounds.min.x === Infinity) { if (selectedMeshes.length === 0) { - UI.sizeX.value = 0; - UI.sizeY.value = 0; - UI.sizeZ.value = 0; - UI.scaleX.value = 1; - UI.scaleY.value = 1; - UI.scaleZ.value = 1; + // UI.sizeX.value = 0; + // UI.sizeY.value = 0; + // UI.sizeZ.value = 0; + // UI.scaleX.value = 1; + // UI.scaleY.value = 1; + // UI.scaleZ.value = 1; } return; } @@ -862,17 +863,17 @@ dy = bounds.max.y - bounds.min.y, dz = bounds.max.z - bounds.min.z, scale = unitScale(); - UI.sizeX.value = UI.sizeX.was = UTIL.round(dx/scale,2); - UI.sizeY.value = UI.sizeY.was = UTIL.round(dy/scale,2); - UI.sizeZ.value = UI.sizeZ.was = UTIL.round(dz/scale,2); - UI.scaleX.value = UI.scaleX.was = track.scale.x; - UI.scaleY.value = UI.scaleY.was = track.scale.y; - UI.scaleZ.value = UI.scaleZ.was = track.scale.z; + // UI.sizeX.value = UI.sizeX.was = UTIL.round(dx/scale,2); + // UI.sizeY.value = UI.sizeY.was = UTIL.round(dy/scale,2); + // UI.sizeZ.value = UI.sizeZ.was = UTIL.round(dz/scale,2); + // UI.scaleX.value = UI.scaleX.was = track.scale.x; + // UI.scaleY.value = UI.scaleY.was = track.scale.y; + // UI.scaleZ.value = UI.scaleZ.was = track.scale.z; } function setOpacity(value) { forAllWidgets(function (w) { w.setOpacity(value) }); - UI.modelOpacity.value = value * 100; + // UI.modelOpacity.value = value * 100; SPACE.update(); } @@ -1018,8 +1019,8 @@ } function platformUpdateSelected() { - UI.selection.style.display = platform.selected_count() ? 'inline' : 'none'; - $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none'; + // UI.selection.style.display = platform.selected_count() ? 'inline' : 'none'; + // $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none'; let extruders = settings.device.extruders; if (extruders) { for (let i=0; i -- All Rights Reserved */ + +"use strict"; + +(function() { + + if (kiri.ui) return; + + let SELF = self, + KIRI = self.kiri, + lastRegion = null, + lastGroup = null, + lastDiv = null, + addTo = null, + hideAction = null, + inputAction = null, + groups = {}, + groupShow = {}, + groupName = undefined, + hideable = {}, + hasModes = [], + isExpert = [], + letMode = null, + letExpert = false, + SDB = moto.KV, + DOC = SELF.document, + prefix = "tab", + NOMODE = "nomode", + exitimer = undefined; + + SELF.$ = (SELF.$ || function (id) { return DOC.getElementById(id) } ); + + KIRI.ui = { + prefix: function(pre) { prefix = pre; return kiri.ui }, + hideAction: function(fn) { hideAction = fn; return kiri.ui }, + inputAction: function(fn) { inputAction = fn; return kiri.ui }, + setMode: setMode, + setExpert: setExpert, + bound: bound, + toInt: toInt, + toFloat: toFloat, + hidePop: hidePop, + isPopped: isPopped, + newText: newTextArea, + newLabel: newLabel, + newRange: newRange, + newInput: newInputField, + newButton: newButton, + newBoolean: newBooleanField, + newSelect: newSelect, + newTable: newTables, + newTableRow: newTableRow, + newRow: newRow, + newBlank: newBlank, + newGroup: newGroup, + setGroup: setGroup, + hidePoppers: hidePoppers, + checkpoint, + restore + }; + + function setMode(mode) { + // $('control-left').classList.add('compact'); + // $('control-right').classList.add('compact'); + Object.keys(groupShow).forEach(group => { + updateGroupShow(group); + }); + letMode = mode; + hasModes.forEach(function(div) { + div.setMode(div._group && !groupShow[div._group] ? NOMODE : mode); + }); + } + + function setExpert(bool) { + letExpert = bool; + setMode(letMode); + } + + function checkpoint() { + return { addTo, lastDiv, lastGroup, lastRegion, groupName }; + } + + function restore(opt) { + if (opt) { + addTo = opt.addTo; + lastDiv = opt.lastDiv; + lastGroup = opt.lastGroup; + lastRegion = opt.lastRegion; + groupName = opt.groupName; + } + } + + // at present only used by the layers popup menu + function setGroup(div) { + addTo = lastDiv = div; + groupName = undefined; + lastGroup = []; + return div; + } + + function newGroup(label, div, options) { + lastDiv = div || lastDiv; + return addCollapsableGroup(label, lastDiv, options); + } + + function addCollapsableGroup(label, div, options) { + let opt = options || {}; + let group = opt.group || label; + lastRegion = opt.region || lastRegion; + hideable[group] = opt.nocompact === true ? false : true; + + let row = DOC.createElement('div'), + a = DOC.createElement('a'), + dbkey = `beta-${prefix}-show-${group}`, + popper = !opt.nocompact; + + if (popper) { + let pop = DOC.createElement('div'); + pop.classList.add('popper'); + if (lastRegion) pop.classList.add(lastRegion); + if (opt.poprow) pop.classList.add('poprow') + row.appendChild(pop); + addTo = pop; + } else { + addTo = lastDiv; + } + + div.appendChild(row); + row.setAttribute("class", "grouphead noselect"); + row.appendChild(a); + a.appendChild(DOC.createTextNode(label)); + addModeControls(row, opt); + lastGroup = groups[group] = []; + lastGroup.key = dbkey; + groupName = group; + groupShow[group] = popper ? SDB[dbkey] === 'true' : SDB[dbkey] !== 'false'; + row.onclick = function(ev) { + if (ev.target !== a && ev.target !== row) { + return; + } + toggleGroup(group, dbkey); + }; + if (popper) { + row.onmouseenter = function(ev) { + if (ev.target !== a && ev.target !== row) { + return; + } + clearTimeout(exitimer); + showGroup(group); + }; + row.onmouseleave = function(ev) { + if (ev.target !== a && ev.target !== row) { + return; + } + clearTimeout(exitimer); + exitimer = setTimeout(showGroup, 1000); + }; + addTo._group = group; + addModeControls(addTo, opt); + lastGroup.push(addTo); + } + + return row; + } + + function hidePoppers() { + showGroup(undefined); + } + + function showGroup(groupname) { + Object.keys(groups).forEach(name => { + let group = groups[name]; + groupShow[name] = SDB[group.key] = (groupname === name); + updateGroupShow(name); + }); + } + + function toggleGroup(groupname, dbkey) { + let show = SDB[dbkey] === 'false'; + groupShow[groupname] = hideable[groupname] ? SDB[dbkey] = show : true; + updateGroupShow(groupname); + } + + function updateGroupShow(groupname) { + let show = groupShow[groupname] || !hideable[groupname]; + let group = groups[groupname]; + group.forEach(div => { + if (show) div.setMode(letMode); + else div.setMode(NOMODE); + }); + } + + function toInt() { + let nv = this.value !== '' ? parseInt(this.value) : null; + if (isNaN(nv)) nv = 0; + if (nv !== null && this.bound) nv = this.bound(nv); + this.value = nv; + return nv; + } + + function toFloat() { + let nv = this.value !== '' ? parseFloat(this.value) : null; + if (nv !== null && this.bound) nv = this.bound(nv); + this.value = nv; + return nv; + } + + function bound(low,high) { + return function(v) { + if (isNaN(v)) return low; + return v < low ? low : v > high ? high : v; + }; + } + + function raw() { + return this.value !== '' ? this.value : null; + } + + function newLabel(text) { + let label = DOC.createElement('label'); + label.appendChild(DOC.createTextNode(text)); + label.setAttribute("class", "noselect"); + return label; + } + + function addId(el, options) { + if (options && options.id) { + el.setAttribute("id", options.id); + } + } + + function addModeControls(el, options) { + options = options || {}; + el.__show = true; + el.__modeSave = null; + el.showMe = function() { + if (el.__show) return; + el.style.display = el.__modeSave; + el.__show = true; + el.__modeSave = null; + }; + el.hideMe = function() { + if (!el.__show) return; + el.__show = false; + el.__modeSave = el.style.display; + el.style.display = 'none'; + }; + el.setVisible = function(show) { + if (show) el.showMe(); + else el.hideMe(); + }; + el.setMode = function(mode) { + let show = options.expert === undefined || (options.expert === letExpert); + el.setVisible(el.hasMode(mode) && show); + } + el.hasMode = function(mode) { + if (mode === NOMODE) return false; + if (!el.modes) return true; + return el.modes.contains(mode); + } + if (options.modes) { + el.modes = options.modes; + hasModes.push(el); + } + } + + function newDiv(options) { + let div = DOC.createElement('div'); + addModeControls(div, options); + addTo.appendChild(div); + lastGroup.push(div); + div._group = groupName; + return div; + } + + let lastPop = null; + let savePop = null; + + function hidePop() { + if (lastPop) { + lastPop.style.display = "none"; + } + if (savePop) { + savePop(); + savePop = null; + } + lastPop = null; + } + + function isPopped() { + return lastPop !== null; + } + + function newTextArea(label, options) { + let opt = options || {}, + row = newDiv(options), + btn = DOC.createElement("button"), + box = DOC.createElement("div"), + pop = DOC.createElement("div"), + lbl = DOC.createElement("label"), + txt = DOC.createElement("textarea"); + + pop.setAttribute("class", "poptext flow-col"); + box.setAttribute("style", "position: relative"); + box.appendChild(pop); + pop.appendChild(lbl); + pop.appendChild(txt); + lbl.appendChild(DOC.createTextNode(label)); + + txt.setAttribute("cols", 40); + txt.setAttribute("rows", 20); + txt.setAttribute("wrap", "off"); + + btn.appendChild(DOC.createTextNode("edit")); + btn.onclick = function(ev) { + ev.stopPropagation(); + if (ev.target === txt) { + // drop clicks on TextArea + ev.target.focus(); + } else { + // first time, button click / show + btn.parentNode.appendChild(box); + btn.parentNode.onclick = btn.onclick; + txt.scrollTop = 0; + txt.scrollLeft = 0; + txt.selectionEnd = 0; + let rows = txt.value.split('\n'); + let cols = 0; + rows.forEach(row => { + cols = Math.max(cols, row.length); + }); + txt.setAttribute("cols", Math.max(30, cols + 1)); + txt.setAttribute("rows", Math.max(10, rows.length + 1)); + + let showing = pop === lastPop; + hidePop(); + if (!showing) { + savePop = inputAction; + pop.style.display = "flex"; + lastPop = pop; + txt.focus(); + } else { + inputAction(); + } + } + }; + addModeControls(btn, opt); + addId(btn, opt); + + row.appendChild(newLabel(label)); + row.appendChild(btn); + row.setAttribute("class", "flow-row"); + if (opt.title) row.setAttribute("title", options.title); + btn.setVisible = row.setVisible; + + return txt; + } + + function newInputField(label, options) { + let opt = options || {}, + row = newDiv(opt), + hide = opt && opt.hide, + size = opt ? opt.size || 5 : 5, + height = opt ? opt.height : 0, + ip = height > 1 ? DOC.createElement('textarea') : DOC.createElement('input'), + action = opt.action || inputAction; + + row.appendChild(newLabel(label)); + row.appendChild(ip); + row.setAttribute("class", "flow-row"); + if (height > 1) { + ip.setAttribute("cols", size); + ip.setAttribute("rows", height); + ip.setAttribute("wrap", "off"); + } else { + if (Number.isInteger(size)) { + ip.setAttribute("size", size); + } else { + ip.setAttribute("style", `width:${size}`); + } + } + ip.setAttribute("type", "text"); + row.style.display = hide ? 'none' : ''; + if (opt) { + if (opt.disabled) ip.setAttribute("disabled", "true"); + if (opt.title) row.setAttribute("title", opt.title); + if (opt.convert) ip.convert = opt.convert.bind(ip); + if (opt.bound) ip.bound = opt.bound; + if (opt.action) action = opt.action; + } + ip.addEventListener('focus', function(event) { + hidePop(); + }); + if (action) { + ip.addEventListener('keydown', function(event) { + let key = event.key; + if ( + opt.text || + (key >= '0' && key <= '9') || + key === '.' || + key === '-' || + key === 'Backspace' || + key === 'Delete' || + key === 'ArrowLeft' || + key === 'ArrowRight' || + key === 'Tab' || + event.metaKey || + event.ctrlKey || + (key === ',' && options.comma) + ) { + return; + } + event.preventDefault(); + event.stopPropagation(); + }); + ip.addEventListener('keyup', function(event) { + if (event.keyCode === 13) { + // action(event); + ip.blur(); + } + }); + ip.addEventListener('blur', function(event) { + action(event); + }); + } + if (!ip.convert) ip.convert = raw.bind(ip); + ip.setVisible = row.setVisible; + + return ip; + } + + function newRange(label, options) { + let row = newDiv(options), + ip = DOC.createElement('input'), + hide = options && options.hide, + action = inputAction; + + if (label) row.appendChild(newLabel(label)); + row.appendChild(ip); + row.setAttribute("class", "flow-row"); + ip.setAttribute("type", "range"); + ip.setAttribute("min", (options && options.min ? options.min : 0)); + ip.setAttribute("max", (options && options.max ? options.max : 100)); + ip.setAttribute("value", 0); + row.style.display = hide ? 'none' : ''; + if (options) { + if (options.title) { + ip.setAttribute("title", options.title); + row.setAttribute("title", options.title); + } + if (options.action) action = options.action; + } + ip.setVisible = row.setVisible; + + return ip; + } + + function newSelect(label, options, source) { + let row = newDiv(options), + ip = DOC.createElement('select'), + hide = options && options.hide, + action = inputAction; + + row.appendChild(newLabel(label)); + row.appendChild(ip); + row.setAttribute("source", source || "tools"); + row.setAttribute("class", "flow-row"); + row.style.display = hide ? 'none' : ''; + if (options) { + if (options.convert) ip.convert = options.convert.bind(ip); + if (options.disabled) ip.setAttribute("disabled", "true"); + if (options.title) row.setAttribute("title", options.title); + if (options.action) action = options.action; + } + ip.onchange = function() { action() }; + ip.setVisible = row.setVisible; + + return ip; + } + + function newBooleanField(label, action, options) { + let row = newDiv(options), + ip = DOC.createElement('input'), + hide = options && options.hide; + + if (label) { + row.appendChild(newLabel(label)); + } + row.appendChild(ip); + row.setAttribute("class", "flow-row"); + row.style.display = hide ? 'none' : ''; + ip.setAttribute("type", "checkbox"); + ip.checked = false; + if (options) { + if (options.disabled) ip.setAttribute("disabled", "true"); + if (options.title) { + ip.setAttribute("title", options.title); + row.setAttribute("title", options.title); + } + } + if (action) ip.onclick = function() { action() }; + ip.setVisible = row.setVisible; + + return ip; + } + + function newBlank(options) { + let row = newDiv(options), + hide = options && options.hide; + + row.setAttribute("class", "flow-row"); + row.style.display = hide ? 'none' : ''; + ip.setVisible = row.setVisible; + + return ip; + } + + function newButton(label, action, options) { + let b = DOC.createElement('button'), + t = DOC.createTextNode(label); + + b.onclick = function() { + hidePoppers(); + if (action) action(); + }; + + if (options) { + if (options.class) b.classList.add(options.class); + if (options.icon) { + let d = DOC.createElement('div'); + d.innerHTML = options.icon; + b.appendChild(d); + } + } + + b.appendChild(t); + + addModeControls(b, options); + addId(b, options); + + return b; + } + + function newTableRow(arrayOfArrays, options) { + return newRow(newTables(arrayOfArrays), options); + } + + function newTables(arrayOfArrays) { + let array = []; + for (let i=0; i a { - text-transform: uppercase; -} -.grouphead:hover { - cursor: default; -} -.ck_catalog { - padding-top: 2px; -} -.ck_catalog div { - -webkit-flex-direction: row; - -webkit-justify-content: center; - -webkit-align-items: center; - display: -webkit-flex; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin-bottom: 1px; -} -.ck_catalog button { - margin: 0px 0px 1px 2px !important; -} -.buton { - font-weight: bold; - background-color: #bbb; -} -.flow-row { - position: relative; - -webkit-flex-direction: row; - -webkit-justify-content: flex-end; - display: -webkit-flex; - display: flex; - flex-direction: row; - justify-content: flex-end; -} -.flow-row label { - -webkit-flex-basis: auto; - -webkit-flex-grow: 1; - flex-basis: auto; - flex-grow: 1; -} -.flow-col { - position: relative; - -webkit-flex-direction: column; - -webkit-justify-content: flex-start; - display: -webkit-flex; - display: flex; - flex-direction: column; - justify-content: flex-start; -} -.flow-left { - -webkit-justify-content: flex-start; - justify-content: flex-start; -} -.flow-grow { - -webkit-flex-grow: 1; - flex-grow: 1 -} -.flow-space-between { - -webkit-justify-content: space-between; - justify-content: space-between; -} - -:-moz-any(#control-left) { - overflow-x: hidden !important; - overflow-y: hidden !important; -} -:-moz-any(#control-right) { - overflow-x: scroll !important; - overflow-y: scroll !important; - margin-right: -14px !important; - margin-bottom: -14px !important; -} -.dark .control { - border: 0 !important; - background-color: rgba(255,255,255,0.5); -} -.dark .control button { - border: 1px solid rgba(128,128,128,0.5); -} -.control { - background-color: rgba(255,255,255,0.75); -} -.control label { - padding: 2px; -} -.control input { +input { background-color: #eee; margin-bottom: 1px; text-align: right; border: 1px solid #bbb; } -.control input:focus { +input:focus { background-color: #fec; outline: none; } -.control input[disabled] { +input[disabled] { background-color: #ccc; color: #000; border-width: 1px; } -.control input[type="range"] { +input[type="range"] { width: 85px; background-color: transparent; } -.control select { +input[type=range]::-moz-focus-outer { + border: 0; +} +select { + outline: none; +} +select { border: 1px solid #bbb; background-color: #eee; margin-bottom: 1px !important; border-radius: 3px; } -.control button { - margin: 1px; +th, tr, td, span, div, label, button { + user-select: none; } -.control .flow-row { - align-items: center; - justify-content: center; -} -.dark #appid span { - border-color: #555; - background-color: rgba(100,120,150,0.75); - color: #eee; -} -.dark #appid a { - color: #eee; -} -.dark #appid a:hover { - color: #eee; -} -.dark #appid span:hover { - background-color: rgba(80,100,230,0.75); -} -.dark #langpop { - color: black; -} -#appid { - text-align: center; - position: fixed; - width: 100%; - top: 3px; -} -#appid span { - border: 1px solid #ccc; - border-radius: 5px; - padding: 5px 8px 3px 8px; - background-color: rgba(170,221,255,0.75); - color: rgba(0,0,0,0.5); -} -#appid span:hover { - background-color: rgba(170,221,255,0.5); -} -#appid a { - color: rgba(0,0,0,0.75); - font-weight: bold; -} -#appid a:hover { - color: rgba(0,50,50,0.75); -} -#apphelp { - margin-left: 5px; - font-weight: bold; -} -#applang { - position: relative; - margin-right: 5px; - font-weight: bold; -} -#langpop { - display: none; - position: absolute; - white-space: nowrap; - top: 105%; - left: 0; - border-radius: 5px; - border: 1px solid #ddd; - background-color: rgba(255,255,255,0.75); - padding: 5px; -} -#langpop > div { - padding: 5px; -} -#langpop > div:hover { - background-color: rgba(255,128,128,0.5); - border-radius: 5px; -} -#applang:hover #langpop { - display: block; -} -#container { - width: 100%; - height: 100%; -} -#control > div:hover label { - text-decoration: underline; - text-decoration-color: #aaa; -} -#control-left { - display: none; - position: fixed; - z-index: 10000; - color: black; - top: 5px; - left: 0px; - padding: 5px; - border-top: 2px solid #ddd; - border-right: 2px solid #ddd; - border-bottom: 2px solid #ddd; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - overflow-x: visible; - overflow-y: scroll; -} -#control-right { - display: none; - position: fixed; - z-index: 10000; - top: 5px; - right: 0px; - bottom: 5px; - padding: 5px; - border-top: 2px solid #ddd; - border-left: 2px solid #ddd; - border-bottom: 2px solid #ddd; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - color: #222; - overflow-y: scroll; - overflow-x: visible; -} -.dark .compact .grouphead { - background-color: rgba(100,120,150,0.75); - border: 1px solid #555; - color: #eee; -} -.dark .compact .grouphead:hover { - background-color: rgba(80,100,230,0.75); -} -.dark .compact.control { - background-color: rgba(128,128,128,0.2) !important; -} -.compact { - overflow: visible !important; - bottom: auto !important; - border: 0 !important; - background-color: rgba(255,255,255,0.5) !important; -} -.compact .grouphead { - padding: 10px 5px 10px 5px !important; - background-color: rgba(170,221,255,0.25); -} -.compact .grouphead:hover { - background-color: rgba(170,221,255,0.9); -} -.compact .grouphead a { - font-size: larger !important; - margin: 5px !important; -} -.compact .flow-row label { - font-size: 18px !important; -} -.compact .flow-row input { - font-size: 18px !important; -} -.compact .flow-row select { - font-size: 18px !important; -} -.compact .flow-row { - margin: 3px 0 3px 0; -} -.compact .asym { - width: auto !important; -} -.compact button { - font-size: larger !important; - padding: 5px 10px 5px 10px; -} -:-moz-any(#control-left.compact) { - overflow-x: display !important; - overflow-y: display !important; -} -:-moz-any(#control-right.compact) { - overflow-x: display !important; - overflow-y: display !important; - margin-right: auto !important; - margin-bottom: auto !important; -} -#control-left::-webkit-scrollbar, #control-right::-webkit-scrollbar { - display: none; -} -.dark #control-left:hover, .dark #control-right:hover { - background-color: rgba(255,255,255,0.6); -} -#control-left:hover, #control-right:hover { - background-color: #ffffff; -} -#loading { - position: fixed; - top: 5px; - left: 20%; - right: 20%; - border: 1px solid white; - margin: 2px; - background-color: #ddd; - text-align: center; - display: none; -} -#modal { - display: none; - position: fixed; - z-index: 20000; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: rgba(0,0,0,0); -} -#progress { - position: relative; - width: 1%; - height: 100%; - background-color: #f00; -} -#welcome { - color: white; - padding: 10px; - border: 10px solid white; - background-color: rgba(20,20,20,0.75); - position: fixed; - top: 50px; - left: 0; - right: 0; - bottom: 100px; - margin: 0 auto; - width: 50%; - max-width: 800px; - min-width: 500px; - display: block; - unicode-bidi: embed; - font-family: monospace; - white-space: pre; - overflow-y: scroll +.noselect { + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -input[type=range]::-moz-focus-outer { - border: 0; -} -.grouphead { - position: relative; -} -.dark .popper { - background-color: rgba(255,255,255,0.75); - color: black; -} -.popper { - position: absolute; - top: 0; - z-index: 50000; - background-color: white; - border: 1px solid #aaa; - border-radius: 3px; - padding: 5px; - white-space: nowrap; - text-align: left; -} -.popper.left { - left: 105%; -} -.popper.right { - right: 105%; -} -.popper svg { - width: 40px; - height: 40px; -} -.poprow > div { - display: flex; +.row { flex-direction: row; } -.dialog { - display: none; - color: black; - padding: 10px; - border: 3px solid #ddd; - border-radius: 3px; - background-color: rgba(255,255,255,0.75); - position: fixed; - top: 5px; -} -.dialog span { - padding: 2px 5px 2px 5px; - margin: 0 5px 5px 5px; - background-color: #eee; - border-radius: 5px; - border: 1px solid #aaa; - text-align: center; -} -.helper { - position: relative; - display: none; -} -.mono { - unicode-bidi: embed; - font-family: monospace; - white-space: pre; -} -.sel-span { - position: relative; - display: inline-block; -} -.sel-pop { - display: none; - position: absolute; - bottom: 100%; - left: 0; - padding-bottom: 5px; -} -.sel-pop div, .sel-pop table { - background-color: white; - border: 1px solid #ddd; - border-radius: 5px; - padding: 5px; -} -.sel-span:hover .sel-pop { - display: block; -} -.compact .sel-span .value { - font-size: 16px; - color: #444466 !important; -} -.compact .sel-span label { - font-size: 20px; -} -.compact .sel-span input { - font-size: 18px; - margin: 4px; -} -#localCache { - border-bottom: 1px solid #ddd !important; - padding-bottom: 8px !important; - margin-bottom: 4px; -} -#localCache button { - position: absolute; - right: 0; -} -#widget-info { - text-align: center; +.col { + flex-direction: column; +} +.auto { + flex-basis: auto; +} +.grow { + flex-grow: 1; +} +.a-start { + align-items: flex-start; +} +.a-center { + align-items: center; +} +.a-end { + align-items: flex-end; +} +.j-start { + justify-content: flex-start; +} +.j-center { + justify-content: center; +} +.j-end { + justify-content: flex-end; +} +.space-between { + justify-content: space-between; +} + +:-moz-any() { + overflow-x: hidden !important; + overflow-y: hidden !important; +} +:-moz-any() { + overflow-x: scroll !important; + overflow-y: scroll !important; + margin-right: -14px !important; + margin-bottom: -14px !important; +} + +#container { position: fixed; + z-index: -1000; width: 100%; - bottom: -5px; + height: 100%; } -#widget-info span { - border: 1px solid #ccc; - border-radius: 5px; - margin: 0 3px 0 3px; - padding: 3px 10px 10px 10px; - background-color: rgba(170,221,255,0.75); - font-weight: bold; +#container canvas { + width: 100%; + height: 100%; + overflow: hidden; +} + +#top { + font-family: 'Russo One', sans-serif; + background-color: rgba(255,255,255,0.75); + padding: 3px; +} +#top > div { + margin: 0 5px 0 5px; +} + +#app-vers, #app-acct { + width: 125px; +} + +#app-acct { + justify-content: flex-end; +} + +#mid { + pointer-events: none; +} + +#mid-lcol, #mid-rcol, #modal { + pointer-events: visible; +} + +#mid-sep { + height: 1px; + background-image: linear-gradient(to right, #ddd, #666, #ddd); +} + +.pop-lcol { + position: absolute; + display: none; + top: -3px; + left: 100%; z-index: 10; } -#widget-info label { - border: 0; - color: rgba(0,0,0,0.75); - white-space: nowrap; - font-weight: bold; -} -#widget-info .value { - font-style: italic; - background-color: #f4f4f4; - outline: none; - color: black; -} -#widget-info .value:focus { - background-color: #fec; -} -#widget-info button { - margin: 0 2px 0 2px !important; - border: 1px solid rgba(255,255,255,0.75); -} -#sel-ext { - display: flex; + +.pop-lcol > div { flex-direction: column; -} -#stock,#selection { - display: none; -} -#stock label { - background-color: transparent !important; -} -#selection { - background-color: transparent !important; -} -#container { - width: 100%; - height: 100%; -} -#loading { - position: fixed; - top: 30px; - left: 20%; - right: 20%; + align-items: center; margin: 2px; - background-color: rgba(200,200,200,0.65); - border: 3px solid rgba(200,200,200,0.5); - border-radius: 5px; - text-align: center; - display: none; -} -#progress { - display: flex; - position: relative; - text-align: left; - background-color: rgba(255,0,0,0.75); - width: 100%; -} -#prostatus { - color: white; padding: 5px; - margin: 5px; - white-space: nowrap; + background-color: rgba(255,255,255,0.75); + border: 1px solid rgba(0,0,0,0); + border-radius: 3px; + width: 60px; + color: #89a; } + +.pop-lcol > div:hover { + background-color: #eee; + border: 1px solid #aaa; + color: #000; +} + +.lt-menu { + flex-direction: column; + align-items: center; + margin: 2px 0 2px 0; + padding: 5px 5px 5px 10px; + border: 1px solid rgba(0,0,0,0); + border-radius: 3px; + color: #89a; + left: -5px; + background-color: rgba(255,255,255,0.75); +} + +.lt-menu svg { + font-size: 40px; + text-align: center; +} + +.lt-menu label { + font-size: smaller; +} + +.lt-menu:hover { + background-color: #eee; + border: 1px solid #aaa; + color: #000; +} + +.lt-menu:hover .pop-lcol { + display: flex; +} + +#bot { + text-align: center; + font-size: smaller; + height: 25px; +} + +#progress { + display: none; + position: absolute; + bottom: 0px; + top: 0px; + left: 10%; + right: 10%; + text-align: center; + background-color: #ddd; +} +#progbar { + width: 100%; + text-align: left; + position: relative; + background-color: rgba(255,0,0,0.75); +} +#progtxt { + color: white; + height: 25px; + padding: 0 5px 0 5px; + margin: 0 5px 0 5px; + white-space: nowrap; + flex-direction: row; + align-items: center; + vertical-align: middle; +} + #modal { - z-index: 20000; + display: none; position: fixed; + z-index: 10000; top: 0px; left: 0px; right: 0px; bottom: 0px; - background-color: rgba(0,0,0,0.2); - display: none; + background-color: rgba(0,0,0,0.5); } -.modal-x { +#slider { + display: none; position: absolute; - z-index: 200; + top: 5px; right: 3px; - top: 3px; -} - -/** LOCAL DIALOG */ - -#local { - position: fixed; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - text-align: center; - top: 50px; - left: 50%; - color: black; - border: 10px solid #ddd; - border-radius: 10px; - background-color: rgba(255,255,255,0.9); - padding: 10px; -} -#local-dev table { - border-color: separate; - border-spacing: 0; -} -#local-dev td,th { - padding: 5px !important; -} -#local-dev thead th { - width: 100%; - border-bottom: 1px solid #888; -} -#local-dev tbody tr:hover { - background-color: #eee; -} - -/** PRINT DIALOG */ - -#print { - position: fixed; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - text-align: center; - top: 50%; - left: 50%; - color: black; - border: 10px solid #ddd; - border-radius: 10px; - background-color: rgba(255,255,255,0.9); - padding: 10px; -} -#print button { - font-weight: bold; -} -#print > div { + bottom: 5px; + width: 50px; + background-color: #f8f8f8; border: 1px solid #aaa; border-radius: 3px; - padding: 2px; - margin: 6px 0 6px 0; -} -.print-sel { - position: relative; - margin-top: 15px !important; - padding: 15px 5px 10px 5px !important; -} -.print-sel > div { - flex-grow: 1; -} -.print-send { - margin: 0 0 0 5px !important; - width: 50px !important; - min-width: 50px !important; - max-width: 50px !important; -} -.print-gcode > button { - margin: 0 2px 0 2px !important; - height: 30px; -} -.print-sel > button { - max-width: 1000px; - flex-basis: 100px; -} -.print-sel > span { - position: absolute; - top: -10px; - left: 0; - right: 0; -} -.print-sel > span > label { - background-color: rgba(255,255,255,0.9); - font-size: 15px; - padding: 0 5px 0 5px; - border-top: 0; - border-bottom: 0; - border-left: 1px solid #aaa; - border-right: 1px solid #aaa; - border-radius: 5px; -} -.print-sel td,th { - padding: 2px; -} -.print-sel th { - text-align: right !important; -} -#print-canvas { - width: 180px; - height: 320px; - border: 1px solid #ccc; - background-color: #f5f5f5; - transform: scale(-1, 1); -} -#print-range { - width: 80%; -} -#print-layer { - border: 1px solid #ddd; - padding: 0 3px 0 3px; - margin: 0 5px 0 5px; - font-family: monospace; -} -#print .print-sel:hover { - border: 1px solid #555; -} -#print table { - width: 100%; -} -#print th { - text-align: left; -} -#print td { - text-align: right; -} -#print input { - text-align: right; -} -#print input[disabled] { - background-color: #eee; - border-color: #ddd; - color: black; -} -#print-density { - disabled: false; -} -#grid-hint { - font-style: italic; - font-weight: lighter; - font-size: 10px; -} -#octo-hint { - font-style: italic; - font-weight: lighter; - font-size: 10px; -} -#print a { - color: #68d; -} -#print a:hover { - color: #46a; - background-color: rgba(255,255,255,0.5); } -#v a { - color: #8ae; -} - -/** help dialog */ - -#help { - position: fixed; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - text-align: left; - top: 50%; - left: 50%; - color: black; - border-radius: 10px; - border: 10px solid #ddd; - background-color: rgba(255,255,255,0.9); - padding: 10px; -} -#help div { - font-family: Verdana, Geneva, sans-serif; - white-space: nowrap; -} -#help a { - color: #68d; -} -#help button { - margin: 2px 0 2px 0; -} -#help a:hover { - color: #46a; - background-color: rgba(255,255,255,0.5); -} -#help p { - font-weight: normal; - white-space: nowrap; -} -#help td { - border: 1px solid rgba(255,255,255,0); -} -button.selected { - background-color: white; -} -#help-left { - border-right: 1px dashed #aaa; - padding-right: 10px; - line-height: 150%; -} -#help .grouphead { - line-height: 120%; - font-size: 14px; - padding: 8px 0 8px 0; - margin: 10px 0 10px 0; - background-color: #ccc; - border-color: white; -} -#help-left .content { - margin: 5px; -} -#help-right { - padding-left: 10px; -} -#help-body .grouphead { - padding: 3px !important; -} -#help-body table label { - font-family: monospace; - border-radius: 3px; - margin: 5px 1px 5px 1px !important; - padding: 1px 3px 1px 3px; - background-color: #ddd; -} -#help-body td { - margin: 5px; - padding: 2px; - font-family: monospace; -} -#help-body th,td { - white-space: nowrap; -} -#help-body li { - white-space: nowrap; - list-style-type: none; - padding-left: 10px; -} -.help-post { - text-align: center; - font-style: italic; - border-top: 1px dashed #aaa; - margin-top: 10px !important; -} - -/** tool dialog */ - -#tools:hover,#tools-body:hover { - background-color: #ffffff; -} -#tools { - text-align: center; -} -#tools button { - margin-left: 1px; - margin-right: 2px; -} -#tools span { - border: 0; - background: transparent; -} -#tools-body { - height: 100%; -} -#tool-labels label { - display: block; - text-align: center !important; - font-weight: bold; - font-size: 14px; - padding-bottom: 5px; - border: 0; -} -#tool-labels label:nth-child(1) { - width: 125px; -} -#tool-labels label:nth-child(2) { - width: 175px; -} -#tool-labels label:nth-child(3) { - width: 100px; -} -#tool-cols > div { - padding: 5px; - margin: 5px; - border: 1px solid #aaa; - border-radius: 5px; -} -#tool-cols > div:nth-child(1) { - width: 125px; -} -#tool-cols > div:nth-child(2) { - width: 175px; -} -#tool-cols > div:nth-child(3) { - width: 100px; -} -#tool-info > div { - margin-top: 2px; - margin-bottom: 2px; - flex-basis: auto; - flex-shrink: 0; -} -#tool-action { - padding: 3px 3px 0 3px; -} -#tool-action > button { - text-align: center; -} -#tool-action > span { - flex-grow: 1; - width: 100%; -} -#tools label { - text-align: left; -} -#tools input { - background-color: #ddd; - margin-bottom: 1px; - text-align: right; -} -#tools input:focus { - background-color: #dee; -} -#tools input:disabled { - color: #ddd; -} -#tool-list > select { - flex-grow: 1; - width: 100%; - height: 100%; - color: black; - border: 0; - margin-bottom: 2px; - padding-bottom: 2px; - background-color: transparent; - overflow-y: auto; - outline: none; -} -#tool-list select::-webkit-scrollbar { - display: none; -} - -/** device dialog */ - -#devices:hover,#devices-body:hover { - background-color: #ffffff; -} -#devices { - text-align: center; -} -#devices button { - margin-left: 1px; - margin-right: 2px; -} -#devices span { - border: 0; - background: transparent; -} -#devices-body { - height: 100%; -} -#device .tablerow button { - margin: 5px 3px 5px 3px; - padding-top: 0; - padding-bottom: 2px; -} -#device-labels span { - width: 200px; - padding: 2px 5px 2px 5px; - margin: 0 5px 5px 5px; - background-color: #eee; - border-radius: 5px; - border: 1px solid #aaa; - text-align: center; -} -#device-cols > div { - width: 200px; - padding: 5px; - margin: 5px; - border: 1px solid #aaa; - border-radius: 5px; -} -#device-info > div { - margin-top: 2px; - margin-bottom: 2px; - flex-basis: auto; - flex-shrink: 0; - position: relative; -} -#device-action { - padding: 3px 3px 0 3px; -} -#device-action > button { - text-align: center; -} -#device-action > span { - flex-grow: 1; - width: 100%; -} -#device-labels label { - display: block; - text-align: center !important; - font-weight: bold; - font-size: 14px; - padding-bottom: 5px; - border: 0; -} -#devices label { - text-align: left; -} -#devices input { - background-color: #ddd; - margin-bottom: 1px; - text-align: right; -} -#devices input:focus { - background-color: #dee; -} -#device-list select { - flex-grow: 1; - width: 100%; - height: 100%; - color: black; - border: 0; - margin-bottom: 2px; - padding-bottom: 2px; - background-color: transparent; - overflow-y: auto; - outline: none; -} -#device-list select::-webkit-scrollbar { - display: none; -} -#device-list option[local="1"] { - color: #55d; -} -#device-list option[favorite="1"] { - font-weight: bold; -} -#device > div { - align-items: center; - justify-content: center; -} -#device label { - white-space: nowrap; -} -#device > div > label { - padding: 2px; -} -#device input { - margin: 2px; -} -#device textarea { - overflow: hidden; - font-family: monospace; -} -#import { - width: 100%; -} -button[import="1"] { - width: 5px; - padding-left: 2px; - padding-right: 2px; -} -#catalog { - text-align: center; - min-height: 25%; - max-height: 75%; - height: 1000px; -} -#catalog div { - position: relative; -} -#catalogBody { - height: 100%; -} -#catalogBody div::-webkit-scrollbar { - display: none; -} -#catalogBody label { - font-weight: bold; - font-size: 14px; - padding-bottom: 10px; - border: 0; -} -#catalogList { - overflow-y: scroll; - overflow-x: hidden; -} -#catalogList button { - margin: 0px 0px 2px 2px; - overflow-x: hidden; - text-overflow: ellipsis; -} - -#settings button { - margin: 1px; -} -#settingsBody label { - font-weight: bold; - font-size: 14px; - padding-bottom: 10px; - border: 0; -} -#layer-view { - display: none; - position: fixed; - flex-direction: row; - justify-content: center; - align-items: stretch; - bottom: 0; - left: 20%; - right: 20%; - margin: 0; - padding: 4px; - background-color: rgba(170,221,255,0.75); - border: 1px solid #ccc; - border-bottom: 0; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -#layer-view button { - margin: 0 !important; - border: 1px solid #bbb; -} -#layer-view input { - border-width: 1px; - padding: 2px; - border: 1px solid #bbb; -} -#layer-view > button, #layer-view > input { - margin-left: 4px !important; - margin-right: 4px !important; -} -#opacity { - max-width: 75px; -} -#layer-slider,#opacity { - border: 0; - margin: 0; - padding: 0; -} -#layer-slider { - flex-grow: 1; -} -#layers { - display: none; - position: fixed; - bottom: 25px; - background-color: rgba(170,221,255,0.75); - border: 1px solid rgba(0,0,0,0.2); - border-radius: 3px; - padding: 6px; - -webkit-transform: translate(-9px, -5px); - transform: translate(-9px, -5px); -} -#layers label { - text-align: left; - color: rgba(0,0,0,0.85); -} - -.poptext { - display: none; - position: absolute; - margin-left: 30px; - border: 3px solid #ddd; - border-radius: 3px; - transform: translate(0, -25%); +#slider > div { flex-direction: column; - align-items: stretch; - z-Index: 10000; + align-items: center; } -.poptext label { - text-align: center !important; - border-top: 1px solid #888; - border-left: 1px solid #888; - border-right: 1px solid #888; - background-color: rgba(170,221,255,0.75); - padding: 3px 0 3px 0; - margin: 0; - color: black; + +#slider-begin { + background-color: #ccc; + border-bottom: 1px solid #aaa; } -.poptext textarea { - flex-grow: 1; - margin: 0; - opacity: 0.95; - outline: none; - overflow-y: scroll !important; + +#slider-end { + background-color: #ccc; + border-top: 1px solid #aaa; +} + +#slider-hold { + background-color: #ccc; + position: absolute; + right: 0; + left: 0; + border: 3px solid white; +} + +#slider-hold .shim { + width: 100%; + height: 10px; + background-color: #aaa; + border: 1px solid #999; } #alert-area { display: none; justify-content: center; align-items: center; - position: fixed; - top: 40px; + position: absolute; + bottom: 40px; left: 0; right: 0; } @@ -1273,44 +349,3 @@ button[import="1"] { margin: 5px; text-align: center; } - -.flex { - display: flex; -} - -.frow { - flex-direction: row; -} - -.fcol { - flex-direction: column; -} - -.fgro { - flex-grow: 1; -} - -#selected { - position: fixed; - z-index: 5000; - color: #eee; - bottom: 5px; - left: 0px; - padding: 5px; - border-top: 3px solid #ddd; - border-right: 3px solid #ddd; - border-bottom: 3px solid #ddd; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - background-color: rgba(255,255,255,0.75); - overflow: none; - display: flex; - flex-direction: row; -} -#selected > span { - font-family: sans-serif; - font-weight: normal; - font-size: 12px; - color: #555; - -} diff --git a/web/kiri/index.html b/web/kiri/index.html index 4239bcc0..c2e7cb81 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -2,10 +2,10 @@ + + - - @@ -15,209 +15,121 @@ + + + - - -
- A
 - Kiri:Moto Slicer - ? -
- -
- -
- -
- mode -   :   - device -   :   - settings -
- - - +
- -
status
- -
-
- -
-
+
+
version
+
+
Kiri:Moto
+
+
- -
-
- -
-
-
- -
-
-
- - +
+
+
+
+ +
-
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - -
-
-
- -
-
-
- - - -
-
-
- -
-
-
- +
+ + +
+
+ + +
+
+ +
-
-
-
-
shaft
-
-
-
flute
-
-
-
taper
- -
-
-
- - - - - +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+
+
0
+
+
+
+
 
+
+
+
+
∞
- -
-
- - -
- - - - - - - - - - - - - - - - - - - - -
-
- - - -
-
- - -
- - -
- - -
-
- - - -
- - - - x - x - - -
-
- -
- -
- - - - - -
- -
-
-
+
+
loading
+
+
+
+
alerts
alerts
alerts
+
diff --git a/web/kiri/lang/en-help.html b/web/kiri/lang/en-help.html index ff14fc6f..a06c11a8 100644 --- a/web/kiri/lang/en-help.html +++ b/web/kiri/lang/en-help.html @@ -4,7 +4,9 @@
-

Quick Help

+

Kiri:Moto

+ +
About
Kiri:Moto @@ -13,7 +15,7 @@ Laser cutting, 3D printing, CNC milling
-
Loading Objects
+
File Loading
Drag and drop a file onto the grid diff --git a/web/kiri/lang/en.js b/web/kiri/lang/en.js index fb91fed6..b9ded2b1 100644 --- a/web/kiri/lang/en.js +++ b/web/kiri/lang/en.js @@ -107,7 +107,7 @@ kiri.lang['en-us'] = { vu_sprt: "Right", // WORKSPACE - ws_menu: "workspace", + ws_menu: "view", ws_save: "Save", ws_cler: "Clear",