<!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>