completed STATUS and SETTINGS pages with context sensitive HELP

2015-09-29 18:05:50 -04:00 · 2015-09-29 18:05:50 -04:00 · 125c052385
commit 125c052385
--- a/web/css/main.css
+++ b/web/css/main.css
@ -1,7 +1,72 @@
+.help-page {
+    font-size: 0.85em;
+}
+
+.section_invisible {
+    display: none;
+}
+
+.ahrs_connected {
+    content:
+}
+
+.ahrs_disconnected {}
+
+.separator {
+    height: 1px;
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 4px;
+}
+
+
+/* ***************************************************************************
+everything below this comment represents tweeks to the mobile-angular-uis CSS
+*************************************************************************** */
+
+.label_adj {
+    margin-left: -15px;
+    margin-right: -15px;
+ }
+input[type="number_format"] {
+    text-align: end;
+}
+
+.sidebar .scrollable-header,
+.panel-title {
+    border-bottom: 1px solid #cccccc;
+}
+
+.app-body,
+.panel-default,
+.scrollable-content,
+.form-group {
+    background-color: #ffffff;
+}
+
 .app-content {
    margin-top: 4px;
 }

+.sidebar-header,
+.app-name {
+    line-height: 50px;
+    color: #000;
+    background-color: #f7f7f7;
+}
+
+.panel-heading {
+    padding: 4px 4px 4px 4px;
+    border-bottom: 1px solid transparent;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    border-bottom: 1px solid #cccccc;
+    font-weight: bold;
+}
+
+.panel-group .panel-heading {
+    border-bottom: inherit;
+}
+
 .panel_label {
    font-size: 16px;
    margin-top: 4px;
@ -11,72 +76,47 @@
    padding-bottom: 2px;
 }

