From 4ba7cc5a4667e22cd9dd74edf08b47c1ffd7e27d Mon Sep 17 00:00:00 2001
From: cTn <ctndesigner@gmail.com>
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 @@
 <div class="tab-receiver">
     <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 class="tunings">
         <table class="throttle">
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('\
+                <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
         // 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++) {