From 3bf6205ff74f9587529123a1a3a5be74749cc133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Thu, 8 Oct 2020 16:37:17 +0200 Subject: [PATCH] Display qr code in tag properties (#7092) --- package.json | 1 + src/panels/config/tags/dialog-tag-detail.ts | 66 +++++++++++++++++++++ src/translations/en.json | 4 +- yarn.lock | 55 ++++++++++++++++- 4 files changed, 122 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 4ceb723a65..1193b0e2ae 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "node-vibrant": "^3.1.5", "proxy-polyfill": "^0.3.1", "punycode": "^2.1.1", + "qrcode": "^1.4.4", "regenerator-runtime": "^0.13.2", "resize-observer-polyfill": "^1.5.1", "roboto-fontface": "^0.10.0", diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts index ab007e8323..6e7cd00218 100644 --- a/src/panels/config/tags/dialog-tag-detail.ts +++ b/src/panels/config/tags/dialog-tag-detail.ts @@ -10,6 +10,7 @@ import { property, TemplateResult, } from "lit-element"; + import { fireEvent } from "../../../common/dom/fire_event"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-formfield"; @@ -21,6 +22,8 @@ import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { TagDetailDialogParams } from "./show-dialog-tag-detail"; +const QR_LOGO_URL = "/static/icons/favicon-192x192.png"; + @customElement("dialog-tag-detail") class DialogTagDetail extends LitElement implements HassDialog { @@ -36,6 +39,8 @@ class DialogTagDetail extends LitElement @internalProperty() private _submitting = false; + @internalProperty() private _qrCode?: TemplateResult; + public showDialog(params: TagDetailDialogParams): void { this._params = params; this._error = undefined; @@ -49,6 +54,7 @@ class DialogTagDetail extends LitElement public closeDialog(): void { this._params = undefined; + this._qrCode = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -107,6 +113,36 @@ class DialogTagDetail extends LitElement >` : ""} + ${this._params.entry + ? html` +
+

+ ${this.hass!.localize( + "ui.panel.config.tags.detail.usage", + "companion_link", + html`${this.hass!.localize( + "ui.panel.config.tags.detail.companion_apps" + )}` + )} +

+
+ +
+ ${this._qrCode + ? this._qrCode + : html` + Generate QR code + + `} +
+ ` + : ``} ${this._params.entry ? html` @@ -192,6 +228,33 @@ class DialogTagDetail extends LitElement } } + private async _generateQR() { + const qrcode = await import("qrcode"); + const canvas = await qrcode.toCanvas( + `https://home-assistant.io/tag/${this._params?.entry?.id}`, + { + width: 180, + errorCorrectionLevel: "Q", + } + ); + const context = canvas.getContext("2d"); + + const imageObj = new Image(); + imageObj.src = QR_LOGO_URL; + await new Promise((resolve) => { + imageObj.onload = resolve; + }); + context.drawImage( + imageObj, + canvas.width / 3, + canvas.height / 3, + canvas.width / 3, + canvas.height / 3 + ); + + this._qrCode = html``; + } + static get styles(): CSSResult[] { return [ haStyleDialog, @@ -199,6 +262,9 @@ class DialogTagDetail extends LitElement a { color: var(--primary-color); } + #qr { + text-align: center; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index c69b86bb32..aee5a58d34 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -770,7 +770,9 @@ "delete": "Delete", "update": "Update", "create": "Create", - "create_and_write": "Create and Write" + "create_and_write": "Create and Write", + "usage": "A tag can trigger an automation when scanned, you can use NFC tags, QR codes or any other kind of tag. Use our {companion_link} to write this tag to a programmable NFC tag or create a QR code below.", + "companion_apps": "companion apps" } }, "helpers": { diff --git a/yarn.lock b/yarn.lock index 5a9deef3c8..9cb22ba393 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4936,6 +4936,19 @@ browserslist@^4.8.3: electron-to-chromium "^1.3.349" node-releases "^1.1.49" +buffer-alloc-unsafe@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0" + integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg== + +buffer-alloc@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec" + integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow== + dependencies: + buffer-alloc-unsafe "^1.1.0" + buffer-fill "^1.0.0" + buffer-equal@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-0.0.1.tgz#91bc74b11ea405bc916bc6aa908faafa5b4aac4b" @@ -4946,7 +4959,12 @@ buffer-equal@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe" integrity sha1-WWFrSYME1Var1GaWayLu2j7KX74= -buffer-from@^1.0.0, buffer-from@^1.1.0: +buffer-fill@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c" + integrity sha1-+PeLdniYiO858gXNY39o5wISKyw= + +buffer-from@^1.0.0, buffer-from@^1.1.0, buffer-from@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== @@ -4978,6 +4996,14 @@ buffer@^5.2.0: base64-js "^1.0.2" ieee754 "^1.1.4" +buffer@^5.4.3: + version "5.6.0" + resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786" + integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw== + dependencies: + base64-js "^1.0.2" + ieee754 "^1.1.4" + builtin-modules@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" @@ -6273,6 +6299,11 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" +dijkstrajs@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b" + integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs= + dir-glob@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034" @@ -9118,6 +9149,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= +isarray@^2.0.1: + version "2.0.5" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + isbinaryfile@^4.0.0: version "4.0.6" resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b" @@ -11577,7 +11613,7 @@ plugin-error@^1.0.1: arr-union "^3.1.0" extend-shallow "^3.0.2" -pngjs@^3.0.0, pngjs@^3.3.3: +pngjs@^3.0.0, pngjs@^3.3.0, pngjs@^3.3.3: version "3.4.0" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f" integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w== @@ -11795,6 +11831,19 @@ pupa@^2.0.0: dependencies: escape-goat "^2.0.0" +qrcode@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83" + integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q== + dependencies: + buffer "^5.4.3" + buffer-alloc "^1.2.0" + buffer-from "^1.1.1" + dijkstrajs "^1.0.1" + isarray "^2.0.1" + pngjs "^3.3.0" + yargs "^13.2.4" + qs@6.7.0: version "6.7.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" @@ -14964,7 +15013,7 @@ yargs@12.0.5: y18n "^3.2.1 || ^4.0.0" yargs-parser "^11.1.1" -yargs@13.3.2, yargs@^13.3.0: +yargs@13.3.2, yargs@^13.2.4, yargs@^13.3.0: version "13.3.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==