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.

app/display.html

@@ -30,7 +30,8 @@
 		background: #fff;
 		display: none;
 		position: fixed;
-		left: 0;
+		left: 50%;
+    	transform: translateX(-50%);
 		top: 0;
 	}
 	#can.show{
@@ -113,18 +114,27 @@
 			    ctx.translate(- w / 2, -h / 2)
 			}
 		}
-		async function onField () {
+		async function onField (evt, arg) {
 			console.log('field guide')
+			console.dir(arg)
 			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
+			if (arg.ratio) {
+				can.width = (window.innerHeight * arg.ratio) * dpr
+			} else {
+				can.width = window.innerWidth * dpr
+        	}
+        	can.height = window.innerHeight * dpr
 
-            can.style.width = `${window.innerWidth}px`
+       		if (arg.ratio) {
+       			can.style.width = `${window.innerHeight * arg.ratio}px`
+       		} else {
+            	can.style.width = `${window.innerWidth}px`
+       		}
             can.style.height = `${window.innerHeight}px`
 
            	ctx = can.getContext('2d')

app/lib/display/index.js

@@ -86,14 +86,14 @@ class WebView {
             console.error(err);
         }
     }
-    async field() {
+    async field(ratio) {
         if (!this.digitalWindow) {
             console.warn(`Cannot show field guide because window does not exist`);
             return false;
         }
         await delay_1.delay(500);
         try {
-            this.digitalWindow.webContents.send('field', { field: true });
+            this.digitalWindow.webContents.send('field', { field: true, ratio });
         }
         catch (err) {
             console.error(err);
@@ -189,8 +189,8 @@ class Display {
     async focus() {
         return await this.wv.focus();
     }
-    async field() {
-        return await this.wv.field();
+    async field(ratio) {
+        return await this.wv.field(ratio);
     }
     async meter() {
         return await this.wv.meter();

app/lib/filmout/index.js

@@ -290,10 +290,11 @@ class FilmOut {
      *
      **/
     async field(evt, arg) {
+        const ratio = arg.ratio;
         this.log.info(`Showing field guide screen`);
         try {
             await this.display.open();
-            await this.display.field();
+            await this.display.field(ratio);
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);

app/lib/ui/filmout.js

@@ -235,7 +235,11 @@ class FilmOut {
         ipcRenderer.send('focus', { focus: true });
     }
     field() {
-        ipcRenderer.send('field', { field: true });
+        let ratio = null;
+        if (this.state.name) {
+            ratio = this.state.width / this.state.height;
+        }
+        ipcRenderer.send('field', { field: true, ratio });
     }
     meter() {
         ipcRenderer.send('meter', { meter: true });

app/src/lib/ui/filmout.ts

@@ -172,7 +172,7 @@ class FilmOut {
 		let obj : any = {
 			path : filePath,
 			fileName
-		}
+		};
 
 		if (filePath && filePath !== '') {
 			proceed = confirm(`Are you sure you want to use ${fileName}?`);
@@ -183,7 +183,7 @@ class FilmOut {
 		if (proceed) {
 			gui.overlay(true);
 			gui.spinner(true, `Getting info about ${fileName}`);
-			ipcRenderer.send('filmout', obj)
+			ipcRenderer.send('filmout', obj);
 		} else {
 			$('#projector_type_digital').prop('checked', 'checked');
 			$('#digital').removeClass('active');
@@ -267,7 +267,11 @@ class FilmOut {
 	}
 
 	field () {
-		ipcRenderer.send('field', { field : true });
+		let ratio : number = null;
+		if (this.state.name) {
+			ratio = this.state.width / this.state.height
+		}
+		ipcRenderer.send('field', { field : true, ratio });
 	}
 
 	meter () {

cli/lib/display/index.js

@@ -86,14 +86,14 @@ class WebView {
             console.error(err);
         }
     }
-    async field() {
+    async field(ratio) {
         if (!this.digitalWindow) {
             console.warn(`Cannot show field guide because window does not exist`);
             return false;
         }
         await delay_1.delay(500);
         try {
-            this.digitalWindow.webContents.send('field', { field: true });
+            this.digitalWindow.webContents.send('field', { field: true, ratio });
         }
         catch (err) {
             console.error(err);
@@ -189,8 +189,8 @@ class Display {
     async focus() {
         return await this.wv.focus();
     }
-    async field() {
-        return await this.wv.field();
+    async field(ratio) {
+        return await this.wv.field(ratio);
     }
     async meter() {
         return await this.wv.meter();

cli/lib/filmout/index.js

@@ -290,10 +290,11 @@ class FilmOut {
      *
      **/
     async field(evt, arg) {
+        const ratio = arg.ratio;
         this.log.info(`Showing field guide screen`);
         try {
             await this.display.open();
-            await this.display.field();
+            await this.display.field(ratio);
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);

lib/display/index.js

@@ -86,14 +86,14 @@ class WebView {
             console.error(err);
         }
     }
-    async field() {
+    async field(ratio) {
         if (!this.digitalWindow) {
             console.warn(`Cannot show field guide because window does not exist`);
             return false;
         }
         await delay_1.delay(500);
         try {
-            this.digitalWindow.webContents.send('field', { field: true });
+            this.digitalWindow.webContents.send('field', { field: true, ratio });
         }
         catch (err) {
             console.error(err);
@@ -189,8 +189,8 @@ class Display {
     async focus() {
         return await this.wv.focus();
     }
-    async field() {
-        return await this.wv.field();
+    async field(ratio) {
+        return await this.wv.field(ratio);
     }
     async meter() {
         return await this.wv.meter();

lib/filmout/index.js

@@ -290,10 +290,11 @@ class FilmOut {
      *
      **/
     async field(evt, arg) {
+        const ratio = arg.ratio;
         this.log.info(`Showing field guide screen`);
         try {
             await this.display.open();
-            await this.display.field();
+            await this.display.field(ratio);
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);

src/display/index.ts

@@ -93,14 +93,14 @@ class WebView {
 			console.error(err);
 		}
 	}
-	async field () {
+	async field (ratio : number) {
 		if (!this.digitalWindow) {
 			console.warn(`Cannot show field guide because window does not exist`);
 			return false;
 		}
 		await delay(500);
 		try {
-			this.digitalWindow.webContents.send('field', { field : true });
+			this.digitalWindow.webContents.send('field', { field : true, ratio });
 		} catch (err) {
 			console.error(err);
 		}
@@ -210,8 +210,8 @@ class Display {
 	public async focus () {
 		return await this.wv.focus();
 	}
-	public async field () {
-		return await this.wv.field();
+	public async field ( ratio : number) {
+		return await this.wv.field(ratio);
 	}
 	public async meter () {
 		return await this.wv.meter();

src/filmout/index.ts

@@ -292,10 +292,11 @@ class FilmOut {
 	 *
 	 **/
 	async field (evt : any, arg : any) {
+		const ratio : number = arg.ratio;
 		this.log.info(`Showing field guide screen`);
 		try {
 			await this.display.open();
-			await this.display.field();
+			await this.display.field(ratio);
 		} catch (err) {
 			this.log.error(err, 'FILMOUT', true, true);
 		}