refactor animation control bar, re-add axis positions

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

View file

@ -785,7 +785,7 @@ gapp.register("kiri.init", (root, exports) => {
let { event, conf, view, show } = api,
{ bound, toInt, toFloat } = uc,
{ newBlank, newButton, newBoolean, newGroup, newInput } = uc,
{ newSelect, newText, newRow, newGCode, newDiv } = uc;
{ newSelect, newLabel, newValue, newRow, newGCode, newDiv } = uc;
event.emit('init.one');
@ -843,6 +843,7 @@ gapp.register("kiri.init", (root, exports) => {
// api augmentation with local functions
api.device.export = deviceExport;
let anim = ui.anim = {};
Object.assign(ui, {
tracker: tracker,
@ -978,6 +979,33 @@ gapp.register("kiri.init", (root, exports) => {
stockDepth: $('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 */
_____: 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 */
_____: 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}),
reverseZoom: newBoolean(LANG.op_invr_s, booleanSave, {title:LANG.op_invr_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'}),
scrolls: newBoolean('scrollbars', booleanSave, {title:'show scrollbars'}),
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}),
showRulers: newBoolean(LANG.op_shru_s, booleanSave, {title:LANG.op_shru_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"),
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}),
_____: 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}),
autoLayout: newBoolean(LANG.op_auto_s, booleanSave, {title:LANG.op_auto_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}),
exportThumb: newBoolean(`Thumbnail`, booleanSave, {modes:FDM}),
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"),
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}),

View file

@ -58,6 +58,7 @@ gapp.register("kiri.ui", [], (root, exports) => {
newGroup,
newLabel,
newInput,
newValue,
newRange,
newRow,
newSelect,
@ -362,6 +363,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
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 = {}) {
if (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
function newButton(label, action, opt = {}) {
let b = DOC.createElement('button');
let { api } = kiri;
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) {