From f8125289b6d18d0de8484e5b13f1a984f30f97f2 Mon Sep 17 00:00:00 2001 From: cTn Date: Thu, 11 Apr 2013 11:50:01 +0200 Subject: [PATCH] attitude visualization via simple 3d block --- css/style.css | 106 ++++++++++++++++++++++++++++++++++++++++ js/main.js | 2 +- js/serial_backend.js | 23 +++++++-- tabs/initial_setup.html | 23 +++++++++ tabs/initial_setup.js | 28 +++++++++++ 5 files changed, 177 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 1eb124c51a..3e77f1cd76 100644 --- a/css/style.css +++ b/css/style.css @@ -217,6 +217,112 @@ a:hover { border: 1px dotted silver; } +#interactive_block { + float: right; + + margin-top: 10px; + + height: 320px; + width: 400px; + + border: 1px solid silver; + background-color: white; +} + #interactive_block a.reset { + position: relative; + display: block; + + top: 285px; + left: 10px; + + width: 100px; + height: 23px; + line-height: 23px; + + color: white; + text-align: center; + + border: 1px solid silver; + background-color: blue; + } + #interactive_block a.reset:hover { + text-decoration: none; + } + #perspective { + -webkit-perspective: 800; + -webkit-perspective-origin: 50% 150px; /* 150px = (350px / 2) - 25px */ + } + #cube { + position: relative; + top: 110px; + left: 150px; /* (916px / 2) - 50px */ + + height: 100px; + width: 100px; + + -webkit-transform-style: preserve-3d; + } + #cubePITCH { + -webkit-transform-style: preserve-3d; + } + #cubeROLL { + -webkit-transform-style: preserve-3d; + } + #cube .face { + position: absolute; + + color: white; + font-size: 25px; + text-align: center; + } + #cube .face.one { + width: 100px; + height: 200px; + line-height: 200px; + + -webkit-transform: rotateX(-90deg) translateZ(-50px); + background-color: purple; + } + #cube .face.two { + width: 100px; + height: 50px; + line-height: 50px; + + -webkit-transform: translateZ(100px); + background-color: blue; + } + #cube .face.three { + width: 200px; + height: 50px; + line-height: 50px; + + -webkit-transform: rotateY(90deg); + background-color: green; + } + #cube .face.four { + width: 100px; + height: 50px; + line-height: 50px; + + -webkit-transform: rotateY(180deg) translateZ(100px); + background-color: black; + } + #cube .face.five { + width: 200px; + height: 50px; + line-height: 50px; + + -webkit-transform: rotateY(-90deg) translateZ(100px); + background-color: red; + } + #cube .face.six { + width: 100px; + height: 200px; + line-height: 200px; + + -webkit-transform: rotateX(90deg) translateZ(100px); + background-color: silver; + } .tab-pid_tuning table { width: 100%; border-collapse: collapse; diff --git a/js/main.js b/js/main.js index 52cbd8337f..0d54e3083d 100644 --- a/js/main.js +++ b/js/main.js @@ -32,7 +32,7 @@ $(document).ready(function() { }); // temporary - //$('#content').load("./tabs/motor_outputs.html", tab_initialize_motor_outputs); + //$('#content').load("./tabs/initial_setup.html", tab_initialize_initial_setup); }); function disable_timers() { diff --git a/js/serial_backend.js b/js/serial_backend.js index bef52fbda0..2334cb000b 100644 --- a/js/serial_backend.js +++ b/js/serial_backend.js @@ -82,7 +82,10 @@ var SENSOR_DATA = { gyroscope: [0, 0, 0], accelerometer: [0, 0, 0], magnetometer: [0, 0, 0], - altitude: 0 + altitude: 0, + kinematicsX: 0.0, + kinematicsY: 0.0, + kinematicsZ: 0.0 }; var MOTOR_DATA = new Array(8); @@ -436,7 +439,9 @@ function process_message(code, data) { console.log(data); break; case MSP_codes.MSP_ATTITUDE: - console.log(data); + SENSOR_DATA.kinematicsX = view.getInt16(0, 1) / 10.0; + SENSOR_DATA.kinematicsY = view.getInt16(2, 1) / 10.0; + SENSOR_DATA.kinematicsZ = view.getInt16(4, 1); break; case MSP_codes.MSP_ALTITUDE: SENSOR_DATA.altitude = view.getUint32(0, 1); @@ -540,7 +545,17 @@ function process_message(code, data) { console.log(data); break; case MSP_codes.MSP_RESET_CONF: - console.log(data); + console.log('Settings Reset'); + + // With new flight software settings in place, we have to re-pull + // latest values + send_message(MSP_codes.MSP_IDENT, MSP_codes.MSP_IDENT); + send_message(MSP_codes.MSP_STATUS, MSP_codes.MSP_STATUS); + send_message(MSP_codes.MSP_PID, MSP_codes.MSP_PID); + send_message(MSP_codes.MSP_RC_TUNING, MSP_codes.MSP_RC_TUNING); + send_message(MSP_codes.MSP_BOXNAMES, MSP_codes.MSP_BOXNAMES); + send_message(MSP_codes.MSP_BOX, MSP_codes.MSP_BOX); + break; case MSP_codes.MSP_SELECT_SETTING: console.log(data); @@ -549,7 +564,7 @@ function process_message(code, data) { console.log(data); break; case MSP_codes.MSP_EEPROM_WRITE: - console.log(data); + console.log('Settings Saved in EEPROM'); break; case MSP_codes.MSP_DEBUGMSG: console.log(data); diff --git a/tabs/initial_setup.html b/tabs/initial_setup.html index ac16eb2a3b..499a527f49 100644 --- a/tabs/initial_setup.html +++ b/tabs/initial_setup.html @@ -12,4 +12,27 @@ You have 30 seconds to perform this task.

