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

Merge pull request #30 from TobiasRaeder/receiver-tab-cleanup 

Receiver Tab d3 cleanup
10.3.x-maintenance
Stefan Kolla 2014-04-12 17:40:04 +02:00
parent b14d26d530 daea4d64a9
commit 7c6151d297
3 changed files with 81 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
tabs/receiver.css
View File

@ -70,6 +70,30 @@
.tab-receiver .curves {
float: right;
}
.tab-receiver .line:nth-child(1) {
stroke: #00A8F0;
}
.tab-receiver .line:nth-child(2) {
stroke: #C0D800;
}
.tab-receiver .line:nth-child(3) {
stroke: #CB4B4B;
}
.tab-receiver .line:nth-child(4) {
stroke: #4DA74D;
}
.tab-receiver .line:nth-child(5) {
stroke: #9440ED;
}
.tab-receiver .line:nth-child(6) {
stroke: #45147A;
}
.tab-receiver .line:nth-child(7) {
stroke: #CF7A26;
}
.tab-receiver .line:nth-child(8) {
stroke: #147A66;
}
.tab-receiver .throttle_curve {
margin: 0 10px 10px 0;
@ -139,4 +163,4 @@
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
}

10
tabs/receiver.html
View File

@ -86,5 +86,11 @@
<option value="1000">1000 ms</option>
</select>
<div class="clear-both"></div>
<svg id="RX_plot"></svg>
</div>
<svg id="RX_plot">
<g class="grid x" transform="translate(40, 180)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 180)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 1)"></g>
</svg>
</div>

175
tabs/receiver.js
View File

