improved webUI layout formmating, added WebApp splash screens, added traffic source UI (currently the DEBUG flag in the backend)

pull/30/head
bradanlane 2015-09-04 15:53:23 -04:00
rodzic 7e392bce69
commit 7ae561c6c2
14 zmienionych plików z 61 dodań i 19 usunięć

Wyświetl plik

@ -1,5 +1,9 @@
@import url(bootstrap.cust.min.css);
@import url(onoff.css);
html {
-webkit-text-size-adjust: 100%;
}
body {
background-color: #ddd;
}
@ -20,7 +24,7 @@ body {
/* this media query matches custom bootstrap build */
@media screen and (min-width: 640px) {
#stratux-main .panel {
min-height: 280px;
min-height: 320px;
}
}

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 176 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 174 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 90 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 172 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 23 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 75 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 60 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 63 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 97 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 68 KiB

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 62 KiB

Wyświetl plik

@ -3,18 +3,31 @@
<head>
<title>
Stratux
StratuX
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- ideally we generate all necessary icons sizes -->
<link href="img/logo-apple3.png" rel="apple-touch-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- android -->
<meta name="mobile-web-app-capable" content="yes">
<link href="img/logo-android3.png" rel="icon" />
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="img/logo-apple3.png" rel="apple-touch-icon" />
<!-- iPad retina portrait startup image --> <link href="img/screen-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad retina landscape startup image --> <link href="img/screen-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad non-retina portrait startup image --> <link href="img/screen-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad non-retina landscape startup image --> <link href="img/screen-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPhone 6 Plus portrait startup image --> <link href="img/screen-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPhone 6 Plus landscape startup image --> <link href="img/screen-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPhone 6 startup image --> <link href="img/screen-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 startup image --> <link href="img/screen-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone < 5 retina startup image --> <link href="img/screen-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone < 5 non-retina startup image --> <link href="img/screen-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/jquery.form.min.js" type="text/javascript"></script>
<script src="js/stratux.js" type="text/javascript"></script>
@ -46,27 +59,28 @@
</div>
-->
<div class="row">
<label class="col-xs-6">Clients connected:</label>
<label class="col-xs-6">Recent Clients:</label>
<span id="Connected_Users" class="col-xs-6">--</span>
</div>
<div class="row">
<label class="col-xs-6">Messages</label>
<span class="col-xs-2">Minute</span>
<span class="col-xs-3">Total</span>
<label class="col-xs-5">Messages</label>
<label class="col-xs-3 text-right">Minute</label>
<label class="col-xs-3 text-right">Total</label>
</div>
<div class="row">
<span class="col-xs-1"></span>
<label class="col-xs-5">UAT:</label>
<span class="col-xs-2" id="UAT_messages_last_minute">--</span>
<span class="col-xs-3" id="UAT_messages_max">--</span>
<label class="col-xs-4">UAT:</label>
<span class="col-xs-3 text-right" id="UAT_messages_last_minute">--</span>
<span class="col-xs-3 text-right" id="UAT_messages_max">--</span>
</div>
<div class="row">
<span class="col-xs-1"></span>
<label class="col-xs-5">1090ES:</label>
<span class="col-xs-2" id="ES_messages_last_minute">--</span>
<span class="col-xs-3" id="ES_messages_max">--</span>
<label class="col-xs-4">1090ES:</label>
<span class="col-xs-3 text-right" id="ES_messages_last_minute">--</span>
<span class="col-xs-3 text-right" id="ES_messages_max">--</span>
</div>
<div class="row"><span class="col-xs-1">&nbsp;</span></div>
<div class="row">
<label class="col-xs-6">GPS satellites:</label>
<span id="GPS_satellites_locked" class="col-xs-6">--</span>
@ -77,6 +91,7 @@
<div id="RY835AI_connected" class="led-red"></div>
</div>
</div>
<div class="row"><span class="col-xs-1">&nbsp;</span></div>
<div class="row">
<label class="col-xs-6">Uptime:</label>
<span id="Uptime" class="col-xs-6">--</span>
@ -141,6 +156,18 @@
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-6">Traffic Source</label>
<div class="col-xs-6">
<div class="onoffswitch">
<input type="checkbox" name="DspTrafficSrc" class="onoffswitch-checkbox" id="trfc-onoffswitch" checked>
<label class="onoffswitch-label" for="trfc-onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>

Wyświetl plik

@ -77,6 +77,7 @@ function connect() {
$('input[name=ES_Enabled]').prop('checked', status.ES_Enabled);
$('input[name=GPS_Enabled]').prop('checked', status.GPS_Enabled);
$('input[name=AHRS_Enabled]').prop('checked', status.AHRS_Enabled);
$('input[name=DspTrafficSrc]').prop('checked', status.DEBUG);
};
}
@ -123,4 +124,14 @@ $(document).ready(function () {
socket.send(JSON.stringify(msg));
});
$('input[name=DspTrafficSrc]').click(function () {
console.log('DspTrafficSrc clicked');
msg = {
setting: 'DEBUG',
state: $('input[name=DspTrafficSrc]').prop('checked')
};
socket.send(JSON.stringify(msg));
});
});