From ac1da17b8d24a99282beb9080bda004d26916f97 Mon Sep 17 00:00:00 2001 From: sixteenmillimeter Date: Sun, 25 Aug 2019 15:54:50 -0400 Subject: [PATCH] Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19 --- app/display.html | 42 ++++++++++++++++++++++++++++++++---------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/app/display.html b/app/display.html index cdcc1a6..3ea4ac7 100644 --- a/app/display.html +++ b/app/display.html @@ -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) { - 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 { can.width = window.innerWidth * dpr + can.height = window.innerHeight * dpr } - can.height = window.innerHeight * dpr + 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 { can.style.width = `${window.innerWidth}px` + can.style.height = `${window.innerHeight}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) {