-.feature-icon {
-  font-size: 44px;
-  padding: 0;
-  line-height: 68px;
-  width: 72px;
-  text-align: center;
-  opacity: .8;
-  border: 3px solid;
-  border-radius: 200px;
-  height: 72px;
-  margin-bottom: 20px;
+.panel-body {
+    padding: 8px 4px 4px 4px;
 }

-.feature-icon.fa-gamepad {
-  line-height: 60px;
+.control-label {
+    line-height: 28px;
+    margin-bottom: 4px;
 }

-.feature-icon.fa-tachometer {
-  line-height: 60px;
+.switch {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    width: 52px;
+    height: 28px;
+    margin-bottom: 4px;
 }

-.app-content-loading {
-  text-align: center;
-  height: 100%;
-  width: 100%;
-  background: #fff;
-  position: relative;
+.switch .switch-handle {
+    width: 26px;
+    height: 28px;
 }

-.loading-spinner {
-  position: absolute;
-  font-size: 50px;
-  left: 50%;
-  top: 50%;
-  margin-left: -25px;
-  margin-top: -25px;
-}
-
-.notices-container {
-  overflow-x: hidden;
-}
-
-.dismiss {
-  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
-  -moz-transition: opacity 300ms, -moz-transform 300ms;
-  transition: opacity 300ms, transform 300ms;
-  opacity: 0.5;
-}
-
-.dismitted {
-  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
-  -moz-transition: opacity 300ms, -moz-transform 300ms;
-  transition: opacity 300ms, transform 300ms;
-  opacity: 0;
-}
-
-.list-group-item-home {
-  padding: 20px; 
+.switch.active .switch-handle {
+    border-color: #007aff;
+    -webkit-transform: translate(26px, 0);
+    -ms-transform: translate(26px, 0);
+    -o-transform: translate(26px, 0);
+    transform: translate(26px, 0);
 }

 pre {
-  text-align: left !important;
-}
-
-input.scrollable-header {
-  border-bottom: 3px solid #ccc;
-}
-
-.toucharea {width: 100%; height: 100%;}
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.42857143;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #333333;
+    background-color: inherit;
+    border: 0px;
+    border-radius: 0px;
+}
--- a/web/index.html
+++ b/web/index.html
@ -68,7 +68,7 @@

 <body ng-app="stratux" ng-controller="MainCtrl" ui-prevent-touchmove-defaults>

-    <!-- Define Sidebar Navigation -->
+    <!-- Define Left (Menu) Sidebar Navigation -->
    <div ui-track-as-search-param='true' class="sidebar sidebar-left">
        <div class="scrollable">
            <h3 class="scrollable-header app-name">Menu</h3>
@ -86,8 +86,19 @@
            </div>
        </div>
    </div>
+    <!-- Define Right (Help) Sidebar -->
+    <div class="sidebar sidebar-right">
+        <div class="scrollable">
+            <h3 class="scrollable-header app-name">Help</h3>
+            <div class="scrollable-content">
+                <div class="list-group" ui-toggle="uiSidebarRight">
+                    <div ng-include="helppage"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+

-    <div ng-include="'plates/help.html'" class="sidebar sidebar-right"></div>

    <div class="app" ui-swipe-right='Ui.turnOn("uiSidebarLeft")' ui-swipe-left='Ui.turnOff("uiSidebarLeft")'>

@ -105,7 +116,7 @@
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
                <div ui-toggle="uiSidebarRight" class="btn">
-                    <i class="fa fa-info-circle"></i>
+                    <i class="fa fa-info-circle"></i> Help
                </div>
            </div>
        </div>
--- a/web/js/main.js
+++ b/web/js/main.js
@ -1,3 +1,8 @@
+// application constants
+var URL_SETTINGS_GET = "http://192.168.6.104/getSettings";
+var URL_SETTINGS_SET = "http://192.168.6.104/setSettings";
+
+
 // define the module with dependency on mobile-angular-ui
 //var app = angular.module('stratux', ['ngRoute', 'mobile-angular-ui', 'mobile-angular-ui.gestures', 'appControllers']);
 var app = angular.module('stratux', ['ui.router', 'mobile-angular-ui', 'mobile-angular-ui.gestures', 'appControllers']);
--- a/web/maui/css/mobile-angular-ui-base.css
+++ b/web/maui/css/mobile-angular-ui-base.css
@ -8413,7 +8413,7 @@ a.list-group-item .icon.pull-right {
  position: relative;
  z-index: 2;
  width: 100%;
-  background: #ffffff; /* 777777 */
+  background: #777777;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
@ -8531,7 +8531,7 @@ a.list-group-item .icon.pull-right {
 }

 .sidebar-left {
-  background: #f5f5f5;
+  background: #555555;
  width: 300px;
  left: 0;
  right: auto;
@ -8541,7 +8541,7 @@ a.list-group-item .icon.pull-right {
 }

 .sidebar-right {
-  background: #f5f5f5;
+  background: #555555;
  width: 300px;
  left: auto;
  right: 0;
@ -8588,10 +8588,10 @@ a.list-group-item .icon.pull-right {
 .app-name {
  position: relative;
  width: 100%;
-  line-height: 51px;
+  line-height: 70px;
  padding: 0 10px;
-  font-size: 20px;
-  color: #000; /* #ffffff #007aff */
+  font-size: 23px;
+  color: #ffffff;
  margin: 0;
  z-index: 10;
 }
--- a/web/plates/js/settings.js
+++ b/web/plates/js/settings.js
@ -3,9 +3,9 @@ SettingsCtrl.$inject = ['$rootScope', '$scope', '$state', '$http']; // Inject my

 // create our controller function with all necessary logic
 function SettingsCtrl($rootScope, $scope, $state, $http) {
-    var getterURL = "http://192.168.6.104/getSettings";
-    var setterURL = "http://192.168.6.104/setSettings";

+    $scope.$parent.helppage = 'plates/settings-help.html';
+    
    var toggles = ['UAT_Enabled', 'ES_Enabled', 'GPS_Enabled', 'AHRS_Enabled', 'DEBUG', 'ReplayLog']; // DEBUG is 'DspTrafficSrc'
    var settings = {};
    for (i = 0; i < toggles.length; i++) {
@ -14,10 +14,10 @@ function SettingsCtrl($rootScope, $scope, $state, $http) {

    function getSettings() {
        // Simple GET request example (note: responce is asynchronous)
-        $http.get(getterURL).
+        $http.get(URL_SETTINGS_GET).
        then(function (response) {
            //process
-            $scope.rawSettings = response.data;
+            $scope.rawSettings = response.data; // angular.toJson(response.data, true);
            settings = angular.fromJson(response.data);
            $scope.UAT_Enabled = settings.UAT_Enabled;
            $scope.ES_Enabled = settings.ES_Enabled;
@ -38,10 +38,10 @@ function SettingsCtrl($rootScope, $scope, $state, $http) {

    function setSettings(msg) {
        // Simple POST request example (note: responce is asynchronous)
-        $http.post(setterURL, msg).
+        $http.post(URL_SETTINGS_SET, msg).
        then(function (response) {
            //process
-            $scope.rawSettings = response.data;
+            $scope.rawSettings = response.data; // angular.toJson(response.data, true);
            settings = angular.fromJson(response.data);
            $scope.UAT_Enabled = settings.UAT_Enabled;
            $scope.ES_Enabled = settings.ES_Enabled;
@ -49,7 +49,7 @@ function SettingsCtrl($rootScope, $scope, $state, $http) {
            $scope.AHRS_Enabled = settings.AHRS_Enabled;
            $scope.DEBUG = settings.DEBUG;
            $scope.ReplayLog = settings.ReplayLog;
-            $scope.PPM = settings.PPM;
+            $scope.PPM = parseInt(settings.PPM);
            // $scope.$apply();
        }, function (response) {
            $scope.rawSettings = "error setting settings";
--- a/web/plates/js/status.js
+++ b/web/plates/js/status.js
@ -4,6 +4,8 @@ StatusCtrl.$inject = ['$rootScope', '$scope', '$state', '$http']; // Inject my d
 // create our controller function with all necessary logic
 function StatusCtrl($rootScope, $scope, $state, $http) {

+    $scope.$parent.helppage = 'plates/status-help.html';
+
    function connect($scope) {
        if (($scope === undefined) || ($scope === null))
            return; // we are getting called once after clicking away from the status page
@ -69,8 +71,24 @@ function StatusCtrl($rootScope, $scope, $state, $http) {
        };
    }

+    function setHardwareVisibility() {
+        $scope.visible_uat = true;
+        $scope.visible_es = true;
+        $scope.visible_gps = true;
+        $scope.visible_ahrs = true;

-
+        // Simple GET request example (note: responce is asynchronous)
+        $http.get(URL_SETTINGS_GET).
+        then(function (response) {
+            settings = angular.fromJson(response.data);
+            $scope.visible_uat = settings.UAT_Enabled;
+            $scope.visible_es = settings.ES_Enabled;
+            $scope.visible_gps = settings.GPS_Enabled;
+            $scope.visible_ahrs = settings.AHRS_Enabled;
+        }, function (response) {
+            // nop
+        });
+    };

    $state.get('home').onEnter = function () {
        // everything gets handled correctly by the controller
@ -82,6 +100,8 @@ function StatusCtrl($rootScope, $scope, $state, $http) {
        }
    };

+
    // Status Controller tasks
+    setHardwareVisibility();
    connect($scope); // connect - opens a socket and listens for messages
 };
--- a/web/plates/settings-help.html
+++ b/web/plates/settings-help.html
@ -0,0 +1,20 @@
+<div class="section text-left help-page">
+    <p>The <strong>Settings</strong> page provides both control and configuration of your Stratux device.</p>
+
+    <p>Use the toggles in the <strong>Hardware</strong> section to control which devices are active.</p>
+    <p class="text-warning">NOTE: Only hardware toggled on here, will appear on the
+        <stron>Status</stron> page.</p>
+
+    <p>The <strong>Diagnostics</strong> section helps with debugging and communicating with the Stratux project contributors via GitHub and the reddit subgroup.
+        <ul>
+            <li>Toggling <strong>Traffic Source</strong> adds text for traffic targets within your navigation application. Traffic received via UAT will display <code>u</code> while traffic received via 1090 will display <code>e</code>.</li>
+            <li>Toggling <strong>Record Logs</strong> enables logging to a series of files for your Stratux device including data recorded for UAT traffic and weather, 1090 traffic, GPS messages, and AHRS messages. The log files are accessible from the <strong>Logs</strong> menu available on the left.</li>
+        </ul>
+
+    <p>The <strong>Configuration</strong> section lets you adjust the default operation of your Stratux device.</p>
+    <ul>
+        <li>The SDR (software defined radio) receiver support error correction. From the Raspberry Pi, you may use the command <code>kal -g 48 -s GSM850</code> to scan for available channels in your area. Then use the command <code>kal -g 48 -c <em>channel#</em></code> to calculate the PPM.  <div class="text-warning">NOTE: You will need to perform all commands as <code>root</code> by issuing the command: <code>sudo su -</code>. You will need to stop the Stratux software before running the calibration process. You can stop all of the Stratux processes with the command: <code>pkill screen</code>.</div></li>
+        <li>Addiitonal settings will be added in future releases.</li>
+    </ul>
+    
+</div>
--- a/web/plates/settings.html
+++ b/web/plates/settings.html
@ -1,52 +1,84 @@
-<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">
-                    <ui-switch ng-model='UAT_Enabled' settings-change></ui-switch>
+<div class="col-sm-12">
+    <div class="panel-group col-sm-6">
+
+        <div class="panel panel-default">
+            <div class="panel-heading">Hardware</div>
+            <div class="panel-body">
+                <div class="form-group">
+                    <label class="control-label col-xs-7">978MHz</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='UAT_Enabled' settings-change></ui-switch>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-xs-7">1090MHz</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='ES_Enabled' settings-change></ui-switch>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-xs-7">GPS</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='GPS_Enabled' settings-change></ui-switch>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-xs-7">AHRS</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='AHRS_Enabled' settings-change></ui-switch>
+                    </div>
                </div>
            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">1090MHz</label>
-                <div class="col-xs-6">
-                    <ui-switch ng-model='ES_Enabled' settings-change></ui-switch>
+        </div>
+    </div>
+
+    <div class="panel-group col-sm-6">
+        <div class="panel panel-default">
+            <div class="panel-heading">Diagnostics</div>
+            <div class="panel-body">
+                <div class="form-group">
+                    <label class="control-label col-xs-7">Traffic Markings</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='DEBUG' settings-change></ui-switch>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-xs-7">Record Logs</label>
+                    <div class="col-xs-5">
+                        <ui-switch ng-model='ReplayLog' settings-change></ui-switch>
+                    </div>
                </div>
            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">GPS</label>
-                <div class="col-xs-6">
-                    <ui-switch ng-model='GPS_Enabled' settings-change></ui-switch>
+        </div>
+
+
+        <div class="panel panel-default">
+            <div class="panel-heading">Configuration</div>
+            <div class="panel-body">
+                <div class="form-group">
+                    <label class="control-label col-xs-8">PPM Correction</label>
+                    <form name="ppmForm" ng-submit="updateppm()" novalidate>
+                        <!-- type="number" not supported except on mobile -->
+                        <input class="col-xs-4" type="number_format" required ng-model="PPM" placeholder="integer" />
+                    </form>
                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">AHRS</label>
-                <div class="col-xs-6">
-                    <ui-switch ng-model='AHRS_Enabled' settings-change></ui-switch>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">Traffic Source</label>
-                <div class="col-xs-6">
-                    <ui-switch ng-model='DEBUG' settings-change></ui-switch>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">Replay Log</label>
-                <div class="col-xs-6">
-                    <ui-switch ng-model='ReplayLog' settings-change></ui-switch>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-xs-6">PPM Correction</label>
-                <form name="ppmForm" ng-submit="updateppm()" novalidate>
-                    <input class="col-xs-3" type="number" required ng-model="PPM" placeholder="integer" />
-                </form>
+
            </div>
        </div>
    </div>
 </div>
-<div class="col-sm-6"> <pre>{{rawSettings}}</pre> </div>
+<div class="col-sm-12">
+
+    <div class="panel panel-default" xui-set="{'settingsAccordion' : 4}">
+        <div class="panel-heading">Raw Configuration</div>
+        <div xui-if="settingsAccordion == 4">
+            <div class="panel-body">
+                <p>stratux.conf:</p>
+                <pre>{{rawSettings}}</pre>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!--
 -->
--- a/web/plates/status-help.html
+++ b/web/plates/status-help.html
@ -0,0 +1,16 @@
+<div class="section text-left help-page">
+    <p>The <strong>Status</strong> page provides an overview of your Stratux device.</p>
+    <p>The current state of you device is shown at th top - <code>Connected</code> in green or <code>Disconected</code>in red.</p>
+
+    <p>Depending on the hardware you have installed in your Stratux, you will have status for the following:</p>
+    <ul>
+        <li>software defined radio (SDR) dongle tuned to 978Mhz for UAT (universal access transceiver) traffic and weather</li>
+        <li>software defined radio (SDR) dongle tuned to 1090Mhz for ES (extended squitter) traffic</li>
+        <li>RY835AI module providing either GPS or GPS+AHRS data</li>
+    </ul>
+    <p class="text-warning">NOTE: This page only shows devices you have installed and turned on (via the <strong>Settings</strong> page.</p>
+
+    <p>The <strong>Messages</strong> section gives you details for messages received. There are statistics for the rolling average for the past 60 seconds as well as the peak average.</p>
+    <p>For GPS and AHRS you can view the number of satellites being received and if AHRS is configured and operating.</p>
+    <p>The <strong>Status</strong> page also gives you an indication of how long your Stratux devices has been operating since you turned it on, as well as reporting the on-board temperature sensor of the Raspberry Pi.</p>
+</div>
--- a/web/plates/status.html
+++ b/web/plates/status.html
@ -1,4 +1,4 @@
-<div class="col-sm-6">
+<div class="col-sm-12">
    <div class="text-center">
        <p><strong>Version: <span>{{Version}}</span></strong></p>
    </div>
@ -8,34 +8,35 @@
        </div>
        <div class="panel-body">
            <div class="form-horizontal">
-                <!--
-                        <div class="row">
-                            <label class="col-xs-6">RTL-SDR devices:</label>
-                            <span class="col-xs-2">{{Devices}}</span>
-                        </div>
-                        -->
                <div class="row">
-                    <label class="col-xs-6">Recent Clients:</label>
-                    <span class="col-xs-6">{{Connected_Users}}</span>
+                    <div class="col-sm-6 label_adj">
+                        <strong class="col-xs-6">Recent Clients:</strong>
+                        <span class="col-xs-2 text-right">{{Connected_Users}}</span>
+                    </div>
+                    <div class="col-sm-6 label_adj">
+                        <strong class="col-xs-6">RTL-SDR devices:</strong>
+                        <span class="col-xs-2 text-right">{{Devices}}</span>
+                    </div>
                </div>
-
+                <div class="separator"></div>
                <div class="row">
                    <label class="col-xs-5">Messages</label>
                    <label class="col-xs-3 text-right">Minute</label>
                    <label class="col-xs-3 text-right">Peak</label>
                </div>
-                <div class="row">
+                <div class="row" ng-class="{'section_invisible': !visible_uat}">
                    <span class="col-xs-1"></span>
                    <label class="col-xs-4">UAT:</label>
                    <span class="col-xs-3 text-right">{{UAT_messages_last_minute}}</span>
                    <span class="col-xs-3 text-right">{{UAT_messages_max}}</span>
                </div>
-                <div class="row">
+                <div class="row" ng-class="{'section_invisible': !visible_es}">
                    <span class="col-xs-1"></span>
                    <label class="col-xs-4">1090ES:</label>
                    <span class="col-xs-3 text-right">{{ES_messages_last_minute}}</span>
                    <span class="col-xs-3 text-right">{{ES_messages_max}}</span>
                </div>
+                <!--
                <div id="uat_products" style="display: none;">
                    <div class="row"><span class="col-xs-1">&nbsp;</span></div>
                    <div class="row">
@ -45,25 +46,31 @@
                    </div>
                    <div>{{product_rows}}</div>
                </div>
-                <div class="row"><span class="col-xs-1">&nbsp;</span></div>
-                <div class="row">
+-->
+                <div class="row" ng-class="{ 'section_invisible': (!visible_gps && !visible_ahrs)}">
+                    <span class="col-xs-1">&nbsp;</span>
+                </div>
+                <div class="row" ng-class="{'section_invisible': !visible_gps}">
                    <label class="col-xs-6">GPS satellites:</label>
                    <span class="col-xs-6">{{GPS_satellites_locked}}</span>
                </div>
-                <div class="row">
+                <div class="row" ng-class="{'section_invisible': !visible_ahrs}">
                    <label class="col-xs-6">AHRS:</label>
                    <div id="RY835AI_connected-container" class="col-xs-6">
-                        <div class="led-red">{{RY835AI_connected}}</div>
+                        <div ng-class="RY835AI_connected ? 'fa fa-check-circle text-success' : 'fa fa-times-circle text-danger'"></div>
                    </div>
                </div>
                <div class="row"><span class="col-xs-1">&nbsp;</span></div>
+                <div class="separator"></div>
                <div class="row">
-                    <label class="col-xs-6">Uptime:</label>
-                    <span class="col-xs-6">{{Uptime}}</span>
-                </div>
-                <div class="row">
-                    <label class="col-xs-6">CPU Temp:</label>
-                    <span class="col-xs-6">{{CPUTemp}}</span>
+                    <div class="col-sm-6 label_adj">
+                        <strong class="col-xs-6">Uptime:</strong>
+                        <span class="col-xs-6">{{Uptime}}</span>
+                    </div>
+                    <div class="col-sm-6 label_adj">
+                        <strong class="col-xs-6">CPU Temp:</strong>
+                        <span class="col-xs-6">{{CPUTemp}}</span>
+                    </div>
                </div>
            </div>
        </div>