`
+// Define a custom PDFViewer class that extends HTMLElement
class PDFViewer extends HTMLElement {
- #root = null
+ #root = null // Private property to store the root node
+ /**
+ * Creates an instance of PDFViewer and initializes the component.
+ */
constructor() {
- super()
+ super() // Call the parent class constructor
+
+ // Attach a shadow DOM tree to this element
this.attachShadow({ mode: 'open' })
+ // Append the cloned template content to the shadow root
this.shadowRoot.append(template.content.cloneNode(true))
+ // Get the root node of the shadow DOM
this.#root = this.shadowRoot.getRootNode()
- //this.#root.querySelector('#print').addEventListener('click', () => {})
+ // Add event listener for the 'download' button to download the PDF
+ // this.#root.querySelector('#print').addEventListener('click', () => {})
this.#root.querySelector('#download').addEventListener('click', () => PDFRenderer.downloadPDF())
+ // Listen for 'change' events from PDFRenderer to display the PDF
PDFRenderer.addEventListener('change', (e) => {
this.showPDF(e.detail.pdf)
})
}
+ /**
+ * Displays the PDF document in the viewer.
+ * @param {string} blobUrl - The URL of the PDF blob to display.
+ */
async showPDF(blobUrl) {
+ // Load the PDF document
const loadingTask = pdfjsLib.getDocument(blobUrl)
- const canvas = this.#root.querySelector('#cnv')
- const ctx = canvas.getContext('2d')
- const scale = 1.5
- let numPage = 1
+ const canvas = this.#root.querySelector('#cnv') // Get the canvas element
+ const ctx = canvas.getContext('2d') // Get the 2D rendering context
+ const scale = 1.5 // Scale for rendering the PDF pages
+ let numPage = 1 // Current page number
- const doc = await loadingTask.promise
+ const doc = await loadingTask.promise // Wait for the PDF to be loaded
+ /**
+ * Renders a specific page of the PDF document.
+ * @param {number} numPage - The page number to display.
+ */
const showPage = async (numPage) => {
- const page = await doc.getPage(numPage)
- let viewport = page.getViewport({ scale: scale })
- canvas.height = viewport.height
- canvas.width = viewport.width
+ const page = await doc.getPage(numPage) // Get the page
+ let viewport = page.getViewport({ scale: scale }) // Get the viewport at the desired scale
+ canvas.height = viewport.height // Set canvas height
+ canvas.width = viewport.width // Set canvas width
let renderContext = {
canvasContext: ctx,
viewport: viewport
}
- page.render(renderContext)
+ await page.render(renderContext) // Render the page into the canvas
+ // Update the page number display
this.#root.querySelector('#npages').innerHTML = `Page ${numPage} / ${doc.numPages}`
}
+ // Show the first page
this.#root.querySelector('#npages').innerHTML = `Page 1 / ${doc.numPages}`
showPage(numPage)
+ // Function to go to the previous page
const prevPage = () => {
if (numPage === 1) {
- return
+ return // Do nothing if already at the first page
}
numPage--
showPage(numPage)
}
+ // Function to go to the next page
const nextPage = () => {
if (numPage >= doc.numPages) {
- return
+ return // Do nothing if already at the last page
}
numPage++
showPage(numPage)
}
+ // Add event listeners for the 'prev' and 'next' buttons
this.#root.querySelector('#prev').addEventListener('click', prevPage)
this.#root.querySelector('#next').addEventListener('click', nextPage)
}
}
+// Define the custom element 'fabaccess-pdf-viewer' associated with the PDFViewer class
customElements.define('fabaccess-pdf-viewer', PDFViewer)
diff --git a/src/PNGRenderer.mjs b/src/PNGRenderer.mjs
index f52fc7c..f7b3993 100644
--- a/src/PNGRenderer.mjs
+++ b/src/PNGRenderer.mjs
@@ -11,32 +11,43 @@ const SVG_PIXEL_HEIGHT = 108.0
const SVG_PIXEL_WIDTH = 197.0
export default class PNGRenderer {
+ /**
+ * Downloads a PNG image of a QR code for the given machine ID and size.
+ * @param {string} machineID - The machine ID to encode in the QR code.
+ * @param {number|string} height - The height of the image in millimeters.
+ * @param {number|null} [width=null] - The width of the image in millimeters (optional).
+ */
static async downloadPNG(machineID, height, width = null) {
const n = Utils.getFilename('png')
+ // Convert height from millimeters to inches
const inches = parseFloat(height) /* mm */ / 25.4 // There are 25.4 millimeters in an inch
- const pixelHeight = inches * DPI
- const pixelWidth = (pixelHeight / SVG_PIXEL_HEIGHT) * SVG_PIXEL_WIDTH
+ const pixelHeight = inches * DPI // Calculate pixel height based on DPI
+ const pixelWidth = (pixelHeight / SVG_PIXEL_HEIGHT) * SVG_PIXEL_WIDTH // Calculate pixel width proportionally
- const heightPx = Math.round(pixelHeight)
- const widthPx = Math.round(pixelWidth)
+ const heightPx = Math.round(pixelHeight) // Round pixel height to nearest integer
+ const widthPx = Math.round(pixelWidth) // Round pixel width to nearest integer
+ // Generate SVG code for the QR code
const svgCode = SVGRenderer.getCode(machineID, heightPx, widthPx)
+ // Create an offscreen canvas to render the SVG
const c = new OffscreenCanvas(widthPx, heightPx)
const ctx = c.getContext('2d')
+ // Use canvg to render SVG to canvas
const v = await canvg.Canvg.fromString(ctx, svgCode, canvg.presets.offscreen())
- v.resize(widthPx, heightPx, 'xMidYMid meet')
+ v.resize(widthPx, heightPx, 'xMidYMid meet') // Resize the SVG to fit the canvas
- await v.render()
+ await v.render() // Render the SVG onto the canvas
- let b = await c.convertToBlob()
+ let b = await c.convertToBlob() // Convert canvas to Blob
- b = await changeDpiBlob(b, DPI)
+ b = await changeDpiBlob(b, DPI) // Change the DPI of the blob
+ // Handle file download for different browsers
if (window.navigator.msSaveOrOpenBlob) {
- window.navigator.msSaveOrOpenBlob(b, n)
+ window.navigator.msSaveOrOpenBlob(b, n) // For IE and Edge
} else {
const a = document.createElement('a')
const u = URL.createObjectURL(b)
diff --git a/src/PreviewBox.mjs b/src/PreviewBox.mjs
index 99c5a6b..efaa556 100644
--- a/src/PreviewBox.mjs
+++ b/src/PreviewBox.mjs
@@ -1,65 +1,100 @@
import SVGRenderer from '/src/SVGRenderer.mjs'
+// Create a template element to define the structure of the preview box component
const template = document.createElement('template')
template.innerHTML = /* html */ `
-
- `
+
+ `
+// Define a custom PreviewBox class that extends HTMLElement
class PreviewBox extends HTMLElement {
- value = ''
- size = 0
+ value = '' // The value to be encoded in the QR code
+ size = 0 // The size of the QR code
- #root = null
- #box = null
- #animationId = 0
+ #root = null // Private property to store the root node
+ #box = null // Private property to store the box element
+ #animationId = 0 // Private property for requestAnimationFrame
+ /**
+ * Creates an instance of PreviewBox and initializes the component.
+ */
constructor() {
- super()
+ super() // Call the parent class constructor
+
+ // Attach a shadow DOM tree to this element
this.attachShadow({ mode: 'open' })
+ // Append the cloned template content to the shadow root
this.shadowRoot.append(template.content.cloneNode(true))
+ // Get the root node of the shadow DOM
this.#root = this.shadowRoot.getRootNode()
+ // Get the box element from the shadow DOM
this.#box = this.#root.getElementById('box')
+ // Initialize value and size from attributes
this.value = this.getAttribute('value') || ''
this.size = parseFloat(this.getAttribute('size'))
}
+ /**
+ * Observed attributes for the custom element.
+ * @returns {Array} - The list of attributes to observe.
+ */
static get observedAttributes() {
return ['value', 'size']
}
+ /**
+ * Called when one of the observed attributes changes.
+ * @param {string} name - The name of the attribute that changed.
+ * @param {string} oldValue - The old value of the attribute.
+ * @param {string} newValue - The new value of the attribute.
+ */
attributeChangedCallback(name, oldValue, newValue) {
if (newValue != oldValue) {
switch (name) {
case 'value':
- this[name] = newValue
+ this[name] = newValue // Update the value property
break
case 'size':
- this[name] = parseFloat(newValue)
+ this[name] = parseFloat(newValue) // Update the size property
break
}
- this.#render()
+ this.#render() // Re-render the QR code
}
}
+ /**
+ * Public method to update the QR code rendering.
+ */
update() {
this.#render()
}
+ /**
+ * Clears the content of the box element.
+ * @private
+ */
#clear() {
- while (this.#box.childNodes[0]) {
- this.#box.removeChild(this.#box.childNodes[0])
+ while (this.#box.firstChild) {
+ this.#box.removeChild(this.#box.firstChild)
}
}
+ /**
+ * Renders the QR code inside the box element.
+ * @private
+ */
#render() {
+ // Cancel any pending animation frame
window.cancelAnimationFrame(this.#animationId)
+ // Schedule the rendering in the next animation frame
this.#animationId = window.requestAnimationFrame(() => {
- this.#clear()
+ this.#clear() // Clear existing content
const time = new Date()
+ // Generate the QR code SVG and insert it into the box
this.#box.innerHTML = SVGRenderer.getCode(this.value, `${this.size}mm`)
console.log('QRCode generation time: ' + (new Date() - time) + ' ms')
@@ -67,4 +102,5 @@ class PreviewBox extends HTMLElement {
}
}
+// Define the custom element 'fabaccess-preview-box' associated with the PreviewBox class
customElements.define('fabaccess-preview-box', PreviewBox)
diff --git a/src/SVGRenderer.mjs b/src/SVGRenderer.mjs
index 78de07f..91bc818 100644
--- a/src/SVGRenderer.mjs
+++ b/src/SVGRenderer.mjs
@@ -7,6 +7,13 @@ const SVG_PIXEL_WIDTH = 197.0
export default class SVGRenderer {
static optimizeForPrint = false
+ /**
+ * Generates the SVG code for a QR code with the given machine ID and dimensions.
+ * @param {string} machineID - The machine ID to encode in the QR code.
+ * @param {number|string} height - The height of the SVG in pixels or millimeters.
+ * @param {number|null} [width=null] - The width of the SVG in pixels or millimeters (optional).
+ * @returns {string} - The generated SVG code.
+ */
static getCode(machineID, height, width = null) {
const data = {
msg: `urn:fabaccess:resource:${machineID}`,
@@ -27,6 +34,7 @@ export default class SVGRenderer {
wh += `height="${height}" `
}
+ // Generate the SVG code with placeholders for colors
let svgCode = `