Refactored GUI into TypeScript and class-based format

app/lib/server/index.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,7 +10,7 @@ const path_1 = require("path");
 const uuid_1 = require("uuid");
 const Log = require("log");
 class Server {
-    constructor() {
+    constructor(uiInput) {
         this.id = 'server';
         this.isActive = false;
         this.templates = [
@@ -29,6 +29,7 @@ class Server {
         this.queue = {};
         this.intervalPeriod = 10000; //10 sec
         this.init();
+        this.ui = uiInput;
     }
     async init() {
         this.log = await Log({ label: this.id });
@@ -59,8 +60,9 @@ class Server {
             this.log.error(err);
             return;
         }
-        this.wss.on('connection', async function (ws) {
+        this.wss.on('connection', async function (ws, req) {
-            ws.on("message", function (data) {
+            const address = req.socket.remoteAddress;
+            ws.on('message', function (data) {
                 let obj = JSON.parse(data);
                 //this.log.info(data)
                 if (obj.id && this.queue[obj.id]) {
@@ -73,9 +75,11 @@ class Server {
             }.bind(this));
             ws.on('close', function () {
                 this.log.info('Client disconnected');
+                this.notify('Client disconnected', `No longer forwarding digital display to client ${address}`);
             }.bind(this));
             await this.cmd(ws, 'mcopy');
             this.log.info('Client connected');
+            this.notify('Client connected', `Forwarding digital display to client: ${address}`);
         }.bind(this));
         this.log.info(`Websocket server started!`);
         this.log.info(`WSS [ ws://localhost:${this.wsPort} ]`);
@@ -190,8 +194,11 @@ class Server {
             //setTimeout() ?
         }.bind(this));
     }
+    notify(title, message) {
+        this.ui.send('gui', { notify: { title, message } });
     }
-module.exports = function () {
+}
-    return new Server();
+module.exports = function (ui) {
+    return new Server(ui);
 };
 //# sourceMappingURL=index.js.map

app/main.js

@@ -117,7 +117,7 @@ var init = async function () {
 		log.error('Error enumerating connected devices', err)
 	}
 
-	server = require('server')()
+	server = require('server')(mainWindow.webContents)
 	light = require('light')(arduino, cfg, mainWindow.webContents)
 	filmout = require('filmout')(display, server, ffmpeg, ffprobe, mainWindow.webContents, light)
 	cam = require('cam')(arduino, cfg, mainWindow.webContents, filmout)

app/src/lib/ui/devices.ts

@@ -2,7 +2,6 @@
 
 /// <reference path ="jquery.d.ts"/> 
 
-
 let devices : Devices;
 
 class Devices {

app/src/lib/ui/index.ts

@@ -0,0 +1,306 @@
+/* jslint esversion: 6*/
+'use strict';
+
+/// <reference path ="jquery.d.ts"/> 
+
+declare var cam : any;
+declare var proj : any;
+declare var notifier : any;
+declare var PACKAGE : any;
+declare var Spinner : any;
+declare var dialog : any;
+
+let gui : GUI;
+
+class GUI {
+	private id : string = 'gui';
+	private notifierWorking : boolean = true;
+	private spinnerCfg : any=  {
+		lines: 11, // The number of lines to draw
+		length: 15, // The length of each line
+		width: 7, // The line thickness
+		radius: 20, // The radius of the inner circle
+		corners: 1, // Corner roundness (0..1)
+		rotate: 0, // The rotation offset
+		direction: 1, // 1: clockwise, -1: counterclockwise
+		color: '#F2F2F1', // #rgb or #rrggbb or array of colors
+		speed: 1, // Rounds per second
+		trail: 60, // Afterglow percentage
+		shadow: true, // Whether to render a shadow
+		hwaccel: true, // Whether to use hardware acceleration
+		className: 'spinner', // The CSS class to assign to the spinner
+		zIndex: 2e9, // The z-index (defaults to 2000000000)
+		top: '50%', // Top position relative to parent
+		left: '50%' // Left position relative to parent
+	};
+
+	constructor () {
+
+	}
+
+	public init () {
+		this.version();
+		this.listen();
+	}
+
+	private listen() {
+		ipcRenderer.on(this.id, this.listener.bind(this));
+	}
+
+	private listener (event : any, arg : any) {
+		if (arg.notify) {
+			this.notify(arg.notify.title, arg.notify.message);
+		}
+	}
+
+	public fmtZero (val : any, len : number) : string {
+		const raw : number = val;
+		let str : string = val + '';
+		let output : string = '';
+		if (raw < 0) {
+			output = '-' + Array(len - (str.length - 1)).join('0') + str.replace('-', '');
+		} else {
+			if (str.length < len) {
+				output = Array(len - str.length).join('0') + str;
+			} else if (str.length >= len) {
+				str = parseInt(str) + '';
+				output = Array(len - str.length).join('0') + str;
+			}
+		}
+		return output;
+	}
+
+	counterFormat (t : HTMLInputElement, normal : number = null) {
+		const raw : string = t.value;
+		t.value = gui.fmtZero(raw, 6);
+		if (typeof normal !== 'undefined' && parseInt(raw) !== normal) {
+			$(t).addClass('changed');
+		} else {
+			$(t).removeClass('changed');
+		}
+	}
+
+	counterUpdate (which : string, raw : number) {
+		const formattedVal : string = this.fmtZero(raw, 6);
+		$(`.${which} .count`).val(formattedVal);
+	}
+
+	public notify (title : string, message : string) : Promise<boolean> {
+		const config : any = {
+			title,
+			message,
+			//icon: path.join(__dirname, 'coulson.jpg'), // Absolute path (doesn't work on balloons) 
+			sound: true, // Only Notification Center or Windows Toasters 
+			wait: true // Wait with callback, until user action is taken against notification 
+		};
+		if (!this.notifierWorking) {
+			return new Promise((resolve, reject) => { return resolve(true); })
+		}
+		return new Promise((resolve, reject) => {
+			try {
+				notifier.notify(config,
+					function (err : Error, response : any) {
+						// Response is response from notification 
+						if (err) {
+							this.notifierWorking = false;
+							log.error(`Error with notification`, err);
+							return reject(err);
+						}
+						return resolve(true);
+				}.bind(this));
+			} catch (err) {
+				this.notifierWorking = false;
+				//notify-send is not found
+				//determine an alternate for raspian
+				//this feels like a hack
+			}
+		});
+	}
+
+	public async updateCam (t : HTMLInputElement) {
+		const val : string = t.value;
+		let change : boolean;
+
+		if (parseInt(val) === cam.pos) { 
+			return false; 
+		}
+
+		change = await this.confirm(`Are you sure you want to set camera counter to ${val}?`);
+
+		if (change) {
+			cam.pos = parseInt(val);
+			this.updateState();
+		} else {
+			t.value = cam.pos;
+			this.counterFormat(t);
+		}
+	}
+
+	async updateCam2 (t : HTMLInputElement) {
+		const val : string = t.value;
+		let change : boolean;
+
+		if (parseInt(val) === cam.pos) { 
+			return false; 
+		}
+
+		change = await this.confirm(`Are you sure you want to set second camera counter to ${val}?`);
+
+		if (change) {
+			cam.second.pos = parseInt(val);
+			this.updateState();
+		} else {
+			t.value = cam.second.pos;
+			this.counterFormat(t);
+		}
+	}
+
+	async updateProj (t : HTMLInputElement) {
+		const val : string = t.value;
+		let change : boolean;
+		if (parseInt(val) === proj.pos) { 
+			return false; 
+		}
+		change = await this.confirm(`Are you sure you want to set projector counter to ${val}?`);
+		if (change) {
+			proj.pos = parseInt(val);
+			this.updateState();
+		} else {
+			t.value = proj.pos;
+			this.counterFormat(t);
+		}
+		proj.setValue(t.value);
+	}
+
+	async updateProj2 (t : HTMLInputElement) {
+		const val : string = t.value;
+		let change : boolean;
+
+		if (parseInt(val) === proj.second.pos) { 
+			return false; 
+		}
+
+		change = await this.confirm(`Are you sure you want to set second projector counter to ${val}?`);
+		
+		if (change) {
+			proj.second.pos = parseInt(val);
+			this.updateState();
+		} else {
+			t.value = proj.second.pos;
+			this.counterFormat(t);
+		}
+		proj.setValue(t.value);
+	}
+
+	public updateState () {
+		const cpos : number = cam.pos;
+		const ppos : number = proj.pos;
+		
+		const p2pos : number = proj.second.pos;
+		const c2pos : number = cam.second.pos;
+
+		$('#seq_cam_count').val(cpos).change();
+		$('#seq_proj_count').val(ppos).change();
+
+		$('#seq_cam_count_2').val(cpos).change();
+		$('#seq_proj_count_2').val(ppos).change();
+
+		$('#seq_cam_2_count').val(c2pos).change();
+		$('#seq_proj_2_count').val(p2pos).change();
+
+		$('#seq_cam_2_count_2').val(c2pos).change();
+		$('#seq_proj_2_count_2').val(p2pos).change();
+	}
+
+	public spinner (state : boolean, msg : string = null, progress : boolean = false, cancel : boolean = false) {
+		let target;
+		let spinner;
+		if (msg && msg !== '') {
+			this.spinnerMsg(msg);
+		}
+		if (state && !$('#spinner').hasClass('created')) {
+			target = document.getElementById('spinner');
+			spinner = new Spinner(this.spinnerCfg).spin(target);
+			$('#spinnerProgress').hide();
+			$('#spinner').addClass('created');
+		} else if (state) {
+			$('#spinner').show();
+		} else if (!state) {
+			$('#spinner').hide();
+			this.spinnerMsg('');
+		}
+		if (progress) {
+			$('#spinnerProgress').show();
+		} else {
+			$('#spinnerProgress').hide();
+		}
+		if (cancel) {
+			$('#spinnerCancel').show();
+		} else {
+			$('#spinnerCancel').hide();
+		}
+	}
+
+	private spinnerMsg (msg : string) {
+		$('#spinnerMsg').text(msg);
+	}
+
+	public overlay (state : boolean) {
+		if (state) {
+			$('#overlay').show();
+		} else {
+			$('#overlay').hide();
+		}
+	}
+
+	public async info (title : string, message : string) {
+		const config : any = {
+			type : 'info',
+			buttons : ['Ok'],
+			title: title,
+			message : message
+		};
+		return dialog.showMessageBox(config);
+	}
+
+	async confirm (message : string, cancel : string = 'Cancel') {
+		const config : any = {
+			buttons : ['Yes', cancel],
+			message
+		}
+		const res = await dialog.showMessageBox(config);
+		return res.response === 0;
+	}
+
+	public async choice (message : string, choices : string[]) {
+		const config : any = {
+			buttons : choices,
+			defaultId : 0,
+			message
+		}
+		const res = await dialog.showMessageBox(config);
+		return res.response;
+	}
+
+	public async warn (title : string, message : string) {
+		const config : any = {
+			type : 'warning',
+			buttons : ['Ok'],
+			title,
+			message
+		};
+		return dialog.showMessageBox(config);
+	}
+
+	private version () {
+		$('#version').text(PACKAGE.version);
+	}
+
+	private error () {
+
+	}
+}
+
+
+gui = new GUI();
+module.exports = gui;

app/src/lib/ui/mscript.ts

@@ -5,7 +5,6 @@
 import Mscript from 'mscript';
 
 declare var nav : any;
-declare var gui : any;
 declare var CodeMirror : any;
 declare var mscript : any;
 declare var cmd : any;

app/src/lib/ui/seq.ts

@@ -2,7 +2,6 @@
 
 /// <reference path ="jquery.d.ts"/> 
 
-declare var gui : any;
 declare var cfg : any;
 declare var log : any;
 declare var w2popup : any;

package.json

@@ -38,20 +38,28 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
+    "alert": "file:app/lib/alert",
     "arduino": "file:app/lib/arduino",
     "cam": "file:app/lib/cam",
+    "capper" : "file:app/lib/capper",
     "cmd": "file:app/lib/cmd",
     "delay": "file:app/lib/delay",
     "devices": "file:app/lib/devices",
     "display": "file:app/lib/display",
+    "exec" : "file:app/lib/exec",
+    "exit" : "file:app/lib/exit",
+    "ffmpeg" : "file:app/lib/ffmpeg",
+    "ffprobe" : "file:app/lib/ffprobe",
     "filmout": "file:app/lib/filmout",
     "frame": "file:app/lib/frame",
+    "intval" : "file:app/lib/intval",
     "light": "file:app/lib/light",
     "log": "file:app/lib/log",
     "mscript": "file:app/lib/mscript",
     "processing": "file:app/lib/processing",
     "proj": "file:app/lib/proj",
     "sequencer": "file:app/lib/sequencer",
+    "server" : "file:app/lib/server",
     "settings": "file:app/lib/settings",
     "system": "file:app/lib/system"
   }

src/server/index.ts

@@ -1,3 +1,5 @@
+'use strict'
+
 import WebSocket, { WebSocketServer } from 'ws'
 import express, { Express, Request, Response, Application } from 'express'
 import { readFile } from 'fs/promises'
@@ -53,9 +55,11 @@ class Server {
 	private queue : ServerQueue = {}
 	private interval : ReturnType<typeof setInterval>
 	private intervalPeriod : number = 10000 //10 sec
+	private ui : any;
 
-	constructor () {
+	constructor (uiInput : any) {
 		this.init()
+		this.ui = uiInput;
 	}
 
 	async init () {
@@ -91,8 +95,9 @@ class Server {
 			this.log.error(err)
 			return
 		}
-		this.wss.on('connection', async function (ws : WebSocket) {
+		this.wss.on('connection', async function (ws : WebSocket, req: any) {
-			ws.on("message", function (data : string ) {
+			const address : string = req.socket.remoteAddress;
+			ws.on('message', function (data : string ) {
 				let obj : any = JSON.parse(data)
 				//this.log.info(data)
 				if (obj.id && this.queue[obj.id]) {
@@ -106,10 +111,12 @@ class Server {
 
     		ws.on('close', function () {
     			this.log.info('Client disconnected')
+    			this.notify('Client disconnected', `No longer forwarding digital display to client ${address}`)
     		}.bind(this))
 
     		await this.cmd(ws, 'mcopy')
     		this.log.info('Client connected')
+    		this.notify('Client connected', `Forwarding digital display to client: ${address}`)
 
 		}.bind(this))
 		this.log.info(`Websocket server started!`)
@@ -200,8 +207,8 @@ class Server {
 		return false
 	}
 
-	public async displayImage (src : string) {
+	public async displayImage (src : string) : Promise<boolean> {
-		let key
+		let key : string
 		if (this.useServer()) {
 			key = basename(src)
 			this.addProxy(key, src)
@@ -237,8 +244,12 @@ class Server {
 			//setTimeout() ?
 		}.bind(this))
 	}
+
+	private notify (title : string, message : string) {
+		this.ui.send('gui', { notify : { title, message }});
+	}
 }
 
-module.exports = function () {
+module.exports = function (ui : any) {
-	return new Server()
+	return new Server(ui)
 }