All UI update for new mscript features

This commit is contained in:
mmcwilliams 2018-03-14 23:17:42 -04:00
parent ec08407904
commit 07df1ed883
5 changed files with 46 additions and 17 deletions

View File

@ -837,3 +837,11 @@ button:focus {
.cp-app .cp-memo { .cp-app .cp-memo {
bottom: 2px !important; bottom: 2px !important;
} }
.progress {
width: 240px;
margin: 85px -120px;
display: block;
position: absolute;
left: 50%;
top: 50%;
}

View File

@ -49,7 +49,7 @@
<button id="seq_stop" onclick="seq.stop(true);">STOP</button> <button id="seq_stop" onclick="seq.stop(true);">STOP</button>
<button id="seq_clear" onclick="gui.grid.clear();">CLEAR</button> <button id="seq_clear" onclick="gui.grid.clear();">CLEAR</button>
<button id="seq_plus24" onclick="gui.grid.plus_24();">+ 24</button> <button id="seq_plus24" onclick="gui.grid.plus_24();">+ 24</button>
<button id="seq_mscript" onclick="gui.mscript.generate(mcopy.state.sequence.arr);">TO SCRIPT</button> <button id="seq_mscript" onclick="mse.mscript.fromSequence();">TO SCRIPT</button>
<input id="seq_scroll_state" type="number" min="0" value="00000" /> <input id="seq_scroll_state" type="number" min="0" value="00000" />
</div> </div>
<div id="seq_stats"> <div id="seq_stats">
@ -68,8 +68,9 @@
<textarea id="editor"></textarea> <textarea id="editor"></textarea>
<footer id="console"> <footer id="console">
<div id="mscript_cmd"> <div id="mscript_cmd">
<button id="mscript_compile" onclick="mse.mscript.eval()">EVAL</button> <button id="mscript_compile" onclick="mse.mscript.compile()">COMPILE</button>
<button id="mscript_seq" onclick="">TO SEQUENCE</button> <button id="mscript_compile" onclick="mse.mscript.run()">RUN</button>
<button id="mscript_seq" onclick="mse.mscript.toSequence();">TO SEQUENCE</button>
</div> </div>
<textarea>> </textarea> <textarea>> </textarea>
</footer> </footer>
@ -85,6 +86,22 @@
<input type="number" id="seq_proj_count_2" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" /> <input type="number" id="seq_proj_count_2" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
</div> </div>
</div> </div>
<div id="move_to">
<div class="cam">
<!--<label>MOVE TO</label>-->
<div>
<input type="number" id="move_cam_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" />
<button id="move_cam_to_go" onclick="return cmd.cam_to();">GO TO</button>
</div>
</div>
<div class="proj">
<!--<label>MOVE TO</label>-->
<div>
<input type="number" id="move_proj_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);"/>
<button id="move_proj_to_go" onclick="return cmd.proj_to();">GO TO</button>
</div>
</div>
</div>
<div id="buttons" class="clearfix"> <div id="buttons" class="clearfix">
<div> <div>
<div> <div>
@ -104,14 +121,14 @@
<div> <div>
<button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd"> <button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd">
<i class="fa fa-times-circle"></i> <i class="fa fa-times-circle"></i>
BLACK FRAME +1 BLANK +1
<i class="fa fa-step-forward"></i> <i class="fa fa-step-forward"></i>
</button> </button>
</div> </div>
<div> <div>
<button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd"> <button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd">
<i class="fa fa-times-circle"></i> <i class="fa fa-times-circle"></i>
BLACK FRAME -1 BLANK -1
<i class="fa fa-step-backward"></i> <i class="fa fa-step-backward"></i>
</button> </button>
</div> </div>
@ -133,16 +150,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="move_to">
<div class="cam">
<label>MOVE CAMERA TO</label>
<input type="number" id="move_cam_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" onblur="cmd.cam_to(this)" />
</div>
<div class="proj">
<label>MOVE PROJECTOR TO</label>
<input type="number" id="move_cam_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" onblur="cmd.proj_to(this);" />
</div>
</div>
<footer> <footer>
<div id="log"></div> <div id="log"></div>
</footer> </footer>
@ -282,6 +289,11 @@
<div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div> <div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div>
<div id="spinner"> <div id="spinner">
<div id="spinnerMsg"></div> <div id="spinnerMsg"></div>
<div id="spinnerProgress" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">0% Complete</span>
</div>
</div>
</div> </div>
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
</body> </body>

View File

@ -165,4 +165,13 @@
.cp-memo{ .cp-memo{
bottom: 2px !important; bottom: 2px !important;
} }
}
.progress{
width: 240px;
margin: 85px -120px;
display: block;
position: absolute;
left: 50%;
top: 50%;
} }

View File

@ -37,4 +37,4 @@ button{
clear: both; clear: both;
display: table; display: table;
} }
} }

View File

@ -164,7 +164,7 @@
.monospace(); .monospace();
background-color: #272b30; background-color: #272b30;
position: absolute; position: absolute;
top: 128px; top: 115px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 15px; padding-bottom: 15px;
width: 54px; width: 54px;