<!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);
	}
	body.meter #img,
	body.meter #can {
		display: none;
	}
	body.image #can{
		display: none;
	}
	body.image #img {
		display: block;
	}
	#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: 50%;
		top: 50%;
    	transform: translate(-50%,-50%);
	}
	#can.show{
		display: block;
	}
	</style>
</head>
<body>
	<div id="img">
	</div>
	<canvas id="can">
	</canvas>
	<script>
		'use strict';
		const { ipcRenderer } = require('electron')
		const remote = require('@electron/remote')
		let imgTmp; 
		async function setImage (src) {
			return new Promise(async (resolve, reject) => {
				imgTmp = new Image()
				let img = document.getElementById('img')
				let body = document.querySelector('body')
				body.className = ''
				body.classList.add('image')
				imgTmp.onload = function () {
					img.style.backgroundImage = `url('${src}')`;
					return resolve(src);
				};
				imgTmp.src = src;
			});
		}
		async function onMeter () {
			console.log('meter')
			const body = document.querySelector('body')
			body.className = ''
			body.classList.add('meter')
		}
		async function onFocus () {
			console.log('focus')
			const can = document.getElementById('can')
			const dpr = window.devicePixelRatio || 1
			const body = document.querySelector('body')
			let ctx;
			body.className = ''
			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 (evt, arg) {
			console.log('field guide')
			const can = document.getElementById('can')
			const dpr = window.devicePixelRatio || 1
			const screen = window.outerWidth / window.outerHeight
			const body = document.querySelector('body')
			let ctx;
			body.className = ''
			if (!can.classList.contains('show')) {
				can.classList.add('show')
			}
			if (arg.ratio) {
				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
        	}
        	

       		if (arg.ratio) {
       			if (arg.ratio < screen) {
       				can.style.width = `${window.innerHeight * arg.ratio}px`
       				can.style.height = `${window.innerHeight}px`
       			} else {
       				can.style.width = `${window.innerWidth}px`
       				can.style.height = `${window.innerWidth / arg.ratio}px`
       			}
       		} else {
            	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.lineWidth = 2

			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.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)
				//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) )
				//down count
				ctx.fillText(`${(half - i)}`, (w / 2) - (spacer * 2), (h - (hsec * i)) - spacer)
			}
		}
		async function onDigital (event, arg) {
			if (arg.src) {
				try {
					await setImage(arg.src) 
				} catch (err) {
					console.error(err)
				}
				ipcRenderer.send('display_load', { src : arg.src });
			}
			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>