Merge pull request #36 from LarsMichelsen/New-Modes

Dynamic Modes #2

Mode Registry/ModeCircle.ino

@@ -54,20 +54,25 @@ public:
 
   virtual void applyConfig(JsonVariant &settings) {}
 
-  virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+  virtual const char *getName()
   {
-    const char *modeName = "Circle";
-    const char *tabHtml = PSTR("<h2>Circle Mode<\\/h2>"
-                               "<p>A simple dot moving round the lamp.<\\/p>");
-    const char *tabScript = PSTR("messageEventList.push(handleCircleMessage);\\r\\n"
+    return "Circle";
+  }
+
+  virtual const char *getTabHtml()
+  {
+    return PSTR("<h2>Circle Mode<\\/h2>"
+                "<p>A simple dot moving round the lamp.<\\/p>");
+  }
+
+  virtual const char *getTabScript()
+  {
+    return PSTR("messageEventList.push(handleCircleMessage);\\r\\n"
                                  "function handleCircleMessage(jsonMessage) {\\r\\n"
                                  "     if (\\\"Circle\\\" in jsonMessage) {\\r\\n"
                                  "         jsonMessage = jsonMessage.Circle\\r\\n"
                                  "        if (typeof jsonMessage === \\\"object\\\") {}\\r\\n"
                                  "     }\\r\\n"
                                  " }\\r\\n");
-    String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-    _webSocketServer.broadcastTXT(htmlJSON.c_str());
   }
-};
+};

Mode Registry/ModeColorWipe.ino

@@ -44,15 +44,23 @@ public:
     settings["Speed"] = colorWipeSpeed = settings["Speed"] | colorWipeSpeed;
   }
 
-  virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+  virtual const char *getName()
   {
-    const char *modeName = "Colour Wipe";
-    const char *tabHtml = PSTR("<h2>Color Wipe Mode<\\/h2>\\r\\n"
+    return "Colour Wipe";
+  }
+
+  virtual const char *getTabHtml()
+  {
+    return PSTR("<h2>Color Wipe Mode<\\/h2>\\r\\n"
                                "<p>Color Wipe will fill the light with a color in a wiping fashion then wipe the light away.<\\/p>\\r\\n"
                                "<div class=\\\"row my-3\\\">\\r\\n"
                                "    <input id=\\\"colorWipeSelectButton\\\" class=\\\"color col mb-2 mx-2 btn btn-lg btn-outline-light\\\" value=\\\"rgb(0,0,0)\\\"><\\/input>\\r\\n"
                                "<\\/div>\\r\\n");
-    const char *tabScript = PSTR("var colorWipeLastMessage = \\\"\\\"\\r\\n"
+  }
+
+  virtual const char *getTabScript()
+  {
+    return PSTR("var colorWipeLastMessage = \\\"\\\"\\r\\n"
                                  "var colorWipeRed = 0\\r\\n"
                                  "var colorWipeGreen = 0\\r\\n"
                                  "var colorWipeBlue = 0\\r\\n"
@@ -143,8 +151,5 @@ public:
                                  "        }\\r\\n"
                                  "    }\\r\\n"
                                  "}\\r\\n");
-    String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-    _webSocketServer.broadcastTXT(htmlJSON.c_str());
   }
 };

Mode Registry/ModeConfetti.ino

@@ -30,12 +30,20 @@ public:
     settings["Speed"] = confettiSpeed = settings["Speed"] | confettiSpeed;
   }
 
-  virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+  virtual const char *getName()
   {
-    const char *modeName = "Confetti";
-    const char *tabHtml = PSTR("<h2>Confetti Mode<\\/h2>\\r\\n"
-                               "<p>Confetti will flash random colors to emulate confetti.<\\/p>\\r\\n");
-    const char *tabScript = PSTR("var confettiLastMessage = \\\"\\\"\\r\\n"
+    return "Confetti";
+  }
+
+  virtual const char *getTabHtml()
+  {
+    return PSTR("<h2>Confetti Mode<\\/h2>\\r\\n"
+                "<p>Confetti will flash random colors to emulate confetti.<\\/p>\\r\\n");
+  }
+
+  virtual const char *getTabScript()
+  {
+    return PSTR("var confettiLastMessage = \\\"\\\"\\r\\n"
                                  "                var confettiRed = 0;\\r\\n"
                                  "                var confettiGreen = 0;\\r\\n"
                                  "                var confettiBlue = 0;\\r\\n"
@@ -144,9 +152,5 @@ public:
                                  "                        sendMessage(msg)\\r\\n"
                                  "                    }\\r\\n"
                                  "                }\\r\\n");
-
-    String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-    _webSocketServer.broadcastTXT(htmlJSON.c_str());
   }
 };

Mode Registry/ModeSparkle.ino

@@ -36,15 +36,23 @@ public:
         settings["Speed"] = sparkleSpeed = settings["Speed"] | sparkleSpeed;
     }
 
-    virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+    virtual const char *getName()
     {
-        const char *modeName = "Sparkle";
-        const char *tabHtml = PSTR("<h2>Sparkle Mode<\\/h2>\\r\\n"
+      return "Sparkle";
+    }
+
+    virtual const char *getTabHtml()
+    {
+        return PSTR("<h2>Sparkle Mode<\\/h2>\\r\\n"
                                    "<p>This is the Sparkle mode.<\\/p>\\r\\n"
                                    "<div class=\\\"row my-3\\\">\\r\\n"
                                    "    <input id=\\\"sparkleSelectButton\\\" class=\\\"color col mb-2 mx-2 btn btn-lg btn-outline-light\\\" value=\\\"rgb(0,0,0)\\\"><\\/input>\\r\\n"
                                    "<\\/div>\\r\\n");
-        const char *tabScript = PSTR("var sparkleLastMessage = \\\"\\\"\\r\\n"
+    }
+
+    virtual const char *getTabScript()
+    {
+        return PSTR("var sparkleLastMessage = \\\"\\\"\\r\\n"
                                      "var sparkleRed = 0;\\r\\n"
                                      "var sparkleGreen = 0;\\r\\n"
                                      "var sparkleBlue = 0;\\r\\n"
@@ -159,9 +167,5 @@ public:
                                      "        sendMessage(msg)\\r\\n"
                                      "    }\\r\\n"
                                      "}\\r\\n");
-
-        String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-        _webSocketServer.broadcastTXT(htmlJSON.c_str());
     }
 };

Mode Registry/ModeVisualiser.ino

@@ -139,10 +139,14 @@ public:
     settings["HueOffset"] = visualiserHueOffset = settings["HueOffset"] | visualiserHueOffset;
   }
 
-  virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+  virtual const char *getName()
   {
-    const char *modeName = "Visualiser";
-    const char *tabHtml = PSTR("<h2>Visualiser Mode<\\/h2>\\r\\n"
+    return "Visualiser";
+  }
+
+  virtual const char *getTabHtml()
+  {
+    return PSTR("<h2>Visualiser Mode<\\/h2>\\r\\n"
                                "<p> Here you can set the mode to Visualiser. This mode does an FFT on the ADC of the ESP8266 and maps the\\r\\n"
                                "    frequencies\\r\\n"
                                "    to the number of top and bottom LED's. To use this mode, an input source must be present on the ADC such\\r\\n"
@@ -186,7 +190,11 @@ public:
                                "        has been set<\\/li>\\r\\n"
                                "    <li><b>Hue Offset<\\/b> - The offset hue value from 0 for the start of the rainbow<\\/li>\\r\\n"
                                "<\\/ul>\\r\\n");
-    const char *tabScript = PSTR("var visualiserDebunce = Date.now()\\r\\n"
+  }
+
+  virtual const char *getTabScript()
+  {
+    return PSTR("var visualiserDebunce = Date.now()\\r\\n"
                                  "var lastVisualiserMessaeg = \\\"\\\"\\r\\n"
                                  "\\r\\n"
                                  "messageEventList.push(handleVisualiserMessage)\\r\\n"
@@ -306,9 +314,5 @@ public:
                                  "        sendMessage(msg)\\r\\n"
                                  "    }\\r\\n"
                                  "}\\r\\n");
-
-    String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-    _webSocketServer.broadcastTXT(htmlJSON.c_str());
   }
 };

Mode Registry/README.md

@@ -1,41 +1,55 @@
 # Mode Registry
 
-In this folder are all the modes created by contributors which work out of the box with the sketch. If you would like to add these modes simply follow the directions below.
+In this folder are all the modes created by contributors which work out of the box with the sketch.
+If you would like to add these modes simply follow the directions below.
 
 ## Installing Modes
 
 #### Copy Mode .ino file to the main sketch folder
 
-Simply move the .ino file of your choice from the __External Modes__ folder into the sketch main folder. This will be the "__Super_Simple_RGB_WiFi_Lamp__" folder with the main .ino file.
+Simply move the .ino file of your choice from the __External Modes__ folder into the sketch main
+folder. This will be the "__Super_Simple_RGB_WiFi_Lamp__" folder with the main .ino file.
 
 ![MoveFiles](../Pictures/MoveFiles.png)
 
 #### Install any new libraries mentioned
 
-Some modes may require a new library to be installed. This should be mentioned at the top of any new mode file. You will need to install these before the mode will work. For example; the visualiser mode requires the FFT library to be installed before it will work.
+Some modes may require a new library to be installed. This should be mentioned at the top of any new
+mode file. You will need to install these before the mode will work. For example; the visualiser
+mode requires the FFT library to be installed before it will work.
 
 ![MoveFiles](../Pictures/InstallLibraries.png)
 
 #### Add mode to the mode registry in the sketch
 
-In the mode_registry.ino file you must add your mode so that the sketch knows it should use it. Failure to do so will result in your mode not being rendered. To add the mode in the registry simply copy and paste the following replacing NEW_MODE_NAME with the name of the mode, and NEW_MODE_CONSTRUCTOR with the name of the mode as well (this must match details in the mode's .ino file)
+In the `mode_registry.ino` file you must add your mode so that the sketch knows it should use it.
+Failure to do so will result in your mode not being rendered. To add the mode in the registry simply
+copy and paste the following replacing `NEW_MODE_NAME` with the name of the mode, and
+`NEW_MODE_CONSTRUCTOR` with the name of the mode as well (this must match details in the mode's .ino
+file).
 
-`modes["NEW_MODE_NAME"] = new NEW_MODE_CONSTRUCTOR();`
+```
+modes["NEW_MODE_NAME"] = new NEW_MODE_CONSTRUCTOR();
+```
 
 #### Compile and upload
 
-After adding the file to the main sketch folder, installing any new libraries that are required, and adding the mode to the registry, simply compile and upload the sketch to your ESP8266.
+After adding the file to the main sketch folder, installing any new libraries that are required, and
+adding the mode to the registry, simply compile and upload the sketch to your ESP8266.
 
 #### Issues with new modes
 
-If you run into any issues with new modes, please create an issue and provide as much information as possible so we can help identify the issue.
+If you run into any issues with new modes, please create an issue and provide as much information as
+possible so we can help identify the issue.
 
 ## Creating New Modes
 
-While there is no guide currently on how to add a mode yourself, you may be able to create one by reading how one of the other modes is implemented. I suggest having a read of how the colour mode is implemented first.
+While there is no guide currently on how to add a mode yourself, you may be able to create one by
+reading how one of the other modes is implemented. I suggest having a read of how the colour mode is
+implemented first.
 
 ## TODO
 
 - Show how to add the mode in the arduino environment
 - Show how to add the mode to the webpage
-- Make a new mode pull request template
+- Make a new mode pull request template

Super_Simple_RGB_WiFi_Lamp/ModeBellCurve.ino

@@ -33,16 +33,24 @@ public:
     settings["Blue"] = bellCurveBlue = settings["Blue"] | bellCurveBlue;
   }
 
-  virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+  virtual const char *getName()
   {
-    const char *modeName = "Bell Curve";
-    const char *tabHtml = PSTR("<h2>Bell Curve Mode<\\/h2>\\r\\n"
+    return "Bell Curve";
+  }
+
+  virtual const char *getTabHtml()
+  {
+    return PSTR("<h2>Bell Curve Mode<\\/h2>\\r\\n"
                                "<p>In this mode the lamp will shape the light into a bell curve. This is meant to be more asthetically\\r\\n"
                                "    pleasing than the regular colour mode.<\\/p>\\r\\n"
                                "<div class=\\\"row my-3\\\">\\r\\n"
                                "    <input id=\\\"bellCurveSelectButton\\\" class=\\\"color col mb-2 mx-2 btn btn-lg btn-outline-light\\\" value=\\\"rgb(0,0,0)\\\">\\r\\n"
                                "<\\/div>\\r\\n");
-    const char *tabScript = PSTR("bellCurveDebunce = Date.now()\\r\\n"
+  }
+
+  virtual const char *getTabScript()
+  {
+    return PSTR("bellCurveDebunce = Date.now()\\r\\n"
                                  "var bellRed = 0\\r\\n"
                                  "var bellGreen = 0\\r\\n"
                                  "var bellBlue = 0\\r\\n"
@@ -123,9 +131,5 @@ public:
                                  "        }\\r\\n"
                                  "    }\\r\\n"
                                  "}\\r\\n");
-
-    String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-    _webSocketServer.broadcastTXT(htmlJSON.c_str());
   }
 };

Super_Simple_RGB_WiFi_Lamp/ModeClock.ino

@@ -103,10 +103,14 @@ public:
         }
     }
 
-    virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+    virtual const char *getName()
     {
-        const char *modeName = "Clock";
-        const char *tabHtml = PSTR("<h2>Clock Mode<\\/h2>\\r\\n"
+        return "Clock";
+    }
+
+    virtual const char *getTabHtml()
+    {
+        return PSTR("<h2>Clock Mode<\\/h2>\\r\\n"
                                    "<p>In this mode the light will display the current time in 12 hr format uisng the\\r\\n"
                                    "    top and bottom side of the light. On the top is the current hour, and the bottom is the minute. The left\\r\\n"
                                    "    of teh light represents 0 and the right represents either 12hr or 60mins. You can choose the colour of\\r\\n"
@@ -117,7 +121,11 @@ public:
                                    "    <button id=\\\"clockHourColourButton\\\" class=\\\"color col mb-2 mx-2 btn btn-lg btn-outline-light\\\">Hour Colour<\\/button>\\r\\n"
                                    "    <button id=\\\"clockMinuteColourButton\\\" class=\\\"color col mb-2 mx-2 btn btn-lg btn-outline-light\\\">Minute Colour<\\/button>\\r\\n"
                                    "<\\/div>\\r\\n");
-        const char *tabScript = PSTR("clockHourDebunce = Date.now()\\r\\n"
+    }
+
+    virtual const char *getTabScript()
+    {
+        return PSTR("clockHourDebunce = Date.now()\\r\\n"
                                      "clockMinDebunce = Date.now()\\r\\n"
                                      "var currentHourRed = 0\\r\\n"
                                      "var currentHourGreen = 0\\r\\n"
@@ -305,8 +313,5 @@ public:
                                      "        }\\r\\n"
                                      "    }\\r\\n"
                                      "}\\r\\n");
-        String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-        _webSocketServer.broadcastTXT(htmlJSON.c_str());
     }
 };

Super_Simple_RGB_WiFi_Lamp/ModeColour.ino

@@ -19,10 +19,14 @@ public:
         settings["Blue"] = colourBlue = settings["Blue"] | colourBlue;
     }
 
-    virtual void sendWebsiteData(WebSocketsServer &_webSocketServer)
+    virtual const char *getName()
     {
-        const char *modeName = "Colour";
-        const char *tabHtml = PSTR("<h2>Colour Mode<\\/h2>\\r\\n"
+        return "Colour";
+    }
+
+    virtual const char *getTabHtml()
+    {
+        return PSTR("<h2>Colour Mode<\\/h2>\\r\\n"
                                    "<p>Here you can set the light to any colour you desire. There are also a couple of buttons for setting the light to different shades of white<\\/p>\\r\\n"
                                    "\\r\\n"
                                    "<div class=\\\"row my-3\\\">\\r\\n"
@@ -43,7 +47,11 @@ public:
                                    "    <button id=\\\"3000Button\\\" class=\\\"col mb-2 mx-2 btn btn-lg btn-outline-light\\\">3000K<\\/button>\\r\\n"
                                    "    <button id=\\\"4000Button\\\" class=\\\"col mb-2 mx-2 btn btn-lg btn-outline-light\\\">4000K<\\/button>\\r\\n"
                                    "<\\/div>\\r\\n");
-        const char *tabScript = PSTR("var currentRed = 0;\\r\\n"
+    }
+
+    virtual const char *getTabScript()
+    {
+        return PSTR("var currentRed = 0;\\r\\n"
                                      "var currentGreen = 0;\\r\\n"
                                      "var currentBlue = 0;\\r\\n"
                                      "var colourDebunce = Date.now()\\r\\n"
@@ -154,9 +162,5 @@ public:
                                      "        }\\r\\n"
                                      "    }\\r\\n"
                                      "}\\r\\n");
-
-        String htmlJSON = String("{\"Tab\" : {") + "\"Name\": \"" + modeName + "\", \"tabHtml\" : \"" + tabHtml + "\", \"tabScript\" : \"" + tabScript + "\"}}";
-
-        _webSocketServer.broadcastTXT(htmlJSON.c_str());
     }
 };