mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Display qr code in tag properties (#7092)
This commit is contained in:
Thomas Lovén
GitHub
parent
c7f4986e61
commit
3bf6205ff7
@ -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",
|
||||
|
||||
@ -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<TagDetailDialogParams> {
|
||||
@ -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
|
||||
></paper-input>`
|
||||
: ""}
|
||||
</div>
|
||||
${this._params.entry
|
||||
? html`
|
||||
<div>
|
||||
<p>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.tags.detail.usage",
|
||||
"companion_link",
|
||||
html`<a
|
||||
href="https://companion.home-assistant.io/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.config.tags.detail.companion_apps"
|
||||
)}</a
|
||||
>`
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="qr">
|
||||
${this._qrCode
|
||||
? this._qrCode
|
||||
: html`
|
||||
<mwc-button @click=${this._generateQR}
|
||||
>Generate QR code
|
||||
</mwc-button>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
: ``}
|
||||
</div>
|
||||
${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`<img src=${canvas.toDataURL()}></img>`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyleDialog,
|
||||
@ -199,6 +262,9 @@ class DialogTagDetail extends LitElement
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
#qr {
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@ -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": {
|
||||
|
||||
55
yarn.lock
55
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==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user