All work on manual exposure control. Disable image controls UI for now (needs more thought and positional guardrails). Placeholder types for SequenceStatistics which will have data and estimates about completion times.

browser/index.ts

@@ -151,8 +151,10 @@ class Client {
     (document.getElementById('sequenceSelectForm') as HTMLFormElement ).reset();
     (document.getElementById('sequenceCtrlForm') as HTMLFormElement ).reset();
     (document.getElementById('manualCtrlForm') as HTMLFormElement ).reset();
+    (document.getElementById('exposureCtrlForm') as HTMLFormElement ).reset();
     this.disableClass('sequenceCtrl');
     this.disableClass('manualCtrl');
+    this.disableClass('exposureCtrl');
     this.setProgress({ hash: null, progress: 0 });
   }
 
@@ -187,6 +189,7 @@ class Client {
     this.setProgress(state.sequence);
     this.setFrame(state.sequence);
     this.setStatus(state.sequence);
+    this.setExposure(state);
     this.setDisplay(state);
     (document.getElementById('sequence') as HTMLSelectElement ).value = state.sequence.hash;
   }
@@ -195,6 +198,7 @@ class Client {
     this.setProgress(state.sequence);
     this.setFrame(state.sequence);
     this.setStatus(state.sequence);
+    this.setExposure(state);
     this.display.updateImage();
   }
 
@@ -233,6 +237,13 @@ class Client {
     }
   }
 
