mirror of
https://github.com/Merricx/qrazybox.git
synced 2024-11-24 19:52:58 +01:00
61 lines
1.6 KiB
HTML
61 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>QR Code Display</title>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
#links > a {
|
|
display: inline-block;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="links"></div>
|
|
<canvas id="canvas-1" width="800" height="800"></canvas>
|
|
<script src="js/table.js"></script>
|
|
<script type="text/javascript">
|
|
let links = document.getElementById('links');
|
|
|
|
for(let i=0; i<20; i++) {
|
|
let link = document.createElement('a');
|
|
link.href = "#" + (i + 1);
|
|
link.text = i+1;
|
|
links.appendChild(link);
|
|
}
|
|
|
|
let canvas = document.getElementById("canvas-1");
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
window.addEventListener("hashchange", refreshQR);
|
|
|
|
function refreshQR() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
let fragment = window.location.hash.substr(1);
|
|
let qrCodeVersion = 1;
|
|
if (fragment != "") {
|
|
qrCodeVersion = fragment * 1;
|
|
}
|
|
|
|
let wsize = 10;
|
|
let hsize = 10;
|
|
let qrTemplate = qr_templates[qrCodeVersion - 1];
|
|
|
|
for (let i = 0; i < qrTemplate.length; i++) {
|
|
for (let j = 0; j < qrTemplate[0].length; j++) {
|
|
// Drawing (i, j)
|
|
let v = qrTemplate[i][j];
|
|
if (v == -1) {
|
|
v = 2;
|
|
}
|
|
let colorArr = ["white", "black", "grey", "red"];
|
|
let color = colorArr[v];
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(i * wsize, j * hsize, wsize, hsize);
|
|
}
|
|
}
|
|
}
|
|
refreshQR();
|
|
</script>
|
|
</body>
|
|
</html>
|