From 4ba7cc5a4667e22cd9dd74edf08b47c1ffd7e27d Mon Sep 17 00:00:00 2001 From: cTn Date: Mon, 19 May 2014 23:36:04 +0200 Subject: [PATCH] generate meters/lines UI dynamically --- tabs/receiver.css | 52 ++++++++++++++++++++++++++++++++++++++++++++-- tabs/receiver.html | 48 ------------------------------------------ tabs/receiver.js | 48 +++++++++++++++++++++++++++++++++--------- 3 files changed, 88 insertions(+), 60 deletions(-) diff --git a/tabs/receiver.css b/tabs/receiver.css index 9be4f875b7..d8479992a4 100644 --- a/tabs/receiver.css +++ b/tabs/receiver.css @@ -12,6 +12,42 @@ .tab-receiver .bars ul { 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 { float: left; @@ -133,10 +169,10 @@ stroke: #C0D800; } .tab-receiver #RX_plot .line:nth-child(3) { - stroke: #CB4B4B; + stroke: #f8921a; } .tab-receiver #RX_plot .line:nth-child(4) { - stroke: #4DA74D; + stroke: #f02525; } .tab-receiver #RX_plot .line:nth-child(5) { stroke: #9440ED; @@ -150,6 +186,18 @@ .tab-receiver #RX_plot .line:nth-child(8) { 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*/ .tab-receiver .grid .tick { diff --git a/tabs/receiver.html b/tabs/receiver.html index e84c634c6b..f90f5fc55b 100644 --- a/tabs/receiver.html +++ b/tabs/receiver.html @@ -1,53 +1,5 @@
-
    -
  • Roll
  • -
  • -
  • -
-
-
    -
  • Pitch
  • -
  • -
  • -
-
-
    -
  • Yaw
  • -
  • -
  • -
-
-
    -
  • Throttle
  • -
  • -
  • -
-
-
    -
  • AUX1
  • -
  • -
  • -
-
-
    -
  • AUX2
  • -
  • -
  • -
-
-
    -
  • AUX3
  • -
  • -
  • -
-
-
    -
  • AUX4
  • -
  • -
  • -
-
diff --git a/tabs/receiver.js b/tabs/receiver.js index 69375fbf01..f6ca73bf96 100644 --- a/tabs/receiver.js +++ b/tabs/receiver.js @@ -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('\ +
    \ +
  • ' + bar_names[i] + '
  • \ +
  • \ +
  • \ +
\ +
\ + '); + } + + 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 // curves $('.tunings .throttle input').change(function() { @@ -142,16 +180,6 @@ function tab_initialize_receiver() { 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++) {