From ac1da17b8d24a99282beb9080bda004d26916f97 Mon Sep 17 00:00:00 2001
From: sixteenmillimeter <matt@downplaneconsulting.com>
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) {