+
+ Reset Settings +

+ Some text goes here +

+
+
+ Reset Z axis +
+
+
+
+
BOTTOM
+
BACK
+
RIGHT
+
FRONT
+
LEFT
+
TOP
+
+
+
+
+
\ No newline at end of file diff --git a/tabs/initial_setup.js b/tabs/initial_setup.js index 425e791120..c4a6d76397 100644 --- a/tabs/initial_setup.js +++ b/tabs/initial_setup.js @@ -1,3 +1,5 @@ +var yaw_fix = 0.0; + function tab_initialize_initial_setup() { $('a.calibrateAccel').click(function() { send_message(MSP_codes.MSP_ACC_CALIBRATION, MSP_codes.MSP_ACC_CALIBRATION); @@ -6,4 +8,30 @@ function tab_initialize_initial_setup() { $('a.calibrateMag').click(function() { send_message(MSP_codes.MSP_MAG_CALIBRATION, MSP_codes.MSP_MAG_CALIBRATION); }); + + $('a.resetSettings').click(function() { + send_message(MSP_codes.MSP_RESET_CONF, MSP_codes.MSP_RESET_CONF); + }); + + + // reset yaw button hook + $('div#interactive_block > a.reset').click(function() { + yaw_fix = SENSOR_DATA.kinematicsZ * - 1.0; + console.log("YAW reset to 0"); + }); + + // enable kinematics data pulling + timers.push(setInterval(kinematics_poll, 50)); +} + +function kinematics_poll() { + // Update cube + var cube = $('div#cube'); + + cube.css('-webkit-transform', 'rotateY(' + ((SENSOR_DATA.kinematicsZ * -1.0) - yaw_fix) + 'deg)'); + $('#cubePITCH', cube).css('-webkit-transform', 'rotateX(' + SENSOR_DATA.kinematicsY + 'deg)'); + $('#cubeROLL', cube).css('-webkit-transform', 'rotateZ(' + SENSOR_DATA.kinematicsX + 'deg)'); + + // Request new data + send_message(MSP_codes.MSP_ATTITUDE, MSP_codes.MSP_ATTITUDE); } \ No newline at end of file