16mm
/
mcopy
1
0
Fork 0
Code Issues 15 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

42
app/display.html
View File

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