speedybac
/
inav-configurator
mirror of https://github.com/iNavFlight/inav-configurator
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new receiver plot based on D3

Browse Source
pull/3/head
cTn 11 years ago
parent 35f9b8844e
commit 7e3a63a4d1
3 changed files with 235 additions and 99 deletions
Show Stats Download Patch File Download Diff File

44
tabs/receiver.css
Unescape Escape View File

@ -5,28 +5,32 @@
}
.tab-receiver .bars {
float: left;
font-weight: bold;
}
.tab-receiver .bars ul {
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}
.tab-receiver .bars li {
float: left;
height: 22px;
line-height: 20px;
}
.tab-receiver .bars .name {
width: 80px;
width: 60px;
}
.tab-receiver .bars .meter meter {
margin-top: 4px;
width: 200px;
height: 20px;
height: 14px;
border: 1px solid silver;
}
.tab-receiver .bars .value {
width: 50px;
padding-left: 20px;
margin-left: 10px;
}
.tab-receiver .tunings {
float: right;
@ -59,10 +63,8 @@
text-align: right;
}
.tab-receiver #RX_plot {
margin: auto;
margin-top: 20px;
margin-left: 5px;
width: 880px;
height: 200px;
}
.tab-receiver .curves {
@ -114,7 +116,27 @@
}
.tab-receiver select[name="rx_refresh_rate"] {
float: right;
margin-right: 20px;
margin-top: 30px;
margin-right: 13px;
border: 1px solid silver;
}
}
/* SVG classes*/
.tab-receiver .grid .tick {
stroke: silver;
shape-rendering: crispEdges;
}
.tab-receiver .line {
stroke-width: 2px;
fill: none;
}
.tab-receiver .grid path {
stroke-width: 0;
}
.tab-receiver .axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

38
tabs/receiver.html
Unescape Escape View File

@ -1,43 +1,43 @@
<div class="tab-receiver">
<div class="bars">
<ul>
<ul style="color: #00A8F0">
<li class="name">Throttle</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #C0D800">
<li class="name">Pitch</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #CB4B4B">
<li class="name">Roll</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #4DA74D">
<li class="name">Yaw</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<li class="name">AUX1</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<ul style="color: #9440ED">
<li class="name"">AUX1</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #45147a">
<li class="name">AUX2</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #cf7a26">
<li class="name">AUX3</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<ul>
<ul style="color: #147a66">
<li class="name">AUX4</li>
<li class="meter"><meter min="900" max="2100"></meter></li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
</div>
@ -85,6 +85,6 @@
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
<div id="RX_plot">
</div>
<div class="clear-both"></div>
<svg id="RX_plot"></svg>
</div>

252
tabs/receiver.js
Unescape Escape View File

