UI for LightFox

code/espurna/config/webui.h

@@ -7,6 +7,7 @@
 #define WEBUI_IMAGE_SENSOR     2
 #define WEBUI_IMAGE_RFBRIDGE   4
 #define WEBUI_IMAGE_RFM69      8
+#define WEBUI_IMAGE_LIGHTFOX   16
 #define WEBUI_IMAGE_FULL       15
 
 #if LIGHT_PROVIDER != LIGHT_PROVIDER_NONE
@@ -45,6 +46,13 @@
     #endif
 #endif
 
+#if defined(FOXEL_LIGHTFOX_DUAL)
+    #ifdef WEBUI_IMAGE
+        #undef WEBUI_IMAGE
+    #endif
+    #define WEBUI_IMAGE        WEBUI_IMAGE_LIGHTFOX
+#endif
+
 #ifndef WEBUI_IMAGE
     #define WEBUI_IMAGE        WEBUI_IMAGE_SMALL
 #endif
@@ -67,6 +75,9 @@ PROGMEM const char espurna_webui[] =
     #if WEBUI_IMAGE == WEBUI_IMAGE_RFM69
         "RFM69"
     #endif
+    #if WEBUI_IMAGE == WEBUI_IMAGE_LIGHTFOX
+        "LIGHTFOX"
+    #endif
     #if WEBUI_IMAGE == WEBUI_IMAGE_FULL
         "FULL"
     #endif

code/espurna/lightfox.ino

@@ -49,6 +49,14 @@ void lightfoxClear() {
 
 void _lightfoxWebSocketOnSend(JsonObject& root) {
     root["lightfoxVisible"] = 1;
+    uint8_t buttonsCount = _buttons.size();
+    root["lightfoxRelayCount"] = relayCount();
+    JsonArray& rfb = root.createNestedArray("lightfoxButtons");
+    for (byte id=0; id<buttonsCount; id++) {
+        JsonObject& node = rfb.createNestedObject();
+        node["id"] = id;
+        node["relay"] = getSetting("btnRelay", id, "0");
+    }
 }
 
 void _lightfoxWebSocketOnAction(uint32_t client_id, const char * action, JsonObject& data) {

code/espurna/web.ino

@@ -27,6 +27,8 @@ Copyright (C) 2016-2018 by Xose Pérez <xose dot perez at gmail dot com>
     #include "static/index.rfbridge.html.gz.h"
 #elif WEBUI_IMAGE == WEBUI_IMAGE_RFM69
     #include "static/index.rfm69.html.gz.h"
+#elif WEBUI_IMAGE == WEBUI_IMAGE_LIGHTFOX
+    #include "static/index.lightfox.html.gz.h"
 #elif WEBUI_IMAGE == WEBUI_IMAGE_FULL
     #include "static/index.all.html.gz.h"
 #endif

code/gulpfile.js

@@ -116,6 +116,7 @@ var buildWebUI = function(module) {
         modules['sensor'] = true;
         modules['rfbridge'] = true;
         modules['rfm69'] = false;   // we will never be adding this except when building RFM69GW
+        modules['lightfox'] = false;   // we will never be adding this except when building lightfox
     } else if ('small' !== module) {
         modules[module] = true;
     }
@@ -187,6 +188,10 @@ gulp.task('webui_rfm69', function() {
     return buildWebUI('rfm69');
 });
 
+gulp.task('webui_lightfox', function() {
+    return buildWebUI('lightfox');
+});
+
 gulp.task('webui_all', function() {
     return buildWebUI('all');
 });
@@ -198,6 +203,7 @@ gulp.task('webui', function(cb) {
         'webui_light',
         'webui_rfbridge',
         'webui_rfm69',
+        'webui_lightfox',
         'webui_all'
     ], cb);
 });

code/html/custom.css

