-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
73 lines (67 loc) · 2.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QR code creator demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body class="state-loading">
<header>
<h1>QR code creator demo</h1>
</header>
<main>
<section>
</section>
<section id="qr-code">
</section>
<section id="stats">
</section>
<section id="tools">
<label>Text: <input id="text" type="text" value="Hello world of QR codes!"></label>
<label>Radius: <input id="radius" type="range" value="0.5" step="0.025" min="0" max="0.5"></label>
<label>Error correction:
<select id="ecLevel">
<option value="L" label="Low, 7%">
<option value="M" label="Medium, 15%">
<option value="Q" label="Quarter, 25%">
<option value="H" label="High, 30%" selected>
</select></label>
<label>Color: <input id="fill" type="color" value="#0064a8"></label>
<label>Background: <input id="background" type="color"><input id="transparent" type="checkbox" checked> transparent</label>
<label>Size: <input id="size" type="range" value="250" step="10" min="20" max="1000"></label>
</section>
<section id="parameters">
<label>Parameters:</label>
<pre id="json"></pre>
</section>
</main>
<link rel="stylesheet" href="style.css">
<script type="module">
import QrCreator from 'https://cdn.jsdelivr.net/npm/qr-creator/dist/qr-creator.es6.min.js';
let availableSettings = ['text', 'radius', 'ecLevel', 'fill', 'background', 'size'];
function readSettings() {
let settings = {}, el;
for (let setting of availableSettings) {
settings[setting] = document.querySelector('#'+setting).value;
}
if (document.querySelector('#transparent').checked) {
settings.background = null;
}
return settings;
}
function renderQrCode() {
let time = new Date(),
container = document.querySelector('#qr-code'),
settings = readSettings();
container.innerHTML = '';
QrCreator.render(settings, container);
document.querySelector('#stats').innerText = 'Rendered in ' + (new Date()-time) + 'ms';
document.querySelector('#json').innerText = JSON.stringify(settings, null, 2);
}
for (let input of document.querySelectorAll('input, select')) {
input.addEventListener('change', renderQrCode);
}
renderQrCode();
</script>
</body>
</html>