init commit

src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.vue

@@ -0,0 +1,62 @@
+<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 } from 'naive-ui'
+import LED from './components/LED.vue'
+import { ROWS, COLS } from './data'
+
+const ledRefs = ref()
+
+const showChar  = (index, data, color) => {
+  if (!data) return
+
+  clearArea(index)
+
+  if (data.length === 15) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i]) {
+        const x = Math.floor(i / 3) 
+        const y = i % 3 + index * 4
+
+        ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
+      }
+    }
+  }
+
+  
+  if (data.length === 28) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i]) {
+        const x = Math.floor(i / 4) 
+        const y = i % 4 + index * 4
+
+        ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
+      }
+    }
+  }
+}
+
+const clearArea = (areaIndex) => {
+  for (let i = 0; i < 7; 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 clearAll  = () => {
+  ledRefs.value.forEach(ledRef => {
+    ledRef.$el.children[0].style.backgroundColor = 'black'
+  });
+}
+
+defineExpose( { showChar, clearArea, clearAll })
+</script>