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.

app/display.html

@@ -47,17 +47,20 @@
 	<script>
 		'use strict';
 		const { remote, ipcRenderer } = require('electron')
-		
+		let imgTmp; 
 		async function setImage (src) {
 			return new Promise(async (resolve, reject) => {
-				//let img = new Image()
+				imgTmp = 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}')`;
+				imgTmp.onload = function () {
+					img.style.backgroundImage = `url('${src}')`;
+					return resolve(src);
+				};
+				imgTmp.src = src;
 			});
 		}
 		async function onMeter () {
@@ -104,7 +107,7 @@
 			//console.log(`o: ${opp}`)
       
 			for (let i = 0; i < count; i++) {
-				  ctx.beginPath()
+				ctx.beginPath()
 			    ctx.moveTo(w / 2, h / 2)
 			    ctx.lineTo((w / 2) + opp, longest)
 			    ctx.lineTo((w / 2) - opp, longest)
@@ -210,6 +213,7 @@
 				} catch (err) {
 					console.error(err)
 				}
+				ipcRenderer.send('display_load', { src : arg.src });
 			}
 			return event.returnValue = true
 		}

app/lib/display/index.js

@@ -20,6 +20,7 @@ class WebView {
     constructor(platform, display) {
         this.opened = false;
         this.showing = false;
+        this.loadWait = {};
         const prefs = {
             webPreferences: {
                 nodeIntegration: true,
@@ -47,6 +48,8 @@ class WebView {
         //this.digitalWindow.hide();
         this.platform = platform;
         this.display = display;
+        this.ipc = require('electron').ipcMain;
+        this.ipc.on('display_load', this.onLoad.bind(this));
     }
     async open() {
         this.digitalWindow.show();
@@ -70,8 +73,14 @@ class WebView {
             console.error(err);
         }
         this.showing = true;
-        await delay_1.delay(200);
-        return true;
+        return new Promise(function (resolve) {
+            this.loadWait[src] = resolve;
+        }.bind(this));
+    }
+    onLoad(evt, arg) {
+        console.dir(arg);
+        this.loadWait[arg.src]();
+        delete this.loadWait[arg.src];
     }
     async focus() {
         if (!this.digitalWindow) {

app/main.js

@@ -6,14 +6,13 @@
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
 const electron = require('electron')
-const { Menu, MenuItem, ipcMain, BrowserWindow, app } = electron
+const { Menu, BrowserWindow, app } = electron
 const { EventEmitter } = require('events')
 const { join } = require('path')
 
 const ee = new EventEmitter()
 const settings = require('settings')
 const system = require('system')
-const Server = require('server')
 const { delay } = require('delay')
 
 //Objects
@@ -22,9 +21,7 @@ const mcopy = {}
 let SYSTEM;
 let log;
 let mainWindow;
-let mscript;
 let arduino;
-let server;
 let menu;
 let display;
 let ffmpeg;
@@ -89,7 +86,6 @@ var init = async function () {
 	ffmpeg = require('ffmpeg')(SYSTEM)
 	ffprobe = require('ffprobe')(SYSTEM)
 	arduino = require('arduino')(cfg, ee)
-	mscript = require('mscript')
 
 	dev = require('devices')(arduino, settings, mainWindow)
 

cli/lib/display/index.js

@@ -20,6 +20,7 @@ class WebView {
     constructor(platform, display) {
         this.opened = false;
         this.showing = false;
+        this.loadWait = {};
         const prefs = {
             webPreferences: {
                 nodeIntegration: true,
@@ -47,6 +48,8 @@ class WebView {
         //this.digitalWindow.hide();
         this.platform = platform;
         this.display = display;
+        this.ipc = require('electron').ipcMain;
+        this.ipc.on('display_load', this.onLoad.bind(this));
     }
     async open() {
         this.digitalWindow.show();
@@ -70,8 +73,14 @@ class WebView {
             console.error(err);
         }
         this.showing = true;
-        await delay_1.delay(200);
-        return true;
+        return new Promise(function (resolve) {
+            this.loadWait[src] = resolve;
+        }.bind(this));
+    }
+    onLoad(evt, arg) {
+        console.dir(arg);
+        this.loadWait[arg.src]();
+        delete this.loadWait[arg.src];
     }
     async focus() {
         if (!this.digitalWindow) {

src/display/index.ts

@@ -8,6 +8,7 @@
 import spawn = require('spawn');
 import { join as pathJoin } from 'path';
 import { delay } from 'delay';
+import { IpcMain } from 'electron';
 
 const { BrowserWindow } = require('electron');
 
@@ -26,6 +27,8 @@ class WebView {
 	public showing : boolean = false;
 	private platform : string;
 	public display : any;
+	private loadWait : any = {};
+	private ipc : any;
 
 	constructor (platform : string, display : any) {
 		const prefs : any = {
@@ -55,6 +58,10 @@ class WebView {
 		//this.digitalWindow.hide();
 		this.platform = platform;
 		this.display = display;
+
+		this.ipc = require('electron').ipcMain;
+
+		this.ipc.on('display_load', this.onLoad.bind(this));
 	}
 	async open () {
 		this.digitalWindow.show();
@@ -77,8 +84,15 @@ class WebView {
 			console.error(err);
 		}
 		this.showing = true;
-		await delay(200);
-		return true;
+
+		return new Promise(function (resolve : Function) {
+			this.loadWait[src] = resolve;
+		}.bind(this));
+	}
+
+	onLoad (evt : Event, arg : any) {
+		this.loadWait[arg.src]();
+		delete this.loadWait[arg.src];
 	}
 	async focus () {
 		if (!this.digitalWindow) {