Compare commits
5 commits
ed0cffb8b3
...
f973c30ddc
Author | SHA1 | Date | |
---|---|---|---|
f973c30ddc | |||
4ed6418c28 | |||
326844fe1c | |||
a0259cc51d | |||
a6f1c1f49a |
3 changed files with 44 additions and 9 deletions
|
@ -34,7 +34,7 @@
|
|||
<label for="gap">
|
||||
<span>Grid gap:</span>
|
||||
<input id="gap" type="number" min="0" value="0">
|
||||
px between modules
|
||||
px around
|
||||
</label>
|
||||
<button id="gen-btn">Generate</button>
|
||||
</div>
|
||||
|
|
46
script.js
46
script.js
|
@ -64,7 +64,9 @@ addEventListener('DOMContentLoaded', () => {
|
|||
const mask = options.mask.value
|
||||
const size = Number(options.size.value)
|
||||
const scale = Number(options.scale.value)
|
||||
const gap = Math.min(Number(options.gap.value), scale) // not more than 1 module scaled size
|
||||
// not more than (half of 1 scaled module size) - 1
|
||||
// at gap=scale/2 squares disappear
|
||||
const gap = Math.min(Number(options.gap.value), intDiv(scale, 2) - 1)
|
||||
|
||||
const wh = scale - gap * 2 // width&height for 1 module with grid gap
|
||||
|
||||
|
@ -122,14 +124,48 @@ addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
|
||||
{ // format info
|
||||
// TODO
|
||||
// ctx.fillStyle = "rgba(63, 149, 224, 0.5)"
|
||||
ctx.fillStyle = "rgba(63, 203, 224, 0.5)"
|
||||
|
||||
ctx.fillRect(0, idSize, idSize, scale)
|
||||
ctx.fillRect(idSize, 0, scale, idSize + scale)
|
||||
ctx.fillRect(idSize, canvas.height - idSize, scale, idSize)
|
||||
ctx.fillRect(canvas.width - idSize, idSize, idSize, scale)
|
||||
}
|
||||
|
||||
if (ver >= 7) { // version info
|
||||
ctx.fillStyle = "rgba(63, 224, 171, 0.5)"
|
||||
|
||||
const verWidth = 3 * scale
|
||||
const verHeight = 6 * scale
|
||||
const verBeginPos = canvas.width - idSize - verWidth
|
||||
ctx.fillRect(verBeginPos, 0, verWidth, verHeight)
|
||||
ctx.fillRect(0, verBeginPos, verHeight, verWidth)
|
||||
}
|
||||
})
|
||||
|
||||
{ // Choose best scale for screen height
|
||||
const height = document.documentElement.clientHeight;
|
||||
const padding = getComputedStyle(document.body).paddingTop;
|
||||
// TODO
|
||||
let padding = getComputedStyle(document.body).paddingBottom
|
||||
// remove `px` at the end and convert to number
|
||||
padding = Number(padding.slice(0, padding.length - 2))
|
||||
|
||||
// compute available height
|
||||
const height =
|
||||
document.documentElement.clientHeight
|
||||
- canvas.offsetTop // substract height of everything above canvas
|
||||
- padding // substract body padding
|
||||
|
||||
const width =
|
||||
document.documentElement.clientWidth
|
||||
- padding * 2
|
||||
|
||||
options.scale.value = Math.max(
|
||||
intDiv(
|
||||
width < height ? width : height,
|
||||
25, // divide least dimension by QR version 2 size
|
||||
),
|
||||
10, // minimum scale for this auto-detect algorithm
|
||||
)
|
||||
}
|
||||
|
||||
{ // QR version related stuff
|
||||
|
|
|
@ -6,14 +6,13 @@ body {
|
|||
body > div {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
max-width: calc(100vw - 0.5rem * 2);
|
||||
}
|
||||
|
||||
body > div#options {
|
||||
#options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.25rem;
|
||||
|
||||
max-width: calc(100vw - 0.5rem * 2);
|
||||
}
|
||||
|
||||
select, input, button {
|
||||
|
|
Loading…
Add table
Reference in a new issue