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 device settings work

Browse source
This commit is contained in:
Stewart Allen 2020-06-06 23:21:42 -04:00
commit 10bd1c94d2
4 changed files with 186 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

145
src/kiri/init.js
View file

@ -628,9 +628,9 @@
e.parentNode.style.display = dev.spindleMax >= 0 ? 'none' : 'block'; e.parentNode.style.display = dev.spindleMax >= 0 ? 'none' : 'block';
}); });
// UI.deviceSave.disabled = !local; UI.deviceSave.disabled = !local;
// UI.deviceDelete.disabled = !local; UI.deviceDelete.disabled = !local;
// UI.deviceAdd.disabled = dev.noclone; UI.deviceAdd.disabled = dev.noclone;
API.view.update_fields(); API.view.update_fields();
platform.update_size(); platform.update_size();
@ -685,32 +685,31 @@
devices = devices.sort(); devices = devices.sort();
// UI.deviceClose.onclick = API.dialog.hide; UI.deviceSave.onclick = function() {
// UI.deviceSave.onclick = function() { API.function.clear();
// API.function.clear(); API.conf.save();
// API.conf.save(); showDevices();
// showDevices(); };
// }; UI.deviceAdd.onclick = function() {
// UI.deviceAdd.onclick = function() { API.function.clear();
// API.function.clear(); cloneDevice();
// cloneDevice(); showDevices();
// showDevices(); };
// }; UI.deviceDelete.onclick = function() {
// UI.deviceDelete.onclick = function() { API.function.clear();
// API.function.clear(); removeLocalDevice(getSelectedDevice());
// removeLocalDevice(getSelectedDevice()); showDevices();
// showDevices(); };
// };
// UI.deviceAll.onclick = function() {
// UI.deviceAll.onclick = function() { API.show.favorites(false);
// API.show.favorites(false); showDevices();
// showDevices(); };
// }; UI.deviceFavorites.onclick = function() {
// UI.deviceFavorites.onclick = function() { API.show.favorites(true);
// API.show.favorites(true); showDevices();
// showDevices(); };
// };
//
UI.deviceList.innerHTML = ''; UI.deviceList.innerHTML = '';
let incr = 0; let incr = 0;
let faves = API.show.favorites(); let faves = API.show.favorites();
@ -1053,10 +1052,10 @@
// ensure we have settings from last session // ensure we have settings from last session
API.conf.restore(); API.conf.restore();
let assets = $('assets'), let xcontrol = $('control'),
control = $('control'),
container = $('container'), container = $('container'),
welcome = $('welcome'), welcome = $('welcome'),
gcode = $('dev-gcode'),
controller = settings().controller, controller = settings().controller,
dark = controller.dark; dark = controller.dark;
@ -1082,13 +1081,7 @@
text: $('alert-text') text: $('alert-text')
}, },
container: container, container: container,
// assets: assets,
// control: control,
// ctrlLeft: $('control-left'),
// ctrlRight: $('control-right'),
// layerView: $('layer-view'),
// layerSlider: $('layer-slider'),
// modelOpacity: $('opacity'),
menusep: $('lt-sep'), menusep: $('lt-sep'),
rotate: $('lt-rotate'), rotate: $('lt-rotate'),
scale: $('lt-scale'), scale: $('lt-scale'),
@ -1111,9 +1104,9 @@
deviceAdd: $('device-add'), deviceAdd: $('device-add'),
deviceDelete: $('device-del'), deviceDelete: $('device-del'),
deviceSave: $('device-save'), deviceSave: $('device-save'),
deviceClose: $('device-close'),
deviceFavorites: $('device-favorites'), deviceFavorites: $('device-favorites'),
deviceAll: $('device-all'), deviceAll: $('device-all'),
toolsSave: $('tools-save'), toolsSave: $('tools-save'),
toolsClose: $('tools-close'), toolsClose: $('tools-close'),
toolSelect: $('tool-select'), toolSelect: $('tool-select'),
@ -1129,15 +1122,19 @@
// toolTaperAngle: $('tool-tangle'), // toolTaperAngle: $('tool-tangle'),
toolTaperTip: $('tool-ttip'), toolTaperTip: $('tool-ttip'),
toolMetric: $('tool-metric'), toolMetric: $('tool-metric'),
settings: $('settings'), settings: $('settings'),
settingsBody: $('settingsBody'), settingsBody: $('settingsBody'),
settingsList: $('settingsList'), settingsList: $('settingsList'),
layerID: $('layer-id'), layerID: $('layer-id'),
layerSpan: $('layer-span'), layerSpan: $('layer-span'),
layerRange: $('layer-range'), layerRange: $('layer-range'),
loading: $('progress').style, loading: $('progress').style,
progress: $('progbar').style, progress: $('progbar').style,
prostatus: $('progtxt'), prostatus: $('progtxt'),
selection: $('selection'), selection: $('selection'),
sizeX: $('size_x'), sizeX: $('size_x'),
sizeY: $('size_y'), sizeY: $('size_y'),
@ -1153,7 +1150,7 @@
stockDepth: $('stock-width'), stockDepth: $('stock-width'),
stockHeight: $('stock-width'), stockHeight: $('stock-width'),
device: UC.newGroup(LANG.dv_gr_dev, $('device'), {group:"ddev", nocompact:true}), device: UC.newGroup(LANG.dv_gr_dev, $('device'), {group:"ddev", inline:true}),
deviceName: UC.newInput(LANG.dv_name_s, {title:LANG.dv_name_l, size:"60%", text:true, action:updateDeviceName}), deviceName: UC.newInput(LANG.dv_name_s, {title:LANG.dv_name_l, size:"60%", text:true, action:updateDeviceName}),
bedWidth: UC.newInput(LANG.dv_bedw_s, {title:LANG.dv_bedw_l, convert:UC.toFloat, size:6}), bedWidth: UC.newInput(LANG.dv_bedw_s, {title:LANG.dv_bedw_l, convert:UC.toFloat, size:6}),
bedDepth: UC.newInput(LANG.dv_bedd_s, {title:LANG.dv_bedd_l, convert:UC.toFloat, size:6}), bedDepth: UC.newInput(LANG.dv_bedd_s, {title:LANG.dv_bedd_l, convert:UC.toFloat, size:6}),
@ -1163,12 +1160,12 @@
deviceOriginTop: UC.newBoolean(LANG.dv_orgt_s, onBooleanClick, {title:LANG.dv_orgt_l, modes:CAM}), deviceOriginTop: UC.newBoolean(LANG.dv_orgt_s, onBooleanClick, {title:LANG.dv_orgt_l, modes:CAM}),
deviceRound: UC.newBoolean(LANG.dv_bedc_s, onBooleanClick, {title:LANG.dv_bedc_l, modes:FDM}), deviceRound: UC.newBoolean(LANG.dv_bedc_s, onBooleanClick, {title:LANG.dv_bedc_l, modes:FDM}),
extruder: UC.newGroup(LANG.dv_gr_ext, $('device'), {group:"dext", nocompact:true, modes:FDM}), extruder: UC.newGroup(LANG.dv_gr_ext, $('device'), {group:"dext", inline:true, modes:FDM}),
extFilament: UC.newInput(LANG.dv_fila_s, {title:LANG.dv_fila_l, convert:UC.toFloat, modes:FDM}), extFilament: UC.newInput(LANG.dv_fila_s, {title:LANG.dv_fila_l, convert:UC.toFloat, modes:FDM}),
extNozzle: UC.newInput(LANG.dv_nozl_s, {title:LANG.dv_nozl_l, convert:UC.toFloat, modes:FDM}), extNozzle: UC.newInput(LANG.dv_nozl_s, {title:LANG.dv_nozl_l, convert:UC.toFloat, modes:FDM}),
extOffsetX: UC.newInput(LANG.dv_exox_s, {title:LANG.dv_exox_l, convert:UC.toFloat, modes:FDM, expert:true}), extOffsetX: UC.newInput(LANG.dv_exox_s, {title:LANG.dv_exox_l, convert:UC.toFloat, modes:FDM, expert:true}),
extOffsetY: UC.newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:UC.toFloat, modes:FDM, expert:true}), extOffsetY: UC.newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:UC.toFloat, modes:FDM, expert:true}),
extSelect: UC.newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, modes:FDM, size:14, height:3, modes:FDM, expert:true}), extSelect: UC.newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, modes:FDM, size:14, height:3, modes:FDM, expert:true, area:gcode}),
extrudeAbs: UC.newBoolean(LANG.dv_xtab_s, onBooleanClick, {title:LANG.dv_xtab_l, modes:FDM}), extrudeAbs: UC.newBoolean(LANG.dv_xtab_s, onBooleanClick, {title:LANG.dv_xtab_l, modes:FDM}),
extActions: UC.newTableRow([[ extActions: UC.newTableRow([[
UI.extPrev = UC.newButton("<"), UI.extPrev = UC.newButton("<"),
@ -1177,62 +1174,23 @@
UI.extNext = UC.newButton(">") UI.extNext = UC.newButton(">")
]], {modes:FDM, expert:true}), ]], {modes:FDM, expert:true}),
gcode: UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", nocompact:true, modes:GCODE}), gcode: UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", inline:true, modes:GCODE}),
gcodeFan: UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}), gcodeFan: UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}),
gcodeTrack: UC.newInput(LANG.dv_prog_s, {title:LANG.dv_prog_l, modes:FDM, size:"40%", text:true}), gcodeTrack: UC.newInput(LANG.dv_prog_s, {title:LANG.dv_prog_l, modes:FDM, size:"40%", text:true}),
gcodeLayer: UC.newText(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, size:14, height: 2}), gcodeLayer: UC.newText(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, size:14, height: 2, area:gcode}),
gcodeSpace: UC.newBoolean(LANG.dv_tksp_s, onBooleanClick, {title:LANG.dv_tksp_l, modes:CAM_LASER}), gcodeSpace: UC.newBoolean(LANG.dv_tksp_s, onBooleanClick, {title:LANG.dv_tksp_l, modes:CAM_LASER}),
gcodeStrip: UC.newBoolean(LANG.dv_strc_s, onBooleanClick, {title:LANG.dv_strc_l, modes:CAM}), gcodeStrip: UC.newBoolean(LANG.dv_strc_s, onBooleanClick, {title:LANG.dv_strc_l, modes:CAM}),
gcodeFExt: UC.newInput(LANG.dv_fext_s, {title:LANG.dv_fext_l, modes:CAM_LASER, size:7, text:true}), gcodeFExt: UC.newInput(LANG.dv_fext_s, {title:LANG.dv_fext_l, modes:CAM_LASER, size:7, text:true}),
gcodeDwell: UC.newText(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, size:14, height:2}), gcodeDwell: UC.newText(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, size:14, height:2, area:gcode}),
gcodeChange: UC.newText(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, size:14, height:2}), gcodeChange: UC.newText(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, size:14, height:2, area:gcode}),
gcodeSpindle: UC.newText(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, size:14, height:2}), gcodeSpindle: UC.newText(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, size:14, height:2, area:gcode}),
gcodePause: UC.newText(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, size:14, height:3}), gcodePause: UC.newText(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, size:14, height:3, area:gcode}),
gcodeLaserOn: UC.newText(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, size:14, height:3}), gcodeLaserOn: UC.newText(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, size:14, height:3, area:gcode}),
gcodeLaserOff: UC.newText(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, size:14, height:3}), gcodeLaserOff: UC.newText(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, size:14, height:3, area:gcode}),
gcodePre: UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3}), gcodePre: UC.newText(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, size:14, height:3, area:gcode}),
gcodePost: UC.newText(LANG.dv_foot_s, {title:LANG.dv_foot_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, area:gcode}),
// mode: UC.newGroup(LANG.mo_menu, assets, {region:"left", poprow:false}), layout: UC.newGroup(LANG.op_menu, $('mod-prefs'), {inline: true}),
// 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, $('mod-prefs'), {nocompact: true}),
expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}), expert: UC.newBoolean(LANG.op_xprt_s, booleanSave, {title:LANG.op_xprt_l}),
dark: UC.newBoolean(LANG.op_dark_s, booleanSave, {title:LANG.op_dark_l}), dark: UC.newBoolean(LANG.op_dark_s, booleanSave, {title:LANG.op_dark_l}),
showOrigin: UC.newBoolean(LANG.op_show_s, booleanSave, {title:LANG.op_show_l, modes:GCODE}), showOrigin: UC.newBoolean(LANG.op_show_s, booleanSave, {title:LANG.op_show_l, modes:GCODE}),
@ -1242,9 +1200,6 @@
reverseZoom: UC.newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l, modes:ALL}), reverseZoom: UC.newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l, modes:ALL}),
units: UC.newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, modes:CAM}, "units"), 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(),
process: UC.newGroup(LANG.sl_menu, $('settings'), {modes:FDM_LASER}), process: UC.newGroup(LANG.sl_menu, $('settings'), {modes:FDM_LASER}),
sliceHeight: UC.newInput(LANG.sl_lahi_s, {title:LANG.sl_lahi_l, convert:UC.toFloat, modes:FDM}), sliceHeight: UC.newInput(LANG.sl_lahi_s, {title:LANG.sl_lahi_l, convert:UC.toFloat, modes:FDM}),
sliceShells: UC.newInput(LANG.sl_shel_s, {title:LANG.sl_shel_l, convert:UC.toInt, modes:FDM}), sliceShells: UC.newInput(LANG.sl_shel_s, {title:LANG.sl_shel_l, convert:UC.toInt, modes:FDM}),

