<!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}')`; //img.onload = () => { //document.body.appendChild(img) //return resolve(img) //} //img.onerror = reject //img.src = src }) } async function setMeter () { let body = document.querySelector('body') if (!body.classList.contains('meter')) { body.classList.add('meter') } } async function setGrid () { const can = document.getElementById('can') const ctx = can.getContext('2d') if (!can.classList.contains('show')) { can.classList.add('show') } can.width = window.innerWidth can.height = window.innerHeight can.style.width = `${window.innerWidth}px` can.style.height = `${window.innerHeight}px` try{ await drawGrid(can, ctx) } catch (err) { alert(JSON.stringify(err)) } } async function drawGrid (can, ctx) { const count = 20 const half = Math.round(count / 2) const w = can.width const h = can.height const wsec = w / count const hsec= h / count 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 = '30px Arial' for (let i = 0; i < half; i++) { ctx.fillText(`${(half - i)}`, (wsec * i) + 15, (h / 2) - 15) ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - 25, (h / 2) - 15) ctx.fillText(`${(half - i)}`, (w / 2) + 15, (hsec * i) + 25 ) ctx.fillText(`${(half - i)}`, (w / 2) + 15, (h - (hsec * i)) - 15) } } async function onDigital (event, arg) { console.log('called') if (arg.src) { try { await setImage(arg.src) } catch (err) { console.error(err) } } else if (arg.meter) { try { await setMeter() } catch (err) { console.error(err) } } else if (arg.grid) { try { await setGrid() } 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) document.onkeydown = onEscape </script> </body> </html>