@things-factory/barcode-ui 4.3.237 → 4.3.253

package/client/components/barcode-input.js

@@ -9,7 +9,9 @@ export class BarcodeInput extends LitElement {
       bcWidth: Number,
       bcheight: Number,
       bcScale: Number,
-      value: String
+      value: String,
+      showLogo: Boolean,
+      logo: String
     }
   }
 
@@ -49,6 +51,8 @@ export class BarcodeInput extends LitElement {
         .bcWidth=${this.bcWidth}
         .bcHeight=${this.bcHeight}
         .bcScale=${this.bcScale}
+        .showLogo=${this.showLogo}
+        .logo=${this.logo}
       ></barcode-tag>
     `
   }

package/client/components/barcode-tag.js

@@ -10,7 +10,9 @@ export class BarcodeTag extends LitElement {
       bcScale: Number,
       value: String,
       validity: Boolean,
-      padding: Number
+      padding: Number,
+      showLogo: Boolean,
+      logo: String
     }
   }
 
@@ -55,7 +57,7 @@ export class BarcodeTag extends LitElement {
     this.addEventListener('click', this._downloadQR)
   }
 
-  _downloadQR() {
+  async _downloadQR() {
     if (this.value && this.value != '') {
       let link = document.createElement('a')
       let canvas = this.shadowRoot.querySelector('canvas')
@@ -72,6 +74,9 @@ export class BarcodeTag extends LitElement {
         backgroundcolor: 'ffffff'
       }
       canvas = bwipjs.toCanvas(canvas, options)
+      if (this.showLogo) {
+        await this.insertLogo(canvas)
+      }
 
       link.download = `${this.value}` + '-barcode.png'
       link.href = canvas.toDataURL()
@@ -85,6 +90,10 @@ export class BarcodeTag extends LitElement {
         // includetext: true,
         textalign: 'center'
       })
+
+      if (this.showLogo) {
+        await this.insertLogo(canvas)
+      }
     }
   }
 
@@ -103,6 +112,9 @@ export class BarcodeTag extends LitElement {
     try {
       bwipjs.toCanvas(canvas, options)
 
+      if (this.showLogo) {
+        this.insertLogo(canvas)
+      }
       this.validity = true
     } catch (err) {
       console.error(err)
@@ -110,6 +122,30 @@ export class BarcodeTag extends LitElement {
       this.validity = false
     }
   }
+
+  async insertLogo(canvas) {
+    let context = canvas.getContext('2d')
+    let base_image = new Image()
+    base_image.src = this.logo || '/assets/manifest/icon-96x96.png'
+
+    let imageSize = {
+      width: canvas.width / 6,
+      height: canvas.height / 6
+    }
+
+    let logoSize = [
+      (canvas.width - imageSize.width) / 2,
+      (canvas.height - imageSize.height) / 2,
+      imageSize.width,
+      imageSize.height
+    ]
+
+    context.fillStyle = '#ffffff'
+    context.fillRect(...logoSize)
+
+    await base_image.decode()
+    context.drawImage(base_image, ...logoSize)
+  }
 }
 
 customElements.define('barcode-tag', BarcodeTag)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/barcode-ui",
-  "version": "4.3.237",
+  "version": "4.3.253",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@operato/layout": "^0.4.6",
-    "@things-factory/shell": "^4.3.237",
+    "@things-factory/shell": "^4.3.253",
     "bwip-js": "^2.0.11"
   },
-  "gitHead": "90cda1a8580b7be252a474c138bea4b6870d7dfc"
+  "gitHead": "d4bb8ac7f7f9bfe3bbe6007576881c0be36060a3"
 }