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

refactor animation control bar, re-add axis positions

Browse source
This commit is contained in:
Stewart Allen 2025-02-27 11:11:31 -05:00
commit 5f69f353bf
7 changed files with 233 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/kiri-mode/cam/animate.js
View file

@ -52,22 +52,18 @@ kiri.load(() => {
} }
let meshes = {}, let meshes = {},
button = {},
label = {},
unitScale = 1, unitScale = 1,
progress,
speedValues = [ 1, 2, 4, 8, 32 ], speedValues = [ 1, 2, 4, 8, 32 ],
speedPauses = [ 30, 20, 10, 5, 0 ], speedPauses = [ 30, 20, 10, 5, 0 ],
speedNames = [ "1x", "2x", "4x", "8x", "!!" ], speedNames = [ "1x", "2x", "4x", "8x", "!!" ],
speedMax = speedValues.length - 1, speedMax = speedValues.length - 1,
speedIndex = 0, speedIndex = 0,
speedLabel,
speed, speed,
color = 0, color = 0,
material, material,
pauseButton, origin,
playButton,
modelButton,
shadeButton,
transButton,
posOffset = { x:0, y:0, z:0 }; posOffset = { x:0, y:0, z:0 };
const { moto } = root; const { moto } = root;
@ -75,45 +71,59 @@ kiri.load(() => {
const { api } = kiri; const { api } = kiri;
function animate_clear(api) { function animate_clear(api) {
let { anim } = api.ui;
moto.space.platform.showGridBelow(true); moto.space.platform.showGridBelow(true);
kiri.client.animate_cleanup(); kiri.client.animate_cleanup();
$('layer-animate').innerHTML = '';
$('layer-toolpos').innerHTML = '';
Object.keys(meshes).forEach(id => deleteMesh(id)); Object.keys(meshes).forEach(id => deleteMesh(id));
toggleStock(undefined,true,false); toggleStock(undefined,true,false);
} api.uc.setVisible(anim.laba, false);
api.uc.setVisible(anim.vala, false);
}
function animate(api, delay) { function animate(api, delay) {
let alert = api.alerts.show("building animation"); let alert = api.alerts.show("building animation");
kiri.client.animate_setup(api.conf.get(), data => { let settings = api.conf.get();
kiri.client.animate_setup(settings, data => {
checkMeshCommands(data); checkMeshCommands(data);
if (!(data && data.mesh_add)) { if (!(data && data.mesh_add)) {
return; return;
} }
const UC = api.uc;
const layer = $('layer-animate'); let { anim } = api.ui;
layer.innerHTML = ''; Object.assign(button, {
UC.setGroup(layer); replay: anim.replay,
UC.newRow([ play: anim.play,
UC.newButton(null,replay,{icon:'<i class="fas fa-fast-backward"></i>',title:"restart"}), step: anim.step,
playButton = UC.newButton(null,play,{icon:'<i class="fas fa-play"></i>',title:"play"}), pause: anim.pause,
pauseButton = UC.newButton(null,pause,{icon:'<i class="fas fa-pause"></i>',title:"pause"}), speed: anim.speed,
UC.newButton(null,step,{icon:'<i class="fas fa-step-forward"></i>',title:"single step"}), trans: anim.trans,
UC.newButton(null,fast,{icon:'<i class="fas fa-forward"></i>',title:"toggle speed"}), model: anim.model,
speedLabel = UC.newLabel("speed", {class:"speed padleft"}), shade: anim.shade
progress = UC.newLabel('0%', {class:"progress"}), });
transButton = UC.newButton(null,toggleTrans,{icon:'<i class="fa-solid fa-border-none"></i>',title:"transparency",class:"padleft"}), Object.assign(label, {
modelButton = UC.newButton(null,toggleModel,{icon:'<i class="fa-solid fa-eye"></i>',title:"show model"}), progress: anim.progress,
shadeButton = UC.newButton(null,toggleStock,{icon:'<i class="fa-solid fa-cube"></i>',title:"stock box"}), speed: anim.labspd,
]); x: anim.valx,
y: anim.valy,
z: anim.valz,
});
origin = settings.origin;
speedIndex = api.local.getInt('cam.anim.speed') || 0; speedIndex = api.local.getInt('cam.anim.speed') || 0;
updateSpeed(); updateSpeed();
setTimeout(step, delay || 0); setTimeout(step, delay || 0);
const toolpos = $('layer-toolpos');
toolpos.innerHTML = ''; button.replay.onclick = replay;
UC.setGroup(toolpos); button.play.onclick = play;
playButton.style.display = ''; button.step.onclick = step;
pauseButton.style.display = 'none'; button.pause.onclick = pause;
button.speed.onclick = fast;
button.trans.onclick = toggleTrans;
button.model.onclick = toggleModel;
button.shade.onclick = toggleStock;
button.play.style.display = '';
button.pause.style.display = 'none';
api.event.emit('animate', 'CAM'); api.event.emit('animate', 'CAM');
api.alerts.hide(alert); api.alerts.hide(alert);
moto.space.platform.showGridBelow(false); moto.space.platform.showGridBelow(false);
@ -131,16 +141,10 @@ kiri.load(() => {
animate_setup(settings, ondone) { animate_setup(settings, ondone) {
color = settings.controller.dark ? 0x48607B : 0x607FA4; color = settings.controller.dark ? 0x48607B : 0x607FA4;
unitScale = settings.controller.units === 'in' ? 1/25.4 : 1; unitScale = settings.controller.units === 'in' ? 1/25.4 : 1;
let shininess = 120, let flatShading = true,
specular = 0x202020,
emissive = 0x101010,
metalness = 0.2,
roughness = 0.8,
flatShading = true,
transparent = true, transparent = true,
opacity = 0.9, opacity = 0.9,
side = THREE.DoubleSide; side = THREE.DoubleSide;
// material = new THREE.MeshMatcapMaterial({
material = new THREE.MeshPhongMaterial({ material = new THREE.MeshPhongMaterial({
flatShading, flatShading,
transparent, transparent,
@ -236,8 +240,8 @@ kiri.load(() => {
const { steps } = opts; const { steps } = opts;
updateSpeed(); updateSpeed();
if (steps !== 1) { if (steps !== 1) {
playButton.style.display = 'none'; button.play.style.display = 'none';
pauseButton.style.display = ''; button.pause.style.display = '';
} }
kiri.client.animate({ kiri.client.animate({
speed, speed,
@ -249,8 +253,8 @@ kiri.load(() => {
function fast(opts) { function fast(opts) {
const { steps } = opts; const { steps } = opts;
updateSpeed(1); updateSpeed(1);
playButton.style.display = 'none'; button.play.style.display = 'none';
pauseButton.style.display = ''; button.pause.style.display = '';
kiri.client.animate({ kiri.client.animate({
speed, speed,
steps: steps || Infinity, steps: steps || Infinity,
@ -259,15 +263,15 @@ kiri.load(() => {
} }
function pause() { function pause() {
playButton.style.display = ''; button.play.style.display = '';
pauseButton.style.display = 'none'; button.pause.style.display = 'none';
kiri.client.animate({speed: 0}, handleGridUpdate); kiri.client.animate({speed: 0}, handleGridUpdate);
} }
function handleGridUpdate(data) { function handleGridUpdate(data) {
checkMeshCommands(data); checkMeshCommands(data);
if (data && data.progress) { if (data && data.progress) {
progress.innerText = (data.progress * 100).toFixed(1) + '%' label.progress.value = (data.progress * 100).toFixed(1);
} }
} }
@ -279,7 +283,7 @@ kiri.load(() => {
} }
api.local.set('cam.anim.speed', speedIndex); api.local.set('cam.anim.speed', speedIndex);
speed = speedValues[speedIndex]; speed = speedValues[speedIndex];
speedLabel.innerText = speedNames[speedIndex]; label.speed.value = speedNames[speedIndex];
} }
function replay() { function replay() {
@ -313,6 +317,9 @@ kiri.load(() => {
mesh.position.z = pos.z; mesh.position.z = pos.z;
space.update(); space.update();
} }
label.x.value = (pos.x - origin.x).toFixed(2);
label.y.value = (pos.y + origin.y).toFixed(2);
label.z.value = (pos.z - origin.z).toFixed(2);
} }
if (data.mesh_update) { if (data.mesh_update) {
meshUpdates(data.id); meshUpdates(data.id);
@ -341,7 +348,6 @@ kiri.load(() => {
path = print.output.flat(); path = print.output.flat();
tools = settings.tools; tools = settings.tools;
stock = settings.stock; stock = settings.stock;
rez = 1/Math.sqrt(density/(stock.x * stock.y)); rez = 1/Math.sqrt(density/(stock.x * stock.y));
const step = rez; const step = rez;

131
src/kiri-mode/cam/animate2.js
View file

@ -18,61 +18,79 @@ kiri.load(() => {
} }
let meshes = {}, let meshes = {},
progress, button = {},
label = {},
material,
speedPauses = [ 0, 0, 0, 0, 0 ], speedPauses = [ 0, 0, 0, 0, 0 ],
speedValues = [ 1, 2, 4, 8, 32 ], speedValues = [ 1, 2, 4, 8, 32 ],
speedNames = [ "1x", "2x", "4x", "8x", "!!" ], speedNames = [ "1x", "2x", "4x", "8x", "!!" ],
speedMax = speedValues.length - 1, speedMax = speedValues.length - 1,
speedIndex = 0, speedIndex = 0,
speedLabel,
speed, speed,
color = 0, origin,
pauseButton, color = 0;
playButton;
const { moto } = root; const { moto } = root;
const { space } = moto; const { space } = moto;
const { api } = kiri; const { api } = kiri;
function animate_clear2(api) { function animate_clear2(api) {
// moto.space.platform.showGridBelow(true); let { anim } = api.ui;
kiri.client.animate_cleanup2(); kiri.client.animate_cleanup2();
$('layer-animate').innerHTML = '';
$('layer-toolpos').innerHTML = '';
Object.keys(meshes).forEach(id => deleteMesh(id)); Object.keys(meshes).forEach(id => deleteMesh(id));
api.widgets.setAxisIndex(0); api.widgets.setAxisIndex(0);
} api.uc.setVisible(anim.laba, true);
api.uc.setVisible(anim.vala, true);
anim.vala.value = "0.0";
}
function animate2(api, delay) { function animate2(api, delay) {
let alert = api.alerts.show("building animation"); let alert = api.alerts.show("building animation");
kiri.client.animate_setup2(api.conf.get(), data => { let settings = api.conf.get();
kiri.client.animate_setup2(settings, data => {
handleUpdate(data); handleUpdate(data);
if (data) { if (data) {
return; return;
} }
const UC = api.uc;
const layer = $('layer-animate'); let { anim } = api.ui;
layer.innerHTML = ''; Object.assign(button, {
UC.setGroup(layer); replay: anim.replay,
UC.newRow([ play: anim.play,
UC.newButton(null,replay,{icon:'<i class="fas fa-fast-backward"></i>',title:"restart"}), step: anim.step,
playButton = UC.newButton(null,play,{icon:'<i class="fas fa-play"></i>',title:"play"}), pause: anim.pause,
pauseButton = UC.newButton(null,pause,{icon:'<i class="fas fa-pause"></i>',title:"pause"}), speed: anim.speed,
UC.newButton(null,step,{icon:'<i class="fas fa-step-forward"></i>',title:"single step"}), trans: anim.trans,
UC.newButton(null,fast,{icon:'<i class="fas fa-forward"></i>',title:"toggle speed"}), model: anim.model,
speedLabel = UC.newLabel("speed", {class:"speed"}), shade: anim.shade
progress = UC.newLabel('0%', {class:"progress"}) });
]); Object.assign(label, {
updateSpeed(); progress: anim.progress,
speed: anim.labspd,
x: anim.valx,
y: anim.valy,
z: anim.valz,
a: anim.vala
});
updateSpeed(0);
setTimeout(step, delay || 0); setTimeout(step, delay || 0);
const toolpos = $('layer-toolpos'); toggleTrans(undefined, false);
toolpos.innerHTML = ''; origin = settings.origin;
UC.setGroup(toolpos);
playButton.style.display = ''; button.replay.onclick = replay;
pauseButton.style.display = 'none'; button.play.onclick = play;
button.step.onclick = step;
button.pause.onclick = pause;
button.speed.onclick = fast;
button.trans.onclick = toggleTrans;
button.model.onclick = toggleModel;
button.shade.onclick = toggleStock;
button.play.style.display = '';
button.pause.style.display = 'none';
api.event.emit('animate', 'CAM'); api.event.emit('animate', 'CAM');
api.alerts.hide(alert); api.alerts.hide(alert);
// moto.space.platform.showGridBelow(false);
}); });
} }
@ -83,6 +101,13 @@ kiri.load(() => {
animate_setup2(settings, ondone) { animate_setup2(settings, ondone) {
color = settings.controller.dark ? 0x888888 : 0; color = settings.controller.dark ? 0x888888 : 0;
material = new THREE.MeshMatcapMaterial({
flatShading: true,
transparent: false,
opacity: 0.9,
color: 0x888888,
side: THREE.DoubleSide
});
kiri.client.send("animate_setup2", {settings}, ondone); kiri.client.send("animate_setup2", {settings}, ondone);
}, },
@ -102,14 +127,7 @@ kiri.load(() => {
const ia = ilen ? ind.subarray(0, ilen) : ind; const ia = ilen ? ind.subarray(0, ilen) : ind;
geo.setAttribute('position', new THREE.BufferAttribute(pa, 3)); geo.setAttribute('position', new THREE.BufferAttribute(pa, 3));
geo.setIndex(new THREE.BufferAttribute(ia, 1)); geo.setIndex(new THREE.BufferAttribute(ia, 1));
const mat = new THREE.MeshMatcapMaterial({ const mesh = new THREE.Mesh(geo, material);
flatShading: true,
transparent: false,
opacity: 1,
color: 0x888888,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geo, mat);
mesh.pos = pos; mesh.pos = pos;
mesh.ind = ind; mesh.ind = ind;
space.world.add(mesh); space.world.add(mesh);
@ -136,6 +154,22 @@ kiri.load(() => {
delete meshes[id]; delete meshes[id];
} }
function toggleModel(ev,bool) {
api.local.toggle('cam.anim.model', bool);
api.widgets.all().forEach(w => w.toggleVisibility(bool));
}
function toggleStock(ev,bool,set) {
set !== false && api.local.toggle('cam.anim.stock', bool);
return api.event.emit('cam.stock.toggle', bool ?? undefined);
}
function toggleTrans(ev,bool) {
bool = api.local.toggle('cam.anim.trans', bool);
material.transparent = bool;
material.needsUpdate = true;
}
function step() { function step() {
updateSpeed(); updateSpeed();
kiri.client.animate2({speed, steps: 1}, handleUpdate); kiri.client.animate2({speed, steps: 1}, handleUpdate);
@ -145,8 +179,8 @@ kiri.load(() => {
const { steps } = opts; const { steps } = opts;
updateSpeed(); updateSpeed();
if (steps !== 1) { if (steps !== 1) {
playButton.style.display = 'none'; button.play.style.display = 'none';
pauseButton.style.display = ''; button.pause.style.display = '';
} }
kiri.client.animate2({ kiri.client.animate2({
speed, speed,
@ -158,8 +192,8 @@ kiri.load(() => {
function fast(opts) { function fast(opts) {
const { steps } = opts; const { steps } = opts;
updateSpeed(1); updateSpeed(1);
playButton.style.display = 'none'; button.play.style.display = 'none';
pauseButton.style.display = ''; button.pause.style.display = '';
kiri.client.animate2({ kiri.client.animate2({
speed, speed,
steps: steps || Infinity, steps: steps || Infinity,
@ -168,8 +202,8 @@ kiri.load(() => {
} }
function pause() { function pause() {
playButton.style.display = ''; button.play.style.display = '';
pauseButton.style.display = 'none'; button.pause.style.display = 'none';
kiri.client.animate2({speed: 0}, handleUpdate); kiri.client.animate2({speed: 0}, handleUpdate);
} }
@ -194,9 +228,13 @@ kiri.load(() => {
mesh.position.z = pos.z; mesh.position.z = pos.z;
space.refresh(); space.refresh();
} }
label.x.value = (pos.x - origin.x).toFixed(2);
label.y.value = (pos.y + origin.y).toFixed(2);
label.z.value = (pos.z - origin.z).toFixed(2);
} }
if (data.stock_index !== undefined) { if (data.stock_index !== undefined) {
api.widgets.setAxisIndex(data.stock_index); api.widgets.setAxisIndex(data.stock_index);
label.a.value = -data.stock_index.toFixed(1);
} }
if (data.mesh_index) { if (data.mesh_index) {
const { id, index } = data.mesh_index; const { id, index } = data.mesh_index;
@ -211,7 +249,7 @@ kiri.load(() => {
meshUpdate(id, ind, pos, ilen, plen); meshUpdate(id, ind, pos, ilen, plen);
} }
if (data && data.progress) { if (data && data.progress) {
progress.innerText = (data.progress * 100).toFixed(1) + '%' label.progress.value = (data.progress * 100).toFixed(1);
} }
} }
@ -221,8 +259,9 @@ kiri.load(() => {
} else if (inc > 0) { } else if (inc > 0) {
speedIndex = (speedIndex + inc) % speedValues.length; speedIndex = (speedIndex + inc) % speedValues.length;
} }
api.local.set('cam.anim.speed', speedIndex);
speed = speedValues[speedIndex]; speed = speedValues[speedIndex];
speedLabel.innerText = speedNames[speedIndex]; label.speed.value = speedNames[speedIndex];
} }
function replay() { function replay() {

2
src/kiri-mode/cam/client.js
View file

@ -198,6 +198,8 @@ CAM.init = function(kiri, api) {
} }
updateStock(); updateStock();
func.opRender(); func.opRender();
api.uc.setVisible($('layer-animate'), isAnimate && isCamMode);
// api.uc.setVisible($('layer-toolpos'), isAnimate && isCamMode);
}); });
api.event.on("settings.saved", (settings) => { api.event.on("settings.saved", (settings) => {

38
src/kiri/init.js
View file

@ -785,7 +785,7 @@ gapp.register("kiri.init", (root, exports) => {
let { event, conf, view, show } = api, let { event, conf, view, show } = api,
{ bound, toInt, toFloat } = uc, { bound, toInt, toFloat } = uc,
{ newBlank, newButton, newBoolean, newGroup, newInput } = uc, { newBlank, newButton, newBoolean, newGroup, newInput } = uc,
{ newSelect, newText, newRow, newGCode, newDiv } = uc; { newSelect, newLabel, newValue, newRow, newGCode, newDiv } = uc;
event.emit('init.one'); event.emit('init.one');
@ -843,6 +843,7 @@ gapp.register("kiri.init", (root, exports) => {
// api augmentation with local functions // api augmentation with local functions
api.device.export = deviceExport; api.device.export = deviceExport;
let anim = ui.anim = {};
Object.assign(ui, { Object.assign(ui, {
tracker: tracker, tracker: tracker,
@ -978,6 +979,33 @@ gapp.register("kiri.init", (root, exports) => {
stockDepth: $('stock-width'), stockDepth: $('stock-width'),
stockHeight: $('stock-width'), stockHeight: $('stock-width'),
/** CAM Animation Bar */
_____: {
_____: newDiv({ addto: $('layer-animate'), set:true }),
row: newRow([
anim.replay = newButton(null,"anim.replay",{icon:'<i class="fas fa-fast-backward"></i>',title:"restart"}),
anim.play = newButton(null,"anim.play",{icon:'<i class="fas fa-play"></i>',title:"play"}),
anim.pause = newButton(null,"anim.pause",{icon:'<i class="fas fa-pause"></i>',title:"pause"}),
anim.step = newButton(null,"anim.step",{icon:'<i class="fas fa-step-forward"></i>',title:"single step"}),
anim.speed = newButton(null,"anim.fast",{icon:'<i class="fas fa-forward"></i>',title:"toggle speed"}),
anim.labspd = newValue(3, {class:"center padleft"}),
anim.labx = newLabel("X", {class:"padleft"}),
anim.valx = newValue(6, {class:"center"}),
anim.laby = newLabel("Y", {class:"padleft"}),
anim.valy = newValue(6, {class:"center"}),
anim.labz = newLabel("Z", {class:"padleft"}),
anim.valz = newValue(6, {class:"center"}),
anim.laba = newLabel("A", {class:"padleft hide"}),
anim.vala = newValue(6, {class:"center hide"}),
anim.labpro = newLabel("%", {class:"padleft"}),
anim.progress = newValue(5, {class:"center"}),
anim.trans = newButton(null,"anim.trans",{icon:'<i class="fa-solid fa-border-none"></i>',title:"transparency",class:"padleft"}),
anim.model = newButton(null,"anim.model",{icon:'<i class="fa-solid fa-eye"></i>',title:"show model"}),
anim.shade = newButton(null,"anim.stock",{icon:'<i class="fa-solid fa-cube"></i>',title:"stock box"}),
])
},
/** Device Browser / Editor */ /** Device Browser / Editor */
_____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true }), _____: newDiv({ class: "f-col t-body t-inset", addto: $('dev-config'), set:true }),
@ -1041,7 +1069,7 @@ gapp.register("kiri.init", (root, exports) => {
/** Preferences Menu */ /** Preferences Menu */
_____: newGroup(LANG.op_menu, $('prefs-gen1'), {inline: true}), _____: newGroup(LANG.op_menu, $('prefs-gen1'), {inline}),
antiAlias: newBoolean(LANG.op_anta_s, booleanSave, {title:LANG.op_anta_l}), antiAlias: newBoolean(LANG.op_anta_s, booleanSave, {title:LANG.op_anta_l}),
reverseZoom: newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l}), reverseZoom: newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_l}),
ortho: newBoolean(LANG.op_orth_s, booleanSave, {title:LANG.op_orth_l}), ortho: newBoolean(LANG.op_orth_s, booleanSave, {title:LANG.op_orth_l}),
@ -1049,7 +1077,7 @@ gapp.register("kiri.init", (root, exports) => {
drawer: newBoolean('slide out', booleanSave, {title:'slide out settings drawer'}), drawer: newBoolean('slide out', booleanSave, {title:'slide out settings drawer'}),
scrolls: newBoolean('scrollbars', booleanSave, {title:'show scrollbars'}), scrolls: newBoolean('scrollbars', booleanSave, {title:'show scrollbars'}),
devel: newBoolean(LANG.op_devl_s, booleanSave, {title:LANG.op_devl_l}), devel: newBoolean(LANG.op_devl_s, booleanSave, {title:LANG.op_devl_l}),
_____: newGroup(LANG.op_disp, $('prefs-gen2'), {inline: true}), _____: newGroup(LANG.op_disp, $('prefs-gen2'), {inline}),
showOrigin: newBoolean(LANG.op_shor_s, booleanSave, {title:LANG.op_shor_l}), showOrigin: newBoolean(LANG.op_shor_s, booleanSave, {title:LANG.op_shor_l}),
showRulers: newBoolean(LANG.op_shru_s, booleanSave, {title:LANG.op_shru_l}), showRulers: newBoolean(LANG.op_shru_s, booleanSave, {title:LANG.op_shru_l}),
showSpeeds: newBoolean(LANG.op_sped_s, speedSave, {title:LANG.op_sped_l}), showSpeeds: newBoolean(LANG.op_sped_s, speedSave, {title:LANG.op_sped_l}),
@ -1058,7 +1086,7 @@ gapp.register("kiri.init", (root, exports) => {
animesh: newSelect(LANG.op_anim_s, {title: LANG.op_anim_l, action: aniMeshSave, modes:CAM}, "animesh"), animesh: newSelect(LANG.op_anim_s, {title: LANG.op_anim_l, action: aniMeshSave, modes:CAM}, "animesh"),
units: newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, action: unitsSave, modes:CAM}, "units"), units: newSelect(LANG.op_unit_s, {title: LANG.op_unit_l, action: unitsSave, modes:CAM}, "units"),
edgeangle: newInput(LANG.op_spoa_s, {title:LANG.op_spoa_l, convert:toFloat, size:3}), edgeangle: newInput(LANG.op_spoa_s, {title:LANG.op_spoa_l, convert:toFloat, size:3}),
_____: newGroup(LANG.lo_menu, $('prefs-lay'), {inline: true}), _____: newGroup(LANG.lo_menu, $('prefs-lay'), {inline}),
autoSave: newBoolean(LANG.op_save_s, booleanSave, {title:LANG.op_save_l}), autoSave: newBoolean(LANG.op_save_s, booleanSave, {title:LANG.op_save_l}),
autoLayout: newBoolean(LANG.op_auto_s, booleanSave, {title:LANG.op_auto_l}), autoLayout: newBoolean(LANG.op_auto_s, booleanSave, {title:LANG.op_auto_l}),
freeLayout: newBoolean(LANG.op_free_s, booleanSave, {title:LANG.op_free_l}), freeLayout: newBoolean(LANG.op_free_s, booleanSave, {title:LANG.op_free_l}),
@ -1070,7 +1098,7 @@ gapp.register("kiri.init", (root, exports) => {
exportOcto: newBoolean(`OctoPrint`, booleanSave, {title:LANG.op_exop_l}), exportOcto: newBoolean(`OctoPrint`, booleanSave, {title:LANG.op_exop_l}),
exportThumb: newBoolean(`Thumbnail`, booleanSave, {modes:FDM}), exportThumb: newBoolean(`Thumbnail`, booleanSave, {modes:FDM}),
exportPreview: newBoolean(`Code Preview`, booleanSave), exportPreview: newBoolean(`Code Preview`, booleanSave),
_____: newGroup(LANG.pt_menu, $('prefs-prt'), {inline: true}), _____: newGroup(LANG.pt_menu, $('prefs-prt'), {inline}),
detail: newSelect(LANG.pt_qual_s, {title: LANG.pt_qual_l, action: detailSave}, "detail"), detail: newSelect(LANG.pt_qual_s, {title: LANG.pt_qual_l, action: detailSave}, "detail"),
healMesh: newBoolean(LANG.pt_heal_s, booleanSave, {title: LANG.pt_heal_l}), healMesh: newBoolean(LANG.pt_heal_s, booleanSave, {title: LANG.pt_heal_l}),
threaded: newBoolean(LANG.pt_thrd_s, booleanSave, {title: LANG.pt_thrd_l, modes:THREED}), threaded: newBoolean(LANG.pt_thrd_s, booleanSave, {title: LANG.pt_thrd_l, modes:THREED}),

22
src/kiri/ui.js
View file

@ -58,6 +58,7 @@ gapp.register("kiri.ui", [], (root, exports) => {
newGroup, newGroup,
newLabel, newLabel,
newInput, newInput,
newValue,
newRange, newRange,
newRow, newRow,
newSelect, newSelect,
@ -362,6 +363,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
return label; return label;
} }
function newValue(size = 6, opt = {}) {
let value = DOC.createElement('input');
value.setAttribute("size", size);
value.setAttribute("readonly", '');
value.setAttribute("class", "nooutline noselect");
if (opt.class) opt.class.split(' ').forEach(cl => {
value.classList.add(cl);
})
return value;
}
function addId(el, opt = {}) { function addId(el, opt = {}) {
if (opt.id) { if (opt.id) {
el.setAttribute("id", opt.id); el.setAttribute("id", opt.id);
@ -793,9 +805,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
// unlike other elements, does not auto-add to a row // unlike other elements, does not auto-add to a row
function newButton(label, action, opt = {}) { function newButton(label, action, opt = {}) {
let b = DOC.createElement('button'); let b = DOC.createElement('button');
let { api } = kiri;
b.onclick = function() { b.onclick = function() {
if (action) action(...arguments); switch (typeof action) {
case "string":
api.event.emit(action);
break;
case "function":
action(...arguments);
break;
}
}; };
if (opt.class) { if (opt.class) {

51
web/kiri/index.css
View file

@ -609,6 +609,9 @@ details[open] summary::after {
.hide-scroll { .hide-scroll {
scrollbar-color: transparent transparent !important; scrollbar-color: transparent transparent !important;
} }
.nooutline {
outline: none;
}
.noselect { .noselect {
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -2039,25 +2042,38 @@ details[open] summary::after {
color: #335; color: #335;
} }
.dark #layer-animate button {
border: 1px solid #555;
background-color: #444;
}
.dark #layer-animate button:hover {
background-color: var(--main-color);
}
.dark #layer-animate button svg {
color: #ddd;
}
.dark #layer-animate label {
border: 1px solid #555;
background-color: #444;
}
.dark #layer-animate input {
border: 1px solid #444;
}
#layer-animate { #layer-animate {
pointer-events: all;
position: absolute; position: absolute;
z-index: 2; z-index: 200;
left: 15px; left: 0;
right: 15px; right: 0;
bottom: 3px; bottom: 0;
padding: 4px;
} }
#layer-animate svg { #layer-animate svg {
color: #333; color: #333;
font-size: 30px; font-size: 30px;
} }
#layer-animate .speed {
width: 30px;
}
#layer-animate .progress {
width: 3.5em;
}
#layer-animate .padleft { #layer-animate .padleft {
margin-left: 5px !important; margin-left: 8px !important;
} }
#layer-animate button { #layer-animate button {
width: 45px; width: 45px;
@ -2067,20 +2083,23 @@ details[open] summary::after {
#layer-animate label { #layer-animate label {
display: inline-flex; display: inline-flex;
border-radius: 3px; border-radius: 3px;
border: 1px solid #aaa;
margin: 1px 2px 2px 1px; margin: 1px 2px 2px 1px;
padding: 2px; padding: 2px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
background-color: #ddd; border: 1px solid #ddd;
background-color: #eee;
}
#layer-animate input {
border-radius: 4px;
} }
#layer-toolpos { /* #layer-toolpos {
position: absolute; position: absolute;
display: none;
right: 3px; right: 3px;
bottom: 3px; bottom: 3px;
z-index: 201;
} }
#layer-toolpos label, #layer-toolpos input { #layer-toolpos label, #layer-toolpos input {
display: inline-flex; display: inline-flex;
@ -2102,7 +2121,7 @@ details[open] summary::after {
font-family: monospace; font-family: monospace;
padding: 1px 4px 1px 4px; padding: 1px 4px 1px 4px;
margin: 1px 1px 2px 1px; margin: 1px 1px 2px 1px;
} } */
#layer-slider { #layer-slider {
position: absolute; position: absolute;

7
web/kiri/index.html
View file

@ -387,6 +387,9 @@
<div id="top-slider" class="f-col grow"> <div id="top-slider" class="f-col grow">
<input id="anim-slider" type="range" min="0" max="1000" value="0"></input> <input id="anim-slider" type="range" min="0" max="1000" value="0"></input>
</div> </div>
<!-- CAM animation controls and readout -->
<div id="layer-animate" class="f-col a-center set2-group hide"></div>
<!-- <div id="layer-toolpos" class="f-row a-center hide"></div> -->
</div> </div>
<!-- allows right tray to slide/hide but still show speeds menu --> <!-- allows right tray to slide/hide but still show speeds menu -->
@ -733,10 +736,6 @@
<div id="rnfo"></div> <div id="rnfo"></div>
</div> </div>
<!-- CAM animation controls and readout -->
<div id="layer-animate" class="f-col a-center"></div>
<div id="layer-toolpos" class="f-row a-center"></div>
<!-- ephemeral non-modal alerts --> <!-- ephemeral non-modal alerts -->
<div id="alert-area"> <div id="alert-area">
<div id="alert-border"> <div id="alert-border">