Mirror/inav-configurator
1
0
Fork 0
mirror of https://github.com/iNavFlight/inav-configurator.git synced 2025-07-14 20:10:11 +03:00
Code Wiki Activity

receiver tab with interactive curves

Browse source 
special thanks to englishman for the math magic involved
This commit is contained in:
cTn 2013-09-25 20:57:21 +02:00
parent 3f8dd081cb
commit 89ca55a3da
4 changed files with 79 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

34
css/style.css
View file

@ -599,18 +599,6 @@ a:hover {
border: 1px solid silver;
text-align: right;
}
.tab-receiver .info {
display: block;
float: right;
width: 220px;
margin-bottom: 20px;
padding: 5px;
border: 1px dotted silver;
}
.tab-receiver .update {
display: block;
float: right;
@ -644,6 +632,28 @@ a:hover {
width: 880px;
height: 250px;
}
.tab-receiver .throttle_curve {
float: right;
margin-bottom: 20px;
margin-right: 10px;
width: 220px;
height: 58px;
border: 1px solid silver;
}
.tab-receiver .pitch_roll_curve {
float: right;
margin-right: 10px;
width: 220px;
height: 58px;
border: 1px solid silver;
}
.tab-auxiliary_configuration {
}

1
js/main.js
View file

@ -80,5 +80,4 @@ $(document).ready(function() {
});
// temporary
//$('#content').load("./tabs/sensors.html", tab_initialize_sensors);
});

20
tabs/receiver.html
View file

@ -48,8 +48,8 @@
<th>Throttle EXPO</th>
</tr>
<tr>
<td><input type="number" step="0.01" name="mid" value="" /></td>
<td><input type="number" step="0.01" name="expo" value="" /></td>
<td><input type="number" step="0.01" name="mid" value="" min="0" max="1" /></td>
<td><input type="number" step="0.01" name="expo" value="" min="0" max="1" /></td>
</tr>
</table>
<table class="rate">
@ -58,18 +58,18 @@
<th>Pitch &amp; Roll Expo</th>
</tr>
<tr>
<td><input type="number" step="0.01" name="rate" value="" /></td>
<td><input type="number" step="0.01" name="expo" value="" /></td>
<td><input type="number" step="0.01" name="rate" value="" min="0" max="1" /></td>
<td><input type="number" step="0.01" name="expo" value="" min="0" max="1" /></td>
</tr>
</table>
<a class="update" href="#">Save</a>
</div>
<p class="info">
some info text goes here
</p>
<p class="info">
some info text goes here
</p>
<div class="throttle_curve">
<canvas id="throttle_curve_c" width="220" height="58"></canvas>
</div>
<div class="pitch_roll_curve">
<canvas id="pitch_roll_curve_c" width="220" height="58"></canvas>
</div>
<div class="clear-both"></div>
<div id="RX_plot">
</div>

47
tabs/receiver.js
View file

@ -56,6 +56,53 @@ function tab_initialize_receiver() {
$('a.update').addClass('active');
});
// curves
$('.tunings .throttle input').change(function() {
var mid = parseFloat($('.tunings .throttle input[name="mid"]').val());
var expo = parseFloat($('.tunings .throttle input[name="expo"]').val());
var throttle_curve = document.getElementById("throttle_curve_c");
var context = throttle_curve.getContext("2d");
context.clearRect(0, 0, 220, 58);
// math magic by englishman
var midx = 220 * mid;
var midxl = midx * .5;
var midxr = (((220 - midx) * .5) + midx);
var midy = 58 - (midx * (58 / 220));
var midyl = 58 - ((58 - midy) * .5 *(expo + 1));
var midyr = (midy / 2) * (expo + 1);
context.beginPath();
context.moveTo(0, 58);
context.quadraticCurveTo(midxl, midyl, midx, midy);
context.moveTo(midx, midy);
context.quadraticCurveTo(midxr, midyr, 220, 0);
context.lineWidth = 2;
context.stroke();
});
$('.tunings .throttle input').trigger('change'); // initial software trigger
$('.tunings .rate input').change(function() {
var rate = parseFloat($('.tunings .rate input[name="rate"]').val());
var expo = parseFloat($('.tunings .rate input[name="expo"]').val());
var pitch_roll_curve = document.getElementById("pitch_roll_curve_c");
var context = pitch_roll_curve.getContext("2d");
context.clearRect(0, 0, 220, 58);
// math magic by englishman
var ratey = 58 * rate;
context.beginPath();
context.moveTo(0, 58);
context.quadraticCurveTo(110, 58 - ((ratey / 2) * (1 - expo)), 220, 58 - ratey);
context.lineWidth = 2;
context.stroke();
});
$('.tunings .rate input').trigger('change'); // initial software trigger
$('a.update').click(function() {
if ($(this).hasClass('active')) {
// catch RC_tuning changes