diff --git a/javascript/qrcodegen-demo.js b/javascript/qrcodegen-demo.js index 9ca9490..4e23ba0 100644 --- a/javascript/qrcodegen-demo.js +++ b/javascript/qrcodegen-demo.js @@ -24,140 +24,143 @@ "use strict"; -function initialize() { - var elems = document.querySelectorAll("input[type=number], textarea"); - for (var i = 0; i < elems.length; i++) { - if (elems[i].id.indexOf("version-") != 0) - elems[i].oninput = redrawQrCode; - } - elems = document.querySelectorAll("input[type=radio], input[type=checkbox]"); - for (var i = 0; i < elems.length; i++) - elems[i].onchange = redrawQrCode; - redrawQrCode(); -} - - -function redrawQrCode() { - // Show/hide rows based on bitmap/vector image output - var bitmapOutput = document.getElementById("output-format-bitmap").checked; - var scaleRow = document.getElementById("scale-row"); - var svgXmlRow = document.getElementById("svg-xml-row"); - if (bitmapOutput) { - scaleRow.style.removeProperty("display"); - svgXmlRow.style.display = "none"; - } else { - scaleRow.style.display = "none"; - svgXmlRow.style.removeProperty("display"); - } - var svgXml = document.getElementById("svg-xml-output"); - svgXml.value = ""; +var app = new function() { - // Reset output images in case of early termination - var canvas = document.getElementById("qrcode-canvas"); - var svg = document.getElementById("qrcode-svg"); - canvas.style.display = "none"; - svg.style.display = "none"; - - // Returns a QrCode.Ecc object based on the radio buttons in the HTML form. - function getInputErrorCorrectionLevel() { - if (document.getElementById("errcorlvl-medium").checked) - return qrcodegen.QrCode.Ecc.MEDIUM; - else if (document.getElementById("errcorlvl-quartile").checked) - return qrcodegen.QrCode.Ecc.QUARTILE; - else if (document.getElementById("errcorlvl-high").checked) - return qrcodegen.QrCode.Ecc.HIGH; - else // In case no radio button is depressed - return qrcodegen.QrCode.Ecc.LOW; - } - - // Get form inputs and compute QR Code - var ecl = getInputErrorCorrectionLevel(); - var text = document.getElementById("text-input").value; - var segs = qrcodegen.QrSegment.makeSegments(text); - var minVer = parseInt(document.getElementById("version-min-input").value, 10); - var maxVer = parseInt(document.getElementById("version-max-input").value, 10); - var mask = parseInt(document.getElementById("mask-input").value, 10); - var boostEcc = document.getElementById("boost-ecc-input").checked; - var qr = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc); - - // Draw image output - var border = parseInt(document.getElementById("border-input").value, 10); - if (border < 0 || border > 100) - return; - if (bitmapOutput) { - var scale = parseInt(document.getElementById("scale-input").value, 10); - if (scale <= 0 || scale > 30) - return; - qr.drawCanvas(scale, border, canvas); - canvas.style.removeProperty("display"); - } else { - var code = qr.toSvgString(border); - svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]); - svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]); - svg.style.removeProperty("display"); - svgXml.value = qr.toSvgString(border); - } - - // Returns a string to describe the given list of segments. - function describeSegments(segs) { - if (segs.length == 0) - return "none"; - else if (segs.length == 1) { - var mode = segs[0].mode; - var Mode = qrcodegen.QrSegment.Mode; - if (mode == Mode.NUMERIC ) return "numeric"; - if (mode == Mode.ALPHANUMERIC) return "alphanumeric"; - if (mode == Mode.BYTE ) return "byte"; - if (mode == Mode.KANJI ) return "kanji"; - return "unknown"; - } else - return "multiple"; - } - - // Returns the number of Unicode code points in the given UTF-16 string. - function countUnicodeChars(str) { - var result = 0; - for (var i = 0; i < str.length; i++, result++) { - var c = str.charCodeAt(i); - if (c < 0xD800 || c >= 0xE000) - continue; - else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate - i++; - var d = str.charCodeAt(i); - if (0xDC00 <= d && d < 0xE000) // Low surrogate - continue; - } - throw "Invalid UTF-16 string"; + function initialize() { + var elems = document.querySelectorAll("input[type=number], textarea"); + for (var i = 0; i < elems.length; i++) { + if (elems[i].id.indexOf("version-") != 0) + elems[i].oninput = redrawQrCode; } - return result; + elems = document.querySelectorAll("input[type=radio], input[type=checkbox]"); + for (var i = 0; i < elems.length; i++) + elems[i].onchange = redrawQrCode; + redrawQrCode(); } - // Show the QR Code symbol's statistics as a string - var stats = "QR Code version = " + qr.version + ", "; - stats += "mask pattern = " + qr.mask + ", "; - stats += "character count = " + countUnicodeChars(text) + ",\n"; - stats += "encoding mode = " + describeSegments(segs) + ", "; - stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", "; - stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + "."; - document.getElementById("statistics-output").textContent = stats; + + function redrawQrCode() { + // Show/hide rows based on bitmap/vector image output + var bitmapOutput = document.getElementById("output-format-bitmap").checked; + var scaleRow = document.getElementById("scale-row"); + var svgXmlRow = document.getElementById("svg-xml-row"); + if (bitmapOutput) { + scaleRow.style.removeProperty("display"); + svgXmlRow.style.display = "none"; + } else { + scaleRow.style.display = "none"; + svgXmlRow.style.removeProperty("display"); + } + var svgXml = document.getElementById("svg-xml-output"); + svgXml.value = ""; + + // Reset output images in case of early termination + var canvas = document.getElementById("qrcode-canvas"); + var svg = document.getElementById("qrcode-svg"); + canvas.style.display = "none"; + svg.style.display = "none"; + + // Returns a QrCode.Ecc object based on the radio buttons in the HTML form. + function getInputErrorCorrectionLevel() { + if (document.getElementById("errcorlvl-medium").checked) + return qrcodegen.QrCode.Ecc.MEDIUM; + else if (document.getElementById("errcorlvl-quartile").checked) + return qrcodegen.QrCode.Ecc.QUARTILE; + else if (document.getElementById("errcorlvl-high").checked) + return qrcodegen.QrCode.Ecc.HIGH; + else // In case no radio button is depressed + return qrcodegen.QrCode.Ecc.LOW; + } + + // Get form inputs and compute QR Code + var ecl = getInputErrorCorrectionLevel(); + var text = document.getElementById("text-input").value; + var segs = qrcodegen.QrSegment.makeSegments(text); + var minVer = parseInt(document.getElementById("version-min-input").value, 10); + var maxVer = parseInt(document.getElementById("version-max-input").value, 10); + var mask = parseInt(document.getElementById("mask-input").value, 10); + var boostEcc = document.getElementById("boost-ecc-input").checked; + var qr = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc); + + // Draw image output + var border = parseInt(document.getElementById("border-input").value, 10); + if (border < 0 || border > 100) + return; + if (bitmapOutput) { + var scale = parseInt(document.getElementById("scale-input").value, 10); + if (scale <= 0 || scale > 30) + return; + qr.drawCanvas(scale, border, canvas); + canvas.style.removeProperty("display"); + } else { + var code = qr.toSvgString(border); + svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]); + svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]); + svg.style.removeProperty("display"); + svgXml.value = qr.toSvgString(border); + } + + // Returns a string to describe the given list of segments. + function describeSegments(segs) { + if (segs.length == 0) + return "none"; + else if (segs.length == 1) { + var mode = segs[0].mode; + var Mode = qrcodegen.QrSegment.Mode; + if (mode == Mode.NUMERIC ) return "numeric"; + if (mode == Mode.ALPHANUMERIC) return "alphanumeric"; + if (mode == Mode.BYTE ) return "byte"; + if (mode == Mode.KANJI ) return "kanji"; + return "unknown"; + } else + return "multiple"; + } + + // Returns the number of Unicode code points in the given UTF-16 string. + function countUnicodeChars(str) { + var result = 0; + for (var i = 0; i < str.length; i++, result++) { + var c = str.charCodeAt(i); + if (c < 0xD800 || c >= 0xE000) + continue; + else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate + i++; + var d = str.charCodeAt(i); + if (0xDC00 <= d && d < 0xE000) // Low surrogate + continue; + } + throw "Invalid UTF-16 string"; + } + return result; + } + + // Show the QR Code symbol's statistics as a string + var stats = "QR Code version = " + qr.version + ", "; + stats += "mask pattern = " + qr.mask + ", "; + stats += "character count = " + countUnicodeChars(text) + ",\n"; + stats += "encoding mode = " + describeSegments(segs) + ", "; + stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", "; + stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + "."; + document.getElementById("statistics-output").textContent = stats; + } + + + this.handleVersionMinMax = function(which) { + var minElem = document.getElementById("version-min-input"); + var maxElem = document.getElementById("version-max-input"); + var minVal = parseInt(minElem.value, 10); + var maxVal = parseInt(maxElem.value, 10); + minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); + maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); + if (which == "min" && minVal > maxVal) + maxVal = minVal; + else if (which == "max" && maxVal < minVal) + minVal = maxVal; + minElem.value = minVal.toString(); + maxElem.value = maxVal.toString(); + redrawQrCode(); + } + + + initialize(); } - - -function handleVersionMinMax(which) { - var minElem = document.getElementById("version-min-input"); - var maxElem = document.getElementById("version-max-input"); - var minVal = parseInt(minElem.value, 10); - var maxVal = parseInt(maxElem.value, 10); - minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); - maxVal = Math.max(Math.min(maxVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION); - if (which == "min" && minVal > maxVal) - maxVal = minVal; - else if (which == "max" && maxVal < minVal) - minVal = maxVal; - minElem.value = minVal.toString(); - maxElem.value = maxVal.toString(); - redrawQrCode(); -} - - -initialize(); diff --git a/javascript/qrcodegen-js-demo.html b/javascript/qrcodegen-js-demo.html index d534d7f..afaa90f 100644 --- a/javascript/qrcodegen-js-demo.html +++ b/javascript/qrcodegen-js-demo.html @@ -95,8 +95,8 @@ Version range: - Minimum = , - maximum = + Minimum = , + maximum = diff --git a/typescript/qrcodegen-demo.ts b/typescript/qrcodegen-demo.ts index c1fe6bd..c486d05 100644 --- a/typescript/qrcodegen-demo.ts +++ b/typescript/qrcodegen-demo.ts @@ -24,26 +24,24 @@ "use strict"; -{ - const myWindow = window as any; - +namespace app { function initialize(): void { let elems = document.querySelectorAll("input[type=number], textarea"); for (let el of elems) { if (!el.id.startsWith("version-")) - (el as any).oninput = myWindow.redrawQrCode; + (el as any).oninput = redrawQrCode; } elems = document.querySelectorAll("input[type=radio], input[type=checkbox]"); for (let el of elems) - (el as HTMLInputElement).onchange = myWindow.redrawQrCode; - myWindow.redrawQrCode(); + (el as HTMLInputElement).onchange = redrawQrCode; + redrawQrCode(); } /*---- Functions called from HTML code ----*/ - myWindow.redrawQrCode = function(): void { + function redrawQrCode(): void { // Show/hide rows based on bitmap/vector image output const bitmapOutput: boolean = getInput("output-format-bitmap").checked; const scaleRow : HTMLElement = getElem("scale-row"); @@ -150,7 +148,7 @@ } - myWindow.handleVersionMinMax = function(which: "min"|"max"): void { + export function handleVersionMinMax(which: "min"|"max"): void { const minElem: HTMLInputElement = getInput("version-min-input"); const maxElem: HTMLInputElement = getInput("version-max-input"); let minVal: number = parseInt(minElem.value, 10); @@ -163,7 +161,7 @@ minVal = maxVal; minElem.value = minVal.toString(); maxElem.value = maxVal.toString(); - myWindow.redrawQrCode(); + redrawQrCode(); }