16mm
/
mcopy
1
0
Fork 0
Code Issues 14 Pull Requests Projects 2 Releases 13 Wiki Activity

Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19

This commit is contained in:
sixteenmillimeter 2019-08-25 15:54:50 -04:00
parent 9b2ed018bf
commit ac1da17b8d
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/display.html
View File

@ -31,8 +31,8 @@
display: none;
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 0;
top: 50%;
transform: translate(-50%,-50%);
}
#can.show{
display: block;
@ -116,26 +116,39 @@
}
async function onField (evt, arg) {
console.log('field guide')
console.dir(arg)
const can = document.getElementById('can')
const dpr = window.devicePixelRatio || 1
const screen = window.outerWidth / window.outerHeight
let ctx;
if (!can.classList.contains('show')) {
can.classList.add('show')
}
if (arg.ratio) {
if (arg.ratio < screen) {
can.width = (window.innerHeight * arg.ratio) * dpr
can.height = window.innerHeight * dpr
} else {
can.width =window.innerWidth * dpr
can.height = (window.innerWidth / arg.ratio) * dpr
}
} else {
can.width = window.innerWidth * dpr
can.height = window.innerHeight * dpr
}
if (arg.ratio) {
if (arg.ratio < screen) {
can.style.width = `${window.innerHeight * arg.ratio}px`
can.style.height = `${window.innerHeight}px`
} else {
can.style.width = `${window.inneWidth}px`
can.style.height = `${window.innerWidth / arg.ratio}px`
}
} else {
can.style.width = `${window.innerWidth}px`
}
can.style.height = `${window.innerHeight}px`
}
ctx = can.getContext('2d')
ctx.scale(dpr, dpr)
@ -156,7 +169,9 @@
const wsec = w / count
const hsec = h / count
const spacer = 12
const fontSize = 18;
const fontSize = 18
ctx.lineWidth = 2
ctx.moveTo(w / 2, 0)
ctx.lineTo(w / 2, h)
@ -173,12 +188,19 @@
ctx.lineTo(w - (wsec * i), hsec * i)
ctx.stroke()
}
ctx.lineWidth = 1
ctx.font = `${fontSize}px Arial`
for (let i = 0; i < half; i++) {
//left count
ctx.fillText(`${(half - i)}`, (wsec * i) + spacer, (h / 2) - spacer)
//ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - spacer, (h / 2) - spacer)
//right count
ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - (spacer * 2), (h / 2) + (spacer * 2))
//up count
ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
//ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (h - (hsec * i)) - spacer)
//down count
ctx.fillText(`${(half - i)}`, (w / 2) - (spacer * 2), (h - (hsec * i)) - spacer)
}
}
async function onDigital (event, arg) {