Mirror/betaflight
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-18 05:45:31 +03:00
Code Issues Wiki Activity

use sync approach for displaying loading screen (faster then async)

Browse source
This commit is contained in:
cTn 2014-07-12 12:03:13 +02:00
parent 8a52551671
commit fb7cbe0c8f
5 changed files with 61 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

20
main.css
View file

@ -282,7 +282,6 @@ input[type="number"]::-webkit-inner-spin-button {
border-top: 1px solid #7d7d79; border-top: 1px solid #7d7d79;
background-color: #bfbeb5; background-color: #bfbeb5;
} }
#status-bar div { #status-bar div {
float: left; float: left;
@ -291,6 +290,25 @@ input[type="number"]::-webkit-inner-spin-button {
border-right: 1px solid #7d7d79; 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-face {
font-family: 'icons'; font-family: 'icons';

6
main.html
View file

@ -18,7 +18,6 @@
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" /> <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/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/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/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.1.min.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> <span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
</div> </div>
</div> </div>
<div id="cache">
<div class="data-loading">
<p>Waiting for data ...</p>
</div>
</div>
</body> </body>
</html> </html>

8
main.js
View file

@ -70,9 +70,12 @@ $(document).ready(function() {
$(self).parent().addClass('active'); $(self).parent().addClass('active');
// detach listeners and remove element data // detach listeners and remove element data
$('#content').empty(); var content = $('#content');
content.empty();
// display loading screen
$('#cache .data-loading').clone().appendTo(content);
$('#content').load("./tabs/loading.html", function() {
switch (tab) { switch (tab) {
case 'tab_initial_setup': case 'tab_initial_setup':
tabs.initial_setup.initialize(content_ready); tabs.initial_setup.initialize(content_ready);
@ -105,7 +108,6 @@ $(document).ready(function() {
tabs.logging.initialize(content_ready); tabs.logging.initialize(content_ready);
break; break;
} }
});
function content_ready() { function content_ready() {
GUI.tab_switch_in_progress = false; GUI.tab_switch_in_progress = false;

16
tabs/loading.css
View file

@ -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;
}

3
tabs/loading.html
View file

@ -1,3 +0,0 @@
<div class="tab-loading">
<p>Waiting for data ...</p>
</div>