<!doctype html>
<html>
<head>
	<title>display</title>
	<style>
	body{
		background: #000;
		padding: 0;
		margin: 0;
		max-width: 100%;
		max-height: 100vh;
	}
	body.meter {
		background: rgb(117, 117, 117);
	}
	#img {
		position: absolute;
	    /*background-image: url(".../img/background.jpg");*/
	    background-repeat:no-repeat;
	    background-size: contain;
  		background-position: center;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;

	}
	#can{
		margin: 0;
		background: #fff;
		display: none;
		position: fixed;
		left: 0;
		top: 0;
	}
	#can.show{
		display: block;
	}
	</style>
</head>
<body>
	<div id="img">
	</div>
	<canvas id="can">
	</canvas>
	<script>
		'use strict';
		const { remote, ipcRenderer } = require('electron')
		
		async function setImage (src) {
			return new Promise(async (resolve, reject) => {
				//let img = new Image()
				let img = document.getElementById('img')
				let body = document.querySelector('body')
				if (body.classList.contains('meter')) {
					body.classList.remove('meter')
				}

				img.style.backgroundImage = `url('${src}')`;
			});
		}
		async function onMeter () {
			console.log('meter')
			const body = document.querySelector('body')
			if (!body.classList.contains('meter')) {
				body.classList.add('meter')
			}
		}
		async function onFocus () {
			console.log('focus')
			const can = document.getElementById('can')
			const dpr = window.devicePixelRatio || 1
			let ctx;
			if (!can.classList.contains('show')) {
				can.classList.add('show')
			}
			can.width = window.innerWidth * dpr
            can.height = window.innerHeight * dpr

            can.style.width = `${window.innerWidth}px`
            can.style.height = `${window.innerHeight}px`

           	ctx = can.getContext('2d')
           	ctx.scale(dpr, dpr)

            try{
            	await drawFocus(can, ctx)
            } catch (err) {
            	alert(JSON.stringify(err))
            }
		}
		async function drawFocus (can, ctx) {
			const count = 20
			const half = Math.round(count / 2)
			const dpr = window.devicePixelRatio || 1
			const w = can.width / dpr
			const h = can.height / dpr
			const longest = w >= h ? w * 1.5 : h * 1.5
			const opp = Math.tan(360 / (count * 32)) * longest / 10
			
			//console.log(`l: ${longest}`)
			//console.log(`${360 / (count * 8)}deg`)
			//console.log(`o: ${opp}`)
      
			for (let i = 0; i < count; i++) {
				  ctx.beginPath()
			    ctx.moveTo(w / 2, h / 2)
			    ctx.lineTo((w / 2) + opp, longest)
			    ctx.lineTo((w / 2) - opp, longest)
			    ctx.fill()
			    ctx.translate(w / 2, h / 2);
			    ctx.rotate((360 / count) * Math.PI / 180)
			    ctx.translate(- w / 2, -h / 2)
			}
		}
		async function onField () {
			console.log('field guide')
			const can = document.getElementById('can')
			const dpr = window.devicePixelRatio || 1
			let ctx;
			if (!can.classList.contains('show')) {
				can.classList.add('show')
			}
			can.width = window.innerWidth * dpr
            can.height = window.innerHeight * dpr

            can.style.width = `${window.innerWidth}px`
            can.style.height = `${window.innerHeight}px`

           	ctx = can.getContext('2d')
           	ctx.scale(dpr, dpr)

            try{
            	await drawField(can, ctx)
            } catch (err) {
            	alert(JSON.stringify(err))
            }
		}
		// draw a field guide
		async function drawField (can, ctx) {
			const count = 20
			const half = Math.round(count / 2)
			const dpr = window.devicePixelRatio || 1
			const w = can.width / dpr
			const h = can.height / dpr
			const wsec = w / count
			const hsec = h / count
			const spacer = 12
			const fontSize = 18;

			ctx.moveTo(w / 2, 0)
			ctx.lineTo(w / 2, h)
			ctx.stroke()
			ctx.moveTo(0, h / 2)
			ctx.lineTo(w, h / 2)
			ctx.stroke()

			for (let i = 0; i < count; i++) {
				ctx.moveTo(wsec * i, hsec * i)
				ctx.lineTo(wsec * i, h - (hsec * i))
				ctx.stroke()
				ctx.moveTo(wsec * i, hsec * i)
				ctx.lineTo(w - (wsec * i), hsec * i)
				ctx.stroke()
			}
			ctx.font = `${fontSize}px Arial`
			for (let i = 0; i < half; i++) {
				ctx.fillText(`${(half - i)}`, (wsec * i) + spacer, (h / 2) - spacer)
				//ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - spacer, (h / 2) - spacer)
				ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
				//ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (h - (hsec * i)) - spacer)
			}
		}
		async function onDigital (event, arg) {
			if (arg.src) {
				try {
					await setImage(arg.src)
				} catch (err) {
					console.error(err)
				}
			}
			return event.returnValue = true
		}
		async function onEscape (evt) {
			let isEscape = false
			let win
			evt = evt || window.event
			
			if ('key' in evt) {
				isEscape = (evt.key == 'Escape' || evt.key == 'Esc')
			} else {
				isEscape = (evt.keyCode == 27)
			}
			if (isEscape) {
				win = remote.getCurrentWindow()
       			win.close()
			}
		}
		ipcRenderer.on('display', onDigital)
		ipcRenderer.on('field', onField)
		ipcRenderer.on('meter', onMeter)
		ipcRenderer.on('focus', onFocus)
		document.onkeydown = onEscape
	</script>
</body>
</html>