开机图色彩阈值

src/views/idea/channel/index.vue

@@ -3,7 +3,17 @@
       <Breadcrumb :items="[$t('menu.workshop'), $t('menu.channel')]" />
       <a-row :gutter="20" align="stretch">
         <a-col :span="24">
-            <a-card class="general-card" :title="$t('menu.channel')">
+            <a-card class="general-card">
+                <template #title>
+                  <div style="display: flex; gap: 1rem; align-items: flex-end;">
+                    {{ $t('menu.channel') }}
+                    <t-input size="small" style="width: 200px;" v-model="state.title" @enter="searchIt">
+                      <template #suffixIcon>
+                        <search-icon :style="{ cursor: 'pointer' }" @click="searchIt"/>
+                      </template>
+                    </t-input>
+                  </div>
+                </template>
                 <template #extra>
                     <div style="margin-right: 20px;">
                         <template v-if="userStore.name">
@@ -105,6 +115,7 @@
   import { RefreshIcon } from 'tdesign-icons-vue-next';
   import axios from 'axios';
   import { Message } from '@arco-design/web-vue';
+  import { SearchIcon } from 'tdesign-icons-vue-next';
 
   const appStore = useAppStore();
   const userStore = useUserStore();
@@ -120,7 +131,8 @@
     myList: any,
     total: number,
     page: number,
-    nowpage: any
+    nowpage: any,
+    title: string
   } = reactive({
     binaryFile: undefined,
     loading: false,
@@ -130,7 +142,8 @@
     myList: [],
     total: 0,
     page: 1,
-    nowpage: []
+    nowpage: [],
+    title: ''
   })
 
   const formData = reactive({
@@ -145,7 +158,7 @@
 
   const loadit = async (page: any) => {
     state.page = page.current
-    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/channel/index?server=1&limit=12&page=" + page.current + "&t=" + Date.now())
+    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/channel/index?server=1&limit=12&page=" + page.current + "&title=" + state.title + "&t=" + Date.now())
     state.total = resp.data.total
     state.nowpage = resp.data.list
   }
@@ -237,6 +250,9 @@ const iDownload = (url: any, name: any) => {
   })
 }
 
+const searchIt = () => {
+  loadit({current: 1})
+}
   </script>
   
   <script lang="ts">

src/views/idea/firmware/index.vue

@@ -3,7 +3,17 @@
       <Breadcrumb :items="[$t('menu.workshop'), $t('menu.firmware')]" />
       <a-row :gutter="20" align="stretch">
         <a-col :span="24">
-            <a-card class="general-card" :title="$t('menu.firmware')">
+            <a-card class="general-card">
+                <template #title>
+                  <div style="display: flex; gap: 1rem; align-items: flex-end;">
+                    {{ $t('menu.firmware') }}
+                    <t-input size="small" style="width: 200px;" v-model="state.title" @enter="searchIt">
+                      <template #suffixIcon>
+                        <search-icon :style="{ cursor: 'pointer' }" @click="searchIt"/>
+                      </template>
+                    </t-input>
+                  </div>
+                </template>
                 <template #extra>
                     <div style="margin-right: 20px;">
                         <template v-if="userStore.name">
@@ -105,6 +115,7 @@
   import { RefreshIcon } from 'tdesign-icons-vue-next';
   import axios from 'axios';
   import { Message } from '@arco-design/web-vue';
+  import { SearchIcon } from 'tdesign-icons-vue-next';
 
   const appStore = useAppStore();
   const userStore = useUserStore();
@@ -120,7 +131,8 @@
     myList: any,
     total: number,
     page: number,
-    nowpage: any
+    nowpage: any,
+    title: string
   } = reactive({
     binaryFile: undefined,
     loading: false,
@@ -130,7 +142,8 @@
     myList: [],
     total: 0,
     page: 1,
-    nowpage: []
+    nowpage: [],
+    title: ''
   })
 
   const formData = reactive({
@@ -145,7 +158,7 @@
 
   const loadit = async (page: any) => {
     state.page = page.current
-    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/firmware/index?server=1&limit=12&page=" + page.current + "&t=" + Date.now())
+    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/firmware/index?server=1&limit=12&page=" + page.current + "&title=" + state.title + "&t=" + Date.now())
     state.total = resp.data.total
     state.nowpage = resp.data.list
   }
@@ -237,6 +250,9 @@
     })
   }
 
+const searchIt = () => {
+  loadit({current: 1})
+}
   </script>
   
   <script lang="ts">

src/views/idea/image/index.vue

@@ -3,7 +3,17 @@
       <Breadcrumb :items="[$t('menu.workshop'), $t('menu.image')]" />
       <a-row :gutter="20" align="stretch">
         <a-col :span="24">
