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

reflow device selection and editing

Browse source
This commit is contained in:
Stewart Allen 2020-12-13 23:58:03 -05:00
commit fc8fc62297
5 changed files with 155 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/kiri/init.js
View file

@ -663,17 +663,15 @@
return settings().devices[devicename] ? true : false; return settings().devices[devicename] ? true : false;
} }
function isFavoriteDevice(devicename) {
return settings().favorites[devicename] ? true : false;
}
function getSelectedDevice() { function getSelectedDevice() {
return UI.deviceList.options[UI.deviceList.selectedIndex].text; return API.device.get();
} }
function selectDevice(devicename, lock) { function selectDevice(devicename, lock) {
deviceLock = lock; deviceLock = lock;
if (lock) UI.setupDevices.style.display = 'none'; if (lock) {
UI.setupDevices.style.display = 'none';
}
if (isLocalDevice(devicename)) { if (isLocalDevice(devicename)) {
setDeviceCode(settings().devices[devicename], devicename); setDeviceCode(settings().devices[devicename], devicename);
} else { } else {
@ -684,7 +682,7 @@
// only for local filters // only for local filters
function cloneDevice() { function cloneDevice() {
let name = `${getSelectedDevice()}.copy`; let name = `${getSelectedDevice().replace(/\./g,' ')} Copy`;
let code = API.clone(settings().device); let code = API.clone(settings().device);
code.mode = API.mode.get(); code.mode = API.mode.get();
putLocalDevice(name, code); putLocalDevice(name, code);
@ -775,8 +773,17 @@
UI.extrudeAbs.style.display = mode === 'CAM' ? 'none' : 'flex'; UI.extrudeAbs.style.display = mode === 'CAM' ? 'none' : 'flex';
UI.deviceSave.disabled = !local; UI.deviceSave.disabled = !local;
UI.deviceDelete.disabled = !local; UI.deviceDelete.disabled = !local;
UI.deviceAdd.disabled = dev.noclone;
UI.deviceExport.disabled = !local; UI.deviceExport.disabled = !local;
if (local) {
UI.deviceAdd.innerText = "copy";
UI.deviceDelete.style.display = '';
UI.deviceExport.style.display = '';
} else {
UI.deviceAdd.innerText = "customize";
UI.deviceDelete.style.display = 'none';
UI.deviceExport.style.display = 'none';
}
UI.deviceAdd.disabled = dev.noclone;
API.view.update_fields(); API.view.update_fields();
platform.update_size(); platform.update_size();
@ -933,66 +940,49 @@
deviceExport(exp, selected); deviceExport(exp, selected);
}; };
UI.deviceAll.onclick = function() {
API.show.favorites(false);
showDevices();
};
UI.deviceFavorites.onclick = function() {
API.show.favorites(true);
showDevices();
};
UI.deviceList.innerHTML = ''; UI.deviceList.innerHTML = '';
UI.deviceMy.innerHTML = '';
let incr = 0; let incr = 0;
let faves = API.show.favorites(); let found = null;
let found = false;
let first = devices[0]; let first = devices[0];
// run through the list up to twice forcing faves off let dedup = {};
// the second time if incr === 0 (no devices shown)
// if incr > 0, second loop is avoided
for (let rep=0; rep<2; rep++)
if (incr === 0)
devices.forEach(function(device, index) { devices.forEach(function(device, index) {
// force faves off for second try // prevent device from appearing twice
if (rep === 1) faves = false; // such as local name = standard device name
let fav = isFavoriteDevice(device), if (dedup[device]) {
loc = isLocalDevice(device);
if (faves && !(fav || loc)) {
return; return;
} }
dedup[device] = device;
let loc = isLocalDevice(device);
if (incr === 0) { if (incr === 0) {
first = device; first = device;
} }
let opt = DOC.createElement('option'); let opt = DOC.createElement('button');
opt.appendChild(DOC.createTextNode(device.replace(/\./g,' '))); opt.appendChild(DOC.createTextNode(device.replace(/\./g,' ')));
opt.onclick = function() { opt.onclick = function() {
selectDevice(device); selectDevice(device);
}; opt.classList.add("selected");
opt.ondblclick = function() { if (found) {
if (settings().favorites[device]) { found.classList.remove("selected");
delete settings().favorites[device];
API.show.alert(`removed "${device}" from favorites`, 3);
} else {
settings().favorites[device] = true;
API.show.alert(`added "${device}" to favorites`, 3);
} }
showDevices(); found = opt;
}; };
if (loc) opt.setAttribute("local", 1); if (loc) {
if (loc || fav) opt.setAttribute("favorite", 1); UI.deviceMy.appendChild(opt);
UI.deviceList.appendChild(opt); } else {
UI.deviceList.appendChild(opt);
}
if (device === selected) { if (device === selected) {
opt.classList.add("selected");
selectedIndex = incr; selectedIndex = incr;
found = true; found = opt;
} }
incr++; incr++;
}); });
if (selectedIndex >= 0) { if (selectedIndex >= 0) {
UI.deviceList.selectedIndex = selectedIndex;
selectDevice(selected); selectDevice(selected);
} else { } else {
UI.deviceList.selectedIndex = 0;
selectDevice(first); selectDevice(first);
} }
} }
@ -1444,12 +1434,11 @@
devices: $('devices'), devices: $('devices'),
deviceList: $('device-list'), deviceList: $('device-list'),
deviceMy: $('device-my'),
deviceAdd: $('device-add'), deviceAdd: $('device-add'),
deviceDelete: $('device-del'), deviceDelete: $('device-del'),
deviceExport: $('device-exp'), deviceExport: $('device-exp'),
deviceSave: $('device-save'), deviceSave: $('device-save'),
deviceFavorites: $('device-favorites'),
deviceAll: $('device-all'),
toolsSave: $('tools-save'), toolsSave: $('tools-save'),
toolsClose: $('tools-close'), toolsClose: $('tools-close'),
@ -1500,7 +1489,7 @@
stockDepth: $('stock-width'), stockDepth: $('stock-width'),
stockHeight: $('stock-width'), stockHeight: $('stock-width'),
device: UC.newGroup(LANG.dv_gr_dev, $('device'), {group:"ddev", inline:true}), device: UC.newGroup(LANG.dv_gr_dev, $('device1'), {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, units:true}), bedWidth: UC.newInput(LANG.dv_bedw_s, {title:LANG.dv_bedw_l, convert:UC.toFloat, size:6, units:true}),
bedDepth: UC.newInput(LANG.dv_bedd_s, {title:LANG.dv_bedd_l, convert:UC.toFloat, size:6, units:true}), bedDepth: UC.newInput(LANG.dv_bedd_s, {title:LANG.dv_bedd_l, convert:UC.toFloat, size:6, units:true}),
@ -1510,7 +1499,7 @@
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}),
deviceBelt: UC.newBoolean(LANG.dv_belt_s, onBooleanClick, {title:LANG.dv_belt_l, modes:FDM}), deviceBelt: UC.newBoolean(LANG.dv_belt_s, onBooleanClick, {title:LANG.dv_belt_l, modes:FDM}),
extruder: UC.newGroup(LANG.dv_gr_ext, $('device'), {group:"dext", inline:true, modes:FDM}), extruder: UC.newGroup(LANG.dv_gr_ext, $('device2'), {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}),
@ -1522,37 +1511,27 @@
UI.extAdd = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-plus"></i>'}), UI.extAdd = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-plus"></i>'}),
UI.extDel = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-minus"></i>'}), UI.extDel = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-minus"></i>'}),
UI.extNext = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-greater-than"></i>'}) UI.extNext = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-greater-than"></i>'})
], {modes:FDM, expert:true, class:"ext-buttons"}), ], {modes:FDM, expert:true, class:"dev-buttons ext-buttons"}),
gcode: UC.newGroup(LANG.dv_gr_out, $('device'), {group:"dgco", inline:true, modes:CAM_LASER}), gcode: UC.newGroup(LANG.dv_gr_out, $('device2'), {group:"dgco", inline:true, modes:CAM_LASER}),
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}),
gcodeEd: UC.newGroup(LANG.dv_gr_gco, $('dg'), {group:"dgcp", inline:true, modes:GCODE}), gcodeEd: UC.newGroup(LANG.dv_gr_gco, $('dg'), {group:"dgcp", inline:true, modes:GCODE}),
gcodeFanTrack: UC.newRow([ gcodeFanTrack: UC.newRow([
(UI.gcodePre = UC.newGCode(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, area:gcode})).button,
(UI.gcodePost = UC.newGCode(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, area:gcode})).button,
(UI.gcodeFan = UC.newGCode(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, area:gcode})).button, (UI.gcodeFan = UC.newGCode(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, area:gcode})).button,
(UI.gcodeTrack = UC.newGCode(LANG.dv_prog_s, {title:LANG.dv_prog_l, modes:FDM, area:gcode})).button (UI.gcodeTrack = UC.newGCode(LANG.dv_prog_s, {title:LANG.dv_prog_l, modes:FDM, area:gcode})).button,
], {modes:FDM, class:"ext-buttons f-row"}),
gcodeLayerPause: UC.newRow([
(UI.gcodeLayer = UC.newGCode(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, area:gcode})).button, (UI.gcodeLayer = UC.newGCode(LANG.dv_layr_s, {title:LANG.dv_layr_l, modes:FDM, area:gcode})).button,
(UI.gcodePause = UC.newGCode(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, area:gcode})).button (UI.gcodePause = UC.newGCode(LANG.dv_paus_s, {title:LANG.dv_paus_l, modes:FDM, area:gcode})).button,
], {modes:FDM, class:"ext-buttons f-row"}),
gcodeLaserOnOff: UC.newRow([
(UI.gcodeLaserOn = UC.newGCode(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, area:gcode})).button, (UI.gcodeLaserOn = UC.newGCode(LANG.dv_lzon_s, {title:LANG.dv_lzon_l, modes:LASER, area:gcode})).button,
(UI.gcodeLaserOff = UC.newGCode(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, area:gcode})).button, (UI.gcodeLaserOff = UC.newGCode(LANG.dv_lzof_s, {title:LANG.dv_lzof_l, modes:LASER, area:gcode})).button,
], {modes:LASER, class:"ext-buttons f-row"}), (UI.gcodeChange = UC.newGCode(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, area:gcode})).button,
gcodeCam1: UC.newRow([
(UI.gcodeChange = UC.newGCode(LANG.dv_tool_s, {title:LANG.dv_tool_l, modes:CAM, area:gcode})).button
], {modes:CAM, class:"ext-buttons f-row"}),
gcodeCam2: UC.newRow([
(UI.gcodeDwell = UC.newGCode(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, area:gcode})).button, (UI.gcodeDwell = UC.newGCode(LANG.dv_dwll_s, {title:LANG.dv_dwll_l, modes:CAM, area:gcode})).button,
(UI.gcodeSpindle = UC.newGCode(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, area:gcode})).button (UI.gcodeSpindle = UC.newGCode(LANG.dv_sspd_s, {title:LANG.dv_sspd_l, modes:CAM, area:gcode})).button
], {modes:CAM, class:"ext-buttons f-row"}), ], {class:"ext-buttons f-row"}),
gcodeHeadFoot: UC.newRow([
(UI.gcodePre = UC.newGCode(LANG.dv_head_s, {title:LANG.dv_head_l, modes:GCODE, area:gcode})).button,
(UI.gcodePost = UC.newGCode(LANG.dv_foot_s, {title:LANG.dv_foot_l, modes:GCODE, area:gcode})).button
], {modes:GCODE, class:"ext-buttons f-row"}),
lprefs: UC.newGroup(LANG.op_menu, $('prefs-gen1'), {inline: true}), lprefs: UC.newGroup(LANG.op_menu, $('prefs-gen1'), {inline: true}),
// hoverPop: UC.newBoolean(LANG.op_hopo_s, booleanSave, {title:LANG.op_hopo_l}), // hoverPop: UC.newBoolean(LANG.op_hopo_s, booleanSave, {title:LANG.op_hopo_l}),
@ -2052,6 +2031,8 @@
UI.toolMetric.onclick = updateTool; UI.toolMetric.onclick = updateTool;
UI.toolType.onchange = updateTool; UI.toolType.onchange = updateTool;
// default show gcode pre
UI.gcodePre.button.click();
function mksvg(src) { function mksvg(src) {
let svg = DOC.createElement('svg'); let svg = DOC.createElement('svg');

2
src/kiri/ui.js
View file

@ -470,7 +470,7 @@
cols = Math.max(cols, row.length); cols = Math.max(cols, row.length);
}); });
txt.setAttribute("cols", Math.max(30, cols + 1)); txt.setAttribute("cols", Math.max(30, cols + 1));
txt.setAttribute("rows", Math.max(10, rows.length + 1)); // txt.setAttribute("rows", Math.max(10, rows.length + 1));
let showing = btn === lastBtn; let showing = btn === lastBtn;
hidePop(); hidePop();

