You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
5.4 KiB
100 lines
5.4 KiB
<!doctype html>
|
|
<head>
|
|
<link rel="stylesheet" href="css/style.v2.css">
|
|
<link rel="stylesheet" href="css/topnav.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" href="https://www.pathcheck.org/hubfs/Favicon.png">
|
|
<title>QR Code Generator</title>
|
|
</head>
|
|
<body>
|
|
<div class="topnav">
|
|
<div class="topnavContainer">
|
|
<a href="index.html">Signers</a>
|
|
<a href="verify.html"><span class="xs-hidden">Universal </span>Verifier</a>
|
|
<a class="xs-hidden" href="debug.html">QR Debugger</a>
|
|
<a class="xs-hidden" href="https://github.com/Path-Check/paper-cred-demo">Source Code</a>
|
|
<a href="https://github.com/Path-Check/paper-cred"><span class="xs-hidden"> QR </span>Specs</a>
|
|
<a href="http://vaccine-docs.pathcheck.org"><span class="xs-hidden">Vaccine </span>Docs</a>
|
|
<a class="xs-hidden" href="http://pathcheck.org">About PathCheck</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center">
|
|
<h1>QR Code Generator</h1>
|
|
<div class="full-div">
|
|
<div class="half">
|
|
<textarea id="text-qr1" rows="10" style="width:100%;">jxt:example.com:w3vc:1:MoH/J07BX03/1183738569/OPL/NZ/BgLv0g/Bwtkpo/SMITH/Male/JOHN/urn%3Auvci%3Aaf5vshde843jf831j128fj/Bd5lLo/eyJhbGciOiJFZERTQSIsImI2NCI6ZmFsc2UsImNyaXQiOlsiYjY0Il19..a3UqIuKSOmCKrdn2knl_hCjiN4f4Ud1eO5ckwEHb623V9vdCwWCDB7GBHlRBYSI8ek2E-By7xysVFwutcpOeDg</textarea>
|
|
</div>
|
|
<div class="half">
|
|
<textarea id="text-qr2" rows="10" style="width:100%;">JXT:EXAMPLE.COM:W3VC:1:MOH/J07BX03/1183738569/OPL/NZ/BGLV0G/BWTKPO/SMITH/MALE/JOHN/XK465POITJ7ZX3EF266OG6G76N6WHV3PD6H7AXPGKLUP33EJQWYZZCHIREKZCEKNASELBCMI3DIIR2MZQWY43FFQRGG4TJOQRDUWZCMI3DIIS5PVVXKKRC4KJDUYEKVXM7NETZMEFDRDPB7YKHOV4O4XETAEDW7LNXK7N52CYFQIGB5RQEPFIQLBEI6HUTMEA4XPDSWFIXBOWXFE46BQ</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="full-div-align-center">
|
|
<br/>
|
|
<button class="qr-btn" onclick="generateQRCodes()">Create & Study QRs</button>
|
|
<br/><br/>
|
|
</div>
|
|
<div class="full-div">
|
|
<div class="half">
|
|
<canvas id="qr-code1"></canvas><br/>
|
|
<pre id="qr-code1-url"></pre>
|
|
<pre id="qr-code1-bytes"></pre>
|
|
<pre id="qr-code1-mode"></pre>
|
|
<pre id="qr-code1-error"></pre>
|
|
|
|
</div>
|
|
<div class="half">
|
|
<canvas id="qr-code2"></canvas><br/>
|
|
<pre id="qr-code2-url"></pre>
|
|
<pre id="qr-code2-bytes"></pre>
|
|
<pre id="qr-code2-mode"></pre>
|
|
<pre id="qr-code2-error"></pre>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/qrcode.min.js"></script>
|
|
<script>
|
|
function e(elem) {
|
|
return document.getElementById(elem);
|
|
}
|
|
|
|
function describe(qr) {
|
|
return qr.modules.size + "x" + qr.modules.size + " bits " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes"
|
|
}
|
|
|
|
function generateCode(elemIdSource, elemPrefix) {
|
|
let uri = e(elemIdSource).value;
|
|
let params = {margin:0, width:e('qr-code1').scrollWidth, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }};
|
|
let qr = QRCode.create(uri, );
|
|
|
|
QRCode.toCanvas(e(elemPrefix), uri, params, function (error) {
|
|
e(elemPrefix + "-error").innerHTML = error;
|
|
e(elemPrefix + "-url").innerHTML = uri;
|
|
});
|
|
|
|
let qrQ = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }});
|
|
let qrH = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'H', color: {dark: '#3654DD' }});
|
|
let qrM = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }});
|
|
let qrL = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }});
|
|
|
|
e(elemPrefix+"-bytes").innerHTML += "QR Size Analysis: ";
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC L 7% " + describe(qrL);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC M 15% " + describe(qrM);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC Q 25% " + describe(qrQ);
|
|
e(elemPrefix+"-bytes").innerHTML += "<br>- ECC H 30% " + describe(qrH);
|
|
|
|
e(elemPrefix + "-mode").innerHTML = "Broken in " + qr.segments.length + " segments";
|
|
for (i=0; i<qr.segments.length; i++) {
|
|
e(elemPrefix + "-mode").innerHTML += "<br>- " + i + ": " + qr.segments[i].mode.id + " " + qr.segments[i].data;
|
|
}
|
|
//e(elemPrefix + "-bytes").innerHTML = "QR Version: " + qr.version + " with size " + qr.modules.size + "x" + qr.modules.size + " bits => " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes";
|
|
}
|
|
function generateQRCodes() {
|
|
generateCode('text-qr1', "qr-code1");
|
|
generateCode('text-qr2', "qr-code2");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|