242 lines
6.0 KiB
HTML
242 lines
6.0 KiB
HTML
|
<!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: 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 { remote, ipcRenderer } = require('electron')
|
||
|
|
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')
|
||
|
|
if (body.classList.contains('meter')) {
|
||
|
|
body.classList.remove('meter')
|
||
|
|
}
|
||
|
|
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')
|
||
|
|
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 (evt, arg) {
|
||
|
|
console.log('field guide')
|
||
|
|
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) {
|
||
|
|
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.inneWidth}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>
|