v1.10.0 - copy an existing qr code

flxn · Jul 29, 2021 · 662ac5b · 662ac5b
1 parent 47f3578
commit 662ac5b
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.10.0] - 2021-07-29
+### Added
+- 📷 You can now scan an existing QR Code using your webcam and create a 3D copy!
+
 ## [1.9.0] - 2021-06-21
 ### Added
 - ✍ You can now skip the QR Code and just create a text tag!

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qrcode2stl",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -24,6 +24,7 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",
     "vue-markdown": "^2.2.4",
+    "vue-qrcode-reader": "^3.0.3",
     "worker-plugin": "^5.0.0"
   },
   "devDependencies": {

diff --git a/src/components/QRCodeMenu.vue b/src/components/QRCodeMenu.vue
@@ -1,8 +1,19 @@
 /* eslint-disable import/no-webpack-loader-syntax */
 <template>
   <div id="qrcodeMenu">
+
+    <button
+      class="button is-info is-medium is-fullwidth mb-3"
+      @click="openQRScanner">
+      <span class="icon">
+        <i class="fa fa-camera"></i>
+      </span>
+      <span>{{$t('copyExistingQRCode')}}</span>
+    </button>
+
     <!-- QR Code Options -->
     <QRCodeOptionsPanel :options="options" />
+
     <!-- 3D Options -->
     <QRCodeModelOptionsPanel :options="options" :unit="unit" />
 
@@ -33,13 +44,14 @@
         <img id="qr-image"/>
       </figure>
     </div>
+
+    <ScannerModal v-if="scannerModalVisible" @decode="onDecode"/>
   </div>
 </template>
 
 <script>
 import * as THREE from 'three';
 import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
-
 import qrcode from 'qrcode';
 import vcardjs from 'vcards-js';
 import { diff } from 'deep-object-diff';
@@ -49,7 +61,8 @@ import modelWorker from '@/model-worker';
 import QRCodeOptionsPanel from './QRCodeOptionsPanel.vue';
 // 3D settings panel
 import QRCodeModelOptionsPanel from './QRCodeModelOptionsPanel.vue';
-
+import ScannerModal from './ScannerModal.vue';
+import { bus } from '../main';
 import { save, saveAsString, saveAsArrayBuffer } from '../utils';
 
 const defaultOptions = {
@@ -136,6 +149,7 @@ export default {
   components: {
     QRCodeOptionsPanel,
     QRCodeModelOptionsPanel,
+    ScannerModal,
   },
   data() {
     return {
@@ -155,7 +169,7 @@ export default {
       blockHeight: null,
       isGenerating: false,
       generateError: null,
-      changelogModalVisible: false,
+      scannerModalVisible: false,
     };
   },
 
@@ -308,6 +322,13 @@ export default {
         }
       }
     },
+    openQRScanner() {
+      this.scannerModalVisible = true;
+    },
+    onDecode(decodedText) {
+      this.options.text = decodedText;
+      this.options.activeTabIndex = 0;
+    },
     wifiQREscape(str) {
       const regex = /([:|\\|;|,|"])/gm;
       const subst = '\\$1';
@@ -389,6 +410,8 @@ export default {
       this.options = merge(this.options, this.initData);
       this.generate3dModel();
     }
+    bus.$on('openScannerModal', () => { this.scannerModalVisible = true; });
+    bus.$on('closeScannerModal', () => { this.scannerModalVisible = false; });
   },
 };
 </script>

diff --git a/src/components/ScannerModal.vue b/src/components/ScannerModal.vue
@@ -0,0 +1,68 @@
+<template>
+  <div :class="{'modal': true, 'is-active': true}">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{$t('holdQRCodeInView')}}</p>
+        <button class="delete" aria-label="close" @click="close"></button>
+      </header>
+      <section class="modal-card-body">
+        <qrcode-stream @decode="onDecode" @init="onInit">
+            <div class="has-text-centered pt-3 pb-3" v-if="decodedData" style="background: rgba(0,0,0,0.6)">
+                <p class="is-size-4 mb-3" style="color: #fff;">
+                    {{$t('decodedQRCodeData')}}
+                </p>
+                <code class="mt-3 is-size-5">
+                    {{decodedData}}
+                </code>
+            </div>
+        </qrcode-stream>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button" @click="close">Close</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { QrcodeStream } from 'vue-qrcode-reader';
+import { bus } from '../main';
+
+export default {
+  name: 'ScannerModal',
+  components: {
+    QrcodeStream,
+  },
+  data() {
+    return {
+      scanner: null,
+      decodedData: '',
+    };
+  },
+  methods: {
+    async onInit(promise) {
+      try {
+        await promise;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    onDecode(result) {
+      console.log('Decoded QR Code:', result);
+      this.decodedData = result;
+      setTimeout(() => {
+        this.$emit('decode', result);
+        this.close();
+      }, 2000);
+    },
+    close() {
+      bus.$emit('closeScannerModal');
+    },
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
diff --git a/src/translations/de.js b/src/translations/de.js
@@ -36,6 +36,9 @@ export default {
   corner: 'Ecke',
   isGenerating: 'Generiere 3D Modell...',
   headerShareNotice: 'Teile deinen Code mit dieser URL',
+  copyExistingQRCode: 'Kopiere einen existierenden QR Code',
+  holdQRCodeInView: 'Halte den QR Code in die Kamera',
+  decodedQRCodeData: 'QR Code ausgelesen',
 
   //
   // QR Code Options Panel

diff --git a/src/translations/en.js b/src/translations/en.js
@@ -36,6 +36,9 @@ export default {
   corner: 'corner',
   isGenerating: 'Generating 3D Model...',
   headerShareNotice: 'Share your code with this URL',
+  copyExistingQRCode: 'Copy an existing QR Code',
+  holdQRCodeInView: 'Hold the QR Code into view of the camera',
+  decodedQRCodeData: 'Decoded QR Code data',
 
   //
   // QR Code Options Panel

diff --git a/yarn.lock b/yarn.lock
@@ -1428,6 +1428,20 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zxing/library@^0.18.4":
+  version "0.18.6"
+  resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.18.6.tgz#717af8c6c1fd982865e21051afdd7b470ae6674c"
+  integrity sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==
+  dependencies:
+    ts-custom-error "^3.0.0"
+  optionalDependencies:
+    "@zxing/text-encoding" "~0.9.0"
+
+"@zxing/text-encoding@~0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -1812,6 +1826,14 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+barcode-detector@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/barcode-detector/-/barcode-detector-1.0.0.tgz#e5c590affd4150c5b5b3fdd929075a7228d9bf8b"
+  integrity sha512-LZSyqjumoq2WmMOeQZ2BiYYAqwnTlkXgqKOTcJlathpFS6IejsdSb6aIGmoSyOCjBgFNATzLgMJ9shNfklnz6A==
+  dependencies:
+    "@zxing/library" "^0.18.4"
+    jsqr "^1.3.1"
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -2297,6 +2319,11 @@ caller-path@^2.0.0:
   dependencies:
     caller-callsite "^2.0.0"
 
+callforth@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/callforth/-/callforth-0.3.1.tgz#d40f610c7dd47d0011fd84bac32b3fe11cff1785"
+  integrity sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA==
+
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
@@ -5849,6 +5876,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsqr@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+  integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
 jszip@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.5.0.tgz#b4fd1f368245346658e781fec9675802489e15f6"
@@ -8348,6 +8380,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rtcpeerconnection-shim@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+  dependencies:
+    sdp "^2.6.0"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -8412,6 +8451,11 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6
     ajv "^6.12.2"
     ajv-keywords "^3.4.1"
 
+sdp@^2.12.0, sdp@^2.6.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
 seek-bzip@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.5.tgz#cfe917cb3d274bcffac792758af53173eb1fabdc"
@@ -9367,6 +9411,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-custom-error@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.2.0.tgz#ff8f80a3812bab9dc448536312da52dce1b720fb"
+  integrity sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A==
+
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -9777,6 +9826,17 @@ vue-markdown@^2.2.4:
     markdown-it-task-lists "^2.0.1"
     markdown-it-toc-and-anchor "^4.1.2"
 
+vue-qrcode-reader@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/vue-qrcode-reader/-/vue-qrcode-reader-3.0.3.tgz#8bc92257361f61f951ef89ae098f5ad0d383faa1"
+  integrity sha512-mDcDiZRpTkOY1jF9OxLvpynsiDvZ+/uNmlNs62rusLQqZ7J+q3fhlBAENQy8o2Imhw8y2MLfFfG35z8zA8NgEw==
+  dependencies:
+    barcode-detector "^1.0.0"
+    callforth "^0.3.1"
+    core-js "^3.6.5"
+    vue "^2.6.11"
+    webrtc-adapter "7.7.0"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -9964,6 +10024,14 @@ webpack@^4.0.0:
     watchpack "^1.6.1"
     webpack-sources "^1.4.1"
 
+[email protected]:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz#e56ff25f925177ac553a7c49323ca4108d2b5f4d"
+  integrity sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==
+  dependencies:
+    rtcpeerconnection-shim "^1.2.15"
+    sdp "^2.12.0"
+
 [email protected]:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"