examples/common/QRCode/repo/typescript-javascript/qrcodegen-input-demo.ts

   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
  27 namespace 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], 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                 if (border < 0 || border > 100)
  90                         return;
  91                 if (bitmapOutput) {
  92                         const scale: number = parseInt(getInput("scale-input").value, 10);
  93                         if (scale <= 0 || scale > 30)
  94                                 return;
  95                         qr.drawCanvas(scale, border, canvas);
  96                         canvas.style.removeProperty("display");
  97                 } else {
  98                         const code: string = qr.toSvgString(border);
  99                         const viewBox: string = (/ viewBox="([^"]*)"/.exec(code) as RegExpExecArray)[1];
 100                         const pathD: string = (/ d="([^"]*)"/.exec(code) as RegExpExecArray)[1];
 101                         svg.setAttribute("viewBox", viewBox);
 102                         (svg.querySelector("path") as Element).setAttribute("d", pathD);
 103                         svg.style.removeProperty("display");
 104                         svgXml.value = qr.toSvgString(border);
 105                 }
 106
 107                 // Returns a string to describe the given list of segments.
 108                 function describeSegments(segs: Array<qrcodegen.QrSegment>): string {
 109                         if (segs.length == 0)
 110                                 return "none";
 111                         else if (segs.length == 1) {
 112                                 const mode: qrcodegen.QrSegment.Mode = segs[0].mode;
 113                                 const Mode = qrcodegen.QrSegment.Mode;
 114                                 if (mode == Mode.NUMERIC     )  return "numeric";
 115                                 if (mode == Mode.ALPHANUMERIC)  return "alphanumeric";
 116                                 if (mode == Mode.BYTE        )  return "byte";
 117                                 if (mode == Mode.KANJI       )  return "kanji";
 118                                 return "unknown";
 119                         } else
 120                                 return "multiple";
 121                 }
 122
 123                 // Returns the number of Unicode code points in the given UTF-16 string.
 124                 function countUnicodeChars(str: string): number {
 125                         let result: number = 0;
 126                         for (let i = 0; i < str.length; i++, result++) {
 127                                 const c: number = str.charCodeAt(i);
 128                                 if (c < 0xD800 || c >= 0xE000)
 129                                         continue;
 130                                 else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) {  // High surrogate
 131                                         i++;
 132                                         const d: number = str.charCodeAt(i);
 133                                         if (0xDC00 <= d && d < 0xE000)  // Low surrogate
 134                                                 continue;
 135                                 }
 136                                 throw "Invalid UTF-16 string";
 137                         }
 138                         return result;
 139                 }
 140
 141                 // Show the QR Code symbol's statistics as a string
 142                 getElem("statistics-output").textContent = `QR Code version = ${qr.version}, ` +
 143                         `mask pattern = ${qr.mask}, ` +
 144                         `character count = ${countUnicodeChars(text)},\n` +
 145                         `encoding mode = ${describeSegments(segs)}, ` +
 146                         `error correction = level ${"LMQH".charAt(qr.errorCorrectionLevel.ordinal)}, ` +
 147                         `data bits = ${qrcodegen.QrSegment.getTotalBits(segs, qr.version) as number}.`;
 148         }
 149
 150
 151         export function handleVersionMinMax(which: "min"|"max"): void {
 152                 const minElem: HTMLInputElement = getInput("version-min-input");
 153                 const maxElem: HTMLInputElement = getInput("version-max-input");
 154                 let minVal: number = parseInt(minElem.value, 10);
 155                 let maxVal: number = parseInt(maxElem.value, 10);
 156                 minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
 157                 maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
 158                 if (which == "min" && minVal > maxVal)
 159                         maxVal = minVal;
 160                 else if (which == "max" && maxVal < minVal)
 161                         minVal = maxVal;
 162                 minElem.value = minVal.toString();
 163                 maxElem.value = maxVal.toString();
 164                 redrawQrCode();
 165         }
 166
 167
 168         function getElem(id: string): HTMLElement {
 169                 const result: HTMLElement|null = document.getElementById(id);
 170                 if (result instanceof HTMLElement)
 171                         return result;
 172                 throw "Assertion error";
 173         }
 174
 175
 176         function getInput(id: string): HTMLInputElement {
 177                 const result: HTMLElement = getElem(id);
 178                 if (result instanceof HTMLInputElement)
 179                         return result;
 180                 throw "Assertion error";
 181         }
 182
 183
 184         initialize();
 185 }