45
src/kiri/ui.js
View file

@ -16,13 +16,13 @@
groups = {}, groups = {},
groupShow = {}, groupShow = {},
groupName = undefined, groupName = undefined,
hideable = {}, poppable = {},
hasModes = [], hasModes = [],
isExpert = [], isExpert = [],
letMode = null, letMode = null,
letExpert = false, letExpert = false,
SDB = moto.KV,
DOC = SELF.document, DOC = SELF.document,
state = {},
prefix = "tab", prefix = "tab",
NOMODE = "nomode", NOMODE = "nomode",
exitimer = undefined; exitimer = undefined;
@ -102,31 +102,32 @@
function addCollapsableGroup(label, div, options) { function addCollapsableGroup(label, div, options) {
let opt = options || {}; let opt = options || {};
let group = opt.group || label; let group = opt.group || label;
hideable[group] = opt.nocompact === true ? false : true; poppable[group] = opt.inline === true ? false : true;
let row = DOC.createElement('div'), let row = DOC.createElement('div'),
a = DOC.createElement('a'), a = DOC.createElement('a'),
dbkey = `beta-${prefix}-show-${group}`, dbkey = `beta-${prefix}-show-${group}`,
popper = !opt.nocompact; popper = !opt.inline;
if (popper) { if (popper) {
let pop = DOC.createElement('div'); let pop = DOC.createElement('div');
pop.classList.add('set-pop'); pop.classList.add('set-pop');
row.appendChild(pop); row.appendChild(pop);
row.setAttribute("class", "set-group noselect");
addTo = pop; addTo = pop;
} else { } else {
row.setAttribute("class", "t-group col");
addTo = lastDiv; addTo = lastDiv;
} }
div.appendChild(row); div.appendChild(row);
row.setAttribute("class", "set-group noselect");
row.appendChild(a); row.appendChild(a);
a.appendChild(DOC.createTextNode(label)); a.appendChild(DOC.createTextNode(label));
addModeControls(row, opt); addModeControls(row, opt);
lastGroup = groups[group] = []; lastGroup = groups[group] = [];
lastGroup.key = dbkey; lastGroup.key = dbkey;
groupName = group; groupName = group;
groupShow[group] = popper ? SDB[dbkey] === 'true' : SDB[dbkey] !== 'false'; groupShow[group] = popper ? state[dbkey] === 'true' : state[dbkey] !== 'false';
row.onclick = function(ev) { row.onclick = function(ev) {
if (ev.target !== a && ev.target !== row) { if (ev.target !== a && ev.target !== row) {
return; return;
@ -163,19 +164,19 @@
function showGroup(groupname) { function showGroup(groupname) {
Object.keys(groups).forEach(name => { Object.keys(groups).forEach(name => {
let group = groups[name]; let group = groups[name];
groupShow[name] = SDB[group.key] = (groupname === name); groupShow[name] = state[group.key] = (groupname === name);
updateGroupShow(name); updateGroupShow(name);
}); });
} }
function toggleGroup(groupname, dbkey) { function toggleGroup(groupname, dbkey) {
let show = SDB[dbkey] === 'false'; let show = state[dbkey] === 'false';
groupShow[groupname] = hideable[groupname] ? SDB[dbkey] = show : true; groupShow[groupname] = poppable[groupname] ? state[dbkey] = show : true;
updateGroupShow(groupname); updateGroupShow(groupname);
} }
function updateGroupShow(groupname) { function updateGroupShow(groupname) {
let show = groupShow[groupname] || !hideable[groupname]; let show = groupShow[groupname] || !poppable[groupname];
let group = groups[groupname]; let group = groups[groupname];
group.forEach(div => { group.forEach(div => {
if (show) div.setMode(letMode); if (show) div.setMode(letMode);
@ -290,27 +291,25 @@
btn = DOC.createElement("button"), btn = DOC.createElement("button"),
box = DOC.createElement("div"), box = DOC.createElement("div"),
pop = DOC.createElement("div"), pop = DOC.createElement("div"),
lbl = DOC.createElement("label"), txt = DOC.createElement("textarea"),
txt = DOC.createElement("textarea"); area = opt.area;
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"); txt.setAttribute("wrap", "off");
txt.setAttribute("spellcheck", "false");
txt.setAttribute("style", "resize: none");
box.appendChild(pop);
btn.appendChild(DOC.createTextNode("edit")); btn.appendChild(DOC.createTextNode("edit"));
btn.onclick = function(ev) { btn.onclick = function(ev) {
ev.stopPropagation(); ev.stopPropagation();
if (ev.target === txt) { if (ev.target === txt) {
// drop clicks on TextArea // drop clicks on TextArea
ev.target.focus(); ev.target.focus();
} else { } else {
let fc = area.firstChild;
if (fc) area.removeChild(fc);
area.appendChild(txt);
// first time, button click / show // first time, button click / show
btn.parentNode.appendChild(box); btn.parentNode.appendChild(box);
btn.parentNode.onclick = btn.onclick; btn.parentNode.onclick = btn.onclick;
@ -337,6 +336,7 @@
} }
} }
}; };
addModeControls(btn, opt); addModeControls(btn, opt);
addId(btn, opt); addId(btn, opt);
@ -373,6 +373,7 @@
} }
} }
ip.setAttribute("type", "text"); ip.setAttribute("type", "text");
ip.setAttribute("spellcheck", "false");
row.style.display = hide ? 'none' : ''; row.style.display = hide ? 'none' : '';
if (opt) { if (opt) {
if (opt.disabled) ip.setAttribute("disabled", "true"); if (opt.disabled) ip.setAttribute("disabled", "true");
@ -548,7 +549,7 @@
function newRowTable(array) { function newRowTable(array) {
let div = newDiv(); let div = newDiv();
div.setAttribute("class", "tablerow"); div.setAttribute("class", "table-row");
array.forEach(function(c) { array.forEach(function(c) {
div.appendChild(c); div.appendChild(c);
}); });

71
web/kiri/index.css
View file

@ -2,9 +2,8 @@
--fg-gray: #495057; --fg-gray: #495057;
--bg-gray: rgba(0,0,0,0.25); --bg-gray: rgba(0,0,0,0.25);
} }
setpopsetpopa, a:hover, a:visited { a:hover, a:visited {
border: none; border: none;
outline: none;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@ -30,7 +29,6 @@ div {
} }
button { button {
display: flex; display: flex;
outline: none;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
background-color: #eee; background-color: #eee;
@ -57,7 +55,6 @@ input {
} }
input:focus { input:focus {
background-color: #fec; background-color: #fec;
outline: none;
} }
input[disabled] { input[disabled] {
background-color: #ccc; background-color: #ccc;
@ -71,15 +68,20 @@ input[type="range"] {
input[type=range]::-moz-focus-outer { input[type=range]::-moz-focus-outer {
border: 0; border: 0;
} }
select { select, textarea, button, input, a {
outline: none; outline: none;
} }
select { select {
border: 1px solid #bbb; border: 1px solid #bbb;
background-color: #eee; background-color: white;
margin-bottom: 1px !important;
border-radius: 3px; border-radius: 3px;
} }
select option[local="1"] {
color: #55d;
}
select option[favorite="1"] {
font-weight: bold;
}
th, tr, td, span, div, label, button { th, tr, td, span, div, label, button {
user-select: none; user-select: none;
} }
@ -412,6 +414,54 @@ th, tr, td {
background-color: #bbb; background-color: #bbb;
} }
.t-head {
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
.t-33 {
width: 33%;
}
.t-group {
background-image: linear-gradient(to right, #ddd, #666, #ddd);
white-space: nowrap;
text-align: center;
border-radius: 2px;
padding: 1px 0 2px 0;
margin: 5px 0 5px 0;
color: white;
}
.t-body {
background-color: white;
border: 1px solid #bbb;
border-radius: 3px;
}
.t-inset {
padding: 3px;
}
.t-pad {
width: 5px;
}
.t-pad2 {
width: 10px;
}
#devices {
width: 150px;
}
#device {
width: 225px;
}
#gcode-edit {
width: 225px;
}
#device-action, #tool-action {
margin-top: 5px;
}
#device-action button, #tool-action button {
flex-direction: column;
justify-content: center;
}
#slider { #slider {
display: none; display: none;
position: absolute; position: absolute;
@ -531,7 +581,14 @@ th, tr, td {
margin-right: 5px; margin-right: 5px;
padding: 5px; padding: 5px;
} }
.var-row {
white-space: nowrap;
}
.var-row label { .var-row label {
padding: 2px 4px 2px 0; padding: 2px 4px 2px 0;
flex-grow: 1; flex-grow: 1;
} }
.table-row {
flex-direction: row;
align-items: stretch;
}

75
web/kiri/index.html
View file

@ -159,49 +159,70 @@
<button id="mode-laser" class="dev-type"><label>LASER</label></button> <button id="mode-laser" class="dev-type"><label>LASER</label></button>
</div> </div>
<div class="row"> <div class="row">
<div id="devices" class="col"><select id="device-list" size="15"></select></div> <div id="devices" class="t-33 col"><select id="device-list" size="15" class="grow"></select></div>
<div id="device" class="col"></div> <div class="t-pad"></div>
<div id="device" class="col t-body t-inset"></div>
<div class="t-pad"></div>
<div id="gcode-edit" class="t-body t-inset col">
<div class="t-group col">gcode editor</div>
<div id="dev-gcode" class="grow"></div>
</div>
</div>
<div id="device-action" class="flow-row">
<div class="grow"></div>
<button id="device-add"><i class="fas fa-plus"></i></button>
<button id="device-del"><i class="fas fa-minus"></i></button>
<div class="t-pad2"></div>
<button id="device-favorites">favorites</button>
<button id="device-all">all</button>
<div class="t-pad2"></div>
<button id="device-save">save</button>
<div class="grow"></div>
</div> </div>
</div> </div>
<div id="mod-files" class="mdialog"></div> <div id="mod-files" class="mdialog"></div>
<div id="mod-tools" class="mdialog"> <div id="mod-tools" class="mdialog">
<div class="col"> <div class="col">
<div class="row"> <div class="row t-head">
<label>tool</label> <label class="t-33">tool</label>
<label>detail</label> <div class="t-pad"></div>
<label>view</label> <label class="t-33">detail</label>
<div class="t-pad"></div>
<label class="t-33">view</label>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col t-33">
<select id="tool-select" size="15"></select> <select id="tool-select" size="10" class="grow"></select>
</div> </div>
<div class="col"> <div class="t-pad"></div>
<div class="row"><label>type</label> <div class="col t-33 t-body t-inset">
<div class="row var-row"><label>name</label><input id="tool-name" size="15"></input></div>
<div class="row var-row"><label>type</label>
<select id="tool-type"> <select id="tool-type">
<option value="endmill" selected>end</option> <option value="endmill" selected>end</option>
<option value="ballmill">ball</option> <option value="ballmill">ball</option>
<option value="tapermill">taper</option> <option value="tapermill">taper</option>
</select> </select>
</div> </div>
<div class="row"><label>name</label><input id="tool-name" size="15"></input></div> <div class="row var-row" title="tool number to use&#010;in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div>
<div class="row" title="tool number to use&#010;in gcode commands"><label>tool #</label><input id="tool-num" size="7"></input></div> <div class="row var-row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div>
<div class="row"><label>metric</label><input id="tool-metric" type="checkbox"></input></div> <div class="t-group col">shaft</div>
<div class="grouphead">shaft</div> <div class="row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
<div class="row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div> <div class="row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
<div class="row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div> <div class="t-group col">flute</div>
<div class="grouphead">flute</div> <div class="row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
<div class="row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div> <div class="row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
<div class="row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div> <div class="t-group col">taper</div>
<div class="grouphead">taper</div>
<!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> --> <!-- <div class="flow-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=5></input></div> -->
<div class="row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div> <div class="row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
</div> </div>
<div id="tool-view" class="col"></div> <div class="t-pad"></div>
<div id="tool-view" class="col t-33 t-body"></div>
</div> </div>
<div id="tool-action" class="row"> <div id="tool-action" class="row j-center">
<button id="tool-add">+</button> <button id="tool-add"><i class="fas fa-plus"></i></button>
<button id="tool-del">-</button> <button id="tool-del"><i class="fas fa-minus"></i></button>
<span id="tool-spacer"></span> <div class="t-pad2"></div>
<button id="tools-save">save</button> <button id="tools-save">save</button>
<button id="tools-close">done</button> <button id="tools-close">done</button>
</div> </div>
@ -237,7 +258,7 @@
<div id="end" class="col a-center"> <div id="end" class="col a-center">
<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="bottom"> <div id="bottom">
<div id="layers">layers</div> <div id="layers"></div>
</div> </div>
<div id="alert-area"> <div id="alert-area">
<div id="alert-border"> <div id="alert-border">