-            <a-card class="general-card" :title="$t('menu.image')">
+            <a-card class="general-card">
+              <template #title>
+                <div style="display: flex; gap: 1rem; align-items: flex-end;">
+                  {{ $t('menu.image') }}
+                  <t-input size="small" style="width: 200px;" v-model="state.title" @enter="searchIt">
+                    <template #suffixIcon>
+                      <search-icon :style="{ cursor: 'pointer' }" @click="searchIt"/>
+                    </template>
+                  </t-input>
+                </div>
+              </template>
               <template #extra>
                     <div style="margin-right: 20px;">
                         <template v-if="userStore.name">
@@ -115,6 +125,7 @@
   import axios from 'axios';
   import { Message } from '@arco-design/web-vue';
   import { RefreshIcon } from 'tdesign-icons-vue-next';
+  import { SearchIcon } from 'tdesign-icons-vue-next';
   
   const appStore = useAppStore();
   const userStore = useUserStore();
@@ -131,7 +142,8 @@
     total: number,
     page: number,
     nowpage: any,
-    dropzoneActive: boolean
+    dropzoneActive: boolean,
+    title: string
   } = reactive({
     binaryFile: undefined,
     loading: false,
@@ -142,7 +154,8 @@
     total: 0,
     page: 1,
     nowpage: [],
-    dropzoneActive: false
+    dropzoneActive: false,
+    title: ''
   })
 
   const dragEnter = (event: any) => {
@@ -196,7 +209,7 @@
 
   const loadit = async (page: any) => {
     state.page = page.current
-    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/image/index?server=1&limit=24&page=" + page.current + "&t=" + Date.now())
+    const resp : any = await axios.get("https://k5ws.vicicode.cn/api/image/index?server=1&limit=24&page=" + page.current + "&title=" + state.title + "&t=" + Date.now())
     state.total = resp.data.total
     state.nowpage = resp.data.list
   }
@@ -275,6 +288,10 @@
       }
     });
   }
+
+const searchIt = () => {
+  loadit({current: 1})
+}
   </script>
   
   <script lang="ts">

src/views/list/image/index.vue

@@ -14,6 +14,8 @@
               </table>
             </div>
             <br>
+            色彩阈值：<t-slider v-model="state.threshold" :max="256" style="width: 200px;" @change-end="changeThreshold" />
+            <br>
             <a-space>
               <a-button @click="selectFile">{{ $t('tool.selectImage') }}</a-button>
               <a-button :disabled="state.matrix.length < 64" @click="negativeIt">{{ $t('image.negative') }}</a-button>
@@ -39,12 +41,16 @@ const state : {
   binaryFile: any,
   loading: boolean,
   matrix: any,
-  mousedown: boolean
+  mousedown: boolean,
+  threshold: number,
+  cache: any
 } = reactive({
   binaryFile: undefined,
   loading: false,
   matrix: [],
-  mousedown: false
+  mousedown: false,
+  threshold: 128,
+  cache: undefined
 })
 
 const route = useRoute();
@@ -90,10 +96,11 @@ const useImg = (url: string) => {
       const ctx = canvas.getContext('2d');
       ctx?.drawImage(img, 0, 0, 128, 64);
       const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height).data;
+      state.cache = imageData;
       function getPixel(x: any, y: any) {
           const index = y * 128 + x;
           const i = index * 4;
-          return imageData[i] + imageData[i + 1] + imageData[i + 2] > 128 * 3 ? 0 : 1;
+          return imageData[i] + imageData[i + 1] + imageData[i + 2] > state.threshold * 3 ? 0 : 1;
       }
 
       const matrix = [];
@@ -127,10 +134,11 @@ const selectFile = () => {
       const ctx = canvas.getContext('2d');
       ctx?.drawImage(img, 0, 0, 128, 64);
       const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height).data;
+      state.cache = imageData;
       function getPixel(x: any, y: any) {
           const index = y * 128 + x;
           const i = index * 4;
-          return imageData[i] + imageData[i + 1] + imageData[i + 2] > 128 * 3 ? 0 : 1;
+          return imageData[i] + imageData[i + 1] + imageData[i + 2] > state.threshold * 3 ? 0 : 1;
       }
       
       const matrix = [];
@@ -214,6 +222,27 @@ const flashIt = async () => {
   state.loading = false
 }
 
+const changeThreshold = () => {
+      const imageData = state.cache;
+      function getPixel(x: any, y: any) {
+          const index = y * 128 + x;
+          const i = index * 4;
+          return imageData[i] + imageData[i + 1] + imageData[i + 2] > state.threshold * 3 ? 0 : 1;
+      }
+      
+      const matrix = [];
+
+      for (let y = 0; y < 64; y++) {
+          matrix.push([])
+          matrix[y] = []
+          for (let x = 0; x < 128; x++) {
+              const pixel = !getPixel(x, y);
+              matrix[y][x] = pixel ? '#fff' : '#000';
+          }
+      }
+
+      state.matrix = matrix
+}
 </script>
 
 <script lang="ts">