Add fonts. Update UI to open/close and select a sequence.

browser/globals.d.ts

@@ -1,7 +1,8 @@
 interface SequenceState {
   hash : string,
   name : string,
-  progress : number
+  progress : number,
+  current? : number
 }
 
 interface State {
@@ -13,4 +14,5 @@ interface State {
 interface Message {
 	cmd? : string;
   state? : State;
+  sequence? : string;
 }

browser/index.ts

@@ -36,6 +36,9 @@ class Client {
       case 'open' :
         this.receiveCameraOpen();
         break;
+      case 'close' :
+        this.receiveCameraClose();
+        break;
       default:
         console.warn(`No command ${id}`);
         break;
@@ -50,6 +53,43 @@ class Client {
   private receiveCameraOpen () {
     console.log('got camera open');
   }
+
+  public sendCameraClose () {
+    console.log('send camera close');
+    this.client.send(JSON.stringify({ cmd : 'close' }));
+  }
+
+  private receiveCameraClose () {
+    console.log('got camera close');
+  }
+
+  public sendSelect () {
+    const sequence : string = (document.getElementById('sequence') as HTMLSelectElement ).value;
+    let msg : Message;
+    if (sequence === '- Select Image Sequence -') {
+      return;
+    }
+    msg = { cmd : 'select', sequence };
+    console.log('send select');
+    console.log(sequence)
+    this.client.send(JSON.stringify(msg));
+  }
+
+  public fullscreen () {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      this.exitFullscreen();
+    }
+  }
+
+  public exitFullscreen () {
+    if (document.fullscreenElement) {
+      document.exitFullscreen()
+    }
+  }
+
+
 }
 
 const client : Client = new Client();

dist/camera/index.js

@@ -39,10 +39,7 @@ class CameraSerialPortMock extends serialport_1.SerialPortMock {
                 this._mockSend(Commands.CAMERA_OPEN, 125);
                 break;
             case Commands.CAMERA_CLOSE:
-                this._mockSend(Commands.CAMERA_FORWARD, 3);
+                this._mockSend(Commands.CAMERA_CLOSE, 125);
-                break;
-            case Commands.CAMERA_OPEN:
-                this._mockSend(Commands.CAMERA_BACKWARD, 2);
                 break;
             default:
                 this.log.warn(`[MOCK] Command "${buffer}" does not exist on mock`);

dist/index.js

@@ -37,12 +37,14 @@ const log_1 = require("./log");
 const files_1 = require("./files");
 const ffmpeg_1 = require("./ffmpeg");
 const camera_1 = require("./camera");
+const sequence_1 = require("./sequence");
 const log = (0, log_1.createLog)('fm');
 const app = (0, express_1.default)();
 let wss;
 let fd;
 let ffmpeg;
 let camera;
+let sequence;
 let index;
 let port;
 let wsPort;
@@ -174,22 +176,39 @@ async function onClientMessage(data, ws) {
         log.error('Error parsing message', err);
     }
     if (msg !== null && typeof msg.cmd !== 'undefined') {
-        res = await cmd(msg.cmd);
+        res = await cmd(msg);
     }
     ws.send(JSON.stringify(res));
 }
-async function cmd(id) {
+async function cmd(msg) {
-    switch (id) {
+    switch (msg.cmd) {
         case 'open':
             await cameraOpen();
             return { cmd: 'open' };
+        case 'close':
+            await cameraClose();
+            return { cmd: 'close' };
+        case 'select':
+            await select(msg.sequence);
+            return { cmd: 'select', sequence: msg.sequence };
         default:
-            log.warn(`No matching command: ${id}`);
+            log.warn(`No matching command: ${msg.cmd}`);
     }
 }
 async function cameraOpen() {
     await camera.open();
 }
+async function cameraClose() {
+    await camera.close();
+}
+async function select(id) {
+    const sequencesArr = await files_1.Files.enumerateSequences(sequences);
+    const seq = sequencesArr.find(el => el.hash === id);
+    if (typeof seq == 'undefined' || seq == null) {
+        log.error('Sequence not found, maybe deleted?', new Error(`Cannot find sequence ${id}`));
+    }
+    await sequence.load(seq);
+}
 app.get('/', async (req, res, next) => {
     const sequencesArr = await files_1.Files.enumerateSequences(sequences);
     //const videosArr : VideoObject[] = await Files.enumerateVideos(videos);
@@ -202,6 +221,7 @@ async function main() {
     ffmpeg = new ffmpeg_1.FFMPEG(process.env['FFMPEG']);
     camera = new camera_1.Camera();
     //fd = new FD(process.env['FD'], width, height,  process.env['FD_HOST'],  parseInt(process.env['FD_PORT'])); 
+    sequence = new sequence_1.Sequence();
     app.listen(port, async () => {
         log.info(`filmout_manager HTTP server running on port ${port}`);
     });

src/camera/index.ts

@@ -53,10 +53,7 @@ class CameraSerialPortMock extends SerialPortMock {
 				this._mockSend(Commands.CAMERA_OPEN, 125);
 				break;
 			case Commands.CAMERA_CLOSE :
-				this._mockSend(Commands.CAMERA_FORWARD, 3);
+				this._mockSend(Commands.CAMERA_CLOSE, 125);
-				break;
-			case Commands.CAMERA_OPEN :
-				this._mockSend(Commands.CAMERA_BACKWARD, 2);
 				break;
 			default:
 				this.log.warn(`[MOCK] Command "${buffer}" does not exist on mock`);

src/globals.d.ts

@@ -1,7 +1,8 @@
 interface SequenceState {
   hash : string,
   name : string,
-  progress : number
+  progress : number,
+  current? : number
 }
 
 interface State {
@@ -13,4 +14,5 @@ interface State {
 interface Message {
 	cmd? : string;
   state? : State;
+  sequence? : string;
 }

src/index.ts

@@ -23,6 +23,7 @@ import { delay } from './delay';
 import { FD } from './fd';
 import { FFMPEG } from './ffmpeg';
 import { Camera } from './camera';
+import { Sequence } from './sequence';
 
 const log : Logger = createLog('fm');
 const app : Express = express();
@@ -30,6 +31,7 @@ let wss : Server;
 let fd : FD;
 let ffmpeg : FFMPEG;
 let camera : Camera;
+let sequence : Sequence;
 let index : HandlebarsTemplateDelegate<any>;
 
 let port : number;
@@ -161,18 +163,24 @@ async function onClientMessage (data : any, ws : WebSocket) {
 		log.error('Error parsing message', err);
 	}
 	if (msg !== null && typeof msg.cmd !== 'undefined') {
-		res = await cmd(msg.cmd);
+		res = await cmd(msg);
 	}
 	ws.send(JSON.stringify(res));
 }
 
-async function cmd (id : string) : Promise<Message> {
+async function cmd (msg : Message) : Promise<Message> {
-	switch(id) {
+	switch(msg.cmd) {
 		case 'open' :
 			await cameraOpen();
 			return { cmd : 'open' }
+		case 'close' :
+			await cameraClose();
+			return { cmd : 'close' }
+		case 'select' :
+			await select(msg.sequence)
+			return { cmd : 'select', sequence : msg.sequence }
 		default :
-			log.warn(`No matching command: ${id}`);
+			log.warn(`No matching command: ${msg.cmd}`);
 	}
 }
 
@@ -180,6 +188,19 @@ async function cameraOpen () {
 	await camera.open();
 }
 
+async function cameraClose () {
+	await camera.close();
+}
+
+async function select (id : string) {
+	const sequencesArr : SequenceObject[] = await Files.enumerateSequences(sequences);
+	const seq : SequenceObject = sequencesArr.find(el => el.hash === id);
+	if (typeof seq == 'undefined' || seq == null) {
+		log.error('Sequence not found, maybe deleted?', new Error(`Cannot find sequence ${id}`));
+	}
+	await sequence.load(seq);
+}
+
 app.get('/', async (req : Request, res : Response, next : NextFunction) => {
 	const sequencesArr : SequenceObject[] = await Files.enumerateSequences(sequences);
 	//const videosArr : VideoObject[] = await Files.enumerateVideos(videos);
@@ -192,8 +213,9 @@ async function main () {
 	index = await createTemplate('./views/index.hbs');
 	ffmpeg = new FFMPEG(process.env['FFMPEG']);
 	camera = new Camera();
-
 	//fd = new FD(process.env['FD'], width, height,  process.env['FD_HOST'],  parseInt(process.env['FD_PORT'])); 
+	sequence = new Sequence();
+	
 	app.listen(port, async () => {
 		log.info(`filmout_manager HTTP server running on port ${port}`);
 	});

static/css/style.css

@@ -8,3 +8,9 @@ html, body{
     width: 99vw;
     height: 99vh;
 }
+
+#status {
+	position: absolute;
+	bottom: 10px;
+    width: 97vw;
+}

static/js/index.d.ts

@@ -9,5 +9,10 @@ declare class Client {
     private cmd;
     sendCameraOpen(): void;
     private receiveCameraOpen;
+    sendCameraClose(): void;
+    private receiveCameraClose;
+    sendSelect(): void;
+    fullscreen(): void;
+    exitFullscreen(): void;
 }
 declare const client: Client;

static/js/index.js

@@ -30,6 +30,9 @@ class Client {
             case 'open':
                 this.receiveCameraOpen();
                 break;
+            case 'close':
+                this.receiveCameraClose();
+                break;
             default:
                 console.warn(`No command ${id}`);
                 break;
@@ -42,6 +45,37 @@ class Client {
     receiveCameraOpen() {
         console.log('got camera open');
     }
+    sendCameraClose() {
+        console.log('send camera close');
+        this.client.send(JSON.stringify({ cmd: 'close' }));
+    }
+    receiveCameraClose() {
+        console.log('got camera close');
+    }
+    sendSelect() {
+        const sequence = document.getElementById('sequence').value;
+        let msg;
+        if (sequence === '- Select Image Sequence -') {
+            return;
+        }
+        msg = { cmd: 'select', sequence };
+        console.log('send select');
+        console.log(sequence);
+        this.client.send(JSON.stringify(msg));
+    }
+    fullscreen() {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen();
+        }
+        else {
+            this.exitFullscreen();
+        }
+    }
+    exitFullscreen() {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+    }
 }
 const client = new Client();
 //# sourceMappingURL=index.js.map

static/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../browser/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM;IAKV;QAHQ,cAAS,GAAa,KAAK,CAAC;QAIlC,IAAI,GAAG,GAAY,qBAAqB,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAwB,CAAC;QAC3E,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAEO,SAAS,CAAE,KAAW;QAC5B,MAAM,GAAG,GAAa,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAY,CAAC;QACxD,IAAI,OAAO,GAAG,CAAC,KAAK,KAAK,WAAW,IAAI,GAAG,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YACpE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,OAAO,GAAG,CAAC,GAAG,KAAK,WAAW,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC;YAC9D,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,MAAM,CAAE,KAAW;QACzB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEO,WAAW,CAAC,QAAwB;QAC1C,MAAM,OAAO,GAAY,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QACnD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACtD,CAAC;IAEO,GAAG,CAAE,EAAW;QACtB,QAAQ,EAAE,EAAE,CAAC;YACX,KAAK,MAAM;gBACT,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACzB,MAAM;YACR;gBACE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;gBACjC,MAAM;QACV,CAAC;IACH,CAAC;IAEM,cAAc;QACnB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,EAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;IAEO,iBAAiB;QACvB,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACjC,CAAC;CACF;AAED,MAAM,MAAM,GAAY,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../browser/index.ts"],"names":[],"mappings":"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"}

views/index.hbs

@@ -7,34 +7,54 @@
 </head>
 <body>
 	<div class="window" id="main">
-    <div class="title-bar">
+		<div class="title-bar">
-		<div class="title-bar-text">
+			<div class="title-bar-text">
-			Filmout Manager
+				Filmout Manager
+			</div>
+			<div class="title-bar-controls">
+				<button aria-label="Minimize"></button>
+				<button aria-label="Maximize" onclick="client.fullscreen();"></button>
+				<button aria-label="Close"></button>
+			</div>
+		</div>
+		<div class="window-body">
+			<div>Screen Resolution : 
+				<div class="field-row">
+					<label for="width">Width</label>
+					<input id="width" type="text" value="{{width}}" readonly />
+				</div>
+				<div class="field-row">
+					<label for="height">Height</label>
+					<input id="height" type="text" value="{{height}}" readonly />
+				</div>
+			</div>
+			<!--
+			<select name="video" id="video">
+				<option> - Select Video - </option>
+				{{#each videos}}
+				<option value="{{this.hash}}">{{this.name}}</option>
+				{{/each}}
+			</select>
+			-->
+			<div>
+				<select name="sequence" id="sequence">
+					<option> - Select Image Sequence - </option>
+					{{#each sequences}}
+					<option value="{{this.hash}}">{{this.name}}</option>
+					{{/each}}
+				</select>
+				<button id="select" onclick="client.sendSelect();">Select</button>
+			</div>
+			<div>
+				<button id="open" onclick="client.sendCameraOpen()">Open Gate</button>
+				<button id="close" onclick="client.sendCameraClose()">Close Gate</button>
+			</div>
+			<div class="status-bar" id="status">
+				<p class="status-bar-field">Idle</p>
+				<p class="status-bar-field">Progress: 0%</p>
+				<p class="status-bar-field">Sequence Length: 0</p>
+			</div>
 		</div>
-		<div class="title-bar-controls">
-			<button aria-label="Minimize"></button>
-			<button aria-label="Maximize"></button>
-			<button aria-label="Close"></button>
-    	</div>
-    </div>
-    <div class="window-body">
-	<div>Screen Resolution : {{width}}x{{height}}</div>
-	<!--
-	<select name="video" id="video">
-		<option> - Select Video - </option>
-		{{#each videos}}
-		<option value="{{this.hash}}">{{this.name}}</option>
-		{{/each}}
-	</select>
-	-->
-	<select name="sequence" id="sequence">
-		<option> - Select Image Sequence - </option>
-		{{#each sequences}}
-		<option value="{{this.hash}}">{{this.name}}</option>
-		{{/each}}
-	</select>
-	<button id="open" onclick="client.cameraOpen()">Open Gate</button>
-    </div>
   </div>
 	<script src="/static/js/index.js"></script>
 </body>