2nd (and/or 3rd) color for Multi-color effects

[AvanOsch]

I understand it is not possible to set the 2nd or 3rd color for multi-color effects from the WS2812FX library? For example: "Comet" can use 2 colors: foreground (Comet itself) and a background color. --EDIT-- Bad example... Turns out "Comet" effect only uses one color. ;-)

If this is the case, I'm looking into adding this functionality.

[toblum]

@AvanOsch Yes, this is indeed currently the case. Would be great to have a solution here.

[AvanOsch]

I got this working. A couple of things though:

• I'm no coding guru. I can imagine a couple of changes need to be made.
• I'm totally new to Vue.js. Might need some adjusting as well.
• I only use the web interface at the moment, so only tested with that (WebSocket)
• I don't use MQTT or Home Assistant (but I think it should work)
• I'm not sure if we need RGB values in Arduino code... We could save some code by just using HEX, and converting from RGB client-side.

Usage: WebSocket:

#<hexrgb> --> color1
##<hexrgb> --> color2
###<hexrgb> --> color3
$ --> {"mode":0, "delay_ms":50, "brightness":255, "color":[255, 20, 147, 255, 20, 147, 255, 20, 147]}

HTTP REST:

/status --> {"mode": 5, "delay_ms": 50, "brightness": 128, "color": [255, 20, 147, 255, 20, 147, 255, 20, 147]}
/set_mode --> rgb or r, g, b & rgb2 or r2, g2, b2 & rgb3, or r3, g3, b3

As I said, I use the web interface, so I also adjusted the McLightingUI (v2) for use with 3 colors. My code is here: McLighting And here: McLightingUI

[AvanOsch]

Have been reading through the WS2818FX user manual, and figured out why "Comet" (among other effects) don't use the second color as background. It needs an extra setting (FADE) when initializing the strip segment. Updated the code on my fork.

[AvanOsch]

I totally re-wrote McLightingUI in plain Javascript: https://github.com/AvanOsch/McLightingHTML

Apart from not knowing Vue.js, this made the file size about 10x smaller. I can also imagine some people (like myself) are more comfortable with plain Javascript HTML and CSS. I also added very basic language support and made interface colors changeable.

[bojanul]

This is great! I hope it will be in the main soon. I would also appreciate an auto command (to start autoplay) and more than 99 leds support in the range command.

[debsahu]

WebUI is all the hard work of @toblum. I dont do web. I spent the whole thanksgiving holidays to learn javascript & css and I'm amazed at what it can do. I have created such a flavor as well for fun, but I think you can create a branch/fork for https://github.com/toblum/McLightingUI . This way we can have a pure js flavor for people to try.

[AvanOsch]

@bojanul The autoplay command is supported as well (the interface is almost the same as McLightingUI v2, and has all it's features) I don't know what you mean by "more than 99 leds support in the range command", but I'm testing everything on a 240 LEDs strip, and it works fine.

@debsahu I first forked McLightingUI (see 3rd post above), but i found Vue.js more complicated than just using pure Javascript. Also, the resulting file was almost 1MB in size, and saving values on the nodeMCU stopped working (memory full).

Although there are a lot of functions I used from toblum's version, the two versions are very different. That's why I put it in a separate repo...

[bojanul]

Actually, the autoplay and range remarks/wishes ware directed towards the author of this great peace of software: as far as I understand, there is no websocket/MQTT command for autoplay, and the range command has only 2 digits for the number of leds. Of course, MQTT can be used to emulate autoplay, but the command would be also useful.

[AvanOsch]

@bojanul Ah, I see. Well, autoplay seems to be supported (send "start" or "stop" over websocket) I've not (yet) added 3 color support for saved autoplay patterns though. --EDIT-- Added 3 color support for Autoplay patterns.

I have no idea what the "range" command would do. Have not even run into it while adjusting everything for 3 colors... -- EDIT-- I see "range" doesn't need multi-color support, as it sets the leds one at a time. I did see however that the length of the command is hard-coded to 2 digits.

[toblum]

Hi @AvanOsch,

great to see another UI for McLighting. It was built that way to enable multiple interfaces and it's always good to have many variants to choose from. I built McLightingUI because I wanted to try out vue.js (which is great but overkill for that purpose) and see if I could implement some missing features faster. But yes, it's quite heavy.

I will try out your version soon. Maybe we can link to it (and other frontends) from the wiki.

Regards Tobias

[AvanOsch]

@toblum Thanks! Please also check out my modifications on McLighting for the 3 color support. Or should I do a pull request or something?

[AvanOsch]

@toblum If you come around to testing my 3 color implementation, I'd like to get some feedback on my "convertColors()" function: 1) Somehow, I needed to add a delay. It was working fine, until I removed a debugging line. After re-tracing my steps I found out a short delay after converting colors fixed the problem. Do you have any idea why? 2) I'm making an "Interactive PoolTable", which animates a McLighting-strip whenever a ball drops in a pocket (by setting separate segments for each pocket). After adding sensors, I get random crashes (especially when 2 are triggered at the same time). Tracking the problem, I found out this also happens when triggering the "convertColors()" function.

More debugging needed here, because I think it could also have to do with the NodeMCU pins I'm using... During normal operation (without my PoolTable changes) everything works fine, but as some weird stuff is going on around that "convertColors()" function, I'm kind of hoping you can find something wrong with it.

[debsahu]

You have a pointer to a local variable declared in the function that's gets destroyed after execution of function. Make it global or memory manage the array manually.

[AvanOsch]

@debsahu Thanks for your reply, but could you clarify a bit? I didn't make a global variable because after the function returns the color array, I thought it wasn't needed anymore... Thinking about it, I could make a global variable so the function only needs to be called whenever a color changes. -- EDIT-- Changed the function to adjust a global variable, and it gets called every time a color changes. This removed the need for a delay(), and everything runs smoothly now. Thanks @debsahu ! I'd still like to know what exactly was wrong with the way I did it before:

uint32_t* convertColors() {
    uint32_t rgbmain = (main_color.red << 16) | (main_color.green << 8) | main_color.blue;
    uint32_t rgbback = (back_color.red << 16) | (back_color.green << 8) | back_color.blue;
    uint32_t rgbxtra = (xtra_color.red << 16) | (xtra_color.green << 8) | xtra_color.blue;
    uint32_t color[] = {rgbmain, rgbback, rgbxtra};
    delay(10); // Somehow needed to set colors properly...
    return color;
}

[debsahu]

See section 2.5 here http://www.ntu.edu.sg/home/ehchua/programming/cpp/cp4_pointerreference.html

[debsahu]

uint32_t color is declared inside the function which is destroyed after the execution of function. The pointer now points to this destroyed location, which is the cause of your issues.

[toblum]

Hi @AvanOsch,

I found time to try out your mod. Flashing the software via pio worked flawlessly, but unfortunately the UI didn't work. It starts up until 100 % but the modal doesn't close.

I like how you solved to color channel switch and also supplied a translated version.

Regards Tobias

[AvanOsch]

Thanks @toblum I didn't account for a missing uistate.json... Fixed a couple of other small bugs too, and added "Hide Autoplay" setting.

[aidbish]

Will these additional effects be added to mclighting as default?

[bpohvoodoo]

@AvanOsch I‘m currently porting this to my RGBW branch (3colors) I‘m also porting your WebUI to be used with RGBW. Looks promissing.

[bpohvoodoo]

Ready to test https://github.com/FabLab-Luenen/McLighting/tree/3colors GUI: https://github.com/FabLab-Luenen/McLightingHTML

[debsahu]

@AvanOsch Great work, tracking this. @bpohvoodoo thanks, now I know the changes required.