feat: add scanner url to qrcode

qifi-dev · Oct 10, 2024 · 79fbfd2 · 79fbfd2
1 parent c0e7f5d
commit 79fbfd2
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 26 deletions.
diff --git a/app/components/Generate.vue b/app/components/Generate.vue
@@ -10,9 +10,11 @@ const props = withDefaults(defineProps<{
   contentType?: string
   maxScansPerSecond: number
   sliceSize: number
+  prefix?: string
 }>(), {
   maxScansPerSecond: 20,
   sliceSize: 1000,
+  prefix: '',
 })
 
 const count = ref(0)
@@ -36,7 +38,7 @@ onMounted(() => {
     block.value = data
     const binary = blockToBinary(data)
     const str = fromUint8Array(binary)
-    svg.value = renderSVG(str, { border: 5 })
+    svg.value = renderSVG(props.prefix + str, { border: 5 })
     const now = performance.now()
     renderTime.value = now - frame
     frame = now

diff --git a/app/components/InputCheckbox.vue b/app/components/InputCheckbox.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const checked = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <div border="~ base gray/25 rounded-lg" flex="~ gap-2 items-center justify-center" relative h-7 w-7 p0.5>
+    <input v-model="checked" type="checkbox" absolute inset-0 z-1 op0.1>
+    <div i-carbon-checkmark size-5 :class="checked ? 'op100' : 'op0'" />
+  </div>
+</template>
diff --git a/app/components/InputFile.vue b/app/components/InputFile.vue
@@ -19,7 +19,7 @@ function onFileChange(e: Event) {
     text="hover:neutral-700 active:neutral-500 dark:hover:neutral-300 dark:active:neutral-400"
     flex="~"
     transition="all ease-in-out"
-    cursor-pointer items-center justify-center overflow-hidden rounded-md duration-300
+    cursor-pointer items-center justify-center overflow-hidden rounded-lg duration-300
   >
     <input
       type="file"

diff --git a/app/components/Scan.vue b/app/components/Scan.vue
@@ -243,22 +243,27 @@ function toDataURL(data: Uint8Array | string | any, type: string): string {
 let decoderInitPromise: Promise<any> | undefined
 async function scanFrame(result: QrScanner.ScanResult) {
   cameraSignalStatus.value = CameraSignalStatus.Ready
+  let strData = result.data
 
-  if (!result.data)
+  if (!strData)
     return
 
-  bytesReceived.value += result.data.length
+  if (strData.startsWith('http')) {
+    strData = strData.slice(strData.indexOf('#') + 1)
+  }
+
+  bytesReceived.value += strData.length
   totalValidBytesReceived.value = decoderStatus.value.encodedCount * (decoderStatus.value.meta?.data.length ?? 0)
 
   // Do not process the same QR code twice
-  if (cached.has(result.data))
+  if (cached.has(strData))
     return
-  if (cached.size && result.data) {
+  if (cached.size && strData) {
     shutterCount.value += 1
   }
 
   error.value = undefined
-  const binary = toUint8Array(result.data)
+  const binary = toUint8Array(strData)
   const data = binaryToBlock(binary)
   // Data set changed, reset decoder
   if (checksum.value !== data.checksum) {
@@ -286,7 +291,7 @@ async function scanFrame(result: QrScanner.ScanResult) {
   }
   await decoderInitPromise
 
-  cached.add(result.data)
+  cached.add(strData)
   k.value = data.k
 
   data.indices.map(i => pluse(i))

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -18,6 +18,15 @@ const filename = ref<string | undefined>()
 const contentType = ref<string | undefined>()
 const data = ref<Uint8Array | null>(null)
 
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+  if (route.hash.length > 1) {
+    router.replace('/scan')
+  }
+})
+
 async function onFileChange(file?: File) {
   if (!file) {
     readPhase.value = ReadPhase.Idle
@@ -45,34 +54,34 @@ async function onFileChange(file?: File) {
     data.value = null
   }
 }
+
+const config = useRuntimeConfig()
+
+const isPrefixed = ref(true)
+const prefix = computed(() => {
+  if (!isPrefixed.value) {
+    return ''
+  }
+  if (config.public.qrcodePrefix) {
+    return `${config.public.qrcodePrefix}#`
+  }
+  return `${location.href}${location.pathname}#`
+})
 </script>
 
 <template>
-  <div px="4" flex="~ col" h-full w-full gap-4 pb-8 pt-2>
-    <div flex="~ col sm:row" gap="6 sm:2">
-      <InputFile @file="onFileChange">
+  <div px="4" flex="~ col-reverse sm:col" h-full w-full gap-4 pb-8 pt-2>
+    <div grid="~ cols-1 sm:cols-3 wrap" gap="6 sm:(x-5 y-3)">
+      <InputFile border="~ gray/25" shadow="~ gray/25" @file="onFileChange">
         <div text="neutral-600 dark:neutral-400" min-w-46 flex justify-center px-4 py-2>
           <div i-carbon:document-add text-lg />
           <p font-semi-bold pl-2 text-nowrap>
             <span>Change File</span>
           </p>
         </div>
       </InputFile>
-      <div w-full inline-flex flex-1 flex-row items-center>
-        <span min-w-30>
-          <span pr-2 text-neutral-400>Ideal FPS</span>
-          <span font-mono>{{ throttledFps.toFixed(0) }}hz</span>
-        </span>
-        <InputSlide
-          v-model="throttledFps"
-          :min="1"
-          :max="60"
-          smooth
-          w-full flex-1
-        />
-      </div>
-      <div w-full inline-flex flex-1 flex-row items-center>
-        <span min-w-30>
+      <div w-full inline-flex flex-1 flex-row items-center sm:col-span-2>
+        <span min-w-32>
           <span pr-2 text-neutral-400>Slice Size</span>
         </span>
         <input
@@ -84,6 +93,27 @@ async function onFileChange(file?: File) {
           w-full flex-1 bg-transparent px2 py1 text-sm shadow-sm
         >
       </div>
+      <div>
+        <label inline-flex flex-row select-none items-center>
+          <span min-w-32>
+            <span text-neutral-400>Scanner URL</span>
+          </span>
+          <InputCheckbox v-model="isPrefixed" />
+        </label>
+      </div>
+      <div w-full inline-flex flex-1 flex-row items-center sm:col-span-2>
+        <span min-w-32>
+          <span pr-2 text-neutral-400>Ideal FPS</span>
+          <span font-mono>{{ throttledFps.toFixed(0) }}hz</span>
+        </span>
+        <InputSlide
+          v-model="throttledFps"
+          :min="1"
+          :max="60"
+          smooth
+          w-full flex-1
+        />
+      </div>
     </div>
     <div
       v-if="readPhase === ReadPhase.Ready && data"
@@ -95,6 +125,7 @@ async function onFileChange(file?: File) {
         :data="data"
         :filename="filename"
         :content-type="contentType"
+        :prefix="prefix"
         w-full
       />
     </div>

diff --git a/cspell.config.yaml b/cspell.config.yaml
@@ -10,6 +10,7 @@ words:
   - Nuxt
   - pako
   - qifi
+  - QRCODE
   - Soliton
   - timeseries
   - unocss

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -19,6 +19,12 @@ export default defineNuxtConfig({
     'luby-transform': fileURLToPath(new URL('./packages/luby-transform/src/index.ts', import.meta.url)),
   },
 
+  runtimeConfig: {
+    public: {
+      qrcodePrefix: '',
+    },
+  },
+
   experimental: {
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ words: @@
       - Nuxt
       - pako
       - qifi
+      - QRCODE
       - Soliton
       - timeseries
       - unocss
@@ Expand Down @@