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) {