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

216 lines
5.3 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%;
transform: translateX(-50%);
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
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}')`;
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++) {
Fixed the siemen's star focusing screen with magic numbers. Better than it was before!
2019-06-26 20:07:00 +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')
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
console.dir(arg)
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
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) {
can.width = (window.innerHeight * arg.ratio) * dpr
} else {
can.width = window.innerWidth * dpr
}
can.height = window.innerHeight * dpr
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) {
can.style.width = `${window.innerHeight * arg.ratio}px`
} else {
can.style.width = `${window.innerWidth}px`
}
Add new display and capture modules. Don't need new capture module rn.
2019-02-08 18:16:42 +00:00
can.style.height = `${window.innerHeight}px`
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
const fontSize = 18;
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()
}
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++) {
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)
//ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - spacer, (h / 2) - spacer)
ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
//ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (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)
}
}
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>