Change HA Color Wheel to display temperature palette

@geoffmt wrote:

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 :

IMG_5139.PNG1125×1088 88.2 KB

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

Posts: 1

Participants: 1

Read full topic