init commit

2023-10-13 16:43:53 +08:00
parent c1fc36b44c
commit d184776cb3
275 changed files with 8305 additions and 0 deletions
--- a/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.vue
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <n-space vertical justify="space-around" class="dot_matrix_screen_display">
+    
+    <n-grid :cols="count" class="top-container">
+      <n-gi v-for="n in count">
+        <n-input
+          :disabled="!hasFont"
+          type="text"
+          maxlength="1"
+          placeholder=""
+          v-model:value="inputValues[n - 1]"
+          :allow-input="onlyAllow" />
+      </n-gi>
+    </n-grid>
+
+    <LEDPanelView ref="ledPanelViewRef" />
+  
+    <n-space :item-style="itemStyle" class="bottom-container">
+      <input type="color" v-model="color" />
+
+      <n-space vertical>
+        <div>
+          <n-text v-if="!hasFont">字库未创建，请先创建字库</n-text>
+          
+          <n-radio-group v-else v-model:value="fontLibrarySelected" name="radiogroup">
+            <n-space>
+              <n-radio v-for="value, key in fontTypes" :key="key" :value="key">
+                {{ value }}
+              </n-radio>
+            </n-space>
+          </n-radio-group>
+        </div>
+
+        <n-button type="primary" size="large" @click="onClearBtnClick">清理屏幕</n-button>
+      </n-space>
+    </n-space>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { NSpace, NGrid, NGi, NInput, NRadioGroup, NRadio, NText, NButton } from 'naive-ui'
+import { LEDPanelView } from './LEDPanelView'
+import { hasIpcRenderer } from '@/utils'
+
+const itemStyle = { textAlign: 'center', flex: '1 1 50%'}
+
+const count     = 8
+const hasFont   = ref(false)
+const chars     = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', '.', '-']
+const onlyAllow = (value: string) => !value || chars.indexOf(value) >= 0
+
+const ledPanelViewRef = ref()
+const inputValues = ref(new Array(count).fill(null))
+for (let i = 0; i < count; i++) {
+  watch(
+    () => inputValues.value[i],
+    value => {
+      if (!value) {
+        ledPanelViewRef.value.clearArea(i)
+      } else {
+        const charData = fontLibrary[fontLibrarySelected.value][value]
+        ledPanelViewRef.value.showChar(i, charData, color.value)
+      }
+    }
+  )
+}
+
+const color     = ref('#eeeeee')
+
+const fontTypes           = { font35: '3*5',  font47: '4*7' }
+const fontLibrarySelected = ref(Object.keys(fontTypes)[0])
+let fontLibrary
+
+
+
+onMounted(() => {
+  if (!hasIpcRenderer()) return
+
+  const { data } = window.ipcRenderer.sendSync('LOAD_FONT_LIBRARY')
+  if (!data) return
+
+  fontLibrary = JSON.parse(data)
+  hasFont.value = true
+})
+
+const onClearBtnClick = () => {
+  inputValues.value.fill(null)
+}
+</script>
+
+<style scoped lang="less">
+.dot_matrix_screen_display {
+
+  .top-container {
+    .n-input {
+      height: calc(100vw / 8);
+
+      :deep(input) {
+        height: 100%;
+        font-size: 56px;
+        text-align: center;
+      }
+    }
+  }
+
+  .bottom-container {
+    gap: 0 !important;
+
+    input {
+      margin-top: 24px;
+      width: 96px;
+    }
+  }
+}
+</style>