1/* 2 * QR Code generator input demo (TypeScript) 3 * 4 * Copyright (c) Project Nayuki. (MIT License) 5 * https://www.nayuki.io/page/qr-code-generator-library 6 * 7 * Permission is hereby granted, free of charge, to any person obtaining a copy of 8 * this software and associated documentation files (the "Software"), to deal in 9 * the Software without restriction, including without limitation the rights to 10 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 11 * the Software, and to permit persons to whom the Software is furnished to do so, 12 * subject to the following conditions: 13 * - The above copyright notice and this permission notice shall be included in 14 * all copies or substantial portions of the Software. 15 * - The Software is provided "as is", without warranty of any kind, express or 16 * implied, including but not limited to the warranties of merchantability, 17 * fitness for a particular purpose and noninfringement. In no event shall the 18 * authors or copyright holders be liable for any claim, damages or other 19 * liability, whether in an action of contract, tort or otherwise, arising from, 20 * out of or in connection with the Software or the use or other dealings in the 21 * Software. 22 */ 23 24"use strict"; 25 26 27namespace app { 28 29 function initialize(): void { 30 getElem("loading").style.display = "none"; 31 getElem("loaded").style.removeProperty("display"); 32 let elems = document.querySelectorAll("input[type=number], input[type=text], textarea"); 33 for (let el of elems) { 34 if (el.id.indexOf("version-") != 0) 35 (el as any).oninput = redrawQrCode; 36 } 37 elems = document.querySelectorAll("input[type=radio], input[type=checkbox]"); 38 for (let el of elems) 39 (el as HTMLInputElement).onchange = redrawQrCode; 40 redrawQrCode(); 41 } 42 43 44 function redrawQrCode(): void { 45 // Show/hide rows based on bitmap/vector image output 46 const bitmapOutput: boolean = getInput("output-format-bitmap").checked; 47 const scaleRow : HTMLElement = getElem("scale-row"); 48 const svgXmlRow: HTMLElement = getElem("svg-xml-row"); 49 if (bitmapOutput) { 50 scaleRow.style.removeProperty("display"); 51 svgXmlRow.style.display = "none"; 52 } else { 53 scaleRow.style.display = "none"; 54 svgXmlRow.style.removeProperty("display"); 55 } 56 const svgXml = getElem("svg-xml-output") as HTMLTextAreaElement; 57 svgXml.value = ""; 58 59 // Reset output images in case of early termination 60 const canvas = getElem("qrcode-canvas") as HTMLCanvasElement; 61 const svg = (document.getElementById("qrcode-svg") as Element) as SVGElement; 62 canvas.style.display = "none"; 63 svg.style.display = "none"; 64 65 // Returns a QrCode.Ecc object based on the radio buttons in the HTML form. 66 function getInputErrorCorrectionLevel(): qrcodegen.QrCode.Ecc { 67 if (getInput("errcorlvl-medium").checked) 68 return qrcodegen.QrCode.Ecc.MEDIUM; 69 else if (getInput("errcorlvl-quartile").checked) 70 return qrcodegen.QrCode.Ecc.QUARTILE; 71 else if (getInput("errcorlvl-high").checked) 72 return qrcodegen.QrCode.Ecc.HIGH; 73 else // In case no radio button is depressed 74 return qrcodegen.QrCode.Ecc.LOW; 75 } 76 77 // Get form inputs and compute QR Code 78 const ecl: qrcodegen.QrCode.Ecc = getInputErrorCorrectionLevel(); 79 const text: string = (getElem("text-input") as HTMLTextAreaElement).value; 80 const segs: Array<qrcodegen.QrSegment> = qrcodegen.QrSegment.makeSegments(text); 81 const minVer: number = parseInt(getInput("version-min-input").value, 10); 82 const maxVer: number = parseInt(getInput("version-max-input").value, 10); 83 const mask: number = parseInt(getInput("mask-input").value, 10); 84 const boostEcc: boolean = getInput("boost-ecc-input").checked; 85 const qr: qrcodegen.QrCode = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc); 86 87 // Draw image output 88 const border: number = parseInt(getInput("border-input").value, 10); 89 const lightColor: string = getInput("light-color-input").value; 90 const darkColor : string = getInput("dark-color-input" ).value; 91 if (border < 0 || border > 100) 92 return; 93 if (bitmapOutput) { 94 const scale: number = parseInt(getInput("scale-input").value, 10); 95 if (scale <= 0 || scale > 30) 96 return; 97 drawCanvas(qr, scale, border, lightColor, darkColor, canvas); 98 canvas.style.removeProperty("display"); 99 } else { 100 const code: string = toSvgString(qr, border, lightColor, darkColor); 101 const viewBox: string = (/ viewBox="([^"]*)"/.exec(code) as RegExpExecArray)[1]; 102 const pathD: string = (/ d="([^"]*)"/.exec(code) as RegExpExecArray)[1]; 103 svg.setAttribute("viewBox", viewBox); 104 (svg.querySelector("path") as Element).setAttribute("d", pathD); 105 (svg.querySelector("rect") as Element).setAttribute("fill", lightColor); 106 (svg.querySelector("path") as Element).setAttribute("fill", darkColor); 107 svg.style.removeProperty("display"); 108 svgXml.value = code; 109 } 110 111 // Returns a string to describe the given list of segments. 112 function describeSegments(segs: Array<qrcodegen.QrSegment>): string { 113 if (segs.length == 0) 114 return "none"; 115 else if (segs.length == 1) { 116 const mode: qrcodegen.QrSegment.Mode = segs[0].mode; 117 const Mode = qrcodegen.QrSegment.Mode; 118 if (mode == Mode.NUMERIC ) return "numeric"; 119 if (mode == Mode.ALPHANUMERIC) return "alphanumeric"; 120 if (mode == Mode.BYTE ) return "byte"; 121 if (mode == Mode.KANJI ) return "kanji"; 122 return "unknown"; 123 } else 124 return "multiple"; 125 } 126 127 // Returns the number of Unicode code points in the given UTF-16 string. 128 function countUnicodeChars(str: string): number { 129 let result: number = 0; 130 for (let i = 0; i < str.length; i++, result++) { 131 const c: number = str.charCodeAt(i); 132 if (c < 0xD800 || c >= 0xE000) 133 continue; 134 else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate 135 i++; 136 const d: number = str.charCodeAt(i); 137 if (0xDC00 <= d && d < 0xE000) // Low surrogate 138 continue; 139 } 140 throw new RangeError("Invalid UTF-16 string"); 141 } 142 return result; 143 } 144 145 // Show the QR Code symbol's statistics as a string 146 getElem("statistics-output").textContent = `QR Code version = ${qr.version}, ` + 147 `mask pattern = ${qr.mask}, ` + 148 `character count = ${countUnicodeChars(text)},\n` + 149 `encoding mode = ${describeSegments(segs)}, ` + 150 `error correction = level ${"LMQH".charAt(qr.errorCorrectionLevel.ordinal)}, ` + 151 `data bits = ${qrcodegen.QrSegment.getTotalBits(segs, qr.version) as number}.`; 152 } 153 154 155 // Draws the given QR Code, with the given module scale and border modules, onto the given HTML 156 // canvas element. The canvas's width and height is resized to (qr.size + border * 2) * scale. 157 // The drawn image is purely dark and light, and fully opaque. 158 // The scale must be a positive integer and the border must be a non-negative integer. 159 function drawCanvas(qr: qrcodegen.QrCode, scale: number, border: number, lightColor: string, darkColor: string, canvas: HTMLCanvasElement): void { 160 if (scale <= 0 || border < 0) 161 throw new RangeError("Value out of range"); 162 const width: number = (qr.size + border * 2) * scale; 163 canvas.width = width; 164 canvas.height = width; 165 let ctx = canvas.getContext("2d") as CanvasRenderingContext2D; 166 for (let y = -border; y < qr.size + border; y++) { 167 for (let x = -border; x < qr.size + border; x++) { 168 ctx.fillStyle = qr.getModule(x, y) ? darkColor : lightColor; 169 ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale); 170 } 171 } 172 } 173 174 175 // Returns a string of SVG code for an image depicting the given QR Code, with the given number 176 // of border modules. The string always uses Unix newlines (\n), regardless of the platform. 177 function toSvgString(qr: qrcodegen.QrCode, border: number, lightColor: string, darkColor: string): string { 178 if (border < 0) 179 throw new RangeError("Border must be non-negative"); 180 let parts: Array<string> = []; 181 for (let y = 0; y < qr.size; y++) { 182 for (let x = 0; x < qr.size; x++) { 183 if (qr.getModule(x, y)) 184 parts.push(`M${x + border},${y + border}h1v1h-1z`); 185 } 186 } 187 return `<?xml version="1.0" encoding="UTF-8"?> 188<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 189<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 ${qr.size + border * 2} ${qr.size + border * 2}" stroke="none"> 190 <rect width="100%" height="100%" fill="${lightColor}"/> 191 <path d="${parts.join(" ")}" fill="${darkColor}"/> 192</svg> 193` 194 } 195 196 197 export function handleVersionMinMax(which: "min"|"max"): void { 198 const minElem: HTMLInputElement = getInput("version-min-input"); 199 const maxElem: HTMLInputElement = getInput("version-max-input"); 200 let minVal: number = parseInt(minElem.value, 10); 201 let maxVal: number = parseInt(maxElem.value, 10); 202 minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); 203 maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); 204 if (which == "min" && minVal > maxVal) 205 maxVal = minVal; 206 else if (which == "max" && maxVal < minVal) 207 minVal = maxVal; 208 minElem.value = minVal.toString(); 209 maxElem.value = maxVal.toString(); 210 redrawQrCode(); 211 } 212 213 214 function getElem(id: string): HTMLElement { 215 const result: HTMLElement|null = document.getElementById(id); 216 if (result instanceof HTMLElement) 217 return result; 218 throw new Error("Assertion error"); 219 } 220 221 222 function getInput(id: string): HTMLInputElement { 223 const result: HTMLElement = getElem(id); 224 if (result instanceof HTMLInputElement) 225 return result; 226 throw new Error("Assertion error"); 227 } 228 229 230 initialize(); 231} 232