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) => { fs.copySync("mod", modTmp, { dereference: true, filter:(src,dst) => {
const ok = const ok =
src === 'mod' || src === 'mod' ||
src.indexOf('mod/ext-bambu') === 0 ||
src.indexOf('mod/standalone') === 0 || src.indexOf('mod/standalone') === 0 ||
src.indexOf('mod/node_modules') === 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; return ok;
} }); } });

View file

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

View file

@ -86,7 +86,8 @@
"build-mac-intel": "npm run build -- --mac --x64", "build-mac-intel": "npm run build -- --mac --x64",
"mklinks": "find src web -type l | xargs -I{} sh -c 'echo \"{},$(readlink {})\"' > links.csv", "mklinks": "find src web -type l | xargs -I{} sh -c 'echo \"{},$(readlink {})\"' > links.csv",
"mac-verify": "spctl --assess -vv --type install dist/*/*.app", "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", "postbuild": "node bin/electron-post.js",
"preinstall": "node bin/install-pre.js; npx webpack --config bin/webpack-three.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) { 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 = {}) { function confirm(message, buttons, input, opt = {}) {
return new Promise((resolve, reject) => { 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 || { let btns = buttons || {
"yes": true, "yes": true,
"no": false "no": false
}; };
let rnd = Date.now().toString(36); let rnd = Date.now().toString(36);
let any = $('mod-any');
let html = [ let html = [
`<div class="confirm f-col a-stretch">` `<div class="confirm f-col a-stretch" style="padding:5px !important">`
]; ];
if (message) { if (message) {
html.push(`<label style="user-select:text">${message}</label>`); html.push(`<label style="user-select:text">${message}</label>`);
@ -122,12 +129,12 @@ gapp.register("kiri.ui", [], (root, exports) => {
html = opt.pre.appendAll(html); html = opt.pre.appendAll(html);
} }
let iid; let iid;
if (typeof(input) === 'string') { if (Array.isArray(input)) {
iid = `confirm-input-${rnd}`;
html.append(`<div><input class="grow" type="text" spellcheck="false" id="${iid}"/></div>`);
} else if (Array.isArray(input)) {
iid = `confirm-input-${rnd}`; iid = `confirm-input-${rnd}`;
html.append(`<div><textarea rows="15" cols="40" class="grow" type="text" spellcheck="false" id="${iid}"></textarea></div>`); 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">`); html.append(`<div class="f-row j-end">`);
Object.entries(btns).forEach((row,i) => { Object.entries(btns).forEach((row,i) => {
@ -137,10 +144,13 @@ gapp.register("kiri.ui", [], (root, exports) => {
if (opt.post) { if (opt.post) {
html.appendAll(opt.post); html.appendAll(opt.post);
} }
$('mod-any').innerHTML = html.join(''); dialog.innerHTML = html.join('');
function done(value) { function done(value) {
kiri.api.modal.hide(); dialog.close();
setTimeout(() => { resolve(value) }, 150); feature.on_key = onkey_save;
if (value !== undefined) {
setTimeout(() => { resolve(value) }, 150);
}
} }
if (iid) { if (iid) {
let array = Array.isArray(input); let array = Array.isArray(input);
@ -162,10 +172,11 @@ gapp.register("kiri.ui", [], (root, exports) => {
} }
}); });
setTimeout(() => { setTimeout(() => {
kiri.api.modal.show('any'); dialog.showModal();
if (iid) { if (iid) {
iid.focus(); iid.focus();
iid.selectionStart = iid.value.length; iid.selectionStart = 0;
iid.selectionEnd = iid.value.length;
} }
}, 150); }, 150);
}); });

View file

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

View file

@ -443,7 +443,7 @@
<div id="modal-box" class="f-col"> <div id="modal-box" class="f-col">
<!-- title bar and closer --> <!-- 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 --> <!-- help menu -->
<div id="mod-help" class="mdialog f-col"> <div id="mod-help" class="mdialog f-col">
@ -689,6 +689,9 @@
<div class="mod-end"></div></div> <div class="mod-end"></div></div>
</div> </div>
<!-- prompts and other modals needed in electron -->
<dialog id="dialog"></dialog>
<!-- click + drag mouse tracking --> <!-- click + drag mouse tracking -->
<div id="tracker"></div> <div id="tracker"></div>