Matrix Layout enhancements (#1701)

* Support gaps on Matrix Layout

* Ensure BlackBorder objects are initialised

* Update Changelog

* Fix automated semicolon insertion

* Fix automated semicolon insertion

* Remove SPI activation from post install script (#1708)

assets/webconfig/content/conf_leds.html

@@ -327,7 +327,7 @@
                       </tr>
                       <tr>
                         <td class="ltd">
-                          <label class="ltdlabel" for="ip_ma_direction" data-i18n="conf_leds_layout_ma_direction">Cabling</label>
+                          <label class="ltdlabel" for="ip_ma_direction" data-i18n="conf_leds_layout_ma_direction">Direction</label>
                         </td>
                         <td class="itd">
                           <select class="form-control ledMAconstr" id="ip_ma_direction">
@@ -352,6 +352,61 @@
                     </tbody>
                   </table>
                 </div>
+                  <div class="panel panel-default">
+                    <div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse-maadv" id="ma_advanced_settings">
+                      <h4 class="panel-title">
+                        <a>
+                          <i class="fa fa-fw fa-cogs"></i>
+                          <span data-i18n="conf_leds_layout_advanced">Advanced settings</span>
+                          <i class="fa fa-angle-down pull-right" id="ma_advanced_settings_right_icon"></i>
+                        </a>
+                      </h4>
+                    </div>
+                    <div id="collapse-maadv" class="panel-collapse collapse">
+                      <div class="panel-body ">
+                        <table class="tableform borderless">
+                          <tbody>
+                            <tr>
+                              <td class="ltd">
+                                <label class="ltdlabel" for="ip_ma_gapleft" data-i18n="conf_leds_layout_gapleft">Gap Left</label>
+                              </td>
+                              <td class="itd input-group">
+                                <input class="form-control ledMAconstr" id="ip_ma_gapleft" type="number" value="0" min="0" max="100" step="1"></input>
+                                <div class="input-group-addon" data-i18n="edt_append_percent">%h</div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td class="ltd">
+                                <label class="ltdlabel" for="ip_ma_gapright" data-i18n="conf_leds_layout_gapright">Gap Right</label>
+                              </td>
+                              <td class="itd input-group">
+                                <input class="form-control ledMAconstr" id="ip_ma_gapright" type="number" value="0" min="0" max="100" step="1"></input>
+                                <div class="input-group-addon" data-i18n="edt_append_percent">%v</div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td class="ltd">
+                                <label class="ltdlabel" for="ip_ma_gaptop" data-i18n="conf_leds_layout_gaptop">Gap Left</label>
+                              </td>
+                              <td class="itd input-group">
+                                <input class="form-control ledMAconstr" id="ip_ma_gaptop" type="number" value="0" min="0" max="100" step="1"></input>
+                                <div class="input-group-addon" data-i18n="edt_append_percent">%h</div>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td class="ltd">
+                                <label class="ltdlabel" for="ip_ma_gapbottom" data-i18n="conf_leds_layout_gapbottom">Gap Right</label>
+                              </td>
+                              <td class="itd input-group">
+                                <input class="form-control ledMAconstr" id="ip_ma_gapbottom" type="number" value="0" min="0" max="100" step="1"></input>
+                                <div class="input-group-addon" data-i18n="edt_append_percent">%v</div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
                 <div class="panel-footer" style="text-align:right;">
                   <button id="btn_ma_save" class="btn btn-primary"><i class="fa fa-fw fa-save"></i><span data-i18n="conf_leds_layout_button_savelay">Save layout</span></button>
                 </div>

assets/webconfig/i18n/en.json

@@ -117,6 +117,10 @@
     "conf_leds_layout_cl_topright": "Top Right (Corner)",
     "conf_leds_layout_cl_vleddepth": "Vertical LED depth",
     "conf_leds_layout_frame": "Classic Layout (LED Frame)",
+    "conf_leds_layout_gapleft": "Left gap",
+    "conf_leds_layout_gapright": "Right gap",
+    "conf_leds_layout_gaptop": "Top gap",
+    "conf_leds_layout_gapbottom": "Bottom gap",
     "conf_leds_layout_generatedconf": "Generated/Current LED Configuration",
     "conf_leds_layout_generation_success": "LED Layout generated sucessfully",
     "conf_leds_layout_generation_error": "LED Layout was not generated",

assets/webconfig/js/content_leds.js

@@ -468,17 +468,18 @@ function createClassicLeds() {
   aceEdt.set(finalLedArray);
 }
 
-function createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction) {
+function createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction, gap) {
   // Big thank you to RanzQ (Juha Rantanen) from Github for this script
   // https://raw.githubusercontent.com/RanzQ/hyperion-audio-effects/master/matrix-config.js
 
-  var parallel = false
-  var leds = []
-  var hblock = 1.0 / ledshoriz
-  var vblock = 1.0 / ledsvert
+  let parallel = false;
+  const leds = [];
+
+  const hblock = (1.0 - gap.left - gap.right) / ledshoriz;
+  const vblock = (1.0 - gap.top - gap.bottom) / ledsvert;
 
   if (cabling == "parallel") {
-    parallel = true
+    parallel = true;
   }
 
   /**
@@ -487,10 +488,10 @@ function createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction) {
    * @param {Number} y     Vertical position in matrix
    */
   function addLed(x, y) {
-    var hscanMin = x * hblock
-    var hscanMax = (x + 1) * hblock
-    var vscanMin = y * vblock
-    var vscanMax = (y + 1) * vblock
+    let hscanMin = gap.left + (x * hblock);
+    let hscanMax = gap.left + (x + 1) * hblock;
+    let vscanMin = gap.top + y * vblock;
+    let vscanMax = gap.top + (y + 1) * vblock;
 
     hscanMin = round(hscanMin);
     hscanMax = round(hscanMax);
@@ -502,43 +503,41 @@ function createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction) {
       hmax: hscanMax,
       vmin: vscanMin,
       vmax: vscanMax
-    })
+    });
   }
 
