From fe7cca90a673f5951597246b6f17867ab78c9b1b Mon Sep 17 00:00:00 2001 From: Daniel Lorigan Date: Tue, 24 Dec 2024 12:04:33 -0800 Subject: [PATCH] Img updates (#54) * For advance directive query, use first returned patient instead of last * Add treatment type to comfort treatment POLST note * Update POLST formatting and add treatment type to comfort treatment lines * Update default demo server AD patient to Maria SEATTLE Gravitate * Only display resource types in selector that have at least one resource * Scale down site images * Preload banner images * Upscaled wa verify + img * Logo image updates - add svg and larger png if needed * Remove unused merge-images library * Merge qr code header and footer with main image * Fix up health link form titles * Prevent navbar collapse on scroll inside navbar dropdown (language menu, etc) --- package-lock.json | 7 - package.json | 1 - src/app.html | 7 + src/lib/components/app/HealthLink.svelte | 247 ++++--- src/lib/components/layout/Banner.svelte | 2 +- src/lib/components/layout/LanguageMenu.svelte | 2 +- src/routes/(app)/+layout.svelte | 2 +- src/routes/+layout.svelte | 1 + static/img/doh_logo_doh-black.png | Bin 77809 -> 43233 bytes static/img/favicon-SMART.png | Bin 6198 -> 4194 bytes static/img/full-size/doh_logo_doh-black.png | Bin 0 -> 77809 bytes static/img/full-size/favicon-SMART.png | Bin 0 -> 6198 bytes static/img/full-size/favicon-SMART.svg | 14 + static/img/full-size/menu.png | Bin 0 -> 3763 bytes static/img/full-size/qr-banner-bottom.png | Bin 0 -> 133288 bytes static/img/full-size/qr-banner-top.png | Bin 0 -> 23840 bytes static/img/full-size/qrcode-logo.png | Bin 0 -> 6493 bytes static/img/{ => full-size}/smart-logo.svg | 0 static/img/full-size/waverifylogo.png | Bin 0 -> 22482 bytes .../img/full-size/waverifypluslogo-large.png | Bin 0 -> 885757 bytes static/img/full-size/waverifypluslogo.png | Bin 0 -> 22217 bytes static/img/full-size/waverifypluslogobold.png | Bin 0 -> 67713 bytes static/img/menu.png | Bin 3763 -> 1547 bytes static/img/qr-banner-bottom.png | Bin 133288 -> 63890 bytes static/img/qr-banner-top.png | Bin 23840 -> 8471 bytes static/img/qrcode-logo.png | Bin 6493 -> 2987 bytes static/img/waverifylogo.png | Bin 22482 -> 9296 bytes static/img/waverifypluslogo.png | Bin 22217 -> 9490 bytes static/img/waverifypluslogo.svg | 637 ++++++++++++++++++ static/img/waverifypluslogobold.png | Bin 67713 -> 24183 bytes 30 files changed, 801 insertions(+), 119 deletions(-) create mode 100644 static/img/full-size/doh_logo_doh-black.png create mode 100644 static/img/full-size/favicon-SMART.png create mode 100644 static/img/full-size/favicon-SMART.svg create mode 100644 static/img/full-size/menu.png create mode 100644 static/img/full-size/qr-banner-bottom.png create mode 100644 static/img/full-size/qr-banner-top.png create mode 100644 static/img/full-size/qrcode-logo.png rename static/img/{ => full-size}/smart-logo.svg (100%) create mode 100644 static/img/full-size/waverifylogo.png create mode 100644 static/img/full-size/waverifypluslogo-large.png create mode 100644 static/img/full-size/waverifypluslogo.png create mode 100644 static/img/full-size/waverifypluslogobold.png create mode 100644 static/img/waverifypluslogo.svg diff --git a/package-lock.json b/package-lock.json index 65237d72..831c6da6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,6 @@ "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-static": "^2.0.0", "@sveltejs/kit": "^1.5.0", - "merge-images": "^2.0.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.8.1", "svelte": "^3.55.1", @@ -11413,12 +11412,6 @@ "optional": true, "peer": true }, - "node_modules/merge-images": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-images/-/merge-images-2.0.0.tgz", - "integrity": "sha512-bpI4j54n/Zl6ZTgxaR3xWou/lqI53RAAt8peXijW37BKqoON83LQ7XCZqtFiwzBfEXIws1isYyR06584yffAyA==", - "dev": true - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/package.json b/package.json index d11ad4d7..a5aac252 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-static": "^2.0.0", "@sveltejs/kit": "^1.5.0", - "merge-images": "^2.0.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.8.1", "svelte": "^3.55.1", diff --git a/src/app.html b/src/app.html index 62862e56..eff8d754 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,13 @@ + + + + + + + %sveltekit.head% diff --git a/src/lib/components/app/HealthLink.svelte b/src/lib/components/app/HealthLink.svelte index b5f39fee..2775fc77 100644 --- a/src/lib/components/app/HealthLink.svelte +++ b/src/lib/components/app/HealthLink.svelte @@ -23,7 +23,6 @@ ModalFooter, Row } from 'sveltestrap'; - import mergeImages from 'merge-images'; import { goto } from '$app/navigation'; import type { Writable } from 'svelte/store'; import type { SHLAdminParams, SHLClient } from '$lib/utils/managementClient'; @@ -45,18 +44,13 @@ let copyNotice = ''; let href: Promise; - let qrCode: Promise; + let qrCodeImage: Promise; let showPassword = false; $: type = showPassword ? 'text' : 'password'; $: icon = showPassword ? 'eye-fill' : 'eye-slash-fill'; $: { href = getUrl(shl); - } - - $: { - qrCode = href - .then((r) => QRCode.toDataURL(r, { errorCorrectionLevel: 'M' })) - // .then(qrCode => mergeImages([qrCode, {src: '/img/qrcode-logo.png', x:0, y:4}])); + qrCodeImage = createQrCodeImage(href); } let canShare = navigator?.canShare?.({ url: 'https://example.com', title: 'Title' }); @@ -74,6 +68,48 @@ } }); + // Combine header, qr code, and footer images into one image + async function createQrCodeImage(href: Promise) { + // create the qr code image + const qrCodeURI = await href.then(href => QRCode.toDataURL(href, { errorCorrectionLevel: 'M' })); + const qrCode = await new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve(img); + img.onerror = (err) => reject(new Error('Failed to load image from data URI.')); + img.src = qrCodeURI; + }) as HTMLImageElement; + // get the header and footer images + const header = document.getElementById('qrcode-header') as HTMLImageElement; + const footer = document.getElementById('qrcode-footer') as HTMLImageElement; + // scale the images down to match the smallest size + const targetWidth: number = Math.min(qrCode.width, header.width, footer.width); + const headerHeight: number = (header.height / header.width) * targetWidth; + const qrCodeImageHeight: number = (qrCode.height / qrCode.width) * targetWidth; + const footerHeight: number = (footer.height / footer.width) * targetWidth; + + // get the canvas and combine the images + const canvas = document.getElementById('qrcode') as HTMLCanvasElement; + if (!canvas) { + throw Error('Could not get qrcode canvas element'); + } + const ctx = canvas.getContext('2d'); + if (!ctx) { + throw Error('Could not get canvas context'); + } + const marginX = 5; + const marginY = 10; + canvas.width = targetWidth + marginX * 2; + canvas.height = headerHeight + qrCodeImageHeight + footerHeight + marginY * 2; + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(header, marginX, marginY, targetWidth, headerHeight); + ctx.drawImage(qrCode, marginX, headerHeight + marginY, targetWidth, qrCodeImageHeight); + ctx.drawImage(footer, marginX, headerHeight + qrCodeImageHeight + marginY, targetWidth, footerHeight); + + const fullImageDataUrl = canvas.toDataURL('image/png'); + return fullImageDataUrl; + } + async function getUrl(shl: SHLAdminParams) { let shlMin = { id: shl.id, @@ -125,73 +161,76 @@ {/if} + + + + +