improved webUI layout formmating, added WebApp splash screens, added traffic source UI (currently the DEBUG flag in the backend)
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Po Szerokość: | Wysokość: | Rozmiar: 176 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 174 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 90 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 172 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 23 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 75 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 60 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 63 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 97 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 68 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 62 KiB |
|
@ -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"> </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"> </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>
|
||||
|
|
|
@ -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));
|
||||
});
|
||||
|
||||
});
|