implement new transient dialog input for electron, more bbl settings features

This commit is contained in:
Stewart Allen 2025-02-02 16:10:05 -05:00
commit 5a728d186d
6 changed files with 106 additions and 49 deletions

View file

@ -13,10 +13,17 @@ const modTmp = path.join('tmp','mod');
fs.copySync("mod", modTmp, { dereference: true, filter:(src,dst) => {
const ok =
src === 'mod' ||
src.indexOf('mod/ext-bambu') === 0 ||
src.indexOf('mod/standalone') === 0 ||
src.indexOf('mod/node_modules') === 0;
// console.log(ok, src);
return ok;
} });
const modsTmp = path.join('tmp','mods');
fs.copySync("mods", modsTmp, { dereference: true, filter:(src,dst) => {
const ok =
src === 'mods' ||
src.indexOf('mods/bambu') === 0 ||
src.indexOf('mods/node_modules') === 0;
return ok;
} });

View file

@ -9,13 +9,12 @@ self.kiri.load(api => {
const { kiri, moto } = self;
const { ui } = kiri;
const h = moto.webui;
const defhost = ";; DEFINE BAMBU-HOST ";
const defams = ";; DEFINE BAMBU-AMS ";
const readonly = true;
let init = false;
let status = {};
let bound, device, printers, select, selected;
let bound, device, printers, select, selected, conn_alert;
let btn_del, in_host, in_code, in_serial, filelist;
let host, password, serial, amsmap, socket = {
open: false,
@ -105,10 +104,10 @@ self.kiri.load(api => {
}
function printer_add() {
let name = prompt('printer name');
if (!name) {
return;
}
ui.prompt('printer name', "new printer").then(name => printer_add_named(name));
}
function printer_add_named(name) {
printers[name] = printers[name] || {
host:'', code:'', serial:''
};
@ -234,6 +233,9 @@ self.kiri.load(api => {
} else {
bbl_status.value = `printer ${print_type || ""} | ${state}`;
}
if (gcode_state && conn_alert) {
api.alerts.hide(conn_alert);
}
}
function render_list(to) {
@ -271,7 +273,9 @@ self.kiri.load(api => {
}
function monitoring() {
return selected?.rec?.serial ? true : false;
let active = selected?.rec?.serial ? true : false;
ui.setVisible($('bbl_connect'), !active && select.value !== '');
return active;
}
function cmd_if(cmd, obj = {}) {
@ -317,6 +321,7 @@ self.kiri.load(api => {
}
api.event.on("init-done", function() {
console.log({ init_done: init });
if (init) {
return;
}
@ -333,6 +338,10 @@ self.kiri.load(api => {
h.div({ class: "f-row a-center gap4" }, [
h.label({ class: "set-header dev-sel" }, [ h.a('bambu manager') ]),
h.select({ id: "bbl_sel", class: "dev-list" }, []),
h.button({ _: "connect", class: "hide", id: "bbl_connect", onclick() {
conn_alert = api.alerts.show(`connecting to ${select.value}`);
printer_select(select.value);
} }),
h.div({ class: "grow gap3 j-end" }, [
h.button({
id: "bbl_hide",
@ -405,15 +414,16 @@ self.kiri.load(api => {
h.input({ id: "bbl_noz_temp", size: 5, readonly })
]),
h.div({ class: "var-row", ondblclick() {
let value = prompt('new nozzle temp', $('bbl_noz_target').value);
if (value !== null) {
cmd_gcode(`M104 S${value}`)
}
ui.prompt('new nozzle temp', $('bbl_noz_target').value).then(value => {
cmd_gcode(`M104 S${value}`);
api.alerts.show(`set nozzle temp ${value}`);
})
} }, [
h.label('target'),
h.input({ id: "bbl_noz_on", type: "checkbox", onclick() {
let value = $('bbl_noz_on').checked ? '220' : '0';
cmd_gcode(`M104 S${value}`)
api.alerts.show(`set nozzle temp ${value}`);
} }),
h.input({ id: "bbl_noz_target", size: 5, readonly })
])
@ -427,15 +437,16 @@ self.kiri.load(api => {
h.input({ id: "bbl_bed_temp", size: 5, readonly })
]),
h.div({ class: "var-row", ondblclick() {
let value = prompt('new bed temp', $('bbl_bed_target').value);
if (value !== null) {
ui.prompt('new bed temp', $('bbl_bed_target').value).then(value => {
cmd_gcode(`M140 S${value}`)
}
api.alerts.show(`set bed temp ${value}`);
})
} }, [
h.label('target'),
h.input({ id: "bbl_bed_on", type: "checkbox", onclick() {
let value = $('bbl_bed_on').checked ? '60' : '0';
cmd_gcode(`M140 S${value}`);
api.alerts.show(`set bed temp ${value}`);
} }),
h.input({ id: "bbl_bed_target", size: 5, readonly })
])
@ -445,41 +456,44 @@ self.kiri.load(api => {
h.a('chamber')
]),
h.div({ class: "var-row", ondblclick() {
let value = prompt('new part fan value', $('bbl_fan_part').value);
if (value !== null) {
cmd_gcode(`M106 P1 S${value}`)
}
ui.prompt('new part fan value', $('bbl_fan_part').value).then(value => {
cmd_gcode(`M106 P1 S${value}`);
api.alerts.show(`set part fan ${value}`);
})
} }, [
h.label('part fan'),
h.input({ id: "bbl_fan_part_on", type: "checkbox", onclick() {
let value = $('bbl_fan_part_on').checked ? '255' : '0';
cmd_gcode(`M106 P1 S${value}`)
api.alerts.show(`set part fan ${value}`);
} }),
h.input({ id: "bbl_fan_part", size: 5, readonly })
]),
h.div({ class: "var-row", ondblclick() {
let value = prompt('new aux fan value', $('bbl_fan_1').value);
if (value !== null) {
cmd_gcode(`M106 P2 S${value}`)
}
ui.prompt('new aux fan value', $('bbl_fan_1').value).then(value => {
cmd_gcode(`M106 P2 S${value}`);
api.alerts.show(`set aux fan ${value}`);
})
} }, [
h.label('aux fan'),
h.input({ id: "bbl_fan_1_on", type: "checkbox", onclick() {
let value = $('bbl_fan_1_on').checked ? '255' : '0';
cmd_gcode(`M106 P2 S${value}`)
api.alerts.show(`set aux fan ${value}`);
} }),
h.input({ id: "bbl_fan_1", size: 5, readonly })
]),
h.div({ class: "var-row", ondblclick() {
let value = prompt('new chamber fan value', $('bbl_fan_2').value);
if (value !== null) {
cmd_gcode(`M106 P3 S${value}`)
}
ui.prompt('new chamber fan value', $('bbl_fan_2').value).then(value => {
cmd_gcode(`M106 P3 S${value}`);
api.alerts.show(`set chamber fan ${value}`);
})
} }, [
h.label('chamber fan'),
h.input({ id: "bbl_fan_2_on", type: "checkbox", onclick() {
let value = $('bbl_fan_2_on').checked ? '255' : '0';
cmd_gcode(`M106 P3 S${value}`)
api.alerts.show(`set chamber fan ${value}`);
} }),
h.input({ id: "bbl_fan_2", size: 5, readonly })
]),
@ -497,6 +511,7 @@ self.kiri.load(api => {
led_mode: $('bbl_chamber_light').checked ? "on" : "off"
}
})
api.alerts.show(`set chamber light`);
} })
]),
])
@ -605,7 +620,7 @@ self.kiri.load(api => {
h.input({ id: "bbl_status", class: "t-left mono grow" }),
h.button({ _: "pause", id: "bbl_pause", class: "a-center", onclick() { cmd_if("pause") } }),
h.button({ _: "resume", id: "bbl_resume", class: "a-center", onclick() { cmd_if("resume") } }),
h.button({ _: "cancel", class: "a-center", onclick() { cmd_if("cancel") } }),
h.button({ _: "stop", class: "a-center", onclick() { cmd_if("cancel") } }),
])
]), { before: true });
select = modal.bbl_sel;

View file

@ -86,7 +86,8 @@
"build-mac-intel": "npm run build -- --mac --x64",
"mklinks": "find src web -type l | xargs -I{} sh -c 'echo \"{},$(readlink {})\"' > links.csv",
"mac-verify": "spctl --assess -vv --type install dist/*/*.app",
"prebuild": "node bin/electron-pre.js",
"clear-cache": "rm -rf tmp/* data/cache/*",
"prebuild": "npm run clear-cache; node bin/electron-pre.js",
"postbuild": "node bin/electron-post.js",
"preinstall": "node bin/install-pre.js; npx webpack --config bin/webpack-three.js"
},

View file

@ -101,19 +101,26 @@ gapp.register("kiri.ui", [], (root, exports) => {
}
function prompt(message, value) {
return confirm(message, {ok:true, cancel:false}, value);
return confirm(message, {ok:true, cancel:undefined}, value);
}
function confirm(message, buttons, input, opt = {}) {
return new Promise((resolve, reject) => {
let { api } = kiri;
let { feature } = api;
let onkey_save = feature.on_key;
feature.on_key = key => {
// console.log({ eat_key: key });
return true;
};
let dialog = $('dialog');
let btns = buttons || {
"yes": true,
"no": false
};
let rnd = Date.now().toString(36);
let any = $('mod-any');
let html = [
`<div class="confirm f-col a-stretch">`
`<div class="confirm f-col a-stretch" style="padding:5px !important">`
];
if (message) {
html.push(`<label style="user-select:text">${message}</label>`);
@ -122,12 +129,12 @@ gapp.register("kiri.ui", [], (root, exports) => {
html = opt.pre.appendAll(html);
}
let iid;
if (typeof(input) === 'string') {
iid = `confirm-input-${rnd}`;
html.append(`<div><input class="grow" type="text" spellcheck="false" id="${iid}"/></div>`);
} else if (Array.isArray(input)) {
if (Array.isArray(input)) {
iid = `confirm-input-${rnd}`;
html.append(`<div><textarea rows="15" cols="40" class="grow" type="text" spellcheck="false" id="${iid}"></textarea></div>`);
} else {
iid = `confirm-input-${rnd}`;
html.append(`<div><input class="grow" type="text" spellcheck="false" id="${iid}"/></div>`);
}
html.append(`<div class="f-row j-end">`);
Object.entries(btns).forEach((row,i) => {
@ -137,10 +144,13 @@ gapp.register("kiri.ui", [], (root, exports) => {
if (opt.post) {
html.appendAll(opt.post);
}
$('mod-any').innerHTML = html.join('');
dialog.innerHTML = html.join('');
function done(value) {
kiri.api.modal.hide();
setTimeout(() => { resolve(value) }, 150);
dialog.close();
feature.on_key = onkey_save;
if (value !== undefined) {
setTimeout(() => { resolve(value) }, 150);
}
}
if (iid) {
let array = Array.isArray(input);
@ -162,10 +172,11 @@ gapp.register("kiri.ui", [], (root, exports) => {
}
});
setTimeout(() => {
kiri.api.modal.show('any');
dialog.showModal();
if (iid) {
iid.focus();
iid.selectionStart = iid.value.length;
iid.selectionStart = 0;
iid.selectionEnd = iid.value.length;
}
}, 150);
});

View file

@ -66,7 +66,7 @@
.pop-lcol svg {
font-size: 20px !important;
}
#mod-x {
.mod-x {
position: absolute;
font-size: 30px;
top: 8px;
@ -329,10 +329,13 @@ details[open] > summary::after {
/* color: #fff; */
background-color: var(--blue-1);
}
.dark #modal {
.dark #dialog {
background-color: rgba(150,100,100,0.85);
}
.dark #modal, .dark #dialog {
color: #fff !important;
}
.dark #modal select {
.dark #modal select, .dark #dialog select {
color: #fff !important;
}
.dark .t-body,
@ -1505,6 +1508,23 @@ details[open] > summary::after {
justify-content: center;
}
#dialog {
position: fixed;
outline: none;
color: black;
top: 100px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255,200,200,0.75);
border: 0;
border-top: 5px solid white;
border-bottom: 5px solid white;
border-radius: 5px;
overflow: hidden;
margin: 0;
padding: 5px;
}
#modal {
display: none;
position: fixed;
@ -1547,11 +1567,11 @@ details[open] > summary::after {
#tool-cols {
max-height: 350px;
}
.dark #mod-x {
.dark .mod-x {
border-color: #555;
background-color: rgba(0,0,0,0.15);
}
#mod-x {
.mod-x {
border-radius: 5px;
border: 2px solid rgba(255,255,255,0.5);
background-color: rgba(255,255,255,0.5);
@ -1560,7 +1580,7 @@ details[open] > summary::after {
bottom: -20px;
right: 0;
}
#mod-x svg {
.mod-x svg {
aspect-ratio: 1 / 1 !important;
}
#mod-setup {

View file

@ -443,7 +443,7 @@
<div id="modal-box" class="f-col">
<!-- title bar and closer -->
<div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
<div class="mod-top f-row"><div id="mod-x" class="mod-x"><i class="fas fa-times"></i></div></div>
<!-- help menu -->
<div id="mod-help" class="mdialog f-col">
@ -689,6 +689,9 @@
<div class="mod-end"></div></div>
</div>
<!-- prompts and other modals needed in electron -->
<dialog id="dialog"></dialog>
<!-- click + drag mouse tracking -->
<div id="tracker"></div>