display true heading and heading offset inside 3D cube area

_locales/en/messages.json

@@ -179,7 +179,10 @@
         "message": "<strong>Backup</strong> your configuration in case of an accident. (<strong>CLI</strong> settings are <strong style=\"color: red\">not</strong> included)."
     },
     "initialSetupButtonResetZaxis": {
-        "message": "Reset Z axis"
+        "message": "Reset Z axis, offset: 0 deg"
+    },
+    "initialSetupButtonResetZaxisValue": {
+        "message": "Reset Z axis, offset: $1 deg"
     },
     "initialSetupThrottleHead": {
         "message": "Throttle Settings"
@@ -256,6 +259,9 @@
     "initialSetupModel": {
         "message": "Model: $1"
     },
+    "initialSetupHeading": {
+        "message": "Heading: $1 deg"
+    },
     "initialSetupAccelCalibStarted": {
         "message": "Accelerometer calibration started"
     },

tabs/initial_setup.css

@@ -45,6 +45,7 @@
         }
 #interactive_block {
     float: left;
+    position: relative;
 
     height: 280px;
     width: 400px;
@@ -53,17 +54,25 @@
     background-color: white;
 }
     #interactive_block .model {
-        display: block;
+        float: left;
+        height: 15px;
         margin: 10px 0 0 10px;
 
         font-weight: bold;
     }
+    #interactive_block .heading {
+        float: right;
+        height: 15px;
+
+        margin: 10px 10px 0 0;
+        font-weight: bold;
+    }
     #interactive_block a.reset {
         position: absolute;
         display: block;
 
-        margin-left: 10px;
-        margin-top: 215px;
+        bottom: 10px;
+        right: 10px;
 
         height: 28px;
         line-height: 28px;

tabs/initial_setup.html

@@ -22,6 +22,8 @@
     </div>
     <div id="interactive_block">
         <span class="model"></span>
+        <span class="heading"></span>
+        <div class="clear-both"></div>
         <a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
         <div id="perspective">
             <div id="cube">

tabs/initial_setup.js

@@ -103,6 +103,7 @@ function tab_initialize_initial_setup() {
         }
 
         $('span.model').text(chrome.i18n.getMessage('initialSetupModel', [str]));
+        $('span.heading').text(chrome.i18n.getMessage('initialSetupheading', [0]));
 
         // UI Hooks
         $('a.calibrateAccel').click(function() {
@@ -218,6 +219,8 @@ function tab_initialize_initial_setup() {
         // reset yaw button hook
         $('div#interactive_block > a.reset').click(function() {
             yaw_fix = SENSOR_DATA.kinematics[2] * - 1.0;
+            $(this).text(chrome.i18n.getMessage('initialSetupButtonResetZaxisValue', [yaw_fix]));
+
             console.log('YAW reset to 0 deg, fix: ' + yaw_fix + ' deg');
         });
 
@@ -247,6 +250,9 @@ function tab_initialize_initial_setup() {
             cube.css('-webkit-transform', 'rotateY(' + ((SENSOR_DATA.kinematics[2] * -1.0) - yaw_fix) + 'deg)');
             $('#cubePITCH', cube).css('-webkit-transform', 'rotateX(' + SENSOR_DATA.kinematics[1] + 'deg)');
             $('#cubeROLL', cube).css('-webkit-transform', 'rotateZ(' + SENSOR_DATA.kinematics[0] + 'deg)');
+
+            // Update heading
+            $('span.heading').text(chrome.i18n.getMessage('initialSetupheading', [SENSOR_DATA.kinematics[2]]));
         }
 
         GUI.interval_add('initial_setup_data_pull', get_analog_data, 50, true);