diff --git a/src/kiri-mode/cam/animate.js b/src/kiri-mode/cam/animate.js
index 83608374..db1b82d3 100644
--- a/src/kiri-mode/cam/animate.js
+++ b/src/kiri-mode/cam/animate.js
@@ -11,7 +11,7 @@ const { CAM } = driver;
let meshes = {},
unitScale = 1,
- progress, toolPosX, toolPosY, toolPosZ,
+ progress,
speedValues = [ 25, 12, 6, 3 ],
speedNames = [ "1x", "2x", "4x", "8x" ],
speedMax = speedValues.length - 1,
@@ -58,7 +58,8 @@ kiri.load(() => {
UC.newButton(null,step,{icon:'',title:"single step"}),
UC.newButton(null,fast,{icon:'',title:"toggle speed"}),
UC.newButton(null,skip,{icon:'',title:"skip forward without animation"}),
- speedLabel = UC.newLabel("speed")
+ speedLabel = UC.newLabel("speed", {class:"speed"}),
+ progress = UC.newLabel('0%', {class:"progress"})
]);
updateSpeed();
setTimeout(() => {
@@ -67,10 +68,6 @@ kiri.load(() => {
const toolpos = $('layer-toolpos');
toolpos.innerHTML = '';
UC.setGroup(toolpos);
- progress = UC.newInput('%', {disabled: true, size: 5});
- toolPosX = UC.newInput('x', {disabled: true, size: 7});
- toolPosY = UC.newInput('y', {disabled: true, size: 7});
- toolPosZ = UC.newInput('z', {disabled: true, size: 7});
playButton.style.display = '';
pauseButton.style.display = 'none';
api.event.emit('animate', 'CAM');
@@ -173,7 +170,7 @@ kiri.load(() => {
function handleGridUpdate(data) {
checkMeshCommands(data);
if (data && data.progress) {
- progress.value = (data.progress * 100).toFixed(1)
+ progress.innerText = (data.progress * 100).toFixed(1) + '%'
}
}
@@ -216,11 +213,6 @@ kiri.load(() => {
mesh.position.y = pos.y;
mesh.position.z = pos.z;
space.update();
- if (id !== 0) {
- toolPosX.value = ((pos.x + posOffset.x) * unitScale).toFixed(2);
- toolPosY.value = ((pos.y + posOffset.y) * unitScale).toFixed(2);
- toolPosZ.value = ((pos.z + posOffset.z) * unitScale).toFixed(2);
- }
}
}
if (data.mesh_update) {
diff --git a/web/kiri/index.css b/web/kiri/index.css
index bda78e9c..6b8e596a 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -1432,12 +1432,23 @@ th, tr, td, label {
color: #333;
font-size: 30px;
}
+#layer-animate .speed {
+ width: 30px;
+ margin-left: 5px !important;
+}
+#layer-animate .progress {
+ width: 3.5em;
+}
+#layer-animate button {
+ width: 45px;
+ align-items: center;
+ justify-content: center;
+}
#layer-animate label {
display: inline-flex;
- width: 30px;
border-radius: 3px;
border: 1px solid #aaa;
- margin: 1px 2px 2px 4px;
+ margin: 1px 2px 2px 1px;
padding: 2px;
justify-content: center;
align-items: center;