87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<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> |