Add ability to set arbitrary frame and to fully advance or rewind a sequence to first or last frame.
This commit is contained in:
parent
7a18edcf6e
commit
d1adf98b25
|
@ -137,6 +137,7 @@ class Client {
|
|||
private connected : boolean = false;
|
||||
private progress : HTMLProgressElement;
|
||||
private progressText : HTMLElement;
|
||||
private frames : number = 0;
|
||||
|
||||
constructor () {
|
||||
let uri : string = this.getWebsocketUri();
|
||||
|
@ -212,6 +213,7 @@ class Client {
|
|||
default :
|
||||
status = 'Unknown State';
|
||||
}
|
||||
this.frames = sequence.frames;
|
||||
document.getElementById('sequenceStatus').innerText = status;
|
||||
document.getElementById('sequenceName').innerText = sequence.name;
|
||||
document.getElementById('sequenceLength').innerText = `Sequence Length: ${sequence.frames}`;
|
||||
|
@ -326,6 +328,34 @@ class Client {
|
|||
this.client.send(JSON.stringify({ cmd : 'rewind' }));
|
||||
}
|
||||
|
||||
public sendFrameSet () {
|
||||
const frameStr : string = (document.getElementById('frame') as HTMLInputElement).value;
|
||||
let frameNum : number = null;
|
||||
try {
|
||||
frameNum = parseInt(frameStr);
|
||||
} catch (err) {
|
||||
console.error(`Error parsing ${frameStr}`);
|
||||
}
|
||||
if (frameNum === null) {
|
||||
frameNum = 0;
|
||||
}
|
||||
if (frameNum < 0) {
|
||||
frameNum = 0;
|
||||
}
|
||||
if (frameNum > this.frames - 1) {
|
||||
frameNum = this.frames - 1;
|
||||
}
|
||||
this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : frameNum } } }));
|
||||
}
|
||||
|
||||
public sendToEnd () {
|
||||
this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : this.frames - 1 } } }));
|
||||
}
|
||||
|
||||
public sendToStart () {
|
||||
this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : 0 } } }));
|
||||
}
|
||||
|
||||
public sendSelect () {
|
||||
const hash : string = (document.getElementById('sequence') as HTMLSelectElement ).value;
|
||||
let msg : Message;
|
||||
|
|
|
@ -227,6 +227,9 @@ async function cmd(msg) {
|
|||
case 'rewind':
|
||||
frameRewind();
|
||||
break;
|
||||
case 'set':
|
||||
frameSet(msg.state.sequence.current);
|
||||
break;
|
||||
default:
|
||||
log.warn(`No matching command: ${msg.cmd}`);
|
||||
}
|
||||
|
@ -245,6 +248,9 @@ function frameAdvance() {
|
|||
function frameRewind() {
|
||||
sequence.frameRewind();
|
||||
}
|
||||
function frameSet(frame) {
|
||||
sequence.frameSet(frame);
|
||||
}
|
||||
async function select(id) {
|
||||
const sequencesArr = await files_1.Files.enumerateSequences(sequences);
|
||||
const seq = sequencesArr.find(el => el.hash === id);
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -185,7 +185,7 @@ class Sequence {
|
|||
this.updateClientsOnState();
|
||||
}
|
||||
frameRewind(frames = 1) {
|
||||
if (this.frame + frames < 0) {
|
||||
if (this.frame - frames < 0) {
|
||||
this.frame = 0;
|
||||
}
|
||||
else {
|
||||
|
@ -201,6 +201,7 @@ class Sequence {
|
|||
else if (frame > this.images.length - 1) {
|
||||
frame = this.images.length - 1;
|
||||
}
|
||||
this.frame = frame;
|
||||
this.progress = this.frame > 0 ? this.frame / (this.images.length - 1) : 0;
|
||||
this.updateClientsOnState();
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -215,6 +215,9 @@ async function cmd (msg : Message) {
|
|||
case 'rewind' :
|
||||
frameRewind();
|
||||
break;
|
||||
case 'set' :
|
||||
frameSet(msg.state.sequence.current);
|
||||
break;
|
||||
default :
|
||||
log.warn(`No matching command: ${msg.cmd}`);
|
||||
}
|
||||
|
@ -238,6 +241,9 @@ function frameRewind () {
|
|||
sequence.frameRewind();
|
||||
}
|
||||
|
||||
function frameSet (frame : number) {
|
||||
sequence.frameSet(frame);
|
||||
}
|
||||
async function select (id : string) : Promise<boolean> {
|
||||
const sequencesArr : SequenceObject[] = await Files.enumerateSequences(sequences);
|
||||
const seq : SequenceObject = sequencesArr.find(el => el.hash === id);
|
||||
|
|
|
@ -218,7 +218,7 @@ export class Sequence {
|
|||
}
|
||||
|
||||
public frameRewind (frames : number = 1) {
|
||||
if (this.frame + frames < 0) {
|
||||
if (this.frame - frames < 0) {
|
||||
this.frame = 0;
|
||||
} else {
|
||||
this.frame -= frames;
|
||||
|
@ -234,6 +234,7 @@ export class Sequence {
|
|||
} else if (frame > this.images.length - 1) {
|
||||
frame = this.images.length - 1;
|
||||
}
|
||||
this.frame = frame;
|
||||
this.progress = this.frame > 0 ? this.frame / (this.images.length - 1) : 0;
|
||||
this.updateClientsOnState();
|
||||
}
|
||||
|
|
|
@ -43,6 +43,7 @@ declare class Client {
|
|||
private connected;
|
||||
private progress;
|
||||
private progressText;
|
||||
private frames;
|
||||
constructor();
|
||||
private getWebsocketUri;
|
||||
private onMessage;
|
||||
|
@ -65,6 +66,9 @@ declare class Client {
|
|||
private sendPong;
|
||||
sendAdvance(): void;
|
||||
sendRewind(): void;
|
||||
sendFrameSet(): void;
|
||||
sendToEnd(): void;
|
||||
sendToStart(): void;
|
||||
sendSelect(): void;
|
||||
private receiveSelect;
|
||||
sendStart(): void;
|
||||
|
|
|
@ -114,6 +114,7 @@ class Display {
|
|||
class Client {
|
||||
constructor() {
|
||||
this.connected = false;
|
||||
this.frames = 0;
|
||||
let uri = this.getWebsocketUri();
|
||||
this.progress = document.getElementById('progress');
|
||||
this.progressText = document.getElementById('progressText');
|
||||
|
@ -178,6 +179,7 @@ class Client {
|
|||
default:
|
||||
status = 'Unknown State';
|
||||
}
|
||||
this.frames = sequence.frames;
|
||||
document.getElementById('sequenceStatus').innerText = status;
|
||||
document.getElementById('sequenceName').innerText = sequence.name;
|
||||
document.getElementById('sequenceLength').innerText = `Sequence Length: ${sequence.frames}`;
|
||||
|
@ -273,6 +275,32 @@ class Client {
|
|||
sendRewind() {
|
||||
this.client.send(JSON.stringify({ cmd: 'rewind' }));
|
||||
}
|
||||
sendFrameSet() {
|
||||
const frameStr = document.getElementById('frame').value;
|
||||
let frameNum = null;
|
||||
try {
|
||||
frameNum = parseInt(frameStr);
|
||||
}
|
||||
catch (err) {
|
||||
console.error(`Error parsing ${frameStr}`);
|
||||
}
|
||||
if (frameNum === null) {
|
||||
frameNum = 0;
|
||||
}
|
||||
if (frameNum < 0) {
|
||||
frameNum = 0;
|
||||
}
|
||||
if (frameNum > this.frames - 1) {
|
||||
frameNum = this.frames - 1;
|
||||
}
|
||||
this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: frameNum } } }));
|
||||
}
|
||||
sendToEnd() {
|
||||
this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: this.frames - 1 } } }));
|
||||
}
|
||||
sendToStart() {
|
||||
this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: 0 } } }));
|
||||
}
|
||||
sendSelect() {
|
||||
const hash = document.getElementById('sequence').value;
|
||||
let msg;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -99,7 +99,7 @@
|
|||
<button id="stop" class="medium sequenceCtrl" onclick="client.sendStop();" disabled>Stop</button>
|
||||
<button id="rewind" class="small sequenceCtrl" onclick="client.sendToStart();" disabled><<</button>
|
||||
<button id="rewind" class="small sequenceCtrl" onclick="client.sendRewind();" disabled><</button>
|
||||
<input id="frame" type="number" value="00000" class="sequenceCtrl medium" disabled />
|
||||
<input id="frame" type="number" value="00000" class="sequenceCtrl medium" onchange="client.sendFrameSet();" disabled />
|
||||
<button id="advance" class="small sequenceCtrl" onclick="client.sendAdvance()" disabled>></button>
|
||||
<button id="advance" class="small sequenceCtrl" onclick="client.sendToEnd()" disabled>>></button>
|
||||
</form>
|
||||
|
|
Loading…
Reference in New Issue