@ -20,47 +20,6 @@ function tab_initialize_receiver() {
$('.tunings .rate input[name="rate"]').val(RC_tuning.RC_RATE.toFixed(2));
$('.tunings .rate input[name="expo"]').val(RC_tuning.RC_EXPO.toFixed(2));
// Setup plot variables and plot it self
var samples_i = 300;
RX_plot_data = new Array(8);
for (var i = 0; i < 8; i++) {
RX_plot_data[i] = new Array();
}
for (var i = 0; i <= 300; i++) {
RX_plot_data[0].push([i, 0]);
RX_plot_data[1].push([i, 0]);
RX_plot_data[2].push([i, 0]);
RX_plot_data[3].push([i, 0]);
RX_plot_data[4].push([i, 0]);
RX_plot_data[5].push([i, 0]);
RX_plot_data[6].push([i, 0]);
RX_plot_data[7].push([i, 0]);
}
e_RX_plot = document.getElementById("RX_plot");
RX_plot_options = {
title: "Channel width (us)",
shadowSize: 0,
yaxis : {
max: 2200,
min: 800,
noTicks: 10
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor: "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
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();
@ -121,6 +80,8 @@ function tab_initialize_receiver() {
$('a.refresh').click(function() {
send_message(MSP_codes.MSP_RC_TUNING, MSP_codes.MSP_RC_TUNING, false, function() {
GUI.log('RC Tuning data <strong>refreshed</strong>');
// 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));
@ -168,6 +129,7 @@ function tab_initialize_receiver() {
}
});
var e_xGrid, e_xAxis, e_yAxis;
$('select[name="rx_refresh_rate"]').change(function() {
var plot_update_rate = parseInt($(this).val());
@ -192,40 +154,115 @@ function tab_initialize_receiver() {
meter_values_array.push($(this));
});
// setup plot
var RX_plot_data = new Array(8);
for (var i = 0; i < 8; i++) {
RX_plot_data[i] = [];
}
var samples = 0;
$('svg').empty(); // dump previous layout
var margin = {top: 20, right: 20, bottom: 10, left: 40};
var width = 920 - margin.left - margin.right;
var height = 200 - margin.top - margin.bottom;
var svg = d3.select("svg");
var widthScale = d3.scale.linear()
.domain([0, 300])
.range([0, width]);
var heightScale = d3.scale.linear()
.domain([800, 2200])
.range([height, 0]);
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 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("");
// render xGrid
e_xGrid = svg.append("g")
.attr("class", "grid x")
.attr("transform", "translate(40, 180)")
.call(xGrid);
// render yGrid
svg.append("g")
.attr("class", "grid y")
.attr("transform", "translate(40, 10)")
.call(yGrid);
// render xAxis
e_xAxis = svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(40, 180)")
.call(xAxis);
// render yAxis
e_yAxis = svg.append("g")
.attr("class", "axis y")
.attr("transform", "translate(40, 10)")
.call(yAxis);
var svg_data = svg.append("g").attr("name", "data")
.attr("transform", "translate(41, 10)");
var lines = new Array(8);
function update_ui() {
meter_array[0].val(RC.throttle);
meter_values_array[0].text(RC.throttle);
meter_values_array[0].text('[ ' + RC.throttle + ' ]');
meter_array[1].val(RC.pitch);
meter_values_array[1].text(RC.pitch);
meter_values_array[1].text('[ ' + RC.pitch + ' ]');
meter_array[2].val(RC.roll);
meter_values_array[2].text(RC.roll);
meter_values_array[2].text('[ ' + RC.roll + ' ]');
meter_array[3].val(RC.yaw);
meter_values_array[3].text(RC.yaw);
meter_values_array[3].text('[ ' + RC.yaw + ' ]');
meter_array[4].val(RC.AUX1);
meter_values_array[4].text(RC.AUX1);
meter_values_array[4].text('[ ' + RC.AUX1 + ' ]');
meter_array[5].val(RC.AUX2);
meter_values_array[5].text(RC.AUX2);
meter_values_array[5].text('[ ' + RC.AUX2 + ' ]');
meter_array[6].val(RC.AUX3);
meter_values_array[6].text(RC.AUX3);
meter_values_array[6].text('[ ' + RC.AUX3 + ' ]');
meter_array[7].val(RC.AUX4);
meter_values_array[7].text(RC.AUX4);
meter_values_array[7].text('[ ' + RC.AUX4 + ' ]');
// push latest data to the main array
RX_plot_data[0].push([samples_i, RC.throttle]);
RX_plot_data[1].push([samples_i, RC.pitch]);
RX_plot_data[2].push([samples_i, RC.roll]);
RX_plot_data[3].push([samples_i, RC.yaw]);
RX_plot_data[4].push([samples_i, RC.AUX1]);
RX_plot_data[5].push([samples_i, RC.AUX2]);
RX_plot_data[6].push([samples_i, RC.AUX3]);
RX_plot_data[7].push([samples_i, RC.AUX4]);
RX_plot_data[0].push([samples, RC.throttle]);
RX_plot_data[1].push([samples, RC.pitch]);
RX_plot_data[2].push([samples, RC.roll]);
RX_plot_data[3].push([samples, RC.yaw]);
RX_plot_data[4].push([samples, RC.AUX1]);
RX_plot_data[5].push([samples, RC.AUX2]);
RX_plot_data[6].push([samples, RC.AUX3]);
RX_plot_data[7].push([samples, RC.AUX4]);
// Remove old data from array
while (RX_plot_data[0].length > 300) {
@ -239,18 +276,95 @@ function tab_initialize_receiver() {
RX_plot_data[7].shift();
};
// redraw plot
Flotr.draw(e_RX_plot, [
{data: RX_plot_data[0], label: "THROTTLE"},
{data: RX_plot_data[1], label: "PITCH"},
{data: RX_plot_data[2], label: "ROLL"},
{data: RX_plot_data[3], label: "YAW"},
{data: RX_plot_data[4], label: "AUX1"},
{data: RX_plot_data[5], label: "AUX2"},
{data: RX_plot_data[6], label: "AUX3"},
{data: RX_plot_data[7], label: "AUX4"} ], RX_plot_options);
samples_i++;
// update required parts of the plot
var widthScale = d3.scale.linear()
.domain([(samples - 299), samples])
.range([0, width]);
var xGrid = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.tickSize(-height, 0, 0)
.tickFormat("");
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.tickFormat(function(d) {return d;});
var line = d3.svg.line()
.x(function(d) {return widthScale(d[0]);})
.y(function(d) {return heightScale(d[1]);});
// render xGrid
e_xGrid.remove();
e_xGrid = svg.append("g")
.attr("class", "grid x")
.attr("transform", "translate(40, 180)")
.call(xGrid);
// render xAxis
e_xAxis.remove();
e_xAxis = svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(40, 180)")
.call(xAxis);
// render yAxis
e_yAxis.remove();
e_yAxis = svg.append("g")
.attr("class", "axis y")
.attr("transform", "translate(40, 10)")
.call(yAxis);
if (lines[0] != undefined) {
for (var i = 0; i < lines.length; i++) {
lines[i].remove();
}
}
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++;
}
// timer initialization

Write Preview
Loading…
Cancel
Save