@ -41,10 +41,10 @@ function tab_initialize_receiver() {
// math magic by englishman
var midx = 220 * mid;
var midxl = midx * .5;
var midxr = (((220 - midx) * .5) + midx);
var midxl = midx * 0.5;
var midxr = (((220 - midx) * 0.5) + midx);
var midy = 58 - (midx * (58 / 220));
var midyl = 58 - ((58 - midy) * .5 *(expo + 1));
var midyl = 58 - ((58 - midy) * 0.5 *(expo + 1));
var midyr = (midy / 2) * (expo + 1);
context.beginPath();
@ -104,13 +104,13 @@ function tab_initialize_receiver() {
RC_tuning.RC_EXPO = parseFloat($('.tunings .rate input[name="expo"]').val());
var RC_tuning_buffer_out = new Array();
RC_tuning_buffer_out[0] = parseInt(RC_tuning.RC_RATE * 100);
RC_tuning_buffer_out[1] = parseInt(RC_tuning.RC_EXPO * 100);
RC_tuning_buffer_out[2] = parseInt(RC_tuning.roll_pitch_rate * 100);
RC_tuning_buffer_out[3] = parseInt(RC_tuning.yaw_rate * 100);
RC_tuning_buffer_out[4] = parseInt(RC_tuning.dynamic_THR_PID * 100);
RC_tuning_buffer_out[5] = parseInt(RC_tuning.throttle_MID * 100);
RC_tuning_buffer_out[6] = parseInt(RC_tuning.throttle_EXPO * 100);
RC_tuning_buffer_out[0] = parseInt(RC_tuning.RC_RATE * 100, 10);
RC_tuning_buffer_out[1] = parseInt(RC_tuning.RC_EXPO * 100, 10);
RC_tuning_buffer_out[2] = parseInt(RC_tuning.roll_pitch_rate * 100, 10);
RC_tuning_buffer_out[3] = parseInt(RC_tuning.yaw_rate * 100, 10);
RC_tuning_buffer_out[4] = parseInt(RC_tuning.dynamic_THR_PID * 100, 10);
RC_tuning_buffer_out[5] = parseInt(RC_tuning.throttle_MID * 100, 10);
RC_tuning_buffer_out[6] = parseInt(RC_tuning.throttle_EXPO * 100, 10);
// Send over the RC_tuning changes
send_message(MSP_codes.MSP_SET_RC_TUNING, RC_tuning_buffer_out, false, save_to_eeprom);
@ -129,9 +129,8 @@ function tab_initialize_receiver() {
}
});
var grids = [], axis = [], lines = [];
$('select[name="rx_refresh_rate"]').change(function() {
var plot_update_rate = parseInt($(this).val());
var plot_update_rate = parseInt($(this).val(), 10);
// save update rate
chrome.storage.local.set({'rx_refresh_rate': plot_update_rate});
@ -162,13 +161,7 @@ function tab_initialize_receiver() {
var width = 920 - margin.left - margin.right;
var height = 200 - margin.top - margin.bottom;
// drop previous layout & required data
$('svg').empty();
lines = [];
var svg = d3.select("svg");
svg_data = svg.append("g").attr("name", "data")
.attr("transform", "translate(41, 10)");
function update_ui() {
meter_array[0].val(RC.throttle);
@ -215,126 +208,54 @@ function tab_initialize_receiver() {
RX_plot_data[5].shift();
RX_plot_data[6].shift();
RX_plot_data[7].shift();
};
}
// update required parts of the plot
var widthScale = d3.scale.linear()
.domain([(samples - 299), samples])
.range([0, width]);
var widthScale = d3.scale.linear().
domain([(samples - 299), samples]).
range([0, width]);
var heightScale = d3.scale.linear()
.domain([800, 2200])
.range([height, 0]);
var heightScale = d3.scale.linear().
domain([800, 2200]).
range([height, 0]);
var xGrid = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.tickSize(-height, 0, 0)
.tickFormat("");
var xGrid = d3.svg.axis().
scale(widthScale).
orient("bottom").
tickSize(-height, 0, 0).
tickFormat("");
var yGrid = d3.svg.axis()
.scale(heightScale)
.orient("left")
.tickSize(-width, 0, 0)
.tickFormat("");
var yGrid = d3.svg.axis().
scale(heightScale).
orient("left").
tickSize(-width, 0, 0).
tickFormat("");
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.tickFormat(function(d) {return d;});
var xAxis = d3.svg.axis().
scale(widthScale).
orient("bottom").
tickFormat(function(d) {return d;});
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left")
.tickFormat(function(d) {return d;});
var yAxis = d3.svg.axis().
scale(heightScale).
orient("left").
tickFormat(function(d) {return d;});
var line = d3.svg.line()
.x(function(d) {return widthScale(d[0]);})
.y(function(d) {return heightScale(d[1]);});
var line = d3.svg.line().
x(function(d) {return widthScale(d[0]);}).
y(function(d) {return heightScale(d[1]);});
// dump previous data
for (var i = 0; i < grids.length; i++) {
grids[i].remove();
}
grids = [];
svg.select(".x.grid").call(xGrid);
svg.select(".y.grid").call(yGrid);
for (var i = 0; i < axis.length; i++) {
axis[i].remove();
}
axis = [];
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
// render xGrid
grids[0] = svg.append("g")
.attr("class", "grid x")
.attr("transform", "translate(40, 180)")
.call(xGrid);
var data = svg.select("g.data");
var lines = data.selectAll("path").data(RX_plot_data, function(d, i) { return i; });
var newLines = lines.enter().append("path").attr("class", "line");
lines.attr('d', line);
// render yGrid
grids[1] = svg.append("g")
.attr("class", "grid y")
.attr("transform", "translate(40, 10)")
.call(yGrid);
// render xAxis
axis[0] = svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(40, 180)")
.call(xAxis);
// render yAxis
axis[1] = svg.append("g")
.attr("class", "axis y")
.attr("transform", "translate(40, 10)")
.call(yAxis);
if (!svg_data.select('path').empty()) {
// update lines
for (var i = 0; i < 8; i++) {
lines[i].attr("d", line(RX_plot_data[i]));
}
} else {
// render lines
lines[0] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[0]))
.style({'stroke': '#00A8F0'});
lines[1] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[1]))
.style({'stroke': '#C0D800'});
lines[2] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[2]))
.style({'stroke': '#CB4B4B'});
lines[3] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[3]))
.style({'stroke': '#4DA74D'});
lines[4] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[4]))
.style({'stroke': '#9440ED'});
lines[5] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[5]))
.style({'stroke': '#45147a'});
lines[6] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[6]))
.style({'stroke': '#cf7a26'});
lines[7] = svg_data.append("path")
.attr("class", "line")
.attr("d", line(RX_plot_data[7]))
.style({'stroke': '#147a66'});
}
// increment samples counter
samples++;
}
@ -350,4 +271,4 @@ function tab_initialize_receiver() {
send_message(MSP_codes.MSP_STATUS);
}, 250, true);
}
}
}