Add groups to programming for ease of readingMrD-Add-groups-to-programming-for-ease-of-reading

6 files changed, 149 insertions, 6 deletions

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 0c98c68a..a5f6146b 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3790,6 +3790,9 @@
     "logicEnabled": {
         "message": "Enabled"
     },
+    "logicCodeGroup": {
+        "message": "Code Group"
+    },
     "logicOperation": {
         "message": "Operation"
     },
diff --git a/js/logicCondition.js b/js/logicCondition.js
index 1db77def..8100220b 100644
--- a/js/logicCondition.js
+++ b/js/logicCondition.js
@@ -1,7 +1,7 @@
 /*global $,FC*/
 'use strict';
 
-let LogicCondition = function (enabled, activatorId, operation, operandAType, operandAValue, operandBType, operandBValue, flags) {
+let LogicCondition = function (enabled, activatorId, operation, operandAType, operandAValue, operandBType, operandBValue, flags, codeGroup) {
     let self = {};
     let $row;
 
@@ -69,6 +69,14 @@ let LogicCondition = function (enabled, activatorId, operation, operandAType, op
         flags = data;
     };
 
+    self.getCodeGroup = function () {
+        return codeGroup;
+    };
+
+    self.setCodeGroup = function (data) {
+        codeGroup = data;
+    };
+
     self.onEnabledChange = function (event) {
         let $cT = $(event.currentTarget);
         self.setEnabled(!!$cT.prop('checked'));
@@ -76,6 +84,12 @@ let LogicCondition = function (enabled, activatorId, operation, operandAType, op
         self.renderActivator();
     };
 
+    self.onCodeGroupChange = function (event) {
+        let $cT =$(event.currentTarget);
+        self.setCodeGroup($cT.val());
+        renderCodeGroups();
+    }
+
     self.getOperatorMetadata = function () {
         return FC.getLogicOperators()[self.getOperation()];
     };
@@ -233,6 +247,7 @@ let LogicCondition = function (enabled, activatorId, operation, operandAType, op
         $container.find('tbody').append('<tr>\
                 <td class="logic_cell__index"></td>\
                 <td class="logic_cell__enabled"></td>\
+                <td class="logic_cell__codeGroup"></td>\
                 <td class="logic_cell__operation"></td>\
                 <td class="logic_cell__operandA"></td>\
                 <td class="logic_cell__operandB"></td>\
@@ -251,6 +266,21 @@ let LogicCondition = function (enabled, activatorId, operation, operandAType, op
             change(self.onEnabledChange);
 
         /*
+         * Code group select
+         */
+        $row.find('.logic_cell__codeGroup').html("<select class='logic_element__codeGroup' ></select>");
+        let $cg = $row.find('.logic_element__codeGroup');
+
+        for (let cgi = 0; cgi < 10; cgi++) {
+            if (self.getCodeGroup() == cgi) {
+                $cg.append('<option value="' + cgi + '" selected>' + cgi + '</option>');
+            } else {
+                $cg.append('<option value="' + cgi + '">' + cgi + '</option>');
+            }
+        }
+        $cg.change(self.onCodeGroupChange);
+
+        /*
          * Operator select
          */
         $row.find('.logic_cell__operation').html("<select class='logic_element__operation' ></select>");
diff --git a/js/msp/MSPHelper.js b/js/msp/MSPHelper.js
index 227b5f4c..b476b85c 100644
--- a/js/msp/MSPHelper.js
+++ b/js/msp/MSPHelper.js
@@ -507,8 +507,9 @@ var mspHelper = (function (gui) {
                 break;
             case MSPCodes.MSP2_INAV_LOGIC_CONDITIONS:
                 LOGIC_CONDITIONS.flush();
-                if (data.byteLength % 14 === 0) {
-                    for (i = 0; i < data.byteLength; i += 14) {
+                if (data.byteLength % 15 === 0) {
+
+                    for (i = 0; i < data.byteLength; i += 15) {
                         LOGIC_CONDITIONS.put(new LogicCondition(
                             data.getInt8(i),
                             data.getInt8(i + 1),
@@ -517,7 +518,8 @@ var mspHelper = (function (gui) {
                             data.getInt32(i + 4, true),
                             data.getUint8(i + 8),
                             data.getInt32(i + 9, true),
-                            data.getInt8(i + 13)
+                            data.getInt8(i + 13),
+                            data.getInt8(i + 14)
                         ));
                     }
                 }
@@ -2364,7 +2366,7 @@ var mspHelper = (function (gui) {
 
             let buffer = [];
 
-            // send one at a time, with index, 14 bytes per one condition
+            // send one at a time, with index, 15 bytes per one condition
 
             let condition = LOGIC_CONDITIONS.get()[conditionIndex];
 
@@ -2385,6 +2387,8 @@ var mspHelper = (function (gui) {
             buffer.push(specificByte(condition.getOperandBValue(), 2));
             buffer.push(specificByte(condition.getOperandBValue(), 3));
             buffer.push(condition.getFlags());
+            buffer.push(condition.getCodeGroup());
+
 
             // prepare for next iteration
             conditionIndex++;
diff --git a/src/css/tabs/programming.css b/src/css/tabs/programming.css
index 504cecee..8331c322 100644
--- a/src/css/tabs/programming.css
+++ b/src/css/tabs/programming.css
@@ -28,4 +28,13 @@
     font-size: 2em;
     color:#fff;
     font-weight: bold;
+}
+
+.programming-spacer-row, .programming-spacer-row td {
+    background-color: #fff !important;
+    height: 3px;
+}
+
+.first-programming-spacer-row td {
+    border-bottom: #828885 solid 1px;
 }
\ No newline at end of file
diff --git a/tabs/programming.html b/tabs/programming.html
index 073f8cbc..fb41668d 100644
--- a/tabs/programming.html
+++ b/tabs/programming.html
@@ -22,6 +22,7 @@
                     <tr>
                         <th style="width: 50px" data-i18n="logicId"></th>
                         <th style="width: 80px" data-i18n="logicEnabled"></th>
+                        <th style="width: 80px" data-i18n="logicCodeGroup"></th>
                         <th style="width: 120px" data-i18n="logicOperation"></th>
                         <th data-i18n="logicOperandA"></th>
                         <th data-i18n="logicOperandB"></th>
diff --git a/tabs/programming.js b/tabs/programming.js
index 02e5ceab..2bc063e5 100644
--- a/tabs/programming.js
+++ b/tabs/programming.js
@@ -61,6 +61,8 @@ TABS.programming.initialize = function (callback, scrollPosition) {
             statusChainer.execute();
         });
 
+        renderCodeGroups();
+
         GUI.content_ready(callback);
     }
 
@@ -73,4 +75,98 @@ TABS.programming.initialize = function (callback, scrollPosition) {
 
 TABS.programming.cleanup = function (callback) {
     if (callback) callback();
-};
\ No newline at end of file
+};
+
+function renderCodeGroups() {
+    $(".programming-spacer-row").remove();
+
+    let rows = $("#subtab-lc").find('tbody > tr');
+    let currentCodeGroup = 0;
+
+    for (let r = 0; r < rows.length; r++) {
+        let $row = $(rows[r]);
+        $row.children('td').css('background-color', '');
+
+        let bgColor = normaliseColors($row.children('td:first').css('background-color'));
+        bgColor[3] = 1; // colour as RGBA array, always fully opaque
+        
+        if (bgColor[0] == 0 && bgColor[1] == 0 && bgColor[2] == 0) {
+            // No colour is being incorrectly returned as black, so correct this behaviour.
+            bgColor[0] = 255;
+            bgColor[1] = 255;
+            bgColor[2] = 255;
+        }
+        
+        let codeGroup = $row.find('.logic_element__codeGroup').val();
+        
+        if (currentCodeGroup != codeGroup) {
+            if (r !== 0) {
+                $('<tr class="programming-spacer-row first-programming-spacer-row"><td colspan="10"></td></tr><tr class="programming-spacer-row"><td colspan="10"></td></tr>').insertBefore($row);
+            }
+            currentCodeGroup = codeGroup;
+        }
+
+        let multiplier = 0;
+
+        if (codeGroup != 0) {
+            multiplier = Math.ceil(codeGroup / 3) * 10;
+
+            if (codeGroup % 3 === 0) {
+
+                bgColor[1] = bgColor[1] - multiplier;
+                bgColor[2] = bgColor[2] - multiplier;
+            } else if (codeGroup % 3 == 2) {
+                bgColor[0] = bgColor[0] - multiplier;
+                bgColor[2] = bgColor[2] - multiplier;
+            } else {
+                bgColor[0] = bgColor[0] - multiplier;
+                bgColor[1] = bgColor[1] - multiplier;
+            }
+
+            $row.children('td').css('background-color', 'rgba(' + bgColor[0] + ', ' + bgColor[1] + ', ' + bgColor[2] + ', ' + bgColor[3] + ')');
+        }
+    }
+}
+
+function normaliseColors(color)
+{
+    if (color === '')
+        return;
+    if (color.toLowerCase() === 'transparent')
+        return [255, 255, 255, 0];
+    if (color[0] === '#')
+    {
+        if (color.length < 7)
+        {
+            // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
+            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
+        }
+        return [parseInt(color.substr(1, 2), 16),
+            parseInt(color.substr(3, 2), 16),
+            parseInt(color.substr(5, 2), 16),
+            color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
+    }
+    if (color.indexOf('rgb') === -1)
+    {
+        // convert named colors
+        var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
+        var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
+        temp_elem.style.color = flag;
+        if (temp_elem.style.color !== flag)
+            return; // color set failed - some monstrous css rule is probably taking over the color of our object
+        temp_elem.style.color = color;
+        if (temp_elem.style.color === flag || temp_elem.style.color === '')
+            return; // color parse failed
+        color = getComputedStyle(temp_elem).color;
+        document.body.removeChild(temp_elem);
+    }
+    if (color.indexOf('rgb') === 0)
+    {
+        if (color.indexOf('rgba') === -1)
+            color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
+        return color.match(/[\.\d]+/g).map(function (a)
+        {
+            return +a
+        });
+    }
+}
\ No newline at end of file