michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display benchmark results in a dialog box instead of on the console

This commit is contained in:
Patrick Walton 2017-09-25 19:56:12 -07:00
parent c37fd1f1e8
commit 1c138cc543
3 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/client/css/pathfinder.css
View File

@ -98,6 +98,10 @@ button > svg path {
.pf-display-none {
display: none !important;
}
#pf-benchmark-results-modal .modal-body {
overflow: scroll;
max-height: 75vh;
}
/*
* Arrow

28
demo/client/html/benchmark.html.hbs
View File

@ -31,6 +31,34 @@
</button>
</div>
</div>
<div class="modal fade" id="pf-benchmark-results-modal" tabindex="-1" role="dialog"
aria-labelledby="pf-benchmark-results-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pf-benchmark-result-label">
Benchmark Results
</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead class="thead-default">
<tr><th>Font size (px)</th><th>GPU time per glyph (µs)</th></tr>
</thead>
<tbody id="pf-benchmark-results-table-body"></tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
id="pf-benchmark-results-close-button">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>

36
demo/client/src/benchmark.ts
View File

@ -53,6 +53,18 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
start() {
super.start();
this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
HTMLDivElement;
this.resultsTableBody =
unwrapNull(document.getElementById('pf-benchmark-results-table-body')) as
HTMLTableSectionElement;
const resultsCloseButton =
unwrapNull(document.getElementById('pf-benchmark-results-close-button'));
resultsCloseButton.addEventListener('click', () => {
window.jQuery(this.resultsModal).modal('hide');
}, false);
const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
@ -104,7 +116,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
this.elapsedTimes.push({ size: this.pixelsPerEm, time: elapsedTime });
if (this.pixelsPerEm == MAX_FONT_SIZE) {
console.info(this.elapsedTimes);
this.showResults();
return;
}
@ -113,9 +125,31 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
});
}
private showResults(): void {
while (this.resultsTableBody.lastChild != null)
this.resultsTableBody.removeChild(this.resultsTableBody.lastChild);
for (const elapsedTime of this.elapsedTimes) {
const tr = document.createElement('tr');
const sizeTH = document.createElement('th');
const timeTD = document.createElement('td');
sizeTH.appendChild(document.createTextNode("" + elapsedTime.size));
timeTD.appendChild(document.createTextNode("" + elapsedTime.time));
sizeTH.scope = 'row';
tr.appendChild(sizeTH);
tr.appendChild(timeTD);
this.resultsTableBody.appendChild(tr);
}
window.jQuery(this.resultsModal).modal();
}
protected readonly defaultFile: string = FONT;
protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
private resultsModal: HTMLDivElement;
private resultsTableBody: HTMLTableSectionElement;
private glyphStorage: TextFrameGlyphStorage<BenchmarkGlyph>;
private baseMeshes: PathfinderMeshData;
private expandedMeshes: ExpandedMeshData;