msb-public
/
QR-Code-generator
mirror of https://github.com/nayuki/QR-Code-generator
4
3
Code Issues Projects Releases Wiki Activity

Tweaked {JavaScript, TypeScript, HTML} code to encapsulate the application members.

Browse Source
pull/39/merge
Project Nayuki 7 years ago
parent 3ab5e7827c
commit 6d79c97c42
3 changed files with 138 additions and 137 deletions
Show Stats Download Patch File Download Diff File

255
javascript/qrcodegen-demo.js
Unescape View File

@ -24,140 +24,143 @@
"use strict"; "use strict";
function initialize() { var app = new function() {
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 = "";
// 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 initialize() {
function getInputErrorCorrectionLevel() { var elems = document.querySelectorAll("input[type=number], textarea");
if (document.getElementById("errcorlvl-medium").checked) for (var i = 0; i < elems.length; i++) {
return qrcodegen.QrCode.Ecc.MEDIUM; if (elems[i].id.indexOf("version-") != 0)
else if (document.getElementById("errcorlvl-quartile").checked) elems[i].oninput = redrawQrCode;
return qrcodegen.QrCode.Ecc.QUARTILE; }
else if (document.getElementById("errcorlvl-high").checked) elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
return qrcodegen.QrCode.Ecc.HIGH; for (var i = 0; i < elems.length; i++)
else // In case no radio button is depressed elems[i].onchange = redrawQrCode;
return qrcodegen.QrCode.Ecc.LOW; redrawQrCode();
} }
// 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 function redrawQrCode() {
var border = parseInt(document.getElementById("border-input").value, 10); // Show/hide rows based on bitmap/vector image output
if (border < 0 || border > 100) var bitmapOutput = document.getElementById("output-format-bitmap").checked;
return; var scaleRow = document.getElementById("scale-row");
if (bitmapOutput) { var svgXmlRow = document.getElementById("svg-xml-row");
var scale = parseInt(document.getElementById("scale-input").value, 10); if (bitmapOutput) {
if (scale <= 0 || scale > 30) 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; return;
qr.drawCanvas(scale, border, canvas); if (bitmapOutput) {
canvas.style.removeProperty("display"); var scale = parseInt(document.getElementById("scale-input").value, 10);
} else { if (scale <= 0 || scale > 30)
var code = qr.toSvgString(border); return;
svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]); qr.drawCanvas(scale, border, canvas);
svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]); canvas.style.removeProperty("display");
svg.style.removeProperty("display"); } else {
svgXml.value = qr.toSvgString(border); var code = qr.toSvgString(border);
} svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]);
svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]);
// Returns a string to describe the given list of segments. svg.style.removeProperty("display");
function describeSegments(segs) { svgXml.value = qr.toSvgString(border);
if (segs.length == 0) }
return "none";
else if (segs.length == 1) { // Returns a string to describe the given list of segments.
var mode = segs[0].mode; function describeSegments(segs) {
var Mode = qrcodegen.QrSegment.Mode; if (segs.length == 0)
if (mode == Mode.NUMERIC ) return "numeric"; return "none";
if (mode == Mode.ALPHANUMERIC) return "alphanumeric"; else if (segs.length == 1) {
if (mode == Mode.BYTE ) return "byte"; var mode = segs[0].mode;
if (mode == Mode.KANJI ) return "kanji"; var Mode = qrcodegen.QrSegment.Mode;
return "unknown"; if (mode == Mode.NUMERIC ) return "numeric";
} else if (mode == Mode.ALPHANUMERIC) return "alphanumeric";
return "multiple"; if (mode == Mode.BYTE ) return "byte";
} if (mode == Mode.KANJI ) return "kanji";
return "unknown";
// Returns the number of Unicode code points in the given UTF-16 string. } else
function countUnicodeChars(str) { return "multiple";
var result = 0; }
for (var i = 0; i < str.length; i++, result++) {
var c = str.charCodeAt(i); // Returns the number of Unicode code points in the given UTF-16 string.
if (c < 0xD800 || c >= 0xE000) function countUnicodeChars(str) {
continue; var result = 0;
else if (0xD800 <= c && c < 0xDC00 && i + 1 < str.length) { // High surrogate for (var i = 0; i < str.length; i++, result++) {
i++; var c = str.charCodeAt(i);
var d = str.charCodeAt(i); if (c < 0xD800 || c >= 0xE000)
if (0xDC00 <= d && d < 0xE000) // Low surrogate
continue; 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";
} }
throw "Invalid UTF-16 string"; return result;
} }
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;
} }
// Show the QR Code symbol's statistics as a string
var stats = "QR Code version = " + qr.version + ", "; this.handleVersionMinMax = function(which) {
stats += "mask pattern = " + qr.mask + ", "; var minElem = document.getElementById("version-min-input");
stats += "character count = " + countUnicodeChars(text) + ",\n"; var maxElem = document.getElementById("version-max-input");
stats += "encoding mode = " + describeSegments(segs) + ", "; var minVal = parseInt(minElem.value, 10);
stats += "error correction = level " + "LMQH".charAt(qr.errorCorrectionLevel.ordinal) + ", "; var maxVal = parseInt(maxElem.value, 10);
stats += "data bits = " + qrcodegen.QrSegment.getTotalBits(segs, qr.version) + "."; minVal = Math.max(Math.min(minVal, qrcodegen.QrCode.MAX_VERSION), qrcodegen.QrCode.MIN_VERSION);
document.getElementById("statistics-output").textContent = stats; 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)
function handleVersionMinMax(which) { minVal = maxVal;
var minElem = document.getElementById("version-min-input"); minElem.value = minVal.toString();
var maxElem = document.getElementById("version-max-input"); maxElem.value = maxVal.toString();
var minVal = parseInt(minElem.value, 10); redrawQrCode();
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) initialize();
maxVal = minVal;
else if (which == "max" && maxVal < minVal)
minVal = maxVal;
minElem.value = minVal.toString();
maxElem.value = maxVal.toString();
redrawQrCode();
} }
initialize();

