kopia lustrzana https://github.com/cyoung/stratux
mobile device support
made layout responsive to mobile devices formatted uptime added mobile web app icon added prompt to pin webUI to device homescreen updated styles to reflect current design recomendations suggestion for socket data - add RPi board temperature /sys/class/thermal/thermal_zone0/temppull/27/head
bradanlane
rodzic
c3476f064c
commit
7093c11fc6
|
|
@ -0,0 +1,255 @@
|
|||
.ath-viewport * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ath-viewport {
|
||||
position: relative;
|
||||
z-index: 2147483641;
|
||||
pointer-events: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
-o-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
.ath-modal {
|
||||
pointer-events: auto !important;
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.ath-mandatory {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.ath-container {
|
||||
pointer-events: auto !important;
|
||||
position: absolute;
|
||||
z-index: 2147483641;
|
||||
padding: 0.7em 0.6em;
|
||||
width: 18em;
|
||||
|
||||
background: #eee;
|
||||
background-size: 100% auto;
|
||||
|
||||
box-shadow: 0 0.2em 0 #d1d1d1;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ath-container small {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.ath-ios.ath-phone {
|
||||
bottom: 1.8em;
|
||||
left: 50%;
|
||||
margin-left: -9em;
|
||||
}
|
||||
|
||||
.ath-ios6.ath-tablet {
|
||||
left: 5em;
|
||||
top: 1.8em;
|
||||
}
|
||||
|
||||
.ath-ios7.ath-tablet {
|
||||
left: 0.7em;
|
||||
top: 1.8em;
|
||||
}
|
||||
|
||||
.ath-ios8.ath-tablet {
|
||||
right: 0.4em;
|
||||
top: 1.8em;
|
||||
}
|
||||
|
||||
.ath-android {
|
||||
bottom: 1.8em;
|
||||
left: 50%;
|
||||
margin-left: -9em;
|
||||
}
|
||||
|
||||
/* close icon */
|
||||
.ath-container:before {
|
||||
content: '';
|
||||
position: relative;
|
||||
display: block;
|
||||
float: right;
|
||||
margin: -0.7em -0.6em 0 0.5em;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC);
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
width: 2.7em;
|
||||
height: 2.7em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: #a33;
|
||||
z-index: 2147483642;
|
||||
}
|
||||
|
||||
.ath-container.ath-icon:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ath-mandatory .ath-container:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ath-container.ath-android:before {
|
||||
float: left;
|
||||
margin: -0.7em 0.5em 0 -0.6em;
|
||||
}
|
||||
|
||||
.ath-container.ath-android.ath-icon:before {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
|
||||
/* applied only if the application icon is shown */
|
||||
.ath-container.ath-icon {
|
||||
|
||||
}
|
||||
|
||||
.ath-action-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ath-ios7 .ath-action-icon,
|
||||
.ath-ios8 .ath-action-icon {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
background-image:url(data:image/png;base64,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);
|
||||
margin-top: -0.3em;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.ath-ios6 .ath-action-icon {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
background-image:url(data:image/png;base64,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);
|
||||
margin-bottom: 0.4em;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.ath-android .ath-action-icon {
|
||||
width: 1.4em;
|
||||
height: 1.5em;
|
||||
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg==);
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.ath-container p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 2147483642;
|
||||
text-shadow: 0 0.1em 0 #fff;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.ath-ios.ath-phone:after {
|
||||
content: '';
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
bottom: -0.9em;
|
||||
left: 50%;
|
||||
margin-left: -1em;
|
||||
-webkit-transform: scaleX(0.9) rotate(45deg);
|
||||
transform: scaleX(0.9) rotate(45deg);
|
||||
box-shadow: 0.2em 0.2em 0 #d1d1d1;
|
||||
}
|
||||
|
||||
.ath-ios.ath-tablet:after {
|
||||
content: '';
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
top: -0.9em;
|
||||
left: 50%;
|
||||
margin-left: -1em;
|
||||
-webkit-transform: scaleX(0.9) rotate(45deg);
|
||||
transform: scaleX(0.9) rotate(45deg);
|
||||
z-index: 2147483641;
|
||||
}
|
||||
|
||||
.ath-application-icon {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 auto 0.2em auto;
|
||||
height: 6em;
|
||||
width: 6em;
|
||||
z-index: 2147483642;
|
||||
}
|
||||
|
||||
.ath-container.ath-ios .ath-application-icon {
|
||||
border-radius: 1em;
|
||||
box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3),
|
||||
inset 0 0.07em 0 rgba(255,255,255,0.5);
|
||||
margin: 0 auto 0.4em auto;
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.ath-container.ath-phone {
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.ath-android.ath-phone {
|
||||
margin-left: -12em;
|
||||
}
|
||||
|
||||
.ath-ios.ath-phone {
|
||||
margin-left: -12em;
|
||||
}
|
||||
|
||||
.ath-ios6:after {
|
||||
left: 39%;
|
||||
}
|
||||
|
||||
.ath-ios8.ath-phone {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
right: 0.4em;
|
||||
top: 1.8em;
|
||||
}
|
||||
|
||||
.ath-ios8.ath-phone:after {
|
||||
bottom: auto;
|
||||
top: -0.9em;
|
||||
left: 68%;
|
||||
z-index: 2147483641;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,8 @@
|
|||
}
|
||||
.onoffswitch-label {
|
||||
display: block; overflow: hidden; cursor: pointer;
|
||||
border: 2px solid #ddd; border-radius: 20px;
|
||||
/* border: 2px solid #ddd; border-radius: 20px; */
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block; width: 200%; margin-left: -100%;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,83 @@
|
|||
@import url(bootstrap.min.css);
|
||||
@import url(bootstrap.cust.min.css);
|
||||
@import url(onoff.css);
|
||||
|
||||
body
|
||||
{
|
||||
background-color: #ddd;
|
||||
body {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
#stratux-main
|
||||
{
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
background-color: #fff;
|
||||
border-color: #ddd;
|
||||
border-width: 1px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
margin: auto;
|
||||
max-width: 400px;
|
||||
#stratux-main {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding: 0 19px 0px 19px;
|
||||
background-color: #fff;
|
||||
border-color: #ddd;
|
||||
border-width: 1px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
margin: auto;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
#RY835AI_connected-container
|
||||
{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* this media query matches custom bootstrap build */
|
||||
@media screen and (min-width: 640px) {
|
||||
#stratux-main .panel {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.led-red
|
||||
{
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #940;
|
||||
border-radius: 50%;
|
||||
box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
|
||||
/* tweek panel titles relative to status indicator */
|
||||
.panel_label {
|
||||
font-size: 16px;
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
line-height: 12px;
|
||||
vertical-align: bottom;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.led-green
|
||||
{
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #00FF00;
|
||||
border-radius: 50%;
|
||||
box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
|
||||
#RY835AI_connected-container {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* use both shape and color to address accessability requirement */
|
||||
.led-red {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #BF0000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.led-red:before {
|
||||
box-sizing: initial;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 5px solid #BF0000;
|
||||
border-left: 5px solid white;
|
||||
border-right: 5px solid white;
|
||||
width: 6px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.led-red:after {
|
||||
box-sizing: initial;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 5px solid #BF0000;
|
||||
border-left: 5px solid white;
|
||||
border-right: 5px solid white;
|
||||
width: 6px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.led-green {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #007F00;
|
||||
border-radius: 50%;
|
||||
/* box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; */
|
||||
}
|
||||
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 14 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 13 KiB |
242
web/index.html
242
web/index.html
|
|
@ -1,122 +1,146 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<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" />
|
||||
<link href="img/logo-android3.png" rel="icon" />
|
||||
|
||||
|
||||
<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>
|
||||
<link href="css/stratux.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<div id="stratux-main" class="well well-large">
|
||||
<h1>Stratux</h1>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Status <span id="connectedLabel" class="label label-warning">Disconnected</span></div>
|
||||
<div class="panel-body">
|
||||
<div class="form-horizontal">
|
||||
<!--
|
||||
<div class="row">
|
||||
<label class="col-sm-6">RTL-SDR devices:</label>
|
||||
<span id="Devices" class="col-sm-2">--</span>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/addtohomescreen.css">
|
||||
<script src="js/addtohomescreen.min.js"></script>
|
||||
<script>
|
||||
addToHomescreen({
|
||||
displayPace: 480
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="stratux-main" class="well well-large col-sm-12">
|
||||
<h1>Stratux <span id="Version">--</span></h1>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><span class="panel_label">Status</span> <span id="connectedLabel" class="label label-warning">Disconnected</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="form-horizontal">
|
||||
<!--
|
||||
<div class="row">
|
||||
<label class="col-xs-6">RTL-SDR devices:</label>
|
||||
<span id="Devices" class="col-xs-2">--</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<label class="col-xs-6">Clients connected:</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-xs-6">GPS satellites:</label>
|
||||
<span id="GPS_satellites_locked" class="col-xs-6">--</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-xs-6">AHRS:</label>
|
||||
<div id="RY835AI_connected-container" class="col-xs-6">
|
||||
<div id="RY835AI_connected" class="led-red"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-xs-6">Uptime:</label>
|
||||
<span id="Uptime" class="col-xs-6">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<label class="col-sm-6">Clients connected:</label>
|
||||
<span id="Connected_Users" class="col-sm-5">--</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">Current firmware:</label>
|
||||
<span id="Version" class="col-sm-6">--</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">UAT msgs:</label>
|
||||
<div class="col-sm-6">
|
||||
<span id="UAT_messages_last_minute">--</span>
|
||||
/
|
||||
<span id="UAT_messages_max">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">1090ES msgs:</label>
|
||||
<div class="col-sm-6">
|
||||
<span id="ES_messages_last_minute">--</span>
|
||||
/
|
||||
<span id="ES_messages_max">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">GPS satellites:</label>
|
||||
<span id="GPS_satellites_locked" class="col-sm-6">--</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">AHRS:</label>
|
||||
<div id="RY835AI_connected-container" class="col-sm-6">
|
||||
<div id="RY835AI_connected" class="led-red"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6">Uptime:</label>
|
||||
<span id="Uptime" class="col-sm-6">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Settings</div>
|
||||
<div class="panel-body form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">978MHz</label>
|
||||
<div class="col-sm-1">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="UAT_Enabled" class="onoffswitch-checkbox" id="uat-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="uat-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Settings</div>
|
||||
<div class="panel-body form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-6">978MHz</label>
|
||||
<div class="col-xs-6">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="UAT_Enabled" class="onoffswitch-checkbox" id="uat-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="uat-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-6">1090MHz</label>
|
||||
<div class="col-xs-6">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="ES_Enabled" class="onoffswitch-checkbox" id="es-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="es-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-6">GPS</label>
|
||||
<div class="col-xs-6">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="GPS_Enabled" class="onoffswitch-checkbox" id="gps-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="gps-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-6">AHRS</label>
|
||||
<div class="col-xs-6">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="AHRS_Enabled" class="onoffswitch-checkbox" id="ahrs-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="ahrs-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">1090MHz</label>
|
||||
<div class="col-sm-1">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="ES_Enabled" class="onoffswitch-checkbox" id="es-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="es-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">GPS</label>
|
||||
<div class="col-sm-1">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="GPS_Enabled" class="onoffswitch-checkbox" id="gps-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="gps-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">AHRS</label>
|
||||
<div class="col-sm-1">
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="AHRS_Enabled" class="onoffswitch-checkbox" id="ahrs-onoffswitch" checked>
|
||||
<label class="onoffswitch-label" for="ahrs-onoffswitch">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,98 +1,117 @@
|
|||
var socket;
|
||||
|
||||
function setLEDstatus (ledElement, status) {
|
||||
if(status) {
|
||||
ledElement.removeClass('led-red');
|
||||
ledElement.addClass('led-green');
|
||||
}
|
||||
else {
|
||||
ledElement.removeClass('led-green');
|
||||
ledElement.addClass('led-red');
|
||||
}
|
||||
function setLEDstatus(ledElement, status) {
|
||||
if (status) {
|
||||
ledElement.removeClass('led-red');
|
||||
ledElement.addClass('led-green');
|
||||
} else {
|
||||
ledElement.removeClass('led-green');
|
||||
ledElement.addClass('led-red');
|
||||
}
|
||||
}
|
||||
|
||||
function setConnectedClass (cssClass) {
|
||||
$('#connectedLabel').removeClass('label-success');
|
||||
$('#connectedLabel').removeClass('label-warning');
|
||||
$('#connectedLabel').removeClass('label-danger');
|
||||
$('#connectedLabel').addClass( cssClass );
|
||||
function setConnectedClass(cssClass) {
|
||||
$('#connectedLabel').removeClass('label-success');
|
||||
$('#connectedLabel').removeClass('label-warning');
|
||||
$('#connectedLabel').removeClass('label-danger');
|
||||
$('#connectedLabel').addClass(cssClass);
|
||||
|
||||
if(cssClass == 'label-success')
|
||||
$('#connectedLabel').text('Connected');
|
||||
else
|
||||
$('#connectedLabel').text('Disconnected');
|
||||
if (cssClass == 'label-success')
|
||||
$('#connectedLabel').text('Connected');
|
||||
else
|
||||
$('#connectedLabel').text('Disconnected');
|
||||
}
|
||||
|
||||
function connect() {
|
||||
socket = new WebSocket('ws://' + window.location.hostname + '/control');
|
||||
socket = new WebSocket('ws://' + window.location.hostname + '/control');
|
||||
|
||||
socket.onopen = function(msg) {
|
||||
setConnectedClass('label-success');
|
||||
};
|
||||
socket.onopen = function (msg) {
|
||||
setConnectedClass('label-success');
|
||||
};
|
||||
|
||||
socket.onclose = function(msg) {
|
||||
setConnectedClass('label-danger');
|
||||
setTimeout(connect,1000);
|
||||
};
|
||||
socket.onclose = function (msg) {
|
||||
setConnectedClass('label-danger');
|
||||
setTimeout(connect, 1000);
|
||||
};
|
||||
|
||||
socket.onerror = function(msg) {
|
||||
setConnectedClass('label-danger');
|
||||
};
|
||||
socket.onerror = function (msg) {
|
||||
setConnectedClass('label-danger');
|
||||
};
|
||||
|
||||
socket.onmessage = function(msg) {
|
||||
console.log('Received status update.')
|
||||
socket.onmessage = function (msg) {
|
||||
console.log('Received status update.')
|
||||
|
||||
var status = JSON.parse(msg.data)
|
||||
var status = JSON.parse(msg.data)
|
||||
|
||||
// Update Status
|
||||
$('#Version').text(status.Version);
|
||||
$('#Devices').text(status.Devices);
|
||||
$('#Connected_Users').text(status.Connected_Users);
|
||||
$('#UAT_messages_last_minute').text(status.UAT_messages_last_minute);
|
||||
$('#UAT_messages_max').text(status.UAT_messages_max);
|
||||
$('#ES_messages_last_minute').text(status.ES_messages_last_minute);
|
||||
$('#ES_messages_max').text(status.ES_messages_max);
|
||||
$('#GPS_satellites_locked').text(status.GPS_satellites_locked);
|
||||
setLEDstatus($('#RY835AI_connected'), status.RY835AI_connected);
|
||||
$('#Uptime').text(status.Uptime);
|
||||
// Update Status
|
||||
$('#Version').text(status.Version);
|
||||
$('#Devices').text(status.Devices);
|
||||
$('#Connected_Users').text(status.Connected_Users);
|
||||
$('#UAT_messages_last_minute').text(status.UAT_messages_last_minute);
|
||||
$('#UAT_messages_max').text(status.UAT_messages_max);
|
||||
$('#ES_messages_last_minute').text(status.ES_messages_last_minute);
|
||||
$('#ES_messages_max').text(status.ES_messages_max);
|
||||
$('#GPS_satellites_locked').text(status.GPS_satellites_locked);
|
||||
setLEDstatus($('#RY835AI_connected'), status.RY835AI_connected);
|
||||
|
||||
/* the formatting code could move to the other end of the socket */
|
||||
var uptime = status.Uptime;
|
||||
if (uptime != undefined) {
|
||||
var time_parts = uptime.match(/([0-9]*)h([0-9]*)m([0-9\.]*)s/);
|
||||
$('#Uptime').text(time_parts[1] + "h" + time_parts[2] + "m" + Math.round(parseFloat(time_parts[3])) + "s");
|
||||
}
|
||||
// not yet implemented - showing the raspberry pi board temperature will be helpful when Stratux is contained in a case
|
||||
/* $('#PI_Temperature').text(status.Pi_Temperature); */
|
||||
|
||||
// Update Settings
|
||||
$('input[name=UAT_Enabled]').prop('checked', status.UAT_Enabled);
|
||||
$('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);
|
||||
};
|
||||
// Update Settings
|
||||
$('input[name=UAT_Enabled]').prop('checked', status.UAT_Enabled);
|
||||
$('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);
|
||||
};
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
connect();
|
||||
$(document).ready(function () {
|
||||
connect();
|
||||
|
||||
$('input[name=UAT_Enabled]').click(function () {
|
||||
console.log('UAT_Enabled clicked');
|
||||
$('input[name=UAT_Enabled]').click(function () {
|
||||
console.log('UAT_Enabled clicked');
|
||||
|
||||
msg = {setting: 'UAT_Enabled', state: $('input[name=UAT_Enabled]').prop('checked') };
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
msg = {
|
||||
setting: 'UAT_Enabled',
|
||||
state: $('input[name=UAT_Enabled]').prop('checked')
|
||||
};
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
|
||||
$('input[name=ES_Enabled]').click(function () {
|
||||
console.log('ES_Enabled clicked');
|
||||
$('input[name=ES_Enabled]').click(function () {
|
||||
console.log('ES_Enabled clicked');
|
||||
|
||||
msg = {setting: 'ES_Enabled', state: $('input[name=ES_Enabled]').prop('checked') };
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
msg = {
|
||||
setting: 'ES_Enabled',
|
||||
state: $('input[name=ES_Enabled]').prop('checked')
|
||||
};
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
|
||||
$('input[name=GPS_Enabled]').click(function () {
|
||||
console.log('GPS_Enabled clicked');
|
||||
$('input[name=GPS_Enabled]').click(function () {
|
||||
console.log('GPS_Enabled clicked');
|
||||
|
||||
msg = {setting: 'GPS_Enabled', state: $('input[name=GPS_Enabled]').prop('checked') };
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
msg = {
|
||||
setting: 'GPS_Enabled',
|
||||
state: $('input[name=GPS_Enabled]').prop('checked')
|
||||
};
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
|
||||
$('input[name=AHRS_Enabled]').click(function () {
|
||||
console.log('AHRS_Enabled clicked');
|
||||
$('input[name=AHRS_Enabled]').click(function () {
|
||||
console.log('AHRS_Enabled clicked');
|
||||
|
||||
msg = {setting: 'AHRS_Enabled', state: $('input[name=AHRS_Enabled]').prop('checked') };
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
msg = {
|
||||
setting: 'AHRS_Enabled',
|
||||
state: $('input[name=AHRS_Enabled]').prop('checked')
|
||||
};
|
||||
socket.send(JSON.stringify(msg));
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Ładowanie…
Reference in New Issue