-  var startYX = start.split('-')
-  var startX = startYX[1] === 'right' ? ledshoriz - 1 : 0
-  var startY = startYX[0] === 'bottom' ? ledsvert - 1 : 0
-  var endX = startX === 0 ? ledshoriz - 1 : 0
-  var endY = startY === 0 ? ledsvert - 1 : 0
-  var forward = startX < endX
+  const startYX = start.split('-');
+  let startX = startYX[1] === 'right' ? ledshoriz - 1 : 0;
+  let startY = startYX[0] === 'bottom' ? ledsvert - 1 : 0;
+  let endX = startX === 0 ? ledshoriz - 1 : 0;
+  let endY = startY === 0 ? ledsvert - 1 : 0;
+  let forward = startX < endX;
+  let downward = startY < endY;
 
-  var downward = startY < endY
-
-  var x, y
+  let x, y;
 
   if (direction === 'vertical') {
     for (x = startX; forward && x <= endX || !forward && x >= endX; x += forward ? 1 : -1) {
       for (y = startY; downward && y <= endY || !downward && y >= endY; y += downward ? 1 : -1) {
-
-        addLed(x, y)
+        addLed(x, y);
       }
       if (!parallel) {
-        downward = !downward
-        var tmp = startY
-        startY = endY
-        endY = tmp
+        downward = !downward;
+        const tmp = startY;
+        startY = endY;
+        endY = tmp;
       }
     }
   } else {
     for (y = startY; downward && y <= endY || !downward && y >= endY; y += downward ? 1 : -1) {
       for (x = startX; forward && x <= endX || !forward && x >= endX; x += forward ? 1 : -1) {
-        addLed(x, y)
+        addLed(x, y);
       }
       if (!parallel) {
-        forward = !forward
-        var tmp = startX
-        startX = endX
-        endX = tmp
+        forward = !forward;
+        const tmp = startX;
+        startX = endX;
+        endX = tmp;
       }
     }
   }
@@ -551,13 +550,20 @@ function createMatrixLeds() {
   // https://raw.githubusercontent.com/RanzQ/hyperion-audio-effects/master/matrix-config.js
 
   //get values
-  var ledshoriz = parseInt($("#ip_ma_ledshoriz").val());
-  var ledsvert = parseInt($("#ip_ma_ledsvert").val());
-  var cabling = $("#ip_ma_cabling").val();
-  var direction = $("#ip_ma_direction").val();
-  var start = $("#ip_ma_start").val();
+  const ledshoriz = parseInt($("#ip_ma_ledshoriz").val());
+  const ledsvert = parseInt($("#ip_ma_ledsvert").val());
+  const cabling = $("#ip_ma_cabling").val();
+  const direction = $("#ip_ma_direction").val();
+  const start = $("#ip_ma_start").val();
+  const gap = {
+    //gap values % -> float
+    left: parseInt($("#ip_ma_gapleft").val()) / 100,
+    right: parseInt($("#ip_ma_gapright").val()) / 100,
+    top: parseInt($("#ip_ma_gaptop").val()) / 100,
+    bottom: parseInt($("#ip_ma_gapbottom").val()) / 100,
+  };
 
-  nonBlacklistLedArray = createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction);
+  nonBlacklistLedArray = createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction, gap);
   finalLedArray = blackListLeds(nonBlacklistLedArray, ledBlacklist);
 
   createLedPreview(finalLedArray);
@@ -797,6 +803,35 @@ $(document).ready(function () {
 
   $('.ledMAconstr').on("change", function () {
     valValue(this.id, this.value, this.min, this.max);
+
+    // top/bottom and left/right must not overlap
+    switch (this.id) {
+      case "ip_ma_gapleft":
+        let left = 100 - parseInt($("#ip_ma_gapright").val());
+        if (this.value > left) {
+          $(this).val(left);
+        }
+        break;
+      case "ip_ma_gapright":
+        let right = 100 - parseInt($("#ip_ma_gapleft").val());
+        if (this.value > right) {
+          $(this).val(right);
+        }
+        break;
+      case "ip_ma_gaptop":
+        let top = 100 - parseInt($("#ip_ma_gapbottom").val());
+        if (this.value > top) {
+          $(this).val(top);
+        }
+        break;
+      case "ip_ma_gapbottom":
+        let bottom = 100 - parseInt($("#ip_ma_gaptop").val());
+        if (this.value > bottom) {
+          $(this).val(bottom);
+        }
+        break;
+      default:
+    }
     createMatrixLeds();
   });