81
web/kiri/index.css
View file

@ -100,12 +100,6 @@ select {
background-color: rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.5);
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;
} }
@ -161,6 +155,9 @@ th, tr, td, label {
.j-end { .j-end {
justify-content: flex-end; justify-content: flex-end;
} }
.space-around {
justify-content: space-around;
}
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }
@ -182,6 +179,9 @@ th, tr, td, label {
.mh0 { .mh0 {
min-height: 0; min-height: 0;
} }
.mh35 {
max-height: 35%;
}
.mh85 { .mh85 {
max-height: 85%; max-height: 85%;
} }
@ -469,6 +469,13 @@ th, tr, td, label {
} }
} }
.dev-buttons {
margin: 5px 15px 0 15px;
}
.dev-buttons button {
margin-left: 2px;
margin-right: 2px;
}
.ext-buttons button { .ext-buttons button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -587,6 +594,46 @@ th, tr, td, label {
} }
#mod-setup { #mod-setup {
height: 500px; height: 500px;
width: 700px;
padding-bottom: 5px;
}
#mod-setup .header {
text-align: center;
border-bottom: 1px solid rgba(150,130,200,0.5);
padding-bottom: 5px;
margin-bottom: 5px;
}
#mod-setup .header.sub {
padding-top: 10px;
}
#mod-setup .left {
width: 180px;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #ddd;
}
#mod-setup .footer {
padding-top: 5px;
margin-top: 5px;
border-top: 1px solid rgba(150,130,200,0.5);
}
.devlist button {
margin: 1px;
padding: 2px;
border: 1px solid rgba(0,0,0,0);
border-radius: 0;
font-size: 11px;
font-family: sans-serif;
background-color: rgba(255,255,255,0.9);
text-align: left;
min-height: 1.5em;
}
.devlist button:hover {
background-color: rgba(200,200,200,0.9);
}
.devlist button.selected {
background-color: rgba(200,220,220,0.9);
border: 1px splid rgba(200,220,200,1);
} }
#mod-print { #mod-print {
background-color: rgba(255,255,255,0.85); background-color: rgba(255,255,255,0.85);
@ -809,9 +856,12 @@ th, tr, td, label {
align-items: center; align-items: center;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
border-radius: 5px; border-radius: 5px;
width: 100px;
margin: 5px; margin: 5px;
} }
.dev-type svg {
width: 60px;
height: 30px;
}
.dev-sel { .dev-sel {
color: #033; color: #033;
background-color: #bbb; background-color: #bbb;
@ -845,29 +895,24 @@ th, tr, td, label {
} }
.t-pad { .t-pad {
width: 5px; width: 5px;
height: 5px;
} }
.t-pad2 { .t-pad2 {
width: 10px; width: 10px;
} }
#devices { #devices {
width: 200px; width: 225px;
} }
#device { #device1, #device2 {
width: 200px; width: 225px;
}
#gcode-edit {
width: 200px;
} }
#dev-gcode textarea { #dev-gcode textarea {
font-family: monospace; font-family: monospace;
overflow: auto;
padding: 5px;
width: 100%; width: 100%;
} }
#device-exp {
position: absolute;
left: 0;
z-index: 10;
}
#device-action, #tool-action { #device-action, #tool-action {
margin-top: 5px; margin-top: 5px;
} }

