use sync approach for displaying loading screen (faster then async)
parent
8a52551671
commit
fb7cbe0c8f
20
main.css
20
main.css
|
@ -282,7 +282,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
border-top: 1px solid #7d7d79;
|
||||
background-color: #bfbeb5;
|
||||
}
|
||||
|
||||
#status-bar div {
|
||||
float: left;
|
||||
|
||||
|
@ -291,6 +290,25 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
|
||||
border-right: 1px solid #7d7d79;
|
||||
}
|
||||
#cache {
|
||||
display: none;
|
||||
}
|
||||
.data-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-image: url('../images/loading-bars.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 45%;
|
||||
}
|
||||
|
||||
.data-loading p {
|
||||
position: relative;
|
||||
top: calc(45% + 45px);
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'icons';
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
||||
<link type="text/css" rel="stylesheet" href="./tabs/loading.css" media="all" />
|
||||
|
||||
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
|
||||
<script type="text/javascript" src="./js/libraries/jquery-2.1.1.min.js"></script>
|
||||
|
@ -131,5 +130,10 @@
|
|||
<span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cache">
|
||||
<div class="data-loading">
|
||||
<p>Waiting for data ...</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
72
main.js
72
main.js
|
@ -70,42 +70,44 @@ $(document).ready(function() {
|
|||
$(self).parent().addClass('active');
|
||||
|
||||
// detach listeners and remove element data
|
||||
$('#content').empty();
|
||||
var content = $('#content');
|
||||
content.empty();
|
||||
|
||||
$('#content').load("./tabs/loading.html", function() {
|
||||
switch (tab) {
|
||||
case 'tab_initial_setup':
|
||||
tabs.initial_setup.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_pid_tuning':
|
||||
tabs.pid_tuning.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_receiver':
|
||||
tabs.receiver.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_auxiliary_configuration':
|
||||
tabs.auxiliary_configuration.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_servos':
|
||||
tabs.servos.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_gps':
|
||||
tabs.gps.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_motor_outputs':
|
||||
tabs.motor_outputs.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_sensors':
|
||||
tabs.sensors.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_cli':
|
||||
tabs.cli.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_logging':
|
||||
tabs.logging.initialize(content_ready);
|
||||
break;
|
||||
}
|
||||
});
|
||||
// display loading screen
|
||||
$('#cache .data-loading').clone().appendTo(content);
|
||||
|
||||
switch (tab) {
|
||||
case 'tab_initial_setup':
|
||||
tabs.initial_setup.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_pid_tuning':
|
||||
tabs.pid_tuning.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_receiver':
|
||||
tabs.receiver.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_auxiliary_configuration':
|
||||
tabs.auxiliary_configuration.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_servos':
|
||||
tabs.servos.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_gps':
|
||||
tabs.gps.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_motor_outputs':
|
||||
tabs.motor_outputs.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_sensors':
|
||||
tabs.sensors.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_cli':
|
||||
tabs.cli.initialize(content_ready);
|
||||
break;
|
||||
case 'tab_logging':
|
||||
tabs.logging.initialize(content_ready);
|
||||
break;
|
||||
}
|
||||
|
||||
function content_ready() {
|
||||
GUI.tab_switch_in_progress = false;
|
||||
|
|
|
@ -1,16 +0,0 @@
|
|||
.tab-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-image: url('../images/loading-bars.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 45%;
|
||||
}
|
||||
|
||||
.tab-loading p {
|
||||
position: relative;
|
||||
top: calc(45% + 45px);
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
<div class="tab-loading">
|
||||
<p>Waiting for data ...</p>
|
||||
</div>
|
Loading…
Reference in New Issue