4
javascript/qrcodegen-js-demo.html
Unescape View File

@ -95,8 +95,8 @@
<tr> <tr>
<td>Version range:</td> <td>Version range:</td>
<td> <td>
Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="handleVersionMinMax('min');">, Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">,
maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="handleVersionMinMax('max');"> maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');">
</td> </td>
</tr> </tr>
<tr> <tr>

16
typescript/qrcodegen-demo.ts
Unescape View File

@ -24,26 +24,24 @@
"use strict"; "use strict";
{ namespace app {
const myWindow = window as any;
function initialize(): void { function initialize(): void {
let elems = document.querySelectorAll("input[type=number], textarea"); let elems = document.querySelectorAll("input[type=number], textarea");
for (let el of elems) { for (let el of elems) {
if (!el.id.startsWith("version-")) 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]"); elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
for (let el of elems) for (let el of elems)
(el as HTMLInputElement).onchange = myWindow.redrawQrCode; (el as HTMLInputElement).onchange = redrawQrCode;
myWindow.redrawQrCode(); redrawQrCode();
} }
/*---- Functions called from HTML code ----*/ /*---- Functions called from HTML code ----*/
myWindow.redrawQrCode = function(): void { function redrawQrCode(): void {
// Show/hide rows based on bitmap/vector image output // Show/hide rows based on bitmap/vector image output
const bitmapOutput: boolean = getInput("output-format-bitmap").checked; const bitmapOutput: boolean = getInput("output-format-bitmap").checked;
const scaleRow : HTMLElement = getElem("scale-row"); 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 minElem: HTMLInputElement = getInput("version-min-input");
const maxElem: HTMLInputElement = getInput("version-max-input"); const maxElem: HTMLInputElement = getInput("version-max-input");
let minVal: number = parseInt(minElem.value, 10); let minVal: number = parseInt(minElem.value, 10);
@ -163,7 +161,7 @@
minVal = maxVal; minVal = maxVal;
minElem.value = minVal.toString(); minElem.value = minVal.toString();
maxElem.value = maxVal.toString(); maxElem.value = maxVal.toString();
myWindow.redrawQrCode(); redrawQrCode();
} }

Write Preview
Loading…
Cancel
Save