betaflight-configurator/tabs/receiver.js

255 lines
10 KiB
JavaScript

function tab_initialize_receiver() {
ga_tracker.sendAppView('Receiver Page');
GUI.active_tab = 'receiver';
send_message(MSP_codes.MSP_RC_TUNING, false, false, get_rc_data);
function get_rc_data() {
send_message(MSP_codes.MSP_RC, false, false, load_html);
}
function load_html() {
$('#content').load("./tabs/receiver.html", process_html);
}
function process_html() {
// translate to user-selected language
localize();
// fill in data from RC_tuning
$('.tunings .throttle input[name="mid"]').val(RC_tuning.throttle_MID.toFixed(2));
$('.tunings .throttle input[name="expo"]').val(RC_tuning.throttle_EXPO.toFixed(2));
$('.tunings .rate input[name="rate"]').val(RC_tuning.RC_RATE.toFixed(2));
$('.tunings .rate input[name="expo"]').val(RC_tuning.RC_EXPO.toFixed(2));
chrome.storage.local.get('rx_refresh_rate', function(result) {
if (typeof result.rx_refresh_rate != 'undefined') {
$('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
} else {
$('select[name="rx_refresh_rate"]').change(); // start with default value
}
});
// UI Hooks
// curves
$('.tunings .throttle input').change(function() {
setTimeout(function() {
var mid = parseFloat($('.tunings .throttle input[name="mid"]').val());
var expo = parseFloat($('.tunings .throttle input[name="expo"]').val());
var throttle_curve = $('.throttle_curve canvas').get(0);
var context = throttle_curve.getContext("2d");
context.clearRect(0, 0, 220, 58);
// math magic by englishman
var midx = 220 * mid;
var midxl = midx * 0.5;
var midxr = (((220 - midx) * 0.5) + midx);
var midy = 58 - (midx * (58 / 220));
var midyl = 58 - ((58 - midy) * 0.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();
}, 0); // race condition, that should always trigger after all events are processed
}).change();
$('.tunings .rate input').change(function() {
setTimeout(function() {
var rate = parseFloat($('.tunings .rate input[name="rate"]').val());
var expo = parseFloat($('.tunings .rate input[name="expo"]').val());
var pitch_roll_curve = $('.pitch_roll_curve canvas').get(0);
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();
}, 0); // race condition, that should always trigger after all events are processed
}).change();
$('a.refresh').click(function() {
send_message(MSP_codes.MSP_RC_TUNING, false, false, function() {
GUI.log(chrome.i18n.getMessage('receiverDataRefreshed'));
// fill in data from RC_tuning
$('.tunings .throttle input[name="mid"]').val(RC_tuning.throttle_MID.toFixed(2));
$('.tunings .throttle input[name="expo"]').val(RC_tuning.throttle_EXPO.toFixed(2));
$('.tunings .rate input[name="rate"]').val(RC_tuning.RC_RATE.toFixed(2));
$('.tunings .rate input[name="expo"]').val(RC_tuning.RC_EXPO.toFixed(2));
// update visual representation
$('.tunings .throttle input').change();
$('.tunings .rate input').change();
});
});
$('a.update').click(function() {
// catch RC_tuning changes
RC_tuning.throttle_MID = parseFloat($('.tunings .throttle input[name="mid"]').val());
RC_tuning.throttle_EXPO = parseFloat($('.tunings .throttle input[name="expo"]').val());
RC_tuning.RC_RATE = parseFloat($('.tunings .rate input[name="rate"]').val());
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, 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);
function save_to_eeprom() {
send_message(MSP_codes.MSP_EEPROM_WRITE, false, false, function() {
GUI.log(chrome.i18n.getMessage('receiverEepromSaved'));
var element = $('a.update');
element.addClass('success');
GUI.timeout_add('success_highlight', function() {
element.removeClass('success');
}, 2000);
});
}
});
$('select[name="rx_refresh_rate"]').change(function() {
var plot_update_rate = parseInt($(this).val(), 10);
// save update rate
chrome.storage.local.set({'rx_refresh_rate': plot_update_rate});
function get_rc_data() {
send_message(MSP_codes.MSP_RC, false, false, update_ui);
}
var meter_array = [];
$('.tab-receiver meter').each(function() {
meter_array.push($(this));
});
var meter_values_array = [];
$('.tab-receiver .value').each(function() {
meter_values_array.push($(this));
});
// setup plot
var RX_plot_data = new Array(RC.active_channels);
for (var i = 0; i < RX_plot_data.length; i++) {
RX_plot_data[i] = [];
}
var samples = 0;
var svg = d3.select("svg");
var RX_plot_e = $('#RX_plot');
var margin = {top: 20, right: 20, bottom: 10, left: 40};
var width, height, widthScale, heightScale;
function update_receiver_plot_size() {
width = RX_plot_e.width() - margin.left - margin.right;
height = RX_plot_e.height() - margin.top - margin.bottom;
widthScale.range([0, width]);
heightScale.range([height, 0]);
}
function update_ui() {
// update bars with latest data
for (var i = 0; i < RC.active_channels; i++) {
meter_array[i].val(RC.channels[i]);
meter_values_array[i].text('[ ' + RC.channels[i] + ' ]');
}
// push latest data to the main array
for (var i = 0; i < RC.active_channels; i++) {
RX_plot_data[i].push([samples, RC.channels[i]]);
}
// Remove old data from array
while (RX_plot_data[0].length > 300) {
for (var i = 0; i < RX_plot_data.length; i++) {
RX_plot_data[i].shift();
}
}
// update required parts of the plot
widthScale = d3.scale.linear().
domain([(samples - 299), samples]);
heightScale = d3.scale.linear().
domain([800, 2200]);
update_receiver_plot_size();
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 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 line = d3.svg.line().
x(function(d) {return widthScale(d[0]);}).
y(function(d) {return heightScale(d[1]);});
svg.select(".x.grid").call(xGrid);
svg.select(".y.grid").call(yGrid);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
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);
samples++;
}
// timer initialization
GUI.interval_remove('receiver_pull');
// enable RC data pulling
GUI.interval_add('receiver_pull', get_rc_data, plot_update_rate, true);
});
// status data pulled via separate timer with static speed
GUI.interval_add('status_pull', function() {
send_message(MSP_codes.MSP_STATUS);
}, 250, true);
}
}