Hello there !
I am trying to achieve a new color wheel based on the original Home assistant color picker which would look like this basically :
I spent one whole day trying to copy the Home assistant color picker and modify it to change its behaviour.
I am using the Light Entity Card to implement this and i tried to modify the last bit of the code :
<div class='light-entity-card__color-picker'>
<ha-color-picker
id="${this.generateColorPickerId(t)}"
class='control color'
saturation-segments=${this._saturationSegments}
hue-segments=${this._hueSegments}
throttle=500
@colorselected=${e=>this.setColorPicker(e,t)}
>
</ha-color-picker>
</div>
with my one personal tag for the color picker (ha-color-picker-temp
) :
<div class='light-entity-card__color-picker'>
<ha-color-picker-temp
id="${this.generateColorPickerId(t)}"
class='control color'
saturation-segments=${this._saturationSegments}
hue-segments=${this._hueSegments}
throttle=500
@colorselected=${e=>this.setColorPicker(e,t)}
>
</ha-color-picker-temp>
</div>
This does not recognize my custom ha-color-picker-temp.
To be able to use these tags, I made sure that I put the line customElements.define("ha-color-picker-temp", HaColorPickerTemp);
at the end of my custom ha-color-picker.
I hope this is clear !
Do you guys have any idea on how to make this work ?
Thanks a lot if you take the time to help me !!