Skip to content

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>;
}