init commit

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

@@ -0,0 +1,13 @@
+export const animationDurationOptions   = [10, 100, 1000].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const dateDisplayDurationOptions = [0, 1, 3, 5].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)

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

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

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

@@ -0,0 +1,81 @@
+<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="animationDuration">
+      <n-select
+        :disabled="!serialPort.isOpen"
+        placeholder="请选择翻页动画时长"
+        v-model:value="model.animationDuration"
+        :options="animationDurationOptions"
+        @update:value="onAnimationDurationUpdate"
+      />
+
+      <template #feedback>
+        单位：毫秒
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="日期显示时长：" path="dateDisplayDuration">
+      <n-select
+        :disabled="!serialPort.isOpen"
+        placeholder="请选择日期显示时长"
+        v-model:value="model.dateDisplayDuration"
+        :options="dateDisplayDurationOptions"
+        @update:value="onDateDisplayDurationUpdate"
+      />
+
+      <template #feedback>
+        单位：秒
+        <br>
+        选择0时，将不会自动从日期切换回时间
+      </template>
+    </n-form-item>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NFormItem, NSelect, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { animationDurationOptions, dateDisplayDurationOptions } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message = useMessage()
+
+const serialPort = useSerialPortStore()
+const model = ref({
+  animationDuration  : null,
+  dateDisplayDuration: null,
+})
+
+const onAnimationDurationUpdate   = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SCANSP,${model.value.animationDuration}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+
+const onDateDisplayDurationUpdate = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SETSDT,${model.value.dateDisplayDuration}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

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>

src/render/views/ClockConfig/ResetButtonView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="reset-button-container">
+    <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onResetBtnClick">恢复默认设置</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const serialPort = useSerialPortStore()
+const onResetBtnClick = () => {
+  if (!serialPort.isOpen) return
+  
+  let cmd = `$RECOVERY,1*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.reset-button-container {
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,4 @@
+export const count = 10
+
+export const MIN = 0
+export const MAX = 30

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

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

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

@@ -0,0 +1,87 @@
+<template>
+  <n-space vertical class="screen-config-view">
+    <n-card title="颜色设置" class="color-config-card">
+      <n-p>说明:北斗小时钟可设置10种颜色，10种颜色按照顺序不断切换，按照下方调色板排列顺序，分别设置对应位置的颜色</n-p>
+
+      <n-grid x-gap="24" y-gap="24" :cols="4">
+        <n-gi v-for="n in count" :key="n">
+          <input type="color" @change="onColorInputChange($event.target.value, n - 1)">
+        </n-gi> 
+      </n-grid>
+    </n-card>
+    
+    <n-card title="亮度设置" class="brightness-config-card">
+      <n-space justify="space-between" item-style="flex: 1 1 50%; text-align: center; padding: 24px">
+        <n-slider :min="MIN" :max="MAX" v-model:value="brightness" :tooltip="false" >
+          <template #thumb>
+            <n-button type="primary" size="large" circle />
+          </template>
+        </n-slider>
+
+        <n-button :disabled="!serialPort.isOpen" type="primary" size="large" secondary @click="onBrightnessBtnClick">发送亮度设置命令</n-button>
+
+      </n-space>
+    </n-card>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NCard, NGrid, NGi, NP, NSlider, NButton } from 'naive-ui'
+import convert from 'color-convert'
+import ResetButtonView from '../ResetButtonView.vue'
+import { count, MIN, MAX } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+
+const serialPort = useSerialPortStore()
+
+const onColorInputChange = (color, index) => {
+  if (!serialPort.isOpen) return
+
+  const rgb = convert.hex.rgb(color)
+  
+  let cmd = `$LEDRGB,${index},${rgb[0]},${rgb[1]},${rgb[2]}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+
+const brightness = ref(MIN)
+const onBrightnessBtnClick = () => {
+  if (!serialPort.isOpen) return
+  
+  let cmd = `$LEDBT,${brightness.value}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.screen-config-view {
+  padding: 24px;
+  row-gap: 48px !important;
+
+  .color-config-card {
+    .n-grid {
+
+      &>div {
+        text-align: center;
+
+        input {
+          width: 60%;
+        }
+      }
+    }
+  }
+
+  .brightness-config-card {
+    .n-space {
+      gap: 0 !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+export const options = [
+  { label: '屏幕向右翻页', value: 0 },
+  { label: '屏幕向左翻页', value: 1 },
+  { label: '显示日期'    , value: 2 },
+]

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

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

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

@@ -0,0 +1,46 @@
+<template>
+  <n-space vertical justify="center" class="sound-detect-module-config-view">
+    <div>
+      <n-select
+        placeholder="请设置声音检测模块事件"
+        v-model:value="value"
+        :options="options"
+        @update:value="onSelectUpdate"
+        class="mx-auto"
+        style="width: 50%; "/>
+    </div>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NSelect, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { options } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message    = useMessage()
+const serialPort = useSerialPortStore()
+
+const value      = ref(null)
+const onSelectUpdate   = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SDEVENT,${value.value}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.sound-detect-module-config-view {
+  row-gap: 48px !important;
+}
+</style>