ngx-color

ngx-color copied to clipboard

Hi Scott.

I'm working on an app to control animation of an LED strip (SK6812 with four channels: Red, Green, Blue, White).

I've tried a few different libraries, some of which are a little too difficult to use or are designed for applications other than LED light control - I'm really glad I've found yours with its wide choice of built-in components - thank you for all this work! I have a few questions though, but I must say I'm not a very experienced TypeScript developer - I'm learning along the way 😊

The debounce time that is currently configured (100 ms) is a little too fast for my application. I'm looking to slow it down to 500-1000 ms, as otherwise it spams my MQTT broker and overloads the microcontroller used to control the lights.

Below are two pieces of my code. Is there any way I can adjust the debounce rate here? Otherwise, is there any way to built on top of the ColorWrap bit to change that? The this.ledService.cmdFill bit publishes an MQTT message, it's a service I wrote.

<color-hue-picker (onChange)="handleChange($event)"></color-hue-picker>

  handleChange($event: ColorEvent) {
    this.colorRgb = $event.color.rgb;
    this.ledService.cmdFill(this.colorRgb.r, this.colorRgb.g, this.colorRgb.b, 0);
  }

If there's no easy way of doing that, I might fall back to using onChangeComplete instead of onChange, but I'd love to have an option to get the LED strip to change its colour as I drag the slider.

My second question is about what you call a shade slider. As I mentioned before, the LED strip I use offers a fourth colour, white. I'm looking to reuse the shade slider component and replace the hue colour with white so there's nice transition from black to white, which would act as a dimmer for white light. What is the best way to create a custom component on top of your shade slider?

Thank you.

You should handle the debouncing by re-emitting the event into the debounce function of your choice handleChange($event) => debounceFn($event)

The shade component won't show white because it takes a hue. I would probably use alpha or make your own custom slider like how the shade component is implemented https://github.com/scttcper/ngx-color/blob/86fa90c26e5352a5300f35afcad0eae4b9135112/src/lib/common/shade.component.ts

Brilliant, thanks a lot for sharing it. Regarding the shade component, what's the best (Angular) way of implementing something like that on top of your code? Just generate a new component in my app's directory and reference it from my code? Might sound like a stupid question and probably is - but I haven't touched these technologies much before 😊