Mirror/betaflight
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-20 14:55:21 +03:00
Code Issues Wiki Activity

generate meters/lines UI dynamically

Browse source
This commit is contained in:
cTn 2014-05-19 23:36:04 +02:00
parent 953d6f5ef2
commit 4ba7cc5a46
3 changed files with 88 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

52
tabs/receiver.css
View file

@ -12,6 +12,42 @@
.tab-receiver .bars ul { .tab-receiver .bars ul {
margin-bottom: 5px; margin-bottom: 5px;
} }
.tab-receiver .bars ul:nth-of-type(1) {
color: #00A8F0;
}
.tab-receiver .bars ul:nth-of-type(2) {
color: #C0D800;
}
.tab-receiver .bars ul:nth-of-type(3) {
color: #f8921a;
}
.tab-receiver .bars ul:nth-of-type(4) {
color: #f02525;
}
.tab-receiver .bars ul:nth-of-type(5) {
color: #9440ED;
}
.tab-receiver .bars ul:nth-of-type(6) {
color: #45147a;
}
.tab-receiver .bars ul:nth-of-type(7) {
color: #cf7a26;
}
.tab-receiver .bars ul:nth-of-type(8) {
color: #147a66;
}
.tab-receiver .bars ul:nth-of-type(9) {
color: #0609a9;
}
.tab-receiver .bars ul:nth-of-type(10) {
color: #7a1445;
}
.tab-receiver .bars ul:nth-of-type(11) {
color: #267acf;
}
.tab-receiver .bars ul:nth-of-type(12) {
color: #7a6614;
}
.tab-receiver .bars li { .tab-receiver .bars li {
float: left; float: left;
@ -133,10 +169,10 @@
stroke: #C0D800; stroke: #C0D800;
} }
.tab-receiver #RX_plot .line:nth-child(3) { .tab-receiver #RX_plot .line:nth-child(3) {
stroke: #CB4B4B; stroke: #f8921a;
} }
.tab-receiver #RX_plot .line:nth-child(4) { .tab-receiver #RX_plot .line:nth-child(4) {
stroke: #4DA74D; stroke: #f02525;
} }
.tab-receiver #RX_plot .line:nth-child(5) { .tab-receiver #RX_plot .line:nth-child(5) {
stroke: #9440ED; stroke: #9440ED;
@ -150,6 +186,18 @@
.tab-receiver #RX_plot .line:nth-child(8) { .tab-receiver #RX_plot .line:nth-child(8) {
stroke: #147A66; stroke: #147A66;
} }
.tab-receiver #RX_plot .line:nth-child(9) {
stroke: #0609a9;
}
.tab-receiver #RX_plot .line:nth-child(10) {
stroke: #7a1445;
}
.tab-receiver #RX_plot .line:nth-child(11) {
stroke: #267acf;
}
.tab-receiver #RX_plot .line:nth-child(12) {
stroke: #7a6614;
}
/* SVG classes*/ /* SVG classes*/
.tab-receiver .grid .tick { .tab-receiver .grid .tick {

48
tabs/receiver.html
View file

@ -1,53 +1,5 @@
<div class="tab-receiver"> <div class="tab-receiver">
<div class="bars"> <div class="bars">
<ul style="color: #00A8F0">
<li class="name">Roll</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #C0D800">
<li class="name">Pitch</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #CB4B4B">
<li class="name">Yaw</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #4DA74D">
<li class="name">Throttle</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #9440ED">
<li class="name">AUX1</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #45147a">
<li class="name">AUX2</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #cf7a26">
<li class="name">AUX3</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
<ul style="color: #147a66">
<li class="name">AUX4</li>
<li class="meter"><meter min="800" max="2200"></meter></li>
<li class="value"></li>
</ul>
<div class="clear-both"></div>
</div> </div>
<div class="tunings"> <div class="tunings">
<table class="throttle"> <table class="throttle">

48
tabs/receiver.js
View file

@ -31,6 +31,44 @@ function tab_initialize_receiver() {
} }
}); });
// generate bars
var bar_names = [
'Roll',
'Pitch',
'Yaw',
'Throttle',
'AUX 1',
'AUX 2',
'AUX 3',
'AUX 4',
'AUX 5',
'AUX 6',
'AUX 7',
'AUX 8'
];
var bar_container = $('.tab-receiver .bars');
for (var i = 0; i < RC.active_channels; i++) {
bar_container.append('\
<ul>\
<li class="name">' + bar_names[i] + '</li>\
<li class="meter"><meter min="800" max="2200"></meter></li>\
<li class="value"></li>\
</ul>\
<div class="clear-both"></div>\
');
}
var meter_array = [];
$('meter', bar_container).each(function() {
meter_array.push($(this));
});
var meter_values_array = [];
$('.value', bar_container).each(function() {
meter_values_array.push($(this));
});
// UI Hooks // UI Hooks
// curves // curves
$('.tunings .throttle input').change(function() { $('.tunings .throttle input').change(function() {
@ -142,16 +180,6 @@ function tab_initialize_receiver() {
send_message(MSP_codes.MSP_RC, false, false, update_ui); 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 // setup plot
var RX_plot_data = new Array(RC.active_channels); var RX_plot_data = new Array(RC.active_channels);
for (var i = 0; i < RX_plot_data.length; i++) { for (var i = 0; i < RX_plot_data.length; i++) {