16mm
/
mcopy
1
0
Fork 0
Code Issues 14 Pull Requests Projects 2 Releases 13 Wiki Activity
mcopy/app/display.html

242 lines
6.0 KiB
HTML
Raw Normal View History

Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
<!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;
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
left: 50%;
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
top: 50%;
transform: translate(-50%,-50%);
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
}
#can.show{
display: block;
}
</style>
</head>
<body>
<div id="img">
</div>
<canvas id="can">
</canvas>
<script>
'use strict';
const { remote, ipcRenderer } = require('electron')
Wait until image is loaded in a temp element and then report back to main process using ipc. This uses the "display_load" ipc channel to call back to the Display class and resolve a promise made in the .show() method. Resolves #38.
2020-02-21 07:28:26 +00:00
let imgTmp;
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
async function setImage (src) {
return new Promise(async (resolve, reject) => {
Wait until image is loaded in a temp element and then report back to main process using ipc. This uses the "display_load" ipc channel to call back to the Display class and resolve a promise made in the .show() method. Resolves #38.
2020-02-21 07:28:26 +00:00
imgTmp = new Image()
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
let img = document.getElementById('img')
let body = document.querySelector('body')
if (body.classList.contains('meter')) {
body.classList.remove('meter')
}
Wait until image is loaded in a temp element and then report back to main process using ipc. This uses the "display_load" ipc channel to call back to the Display class and resolve a promise made in the .show() method. Resolves #38.
2020-02-21 07:28:26 +00:00
imgTmp.onload = function () {
img.style.backgroundImage = `url('${src}')`;
return resolve(src);
};
imgTmp.src = src;
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
});
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
}
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
async function onMeter () {
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
console.log('meter')
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
const body = document.querySelector('body')
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
if (!body.classList.contains('meter')) {
body.classList.add('meter')
}
}
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
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
Fixed the siemen's star focusing screen with magic numbers. Better than it was before!
2019-06-26 20:07:00 +00:00
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}`)
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
for (let i = 0; i < count; i++) {
Wait until image is loaded in a temp element and then report back to main process using ipc. This uses the "display_load" ipc channel to call back to the Display class and resolve a promise made in the .show() method. Resolves #38.
2020-02-21 07:28:26 +00:00
ctx.beginPath()
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx.moveTo(w / 2, h / 2)
Fixed the siemen's star focusing screen with magic numbers. Better than it was before!
2019-06-26 20:07:00 +00:00
ctx.lineTo((w / 2) + opp, longest)
ctx.lineTo((w / 2) - opp, longest)
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx.fill()
ctx.translate(w / 2, h / 2);
ctx.rotate((360 / count) * Math.PI / 180)
ctx.translate(- w / 2, -h / 2)
}
}
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
async function onField (evt, arg) {
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
console.log('field guide')
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
const can = document.getElementById('can')
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
const dpr = window.devicePixelRatio || 1
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
const screen = window.outerWidth / window.outerHeight
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
let ctx;
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
if (!can.classList.contains('show')) {
can.classList.add('show')
}
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
if (arg.ratio) {
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
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
}
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
} else {
can.width = window.innerWidth * dpr
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
can.height = window.innerHeight * dpr
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
}
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
if (arg.ratio) {
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
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`
}
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
} else {
can.style.width = `${window.innerWidth}px`
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
can.style.height = `${window.innerHeight}px`
If filmout picture source is set, set the field guide to match the aspect ratio of the image. Right now that only works if ratio is lower than the screen. Need to add case in display.html that corrects for when screen ratio is lower than image ratio.
2019-08-25 19:26:43 +00:00
}
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx = can.getContext('2d')
ctx.scale(dpr, dpr)
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
try{
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
await drawField(can, ctx)
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
} catch (err) {
alert(JSON.stringify(err))
}
}
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
// draw a field guide
async function drawField (can, ctx) {
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
const count = 20
const half = Math.round(count / 2)
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
const dpr = window.devicePixelRatio || 1
const w = can.width / dpr
const h = can.height / dpr
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
const wsec = w / count
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
const hsec = h / count
const spacer = 12
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
const fontSize = 18
ctx.lineWidth = 2
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
ctx.moveTo(w / 2, 0)
ctx.lineTo(w / 2, h)
ctx.stroke()
ctx.moveTo(0, h / 2)
ctx.lineTo(w, h / 2)
ctx.stroke()
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
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()
}
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
ctx.lineWidth = 1
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx.font = `${fontSize}px Arial`
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
for (let i = 0; i < half; i++) {
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
//left count
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx.fillText(`${(half - i)}`, (wsec * i) + spacer, (h / 2) - spacer)
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
//right count
ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - (spacer * 2), (h / 2) + (spacer * 2))
//up count
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
2019-08-25 19:54:50 +00:00
//down count
ctx.fillText(`${(half - i)}`, (w / 2) - (spacer * 2), (h - (hsec * i)) - spacer)
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
}
}
async function onDigital (event, arg) {
if (arg.src) {
try {
await setImage(arg.src)
} catch (err) {
console.error(err)
}
Wait until image is loaded in a temp element and then report back to main process using ipc. This uses the "display_load" ipc channel to call back to the Display class and resolve a promise made in the .show() method. Resolves #38.
2020-02-21 07:28:26 +00:00
ipcRenderer.send('display_load', { src : arg.src });
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
}
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)
Display will now show a meter screen (middle grey) when instructed. Not wired to anything, got distracted by the re-naming shenanigans.
2019-06-18 19:47:17 +00:00
ipcRenderer.on('field', onField)
ipcRenderer.on('meter', onMeter)
Fixed frame counting optimization, resolving issue #17. Also added a Siemens Star focusing screen, a middle gray metering screen and a field guide screen for use with the filmout feature. TODO: actually change monitors when selected.
2019-06-25 16:13:15 +00:00
ipcRenderer.on('focus', onFocus)
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
document.onkeydown = onEscape
</script>
</body>
</html>