forked from nayuki/QR-Code-generator
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
213 lines (189 loc) · 10.6 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html>
<head>
<title>ACQR | Generating sharable QR codes for Animal Crossing</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title is-size-1">
ACQR
</h1>
<h2 class="subtitle">
Generate QR codes sharable in Animal Crossing from the input image
</h2>
<a href="https://github.com/MeowoeM/ACQR/" class="button is-primary is-large">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>Github</span>
</a>
</div>
</div>
</section>
<!-- <p>Useful link: <a href='https://acpatterns.com/editor'>Animal Crossing Pattern Tool</a></p> -->
<section class="has-background-white-ter">
<div class="container ">
<div class="columns">
<div class="column">
<h3 class="title is-size-3">Input</h3>
<div class="box">
<h4 class="title is-size-4">Image to Convert</h4>
<div class="content">
Generate Qrcodes according to the resolution of the input image. For example 4 QR codes will be generated from a a 64 * 64 image.
</div>
<div class="content">
Conversion will start once an input image is chosen.
The image will be cropped to m * 32 by n * 32. e.g (0, 0, 64, 64) cropping box wiil be applied to an 68 * 72 image.
<p>
Online tools to resize images:
<ul>
<a href="https://resizeimage.net/"><li>ResizeImage.net</li></a>
<a href="https://picresize.com/"><li>picresize.com</li></a>
</ul>
</p>
</div>
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume" id="file-input">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="box">
<h4 class="title is-4">
Meta Infos
</h4>
<div class="content">
Don't forget to fill them, otherwise the Nintendo app cannot store the QR code!
</div>
<div class="field">
<label class="label">Title</label>
<div class="control">
<input class="input" type="text" placeholder="20 characters at most" id="title">
</div>
</div>
<div class="field">
<label class="label">Author</label>
<div class="control">
<input class="input" type="text" placeholder="9 characters at most" id="author">
</div>
</div>
<div class="field">
<label class="label">Town</label>
<div class="control">
<input class="input" type="text" placeholder="9 characters at most" id="town">
</div>
</div>
</div>
<div class="box">
<h4 class="title is-size-4">Conversion Settings</h4>
<div class="content">
The default settings work well in most occasions.
</div>
<div class="field">
<label class="label">Palette</label>
<div class="field-body">
<div class="control">
<label class="radio">
<input type="radio" id="globalPalette" name="palette" checked>
One global palette
</label>
<label class="radio">
<input type="radio" id="localPalette" name="palette">
seperate local palettes
</label>
</div>
</div>
</div>
<div class="field">
<label class="label">Color downsample</label>
<div class="field-body">
<div class="control">
<div class="select">
<select id="colorDownsampleMode">
<option value="4bit">4-bit</option>
<option value="5bit" selected="selected">5-bit</option>
<option value="6bit">6-bit</option>
<option value="7bit">7-bit</option>
<option value="None">No Downsampling</option>
</select>
</div>
</div>
</div>
<p>
Downsample 8-bit color depth(channel-wise) to lower depth to speed up calculation at the cost of accuracy.
</p>
</div>
<div class="field">
<label class="label">Alpha threshold</label>
<div class="control">
<input class="input" type="text" id="alphaThreshold">
</div>
<p>
pixels of alpha value above the threshold are converted to completely opaque one, those below completely transparent.
</p>
</div>
<div class="field">
<label class="label">Metric</label>
<div class="field-body">
<div class="control">
<label class="radio">
<input type="radio" id="deltaE" name="metric" checked>
Delta E
</label>
<label class="radio">
<input type="radio" id="euclidean" name="metric">
RGB Euclidean
</label>
</div>
</div>
</div>
<div class="field">
<label class="label">Max iteration</label>
<div class="control">
<input class="input" type="text" id="maxIter">
</div>
</div>
</div>
</div>
<div class="column">
<h3 class="title is-size-3">Output</h3>
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">Logs</p>
<a class="card-header-icon card-toggle">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content">
<div id="progress" class="content" style="overflow-y: scroll; height:128px;">
</div>
</div>
</div>
<div class="box">
<h4 class="title is-size-4">Results</h4>
<div id="output" style="overflow-y: scroll; height:800px;"></div>
</div>
</div>
</div>
</div>
</section>
<script src="load-image.js"></script>
<script type="application/javascript" src="Color.js"></script>
<script type="application/javascript" src="misc.js"></script>
<script type="application/javascript" src="pMedian.js"></script>
<script type="application/javascript" src="qrcodegen.js"></script>
<script type="application/javascript" src="acqr.js"></script>
</body>
</html>