Further progress on #20. TODO: Image display logic on the server side. Need to add image to proxy list and give it a properly-extensioned name and cmdAll.

ALSO: Server is not working on iOS.

app/data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.12",
+  "version": "1.7.13",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

app/lib/client/index.js

@@ -50,9 +50,7 @@ function setImage(src) {
             imgTmp = new Image();
             let img = document.getElementById('img');
             let body = document.querySelector('body');
-            if (body.classList.contains('meter')) {
+            body.className = '';
-                body.classList.remove('meter');
-            }
             imgTmp.onload = function () {
                 img.style.backgroundImage = `url('${src}')`;
                 return resolve(src);
@@ -88,6 +86,8 @@ function onFocus(arg) {
         const can = document.getElementById('can');
         const dpr = window.devicePixelRatio || 1;
         let ctx;
+        const body = document.querySelector('body');
+        body.className = '';
         if (!can.classList.contains('show')) {
             can.classList.add('show');
         }
@@ -132,6 +132,8 @@ function onField(arg) {
         const can = document.getElementById('can');
         const dpr = window.devicePixelRatio || 1;
         const screen = window.outerWidth / window.outerHeight;
+        const body = document.querySelector('body');
+        body.className = '';
         let ctx;
         if (!can.classList.contains('show')) {
             can.classList.add('show');

app/lib/filmout/index.js

@@ -23,7 +23,7 @@ class FilmOut {
      * @param {object} ui      Electron ui object
      * @param {object} light   Light device object
      **/
-    constructor(display, ffmpeg, ffprobe, ui, light) {
+    constructor(display, server, ffmpeg, ffprobe, ui, light) {
         this.id = 'filmout';
         this.videoExtensions = ['.mpg', '.mpeg', '.mov', '.mkv', '.avi', '.mp4'];
         this.stillExtensions = ['.tif', '.tiff', '.png', '.jpg', '.jpeg', '.bmp'];
@@ -42,6 +42,7 @@ class FilmOut {
             files: []
         };
         this.display = display;
+        this.server = server;
         this.ffmpeg = ffmpeg;
         this.ffprobe = ffprobe;
         this.ui = ui;
@@ -426,6 +427,7 @@ class FilmOut {
         try {
             await this.display.open();
             await this.display.focus();
+            await this.server.cmdAll('focus');
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);
@@ -440,6 +442,7 @@ class FilmOut {
         try {
             await this.display.open();
             await this.display.field(ratio);
+            await this.server.cmdAll('field', { ratio });
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);
@@ -453,6 +456,7 @@ class FilmOut {
         try {
             await this.display.open();
             await this.display.meter();
+            await this.server.cmdAll('meter');
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);
@@ -465,6 +469,7 @@ class FilmOut {
         try {
             await this.display.hide();
             await this.display.close();
+            await this.server.cmdAll('blank');
         }
         catch (err) {
             this.log.error(err, 'FILMOUT', true, true);
@@ -478,7 +483,7 @@ class FilmOut {
         this.log.info(`Changing the display to ${arg.display}`);
     }
 }
-module.exports = (display, ffmpeg, ffprobe, ui, light) => {
+module.exports = (display, server, ffmpeg, ffprobe, ui, light) => {
-    return new FilmOut(display, ffmpeg, ffprobe, ui, light);
+    return new FilmOut(display, server, ffmpeg, ffprobe, ui, light);
 };
 //# sourceMappingURL=index.js.map

app/lib/server/index.js

@@ -63,10 +63,11 @@ class Server {
         this.wss.on('connection', async function (ws) {
             ws.on("message", function (data) {
                 let obj = JSON.parse(data);
-                this.log.info(data);
+                //this.log.info(data)
                 if (obj.id && this.queue[obj.id]) {
                     this.queue[obj.id](obj);
                     delete this.queue[obj.id];
+                    this.log.info(`${obj.action} complete`);
                 }
             }.bind(this));
             ws.on('close', function () {

app/main.js

@@ -117,8 +117,9 @@ var init = async function () {
 		log.error('Error enumerating connected devices', err)
 	}
 
+	server = require('server')()
 	light = require('light')(arduino, cfg, mainWindow.webContents)
-	filmout = require('filmout')(display, ffmpeg, ffprobe, mainWindow.webContents, light)
+	filmout = require('filmout')(display, server, ffmpeg, ffprobe, mainWindow.webContents, light)
 	cam = require('cam')(arduino, cfg, mainWindow.webContents, filmout)
 	proj = require('proj')(arduino, cfg, mainWindow.webContents, filmout)
 	alert = require('alert')(mainWindow.webContents)
@@ -136,8 +137,6 @@ var init = async function () {
 	
 	cmd = require('cmd')(cfg, proj, cam, light, alert, cam2, proj2, capper)
 	seq = require('sequencer')(cfg, cmd, mainWindow.webContents)
-
-	server = require('server')()
 }
 
 app.on('ready', init)

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy-app",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy-app",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "description": "GUI for the mcopy small gauge film optical printer platform",
   "main": "main.js",
   "scripts": {

app/server.html

@@ -4,8 +4,7 @@
       html, body{ background: #000; padding: 0; margin: 0; width: 100vw; height: 100vh; overflow: hidden; }
       body.meter { background: rgb(117, 117, 117); }
       body.blank { background: #000; }
-      body.blank #img { display: none; }
+      body.blank #img, body.blank #can, body.meter #img, body.meter #can { display: none; }
-      body.blank #can { display: none; }
       #nosleep { color: #fff; margin: 50px auto }
       #img {
          position: absolute;

app/src/lib/client/index.ts

@@ -32,9 +32,7 @@ async function setImage (src : string) {
       imgTmp = new Image()
       let img = document.getElementById('img')
       let body = document.querySelector('body')
-      if (body.classList.contains('meter')) {
+      body.className = ''
-         body.classList.remove('meter')
-      }
       imgTmp.onload = function () {
          img.style.backgroundImage = `url('${src}')`;
          return resolve(src)
@@ -66,6 +64,8 @@ async function onFocus (arg : McopyRequest ) {
    const can : HTMLCanvasElement = document.getElementById('can') as HTMLCanvasElement
    const dpr = window.devicePixelRatio || 1
    let ctx;
+   const body = document.querySelector('body')
+   body.className = ''
 
    if (!can.classList.contains('show')) {
       can.classList.add('show')
@@ -113,6 +113,8 @@ async function onField (arg : McopyRequest) {
    const can : HTMLCanvasElement = document.getElementById('can') as HTMLCanvasElement
    const dpr : number = window.devicePixelRatio || 1
    const screen : number = window.outerWidth / window.outerHeight
+   const body = document.querySelector('body')
+   body.className = ''
    let ctx : CanvasRenderingContext2D;
    if (!can.classList.contains('show')) {
       can.classList.add('show')

data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.12",
+  "version": "1.7.13",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mcopy",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mcopy",
-      "version": "1.7.12",
+      "version": "1.7.13",
       "license": "MIT",
       "dependencies": {
         "arduino": "file:app/lib/arduino",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "description": "Small gauge film optical printer platform",
   "main": "build.js",
   "directories": {

processing/mcopy/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.12",
+  "version": "1.7.13",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

src/filmout/index.ts

@@ -37,6 +37,7 @@ class FilmOut {
 	private ipc : any;
 	private ui : any;
 	private log : any;
+	private server : any;
 	/**
 	 * @constructor
 	 * Builds FilmOut class with display, ffmpeg, ffprobe, ui and light as internal properties.
@@ -47,8 +48,9 @@ class FilmOut {
 	 * @param {object} ui      Electron ui object
 	 * @param {object} light   Light device object
 	 **/
-	constructor (display : any, ffmpeg : any, ffprobe : any, ui : any, light : any) {
+	constructor (display : any, server : any, ffmpeg : any, ffprobe : any, ui : any, light : any) {
 		this.display = display;
+		this.server = server;
 		this.ffmpeg = ffmpeg;
 		this.ffprobe = ffprobe;
 		this.ui = ui;
@@ -444,6 +446,7 @@ class FilmOut {
 		try {
 			await this.display.open();
 			await this.display.focus();
+			await this.server.cmdAll('focus')
 		} catch (err) {
 			this.log.error(err, 'FILMOUT', true, true);
 		}
@@ -457,6 +460,7 @@ class FilmOut {
 		try {
 			await this.display.open();
 			await this.display.field(ratio);
+			await this.server.cmdAll('field', { ratio });
 		} catch (err) {
 			this.log.error(err, 'FILMOUT', true, true);
 		}
@@ -469,6 +473,7 @@ class FilmOut {
 		try {
 			await this.display.open();
 			await this.display.meter();
+			await this.server.cmdAll('meter');
 		} catch (err) {
 			this.log.error(err, 'FILMOUT', true, true);
 		}
@@ -480,6 +485,7 @@ class FilmOut {
 		try {
 			await this.display.hide();
 			await this.display.close();
+			await this.server.cmdAll('blank');
 		} catch (err) {
 			this.log.error(err, 'FILMOUT', true, true);
 		}
@@ -493,6 +499,6 @@ class FilmOut {
 	}
 }
 
-module.exports = (display : any, ffmpeg : any, ffprobe : any, ui : any, light : any) => {
+module.exports = (display : any, server : any, ffmpeg : any, ffprobe : any, ui : any, light : any) => {
-	return new FilmOut(display, ffmpeg, ffprobe, ui, light);
+	return new FilmOut(display, server, ffmpeg, ffprobe, ui, light);
 }

src/server/index.ts

@@ -95,10 +95,11 @@ class Server {
 		this.wss.on('connection', async function (ws : WebSocket) {
 			ws.on("message", function (data : string ) {
 				let obj : any = JSON.parse(data)
-				this.log.info(data)
+				//this.log.info(data)
 				if (obj.id && this.queue[obj.id]) {
 					this.queue[obj.id](obj)
 					delete this.queue[obj.id]
+					this.log.info(`${obj.action} complete`)
 				}
     		}.bind(this))