add playback progress bar
Signed-off-by: szdytom <szdytom@qq.com>
This commit is contained in:
parent
475208def0
commit
94cd28d403
@ -14,16 +14,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="control-panel">
|
<div id="control-panel">
|
||||||
<div class="ctrl-title">Analyzer</div>
|
<div class="ctrl-title">Analyzer</div>
|
||||||
<table class="full-width info-table">
|
<table class="full-width info-table"><tbody>
|
||||||
<tbody>
|
<tr><td>Analyze Status:</td><td id="analyze-status" class="text-right">Not Analyzed</td></tr>
|
||||||
<tr><td>Analyze Status:</td><td id="analyze-status">Not Analyzed</td></tr>
|
<tr><td>Total Steps:</td><td id="analyze-steps" class="text-right">N/A</td></tr>
|
||||||
<tr><td>Total Steps:</td><td id="analyze-steps">N/A</td></tr>
|
</tbody></table>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="btn-group full-width top-margin">
|
<div class="btn-group full-width top-margin">
|
||||||
<button id="analyze" class="btn float-left full-width">Analyze</button>
|
<button id="analyze" class="btn float-left full-width">Analyze</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="ctrl-title">Import / Export</div>
|
<div class="ctrl-title top-margin">Playback</div>
|
||||||
|
<div id="progress-indicator">
|
||||||
|
<div id="progress-value" class="float-left">415 / 1618</div>
|
||||||
|
<div id="progress-left" class="float-right">-1203</div>
|
||||||
|
</div>
|
||||||
|
<div id="progress-bar" class="full-width top-margin">
|
||||||
|
<div id="progress-bar-fg" class="full-height"></div>
|
||||||
|
</div>
|
||||||
|
<div class="ctrl-title top-margin">Import / Export</div>
|
||||||
<textarea autocomplete="off" spellcheck="false" id="maze_charmap"></textarea>
|
<textarea autocomplete="off" spellcheck="false" id="maze_charmap"></textarea>
|
||||||
<div id="charmap_controls" class="btn-group full-width top-margin">
|
<div id="charmap_controls" class="btn-group full-width top-margin">
|
||||||
<button id="charmap_import" class="btn float-left">Import</button>
|
<button id="charmap_import" class="btn float-left">Import</button>
|
||||||
@ -37,6 +43,20 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
#progress-bar {
|
||||||
|
background-color: lightgrey;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-bar-fg {
|
||||||
|
width: 30%;
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-height {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -48,6 +68,10 @@
|
|||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin: 40px;
|
margin: 40px;
|
||||||
}
|
}
|
||||||
@ -77,7 +101,6 @@ textarea {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid black;
|
||||||
float: right;
|
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -101,10 +124,12 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.float-left {
|
.float-left {
|
||||||
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-right {
|
.float-right {
|
||||||
|
display: inline-block;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -103,10 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
analyze_button.addEventListener('click', function() {
|
analyze_button.addEventListener('click', function() {
|
||||||
|
resetAnalyze();
|
||||||
if (current_worker != null) {
|
if (current_worker != null) {
|
||||||
current_worker.terminate();
|
current_worker.terminate();
|
||||||
current_worker = null;
|
current_worker = null;
|
||||||
analyze_button.innerHTML = 'Analyze';
|
analyze_button.innerHTML = 'Analyze';
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (maze == null) {
|
if (maze == null) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user