KLMotionController
考拉运动控制器组件
效果
vue
<script setup lang="ts">
import { ref } from 'vue';
import { sleep } from '../utils';
const axes = ref([
{ id: 1, name: 'x轴', position: 0, destSpeed: 0, minSpeed: 0, maxSpeed: 10, destPos: 0, isAbsolute: false },
{ id: 2, name: 'y轴', position: 0, destSpeed: 0, minSpeed: 0, maxSpeed: 10, destPos: 0, isAbsolute: false },
])
let isJogging = false;
async function jogStart(id: number, reverse: number) {
const axis = axes.value.find(e => e.id === id);
const step = reverse ? 10 : -10;
if (!axis) return;
isJogging = true;
while (isJogging) {
await sleep(100);
axis.position += step;
}
}
async function jogStop() {
isJogging = false;
}
async function move(id: number) {
const axis = axes.value.find(e => e.id === id);
if (!axis) return;
await sleep(3000);
axis.position = axis.isAbsolute ? axis.destPos : (axis.position + axis.destPos);
}
async function freshPositions() { }
</script>
<template>
<div class="relative">
<KLMotionController :axes="axes" :freshPositions="freshPositions" :jogStart="jogStart" :jogStop="jogStop"
:move="move" />
</div>
</template>
<style>
.vp-doc table {
margin: 0;
}
</style>参数
vue
interface Axis {
// 轴号
id: number;
// 轴名称
name: number;
// 轴位置
position: number;
// 轴运动最小速度
minSpeed: number;
// 轴运动最大速度
maxSpeed: number;
// 轴运动速度
destSpeed: number;
// 轴目标位置
destPos: number;
// 是否为绝对运动
isAbsolute: boolean;
}
interface Props {
// 轴列表
axes: Axis[];
// 刷新轴坐标
freshPositions: () => Promise<void>;
// 步进
jogStart: (id: number, reverse: number) => Promise<void>;
// 停止步进
jogStop: (id: number) => Promise<void>;
// 移动
move: (id: number) => Promise<void>;
}