16mm
/
filmout_manager
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Display the statistics in an organizing way

This commit is contained in:
Matt McWilliams 2024-10-19 21:15:52 -04:00
parent 1be3c8308d
commit 85e748809f
9 changed files with 2084 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/globals.d.ts vendored
View File

@ -57,4 +57,6 @@ interface State {
interface Message {
cmd? : string;
state? : State;
}
}
declare function humanizeDuration(a : any, b : any) : string;

64
browser/index.ts
View File

@ -150,11 +150,13 @@ class Client {
this.client.onopen = this.onOpen.bind(this);
this.client.onclose = this.onClose.bind(this);
this.client.onmessage = this.onMessage.bind(this);
(document.getElementById('sequenceSelectForm') as HTMLFormElement ).reset();
(document.getElementById('sequenceCtrlForm') as HTMLFormElement ).reset();
(document.getElementById('manualCtrlForm') as HTMLFormElement ).reset();
(document.getElementById('exposureCtrlForm') as HTMLFormElement ).reset();
(document.getElementById('statisticsForm') as HTMLFormElement).reset();
this.resetForm('sequenceSelectForm');
this.resetForm('sequenceCtrlForm');
this.resetForm('manualCtrlForm');
this.resetForm('exposureCtrlForm');
this.resetForm('statisticsForm');
this.disableClass('sequenceCtrl');
this.disableClass('manualCtrl');
this.disableClass('exposureCtrl');
@ -270,29 +272,32 @@ class Client {
private setStatistics (stats : SequenceStatistics) {
if (stats !== null) {
this.set('statsFrameTotalAvg', stats.totalFrameAvg.toString());
this.set('statsFrameTotalLast', stats.totalFrameLast.toString());
this.set('statsFrameTotalMargin', stats.totalFrameMargin.toString());
this.set('statsFrameTotalAvg', Math.round(stats.totalFrameAvg).toString());
this.set('statsFrameTotalLast', Math.round(stats.totalFrameLast).toString());
this.set('statsFrameTotalMargin', Math.round(stats.totalFrameMargin).toString());
this.set('statsFPS', stats.fps.toString());
this.set('statsFPS', ((Math.round(stats.fps * 100.0) / 100.0) as number).toString());
this.set('statsFrameLoadAvg', stats.loadAvg.toString());
this.set('statsFrameLoadMargin', stats.loadMargin.toString());
this.set('statsFrameLoadAvg', Math.round(stats.loadAvg).toString());
this.set('statsFrameLoadMargin', Math.round(stats.loadMargin).toString());
this.set('statsFrameOpenLast', stats.openLast.toString());
this.set('statsFrameOpenAvg', stats.openAvg.toString());
this.set('statsFrameOpenMargin', stats.openMargin.toString());
this.set('statsFrameOpenLast', Math.round(stats.openLast).toString());
this.set('statsFrameOpenAvg', Math.round(stats.openAvg).toString());
this.set('statsFrameOpenMargin', Math.round(stats.openMargin).toString());
this.set('statsFrameCloseLast', stats.closeLast.toString());
this.set('statsFrameCloseAvg', stats.closeAvg.toString());
this.set('statsFrameCloseMargin', stats.closeMargin.toString());
this.set('statsFrameCloseLast', Math.round(stats.closeLast).toString());
this.set('statsFrameCloseAvg', Math.round(stats.closeAvg).toString());
this.set('statsFrameCloseMargin', Math.round(stats.closeMargin).toString());
this.set('statsExposureLast', stats.exposureLast.toString());
this.set('statsExposureAvg', stats.exposureAvg.toString());
this.set('statsExposureMargin', stats.exposureMargin.toString());
this.set('statsExposureLast', Math.round(stats.exposureLast).toString());
this.set('statsExposureAvg', Math.round(stats.exposureAvg).toString());
this.set('statsExposureMargin', Math.round(stats.exposureMargin).toString());
//this.set('statsFrameTotalAvg', stats.elapsed.toString());
//this.set('statsFrameTotalAvg', stats.estimate.toString());
this.set('statsElapsed', Math.round(stats.elapsed).toString());
this.set('statsEstimate', Math.round(stats.estimate).toString());
this.set('statsElapsedHuman', this.shortenHumanize(Math.round(stats.elapsed)));
this.set('statsEstimateHuman', this.shortenHumanize(Math.round(stats.estimate)));
}
}
@ -471,6 +476,21 @@ class Client {
public get (id : string) {
return (document.getElementById(id) as HTMLInputElement).value;
}
private resetForm (id : string) {
(document.getElementById(id) as HTMLFormElement ).reset();
}
private shortenHumanize (val : number) : string {
const str : string = humanizeDuration(val, { round : true });
return str.replace('years', 'y').replace('year', 'y')
.replace('months', 'mo').replace('month', 'mo')
.replace('weeks', 'w').replace('week', 'w')
.replace('days', 'd').replace('day', 'd')
.replace('hours', 'h').replace('hour', 'h')
.replace('minutes', 'm').replace('minute', 'm')
.replace('seconds', 's').replace('second', 's');
}
}
client = new Client();

4
src/globals.d.ts vendored
View File

@ -57,4 +57,6 @@ interface State {
interface Message {
cmd? : string;
state? : State;
}
}
declare function humanizeDuration(a : any, b : any) : string;

26
static/css/style.css
View File

@ -84,16 +84,20 @@ fieldset.inline input.medium {
label {
width: 80px;
text-align: right;
display: inline-block;
padding-right: 3px;
}
display: inline-block;
padding-right: 3px;
}
progress {
width: 97vw;
position: absolute;
bottom: 28px;
left: 0.5vw;
width: 97vw;
background-color: silver;
box-shadow: inset -1px -1px #fff,inset 1px 1px grey, inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
box-sizing: border-box;
padding: 3px 4px;
bottom: 31px;
position: absolute;
appearance: none;
padding: 2px;
}
button.small,
@ -118,4 +122,12 @@ input.large {
min-width: 75px;
max-width: 75px;
padding: 0 6px;
}
button.xlarge,
input.xlarge{
width: 125px;
min-width: 125px;
max-width: 125px;
padding: 0 6px;
}

1960
static/js/humanize-duration.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
static/js/index.d.ts vendored
View File

@ -87,4 +87,6 @@ declare class Client {
removeClass(id: string, className: string): void;
set(id: string, value: string): void;
get(id: string): string;
private resetForm;
private shortenHumanize;
}

57
static/js/index.js
View File

@ -124,11 +124,11 @@ class Client {
this.client.onopen = this.onOpen.bind(this);
this.client.onclose = this.onClose.bind(this);
this.client.onmessage = this.onMessage.bind(this);
document.getElementById('sequenceSelectForm').reset();
document.getElementById('sequenceCtrlForm').reset();
document.getElementById('manualCtrlForm').reset();
document.getElementById('exposureCtrlForm').reset();
document.getElementById('statisticsForm').reset();
this.resetForm('sequenceSelectForm');
this.resetForm('sequenceCtrlForm');
this.resetForm('manualCtrlForm');
this.resetForm('exposureCtrlForm');
this.resetForm('statisticsForm');
this.disableClass('sequenceCtrl');
this.disableClass('manualCtrl');
this.disableClass('exposureCtrl');
@ -225,21 +225,25 @@ class Client {
}
setStatistics(stats) {
if (stats !== null) {
this.set('statsFrameTotalAvg', stats.totalFrameAvg.toString());
this.set('statsFrameTotalLast', stats.totalFrameLast.toString());
this.set('statsFrameTotalMargin', stats.totalFrameMargin.toString());
this.set('statsFPS', stats.fps.toString());
this.set('statsFrameLoadAvg', stats.loadAvg.toString());
this.set('statsFrameLoadMargin', stats.loadMargin.toString());
this.set('statsFrameOpenLast', stats.openLast.toString());
this.set('statsFrameOpenAvg', stats.openAvg.toString());
this.set('statsFrameOpenMargin', stats.openMargin.toString());
this.set('statsFrameCloseLast', stats.closeLast.toString());
this.set('statsFrameCloseAvg', stats.closeAvg.toString());
this.set('statsFrameCloseMargin', stats.closeMargin.toString());
this.set('statsExposureLast', stats.exposureLast.toString());
this.set('statsExposureAvg', stats.exposureAvg.toString());
this.set('statsExposureMargin', stats.exposureMargin.toString());
this.set('statsFrameTotalAvg', Math.round(stats.totalFrameAvg).toString());
this.set('statsFrameTotalLast', Math.round(stats.totalFrameLast).toString());
this.set('statsFrameTotalMargin', Math.round(stats.totalFrameMargin).toString());
this.set('statsFPS', (Math.round(stats.fps * 100.0) / 100.0).toString());
this.set('statsFrameLoadAvg', Math.round(stats.loadAvg).toString());
this.set('statsFrameLoadMargin', Math.round(stats.loadMargin).toString());
this.set('statsFrameOpenLast', Math.round(stats.openLast).toString());
this.set('statsFrameOpenAvg', Math.round(stats.openAvg).toString());
this.set('statsFrameOpenMargin', Math.round(stats.openMargin).toString());
this.set('statsFrameCloseLast', Math.round(stats.closeLast).toString());
this.set('statsFrameCloseAvg', Math.round(stats.closeAvg).toString());
this.set('statsFrameCloseMargin', Math.round(stats.closeMargin).toString());
this.set('statsExposureLast', Math.round(stats.exposureLast).toString());
this.set('statsExposureAvg', Math.round(stats.exposureAvg).toString());
this.set('statsExposureMargin', Math.round(stats.exposureMargin).toString());
this.set('statsElapsed', Math.round(stats.elapsed).toString());
this.set('statsEstimate', Math.round(stats.estimate).toString());
this.set('statsElapsedHuman', this.shortenHumanize(Math.round(stats.elapsed)));
this.set('statsEstimateHuman', this.shortenHumanize(Math.round(stats.estimate)));
}
}
cmd(msg) {
@ -395,6 +399,19 @@ class Client {
get(id) {
return document.getElementById(id).value;
}
resetForm(id) {
document.getElementById(id).reset();
}
shortenHumanize(val) {
const str = humanizeDuration(val, { round: true });
return str.replace('years', 'y').replace('year', 'y')
.replace('months', 'mo').replace('month', 'mo')
.replace('weeks', 'w').replace('week', 'w')
.replace('days', 'd').replace('day', 'd')
.replace('hours', 'h').replace('hour', 'h')
.replace('minutes', 'm').replace('minute', 'm')
.replace('seconds', 's').replace('second', 's');
}
}
client = new Client();
//# sourceMappingURL=index.js.map

2
static/js/index.js.map
View File

File diff suppressed because one or more lines are too long

18
views/index.hbs
View File

@ -179,7 +179,22 @@
</div>
</div>
<div id="statisticsTiming" class="quarter">
<div>
<label for="statsElapsed">Elapsed</label>
<input id="statsElapsed" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsElapsedHuman"> </label>
<input id="statsElapsedHuman" type="text" class="xlarge" readonly value="" />
</div>
<div>
<label for="statsEstimate">Remaining</label>
<input id="statsEstimate" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsEstimateHuman"> </label>
<input id="statsEstimateHuman" type="text" class="xlarge" readonly value="" />
</div>
</div>
</form>
</fieldset>
@ -199,6 +214,7 @@
<script>
const WEBSOCKET_PORT = {{wsPort}};
</script>
<script src="/static/js/humanize-duration.js"></script>
<script src="/static/js/index.js"></script>
</body>
</html>