sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

attitude visualization via simple 3d block

10.3.x-maintenance
cTn 2013-04-11 11:50:01 +02:00
parent 137edb2b37
commit f8125289b6
5 changed files with 177 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
css/style.css
View File

@ -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;

2
js/main.js
View File

@ -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() {

23
js/serial_backend.js
View File

@ -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);

23
tabs/initial_setup.html
View File

@ -12,4 +12,27 @@
You have <strong style="color: red;">30 seconds</strong> to perform this task.
</p>
</div>
<div class="section">
<a class="resetSettings" href="#">Reset Settings</a>
<p>
Some text goes here
</p>
</div>
<div id="interactive_block">
<a class="reset" href="#" title="Reset Z">Reset Z axis</a>
<div id="perspective">
<div id="cube">
<div id="cubePITCH">
<div id="cubeROLL">
<div class="face one">BOTTOM</div>
<div class="face two">BACK</div>
<div class="face three">RIGHT</div>
<div class="face four">FRONT</div>
<div class="face five">LEFT</div>
<div class="face six">TOP</div>
</div>
</div>
</div>
</div>
</div>
</div>

28
tabs/initial_setup.js
View File

@ -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);
}