init commit

src/render/views/ClockConfig/GestureRecognitionConfigView/data.ts

@@ -0,0 +1,22 @@
+export const MAX_DISTANCE    = -300
+export const MIN_DISTANCE    = -900
+
+export const timeOutOptions  = [200, 600, 1000, 1500, 2000].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const intervalOptions = [0.5, 1, 2, 3].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const eventOptions = [
+  { label: '屏幕向右翻页', value: 0 },
+  { label: '屏幕向左翻页', value: 1 },
+  { label: '显示日期'    , value: 2 },
+]

src/render/views/ClockConfig/GestureRecognitionConfigView/index.ts

@@ -0,0 +1 @@
+export { default as GestureRecognitionConfigView } from './index.vue'

src/render/views/ClockConfig/GestureRecognitionConfigView/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <n-space  vertical justify="space-around" align="center" item-style="width: 50%;" class="gesture-recognition-config-view">
+    <n-form-item size="large" label-placement="left" label="　距　　离　：" path="inputValue">
+      <n-slider :max="MAX_DISTANCE" :min="MIN_DISTANCE" v-model:value="model.distance" :tooltip="false" :step="10">
+        <template #thumb>
+          <n-button type="primary" size="large" circle />
+        </template>
+      </n-slider>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="　超　　时　：" path="timeOut">
+      <n-select
+        placeholder="请选择超时时间"
+        v-model:value="model.timeOut"
+        :options="timeOutOptions"
+      />
+
+      <template #feedback>
+        单位：毫秒
+        <br>
+        遮挡物离开第一个红外传感器和遮挡第二个红外传感器之间的时间，超过这个时间则不会触发动画效果，建议值: 200
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="　间　　隔　：" path="interval">
+      <n-select
+        placeholder="请选择间隔时间"
+        v-model:value="model.interval"
+        :options="intervalOptions"
+      />
+
+      <template #feedback>
+        单位：秒
+        <br>
+        两次动画之间的时间间隔，小于这个值不会触发动画，建议值: 1
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="从左到右事件：" path="ltr">
+      <n-select
+        placeholder="请设置从左到右事件"
+        v-model:value="model.ltr"
+        :options="eventOptions"/>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="从右到左事件：" path="rtl">
+      <n-select
+        placeholder="请设置从右到左事件"
+        v-model:value="model.rtl"
+        :options="eventOptions"/>
+    </n-form-item>
+
+    <div class="text-center">
+      <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onClick">发送手势识别设置命令</n-button>
+    </div>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NFormItem, NSlider, NSelect, NButton, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { MAX_DISTANCE, MIN_DISTANCE, timeOutOptions, intervalOptions, eventOptions } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const model = ref({
+  distance: -300,
+  timeOut : null,
+  interval: null,
+  ltr: null,
+  rtl: null
+})
+
+const message    = useMessage()
+const serialPort = useSerialPortStore()
+const onClick = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  const value = model.value
+  if (!value.timeOut) {
+    message.error('请设置超时时间')
+    return
+  }
+
+  if (!value.interval) {
+    message.error('请设置间隔时间')
+    return
+  }
+
+  if (value.ltr === null) {
+    message.error('请设置从左到右事件')
+    return
+  }
+
+  if (value.rtl === null) {
+    message.error('请设置从右到左事件')
+    return
+  }
+
+  let cmd = `$GESTE,0,1,${-value.distance},${value.timeOut},5,${value.interval},${value.ltr},${value.rtl}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+
+</style>