71
web/kiri/index.html
View file

@ -247,35 +247,52 @@
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a> <a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a> <a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
</div> </div>
<div id="mod-setup" class="mdialog f-col"> <div id="mod-setup" class="mdialog f-row">
<div class="f-row j-center"> <div class="f-col left a-stretch">
<button id="mode-fdm" class="dev-type"><label>FDM</label></button> <label class="header">select device type</label>
<button id="mode-sla" class="dev-type"><label>SLA</label></button> <div class="f-col">
<button id="mode-cam" class="dev-type"><label>CNC</label></button> <table><tr>
<button id="mode-laser" class="dev-type"><label>LASER</label></button> <th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
</div> <th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
<div class="f-row mh0 grow"> </tr><tr>
<div id="devices" class="t-33 f-col"><select id="device-list" size="15" class="grow"></select></div> <th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
<div class="t-pad"></div> <th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
<div id="device" class="f-col t-body t-inset overy"></div> </tr></table>
<div class="t-pad"></div> </div>
<div id="gcode-edit" class="t-body t-inset f-col"> <label class="header sub">standard devices</label>
<div id="dg" class="f-col t-body t-inset"></div> <div class="f-col mh0 mh35 j-center a-stretch">
<hr width="80%"> <div id="device-list" class="devlist f-col overy"></div>
<div id="dev-gcode" class="grow overy"></div> </div>
<label class="header sub">my devices</label>
<div class="f-col grow">
<div id="device-my" class="devlist f-col grow overy"></div>
<div class="f-row footer">
<div class="grow"></div>
<button id="device-add">copy</button>
<button id="device-del">delete</button>
<button id="device-exp">export</button>
<div class="grow"></div>
</div>
</div> </div>
</div> </div>
<div id="device-action" class="f-row"> <div class="f-col grow a-stretch">
<button id="device-exp">export</button> <label class="header">details</label>
<div class="grow"></div> <div class="f-row">
<button id="device-add"><i class="fas fa-plus"></i></button> <div id="device1" class="f-col t-body t-inset overy grow"></div>
<button id="device-del"><i class="fas fa-minus"></i></button> <div class="t-pad"></div>
<div class="t-pad2"></div> <div id="device2" class="f-col t-body t-inset overy grow"></div>
<button id="device-favorites">favorites</button> </div>
<button id="device-all">all</button> <div class="t-pad"></div>
<div class="t-pad2"></div> <div id="gcode-edit" class="f-col grow">
<button id="device-save">save</button> <div id="dg" class="f-col t-body t-inset"></div>
<div class="grow"></div> <div class="t-pad"></div>
<div id="dev-gcode" class="grow"></div>
</div>
<div id="device-action" class="f-row footer">
<div class="grow"></div>
<button id="device-save">save</button>
<div class="grow"></div>
</div>
</div> </div>
</div> </div>
<div id="mod-files" class="mdialog f-col"> <div id="mod-files" class="mdialog f-col">

2
web/kiri/lang/en.js
View file

@ -11,7 +11,7 @@ kiri.lang['en-us'] = {
dv_gr_dev: "device", dv_gr_dev: "device",
dv_gr_ext: "extruder", dv_gr_ext: "extruder",
dv_gr_out: "output", dv_gr_out: "output",
dv_gr_gco: "gcode", dv_gr_gco: "gcode macros",
// DEVICE dialog (_s = label, _l = hover help) // DEVICE dialog (_s = label, _l = hover help)
dv_name_s: "name", dv_name_s: "name",