104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<template>
|
|
<n-grid x-gap="0" :cols="COLS">
|
|
<n-gi v-for="n in COLS * ROWS" :key="n">
|
|
<LED ref="ledRefs" />
|
|
</n-gi>
|
|
</n-grid>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { NGrid, NGi, useMessage } from 'naive-ui'
|
|
import convert from 'color-convert'
|
|
import LED from './components/LED.vue'
|
|
import { useSerialPortStore } from '@/stores/serialPort'
|
|
import { ROWS, COLS } from './data'
|
|
|
|
const message = useMessage()
|
|
|
|
const ledRefs = ref()
|
|
|
|
const serialPort = useSerialPortStore()
|
|
|
|
const showChar = (index, data, color) => {
|
|
if (!data) return
|
|
|
|
if (!serialPort.isOpen) {
|
|
message.error('请连接并打开串口设备')
|
|
return
|
|
}
|
|
|
|
clearArea(index)
|
|
|
|
if (!color) return
|
|
|
|
if (data.length === 15) {
|
|
data = [data[0],data[1],data[2],false,
|
|
data[3],data[4],data[5],false,
|
|
data[6],data[7],data[8],false,
|
|
data[9],data[10],data[11],false,
|
|
data[12],data[13],data[14],false,
|
|
false,false,false,false,
|
|
false,false,false,false]
|
|
}
|
|
|
|
|
|
if (data.length === 28) {
|
|
let ledx = {
|
|
0:[0,0,0,0,0,0,0,0],
|
|
1:[0,0,0,0,0,0,0,0],
|
|
2:[0,0,0,0,0,0,0,0],
|
|
3:[0,0,0,0,0,0,0,0]
|
|
}
|
|
for (let i = 0; i < data.length; i++) {
|
|
if(data[i]){
|
|
const x = i % 4 + index * 4
|
|
const y = Math.floor(i / 4)
|
|
const ledIndex = y * COLS + x
|
|
ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = color
|
|
const rx = ledIndex % COLS
|
|
const ry = Math.floor(ledIndex / COLS)
|
|
ledx[rx-4*index][ry] = 1
|
|
}
|
|
}
|
|
const origin = 4 * index
|
|
const rgb = convert.hex.rgb(color)
|
|
const I = parseInt(ledx[0].toString().replace(/,/gi,''),2)
|
|
const II = parseInt(ledx[1].toString().replace(/,/gi,''),2)
|
|
const III = parseInt(ledx[2].toString().replace(/,/gi,''),2)
|
|
const IV = parseInt(ledx[3].toString().replace(/,/gi,''),2)
|
|
let cmd = `$LEDAREA,${origin},0,${I},${II},${III},${IV},${rgb[0]},${rgb[1]},${rgb[2]}*`
|
|
cmd += cmd.length
|
|
cmd += '\r\n'
|
|
serialPort.write(cmd)
|
|
}
|
|
}
|
|
|
|
const clearArea = (areaIndex) => {
|
|
for(let i = 0; i < 8; i++){
|
|
for (let j = 0; j < 4; j++){
|
|
const ledIndex = i * COLS + areaIndex * 4 + j
|
|
ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = 'black'
|
|
}
|
|
}
|
|
const origin = 4 * areaIndex
|
|
let cmd = `$LEDAREA,${origin},0,0,0,0,0,0,0,0*`
|
|
cmd += cmd.length
|
|
cmd += '\r\n'
|
|
serialPort.write(cmd)
|
|
}
|
|
|
|
const clearAll = () => {
|
|
if (!serialPort.isOpen) {
|
|
message.error('请连接并打开串口设备')
|
|
return
|
|
}
|
|
ledRefs.value.forEach(ledRef => {
|
|
ledRef.$el.children[0].style.backgroundColor = 'black'
|
|
})
|
|
serialPort.write('$LEDCL,0*9\r\n')
|
|
}
|
|
|
|
defineExpose( { showChar, clearArea, clearAll })
|
|
</script>
|