@@ -158,6 +158,7 @@ div.state {
 .button-reconnect,
 .button-ha-del,
 .button-rfb-forget,
+.button-lightfox-clear,
 .button-del-network,
 .button-del-mapping,
 .button-del-schedule,
@@ -176,6 +177,7 @@ div.state {
 .button-add-mapping,
 .button-upgrade-browse,
 .button-rfb-learn,
+.button-lightfox-learn,
 .button-ha-add,
 .button-ha-config,
 .button-settings-backup,

code/html/custom.js

@@ -1140,6 +1140,48 @@ function addRfbNode() {
 }
 <!-- endRemoveIf(!rfbridge)-->
 
+// -----------------------------------------------------------------------------
+// LightFox
+// -----------------------------------------------------------------------------
+
+<!-- removeIf(!lightfox)-->
+
+function lightfoxLearn() {
+    sendAction("lightfoxLearn", {});
+}
+
+function lightfoxClear() {
+    sendAction("lightfoxClear", {});
+}
+
+function initLightfox(data, relayCount) {
+
+    var numNodes = data.length;
+
+    var template = $("#lightfoxNodeTemplate").children();
+
+    var i, j;
+    for (i=0; i<numNodes; i++) {
+        var $line = $(template).clone();
+        $line.find("label > span").text(data[i]["id"]);
+        $line.find("select").each(function() {
+            $(this).attr("name", "btnRelay" + data[i]["id"]);
+            for (j=0; j < relayCount; j++) {
+                $(this).append($("<option >").attr("value", j).text("Switch #" + j));
+            }
+            $(this).val(data[i]["relay"]);
+            status = !status;
+        });
+        $line.appendTo("#lightfoxNodes");
+    }
+
+    var $panel = $("#panel-lightfox")
+    $(".button-lightfox-learn").off("click").click(lightfoxLearn);
+    $(".button-lightfox-clear").off("click").click(lightfoxClear);
+
+}
+<!-- endRemoveIf(!lightfox)-->
+
 // -----------------------------------------------------------------------------
 // Processing
 // -----------------------------------------------------------------------------
@@ -1208,6 +1250,19 @@ function processData(data) {
         }
         <!-- endRemoveIf(!rfbridge)-->
 
+        // ---------------------------------------------------------------------
+        // LightFox
+        // ---------------------------------------------------------------------
+
+        <!-- removeIf(!lightfox)-->
+
+        if ("lightfoxButtons" === key) {
+            initLightfox(data["lightfoxButtons"], data["lightfoxRelayCount"]);
+            return;
+        }
+
+        <!-- endRemoveIf(!rfbridge)-->
+
         // ---------------------------------------------------------------------
         // RFM69
         // ---------------------------------------------------------------------

code/html/index.html

@@ -95,6 +95,12 @@
                             <a href="#" class="pure-menu-link" data="panel-general">GENERAL</a>
                         </li>
 
+                        <!-- removeIf(!lightfox) -->
+                        <li class="pure-menu-item module module-lightfox">
+                            <a href="#" class="pure-menu-link" data="panel-lightfox">LIGHTFOX RF</a>
+                        </li>
+                        <!-- endRemoveIf(!lightfox) -->
+
                         <li class="pure-menu-item module module-dcz">
                             <a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</a>
                         </li>
@@ -178,9 +184,9 @@
                     <div class="footer">
                         &copy; 2016-2018<br />
                         Xose Pérez<br/>
-                        <a href="https://twitter.com/xoseperez" target="_blank">@xoseperez</a><br/>
-                        <a href="http://tinkerman.cat" target="_blank">http://tinkerman.cat</a><br/>
-                        <a href="https://github.com/xoseperez/espurna" target="_blank">ESPurna @ GitHub</a><br/>
+                        <a href="https://twitter.com/xoseperez" rel="noopener" target="_blank">@xoseperez</a><br/>
+                        <a href="http://tinkerman.cat" rel="noopener" target="_blank">http://tinkerman.cat</a><br/>
+                        <a href="https://github.com/xoseperez/espurna" rel="noopener" target="_blank">ESPurna @ GitHub</a><br/>
                         GPLv3 license<br/>
                     </div>
 
@@ -627,7 +633,7 @@
                                     <div class="pure-u-1-4 pure-u-lg-1-8"><button type="button" class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>
                                     <div class="pure-u-1-4 pure-u-lg-1-8"><button type="button" class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4 hint">The device has <span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing a <a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" target="_blank"><strong>two-step update</strong></a>.</div>
+                                    <div class="pure-u-1 pure-u-lg-3-4 hint">The device has <span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing a <a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" rel="noopener" target="_blank"><strong>two-step update</strong></a>.</div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
                                     <div class="pure-u-1 pure-u-lg-3-4"><progress id="upgrade-progress"></progress></div>
                                     <input name="upgrade" type="file" tabindex="16" />
@@ -863,7 +869,7 @@
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
                                     <div class="pure-u-1 pure-u-lg-3-4 hint">
                                         This is the fingerprint for the SSL certificate of the server.<br />
-                                        You can get it using <a href="https://www.grc.com/fingerprints.htm" target="_blank">https://www.grc.com/fingerprints.htm</a><br />
+                                        You can get it using <a href="https://www.grc.com/fingerprints.htm" rel="noopener" target="_blank">https://www.grc.com/fingerprints.htm</a><br />
                                         or using openssl from a linux box by typing:<br />
                                         <pre>$ openssl s_client -connect &lt;host&gt;:&lt;port&gt; &lt; /dev/null 2&gt;/dev/null | openssl x509 -fingerprint -noout -in /dev/stdin</pre>
                                     </div>
@@ -1367,7 +1373,7 @@
                                 To learn a new code click <strong>LEARN</strong> (the Sonoff RFBridge will beep) then press a button on the remote, the new code should show up (and the RFBridge will double beep). If the device double beeps but the code does not update it has not been properly learnt. Keep trying.<br /><br />
                                 Modify or create new codes manually and then click <strong>SAVE</strong> to store them in the device memory. If your controlled device uses the same code to switch ON and OFF, learn the code with the ON button and copy paste it to the OFF input box, then click SAVE on the last one to store the value.<br /><br />
                                 Delete any code clicking the <strong>FORGET</strong> button.
-                                <span class="module module-rfbraw"><br /><br />You can also specify 116-chars long RAW codes. Raw codes require a <a target="_blank" href="https://github.com/rhx/RF-Bridge-EFM8BB1">specific firmware for for the EFM8BB1</a>.</span>
+                                <span class="module module-rfbraw"><br /><br />You can also specify 116-chars long RAW codes. Raw codes require a <a rel="noopener" target="_blank" href="https://github.com/rhx/RF-Bridge-EFM8BB1">specific firmware for for the EFM8BB1</a>.</span>
                             </h2>
                         </div>
 
@@ -1381,6 +1387,35 @@
                 </form>
                 <!-- endRemoveIf(!rfbridge) -->
 
+                <!-- removeIf(!lightfox) -->
+                <form id="form-lightfox" class="pure-form form-settings">
+                    <div class="panel" id="panel-lightfox">
+
+                        <div class="header">
+                            <h1>LIGHTFOX RF</h1>
+                            <h2>
+                                LightFox RF configuration<br /><br />
+                                This page allows you to control LightFox RF receiver options.<br /><br />
+                                To learn a new code click <strong>LEARN</strong>, wait for 3 seconds then press a button on the remote, one of the relays will toggle. If no device relay toggles the code has not been properly learnt. Keep trying.<br /><br />
+                                Delete all the codes by clicking the <strong>CLEAR</strong> button and wait for 10 seconds.<br /><br />
+                                You can also specify which RF button controls which relay using controls below.
+                            </h2>
+                        </div>
+
+                        <div class="page">
+                            <div class="pure-g">
+                                <label class="pure-u-1 pure-u-lg-1-4">RF Actions</label>
+                                <div class="pure-u-1-2 pure-u-lg-3-8"><button type="button" class="pure-button button-lightfox-learn pure-u-23-24">Learn</button></div>
+                                <div class="pure-u-1-2 pure-u-lg-3-8"><button type="button" class="pure-button button-lightfox-clear pure-u-1">Clear</button></div>
+                            </div>
+
+                            <fieldset id="lightfoxNodes"></fieldset>
+                        </div>
+
+                    </div>
+                </form>
+                <!-- endRemoveIf(!lightfox) -->
+
             </div> <!-- content -->
 
         </div> <!-- layout -->
@@ -1411,6 +1446,17 @@
         </div>
         <!-- endRemoveIf(!rfbridge) -->
 
+        <!-- removeIf(!lightfox) -->
+        <div id="lightfoxNodeTemplate" class="template">
+
+            <div class="pure-g">
+                <label class="pure-u-1 pure-u-lg-1-4">Button #<span></span></label>
+                <select class="pure-u-1 pure-u-lg-3-4" name="btnRelay" action="reboot"></select>
+            </div>
+
+        </div>
+        <!-- endRemoveIf(!lightfox) -->
+
         <div id="networkTemplate" class="template">
 
             <div class="pure-g">