Add ability to set arbitrary frame and to fully advance or rewind a sequence to first or last frame.

This commit is contained in:
mmcwilliams 2024-08-30 13:49:16 -04:00
parent 7a18edcf6e
commit d1adf98b25
11 changed files with 82 additions and 6 deletions

View File

@ -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;

6
dist/index.js vendored
View File

@ -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);

2
dist/index.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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

View File

@ -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);

View File

@ -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();
}

View File

@ -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;

View File

@ -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

View File

@ -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>