Fixed the iOS issue. Also allow for fullscreen on all browsers (with no sleep). Can preview properly but normal mode does not work

app/data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.15",
+  "version": "1.7.16",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

app/display.html

@@ -17,6 +17,12 @@
 	body.meter #can {
 		display: none;
 	}
+	body.image #can{
+		display: none;
+	}
+	body.image #img {
+		display: block;
+	}
 	#img {
 		position: absolute;
 	    /*background-image: url(".../img/background.jpg");*/
@@ -59,6 +65,7 @@
 				let img = document.getElementById('img')
 				let body = document.querySelector('body')
 				body.className = ''
+				body.classList.add('image')
 				imgTmp.onload = function () {
 					img.style.backgroundImage = `url('${src}')`;
 					return resolve(src);

app/lib/delay/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Delay in an async/await function
+ *
+ * @param {integer}  ms 	Milliseconds to delay for
+ *
+ * @returns {Promise} Promise to resolve after timeout
+ **/
+declare function delay(ms: number): Promise<unknown>;

app/package-lock.json

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

app/package.json

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

app/server.html

@@ -4,8 +4,9 @@
       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, body.blank #can, body.meter #img, body.meter #can { display: none; }
-      #nosleep { color: #fff; margin: 50px auto }
+      body.blank #img, body.blank #can, body.meter #img, body.meter #can, body.image #can { display: none; }
+      body.image #img, #can.show { display: block; }
+      #nosleep { color: #fff; margin: 50px auto; text-align: center; }
       #img {
          position: absolute;
          background-repeat:no-repeat;
@@ -25,11 +26,8 @@
          top: 50%;
          transform: translate(-50%,-50%);
       }
-      #can.show{
-         display: block;
-      }
    </style>
-   <div id="nosleep">Click to prevent sleep</div>
+   <div id="nosleep">Click to full screen and prevent sleep</div>
    <div id="img">
    </div>
    <canvas id="can">

app/src/lib/client/index.ts

@@ -14,7 +14,7 @@ interface McopyResponse {
    id : string;
 }
 
-const ws = new WebSocket('ws://localhost:{{PORT}}/');
+const ws = new WebSocket(`ws://${location.host.split(':')[0]}:{{PORT}}/`);
 let imgTmp : HTMLImageElement 
 
 function preventSleep () {
@@ -22,17 +22,41 @@ function preventSleep () {
    var noSleep = new NoSleep();
    document.addEventListener('click', function enableNoSleep() {
       document.removeEventListener('click', enableNoSleep, false);
-      document.getElementById('nosleep').remove();
       noSleep.enable();
+      document.getElementById('nosleep').remove();
    }, false);
 }
 
+function fullScreen () {
+	document.addEventListener('click', function enableFullScreen() {
+		const elem = document.querySelector('body');
+		document.removeEventListener('click', enableFullScreen, false);
+		if (elem.requestFullscreen) {
+			elem.requestFullscreen();
+			//@ts-ignore
+		} else if (typeof elem.webkitRequestFullscreen !== 'undefined') { /* Safari */
+			//@ts-ignore
+			elem.webkitRequestFullscreen();
+			//@ts-ignore
+		} else if (typeof elem.msRequestFullscreen !== 'undefined') { /* IE11 */
+			//@ts-ignore
+			elem.msRequestFullscreen();
+		}
+   }, false);
+}
+
+function displayMode () {
+	fullScreen();
+	preventSleep();
+}
+
 async function setImage (src : string) {
    return new Promise(async (resolve : Function, reject : Function) => {
       imgTmp = new Image()
       let img = document.getElementById('img')
       let body = document.querySelector('body')
       body.className = ''
+      body.classList.add('image')
       imgTmp.onload = function () {
          img.style.backgroundImage = `url('${src}')`;
          return resolve(src)
@@ -243,5 +267,5 @@ ws.onclose = async (event : any) => {
 };
 
 (function main () {
-   preventSleep();
+   displayMode();
 })()

data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.15",
+  "version": "1.7.16",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

package-lock.json

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

package.json

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

processing/mcopy/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.15",
+  "version": "1.7.16",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {