From dcf2364df017a6b680e95d754c370fb0da4d0c0e Mon Sep 17 00:00:00 2001 From: Lars Michelsen Date: Fri, 20 Dec 2019 22:15:30 +0100 Subject: [PATCH 1/2] Minor formatting --- Mode Registry/README.md | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/Mode Registry/README.md b/Mode Registry/README.md index de1b772..96a1365 100644 --- a/Mode Registry/README.md +++ b/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 \ No newline at end of file +- Make a new mode pull request template From 5aff5efd8e9c3ba92fa9a8d789ea4c0a5d8fdf33 Mon Sep 17 00:00:00 2001 From: Lars Michelsen Date: Sat, 28 Dec 2019 15:27:18 +0100 Subject: [PATCH 2/2] Refactor sendWebsiteData to getWebsiteData Moved website internal encoding logic out of mode definitions. The mode classes now simply declare their name, HTML and javascript. The generic code in Websockets.ino is asking for this data and formats it for the frontend. --- Mode Registry/ModeCircle.ino | 23 +++++++++++-------- Mode Registry/ModeColorWipe.ino | 19 +++++++++------ Mode Registry/ModeConfetti.ino | 22 ++++++++++-------- Mode Registry/ModeSparkle.ino | 20 +++++++++------- Mode Registry/ModeVisualiser.ino | 20 +++++++++------- Super_Simple_RGB_WiFi_Lamp/ModeBellCurve.ino | 20 +++++++++------- Super_Simple_RGB_WiFi_Lamp/ModeClock.ino | 19 +++++++++------ Super_Simple_RGB_WiFi_Lamp/ModeColour.ino | 20 +++++++++------- Super_Simple_RGB_WiFi_Lamp/ModeNightRider.ino | 19 +++++++++------ Super_Simple_RGB_WiFi_Lamp/ModeRainbow.ino | 18 +++++++++------ .../Super_Simple_RGB_WiFi_Lamp.ino | 4 +++- Super_Simple_RGB_WiFi_Lamp/Websockets.ino | 3 ++- 12 files changed, 127 insertions(+), 80 deletions(-) diff --git a/Mode Registry/ModeCircle.ino b/Mode Registry/ModeCircle.ino index 43abcf1..4fbb6f2 100644 --- a/Mode Registry/ModeCircle.ino +++ b/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("

Circle Mode<\\/h2>" - "

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("

Circle Mode<\\/h2>" + "

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()); } -}; \ No newline at end of file +}; diff --git a/Mode Registry/ModeColorWipe.ino b/Mode Registry/ModeColorWipe.ino index 18bff14..f6a9598 100644 --- a/Mode Registry/ModeColorWipe.ino +++ b/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("

Color Wipe Mode<\\/h2>\\r\\n" + return "Colour Wipe"; + } + + virtual const char *getTabHtml() + { + return PSTR("

Color Wipe Mode<\\/h2>\\r\\n" "

Color Wipe will fill the light with a color in a wiping fashion then wipe the light away.<\\/p>\\r\\n" "

\\r\\n" " <\\/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()); } }; diff --git a/Mode Registry/ModeConfetti.ino b/Mode Registry/ModeConfetti.ino index a1e0202..3bf064b 100644 --- a/Mode Registry/ModeConfetti.ino +++ b/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("

Confetti Mode<\\/h2>\\r\\n" - "

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("

Confetti Mode<\\/h2>\\r\\n" + "

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()); } }; diff --git a/Mode Registry/ModeSparkle.ino b/Mode Registry/ModeSparkle.ino index 98ef402..86e9f36 100644 --- a/Mode Registry/ModeSparkle.ino +++ b/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("

Sparkle Mode<\\/h2>\\r\\n" + return "Sparkle"; + } + + virtual const char *getTabHtml() + { + return PSTR("

Sparkle Mode<\\/h2>\\r\\n" "

This is the Sparkle mode.<\\/p>\\r\\n" "

\\r\\n" " <\\/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()); } }; diff --git a/Mode Registry/ModeVisualiser.ino b/Mode Registry/ModeVisualiser.ino index 401f4b0..0fbc6c5 100644 --- a/Mode Registry/ModeVisualiser.ino +++ b/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("

Visualiser Mode<\\/h2>\\r\\n" + return "Visualiser"; + } + + virtual const char *getTabHtml() + { + return PSTR("

Visualiser Mode<\\/h2>\\r\\n" "

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" "

  • 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()); } }; diff --git a/Super_Simple_RGB_WiFi_Lamp/ModeBellCurve.ino b/Super_Simple_RGB_WiFi_Lamp/ModeBellCurve.ino index d102190..079546f 100644 --- a/Super_Simple_RGB_WiFi_Lamp/ModeBellCurve.ino +++ b/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("

    Bell Curve Mode<\\/h2>\\r\\n" + return "Bell Curve"; + } + + virtual const char *getTabHtml() + { + return PSTR("

    Bell Curve Mode<\\/h2>\\r\\n" "

    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" "

    \\r\\n" " \\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()); } }; diff --git a/Super_Simple_RGB_WiFi_Lamp/ModeClock.ino b/Super_Simple_RGB_WiFi_Lamp/ModeClock.ino index 18bed98..6068825 100644 --- a/Super_Simple_RGB_WiFi_Lamp/ModeClock.ino +++ b/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("

    Clock Mode<\\/h2>\\r\\n" + return "Clock"; + } + + virtual const char *getTabHtml() + { + return PSTR("

    Clock Mode<\\/h2>\\r\\n" "

    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: "