+  private setExposure (state : State) {
+    if (typeof state.exposure !== 'undefined') {
+      this.enableClass('exposureCtrl');
+      (document.getElementById('exposure') as HTMLInputElement).value = `${state.exposure}`;
+    }
+  }
+
   private setDisplay (state : State) {
     const widthEl : HTMLInputElement = document.getElementById('displayWidth') as HTMLInputElement;
     const heightEl : HTMLInputElement = document.getElementById('displayHeight') as HTMLInputElement;
@@ -383,6 +394,11 @@ class Client {
     this.client.send(JSON.stringify({ cmd : 'stop' }));
   }
 
+  public sendExposure () {
+    const exposure : number = parseInt((document.getElementById('exposure') as HTMLSelectElement ).value);
+    this.client.send(JSON.stringify({ cmd : 'exposure', state : { exposure }}));
+  }
+
   private receiveUpdate (msg : Message) {
     this.setUpdate(msg.state);
   }

dist/index.js

@@ -230,6 +230,9 @@ async function cmd(msg) {
         case 'set':
             frameSet(msg.state.sequence.current);
             break;
+        case 'exposure':
+            exposureSet(msg.state.exposure);
+            break;
         default:
             log.warn(`No matching command: ${msg.cmd}`);
     }
@@ -251,6 +254,12 @@ function frameRewind() {
 function frameSet(frame) {
     sequence.frameSet(frame);
 }
+function exposureSet(exposure) {
+    if (exposure < 1) {
+        exposure = 1;
+    }
+    sequence.setExposure(exposure);
+}
 async function select(id) {
     const sequencesArr = await files_1.Files.enumerateSequences(sequences);
     const seq = sequencesArr.find(el => el.hash === id);

dist/sequence/index.js

@@ -58,6 +58,7 @@ class Sequence {
             this.frameAdvance();
         }
         //complete running
+        this.updateClientsOnState();
     }
     async load(seq) {
         this.current = seq;
@@ -158,6 +159,8 @@ class Sequence {
     }
     setExposure(ms) {
         this.exposure = ms;
+        this.log.info(`Updated exposure: ${ms}ms`);
+        this.updateClientsOnState();
     }
     getStatus() {
         if (this.running && this.paused) {

src/globals.d.ts

@@ -18,12 +18,17 @@ interface SequenceState {
   status? : any
 }
 
+interface SequenceStatistics {
+
+}
+
 interface State {
   display? : StateDimensions,
   offset? : StateOffset,
   source? : StateDimensions,
   screen? : StateDimensions,
   sequence? : SequenceState,
+  statistics? : SequenceStatistics,
   exposure? : number
 }
 

src/index.ts

@@ -218,6 +218,9 @@ async function cmd (msg : Message) {
 		case 'set' :
 			frameSet(msg.state.sequence.current);
 			break;
+		case 'exposure' :
+			exposureSet(msg.state.exposure);
+			break;
 		default :
 			log.warn(`No matching command: ${msg.cmd}`);
 	}
@@ -244,6 +247,14 @@ function frameRewind () {
 function frameSet (frame : number) {
 	sequence.frameSet(frame);
 }
+
+function exposureSet (exposure : number) {
+	if (exposure < 1) {
+		exposure = 1;
+	}
+	sequence.setExposure(exposure);
+}
+
 async function select (id : string) : Promise<boolean> {
 	const sequencesArr : SequenceObject[] = await Files.enumerateSequences(sequences);
 	const seq : SequenceObject = sequencesArr.find(el => el.hash === id);

src/sequence/index.ts

@@ -75,6 +75,7 @@ export class Sequence {
 			this.frameAdvance();
 		}
 		//complete running
+		this.updateClientsOnState();
 	}
 
 	public async load (seq : SequenceObject) {
@@ -188,6 +189,8 @@ export class Sequence {
 
 	public setExposure (ms : number) {
 		this.exposure = ms;
+		this.log.info(`Updated exposure: ${ms}ms`);
+		this.updateClientsOnState();
 	}
 
 	public getStatus () : SequenceStatus {

static/js/index.d.ts

@@ -54,6 +54,7 @@ declare class Client {
     private setStatus;
     private setProgress;
     private setFrame;
+    private setExposure;
     private setDisplay;
     private cmd;
     disableClass(className: string): void;
@@ -73,6 +74,7 @@ declare class Client {
     private receiveSelect;
     sendStart(): void;
     sendStop(): void;
+    sendExposure(): void;
     private receiveUpdate;
     fullscreen(): void;
     exitFullscreen(): void;

static/js/index.js

@@ -126,8 +126,10 @@ class Client {
         document.getElementById('sequenceSelectForm').reset();
         document.getElementById('sequenceCtrlForm').reset();
         document.getElementById('manualCtrlForm').reset();
+        document.getElementById('exposureCtrlForm').reset();
         this.disableClass('sequenceCtrl');
         this.disableClass('manualCtrl');
+        this.disableClass('exposureCtrl');
         this.setProgress({ hash: null, progress: 0 });
     }
     getWebsocketUri() {
@@ -155,6 +157,7 @@ class Client {
         this.setProgress(state.sequence);
         this.setFrame(state.sequence);
         this.setStatus(state.sequence);
+        this.setExposure(state);
         this.setDisplay(state);
         document.getElementById('sequence').value = state.sequence.hash;
     }
@@ -162,6 +165,7 @@ class Client {
         this.setProgress(state.sequence);
         this.setFrame(state.sequence);
         this.setStatus(state.sequence);
+        this.setExposure(state);
         this.display.updateImage();
     }
     setStatus(sequence) {
@@ -196,6 +200,12 @@ class Client {
             document.getElementById('frame').value = `${sequence.current}`.padStart(5, '0');
         }
     }
+    setExposure(state) {
+        if (typeof state.exposure !== 'undefined') {
+            this.enableClass('exposureCtrl');
+            document.getElementById('exposure').value = `${state.exposure}`;
+        }
+    }
     setDisplay(state) {
         const widthEl = document.getElementById('displayWidth');
         const heightEl = document.getElementById('displayHeight');
@@ -323,6 +333,10 @@ class Client {
     sendStop() {
         this.client.send(JSON.stringify({ cmd: 'stop' }));
     }
+    sendExposure() {
+        const exposure = parseInt(document.getElementById('exposure').value);
+        this.client.send(JSON.stringify({ cmd: 'exposure', state: { exposure } }));
+    }
     receiveUpdate(msg) {
         this.setUpdate(msg.state);
     }

views/index.hbs

@@ -77,17 +77,12 @@
 						<button id="select" onclick="client.sendSelect();">Select</button>
 					</form>
 				</fieldset>
-				<fieldset id="displayAdjust" class="inline half">
+				<fieldset id="exposureCtrl" class="inline half">
-					<legend>Display Adjust</legend>
+					<legend>Exposure</legend>
-					<form id="displayAdjustForm"  onsubmit="return false;">
+					<form id="exposureCtrlForm" onsubmit="return false;">
-						<button class="small sequenceCtrl" id="offsetXPlus">X +</button>
+						<input id="exposure" class="medium exposureCtrl" type="number" value="0" disabled />
-						<button class="small sequenceCtrl" id="offsetXMinus">X -</button>
+						<span>ms </span>
-						<button class="small sequenceCtrl" id="offsetYPlus">Y +</button>
+						<button id="exposureUpdate" class="exposureCtrl" onclick="client.sendExposure();">Update</button>
-						<button class="small sequenceCtrl" id="offsetYMinus">Y -</button>
-						<button class="small sequenceCtrl" id="widthPlus">W +</button>
-						<button class="small sequenceCtrl" id="widthMinus">W -</button>
-						<button class="small sequenceCtrl" id="heightPlus">H +</button>
-						<button class="small sequenceCtrl" id="heightMinus">H -</button>
 					</form>
 				</fieldset>
 			</div>
@@ -104,9 +99,22 @@
 						<button id="advance" class="small sequenceCtrl" onclick="client.sendToEnd()" disabled>>></button>
 					</form>
 				</fieldset>
+				<fieldset id="displayAdjust" class="inline half">
+					<legend>Display Adjust</legend>
+					<form id="displayAdjustForm"  onsubmit="return false;">
+						<button class="small" id="offsetXPlus" disabled>X +</button>
+						<button class="small" id="offsetXMinus" disabled>X -</button>
+						<button class="small" id="offsetYPlus" disabled>Y +</button>
+						<button class="small" id="offsetYMinus" disabled>Y -</button>
+						<button class="small" id="widthPlus" disabled>W +</button>
+						<button class="small" id="widthMinus" disabled>W -</button>
+						<button class="small" id="heightPlus" disabled>H +</button>
+						<button class="small" id="heightMinus" disabled>H -</button>
+					</form>
+				</fieldset>
 			</div>
 			<div>
-				<fieldset id="manualCtrl">
+				<fieldset id="manualCtrl" class="inline half">
 					<legend>Manual Controls</legend>
 					<form id="manualCtrlForm" onsubmit="return false;" >
 						<button id="open" class="manualCtrl" onclick="client.sendCameraOpen()">Open</button>