[feature-request] kelvin scale colors

[KaanMol]

Hey James,
I was trying to make it by myself in Iro.JS, but I don't really know anything about colors etc.
Maybe you can do it or help me make it.
I need a colorwheel like this basically:

Do you know how I can achieve this?

[jaames]

This control seems to represent the kelvin scale, which measures color warmth and is often used in lighting

It would normally just be controlled with a slider, but I guess they made it look like a circle for aesthetic reasons -- it does look pretty nice!

It shouldn't be too hard to implement something like this in iro.js, maybe as a plugin. The UI is just a circle with a gradient, and I think there's already formulas out there for converting a kelvin value to/from an approximate rgb color but that would probably be the trickiest bit to implement

I'll look into it a bit more next week :)

[KaanMol]

Maybe it is an option to just put the Kelvin Scale utils in Iro.JS, instead of making one Kelvin Colorwheel? Would be handy if a person wouldn't want the wheel but rather a slider.
I've found a couple ways to implement the Kelvin Scale, one is to calculate it (I also found the way to calculate it, quite easy) and the other is just to use an enum full of the RGB values of the tempratures.

[jaames]

My goal with iro's core library is to keep it relatively small and free of feature-bloat, so any new features should only be things that most users will find useful. Not everybody is using iro to control lightning so I think it makes more sense to implement this as an optional plugin, like https://github.com/jaames/iro-transparency-plugin

There's probably some other features that would be helpful for lighting control too, so perhaps this new plugin could basically turn iro into the ultimate lighting tool for users who want such a thing :)

And yeah, the best option is probably to use math to convert kelvin temperature <-> rgb, and allow for the temperature range to be customised

[siggerzz]

I'm also really interested in this functionality, as I have the exact same use case. However I don't have the knowledge to implement this myself.

@KaanMol Did find a way to implement this at all (using iro / other implementation)?

[rjsachse]

+1 for this

[angelofan]

+1 , Smart home needs it.

[DanielPeinhopf]

+1 👍

[jaames]

I began implementing support for kelvin temperatures as well as a kelvin slider :)

This will be released as part of iro.js 5.0

[jaames]

I also tentatively implemented a circular slider type like the one used in @KaanMol's screenshot, but does anyone care about this in particular? Or is having a simple kelvin slider fine?

[angelofan]

@jaames Wow, it’s cool! I think it can be used as an option. You can choose it yourself through the layout option. That would be great.

Like this:

var colorPicker = new iro.ColorPicker('#color-picker', {
  layout: [
    {
      component: iro.ui.Wheel,
      options: {}
    },
    {
      component: iro.ui.Slider,
      options: {}
    }
  ]
});

[jaames]

That's the plan! To make a circular kelvin slider like in my last screenshot, layout would look like this:

layout: [
    ...
    {
      component: iro.ui.Slider,
      options: {
         sliderShape: 'circle',
         sliderType: 'temperature' // could also be 'hue', 'saturation', 'value', etc...
      }
    }
]

[angelofan]

@jaames It feels very cool, I am looking forward to this

[angelofan]

@jaames I will use the bar slider more, but the circular slider looks cooler.

[DanielPeinhopf]

Wow, great. 👍 Thanks @jaames.

[AtmiyaVaghela]

I also tentatively implemented a circular slider type like the one used in @KaanMol's screenshot, but does anyone care about this in particular? Or is having a simple kelvin slider fine?

Excellent work! I want to use this in my project. Waiting for release iro.js 5.0

[jaames]

iro.js 5.0.0 is now in beta if anybody would like to test it! Obviously I don't recommend using it in production, and documentation is still in progress.

From NPM:

$ npm install @jaames/iro@beta

Manual download:

https://raw.githubusercontent.com/jaames/iro.js/v5-dev/dist/iro.min.js

To add a temperature slider you need to use the layout option to specify a custom layout:

var colorPicker = new iro.ColorPicker('#color-picker', {
  layout: [
    {
      component: iro.ui.Wheel,
      options: {}
    },
    // Regular slider:
    {
      component: iro.ui.Slider,
      options: {}
    },
    // Temperature slider:
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'kelvin',
        // Optional: uncomment the next line if you want a circular slider like in the original request
        // sliderShape: 'circle'
      }
    }
  ]
});

[DanielPeinhopf]

Yeah... I'am just playing around with it and for now it works great :)
But how did you rotate the temperature wheel by 90 degree (when using sliderShape=circle)?

[jaames]

@DanielPeinhopf oh sorry, add layoutDirection: 'horizontal' to the slider :)

[AtmiyaVaghela]

I want to toggle the layout base on the toggle button. How can I re-render the color picker?

[jaames]

@AtmiyaVaghela you can re-render the color picker with a new layout with the updateOptions method

var colorPicker = new iro.ColorPicker('#color-picker', {
  layout: [
    ... initial layout
  ]
});

// update color picker layout whenever you like
colorPicker.updateOptions({
  layout: [
    ... new layout
  ]
})

[DanielPeinhopf]

@DanielPeinhopf oh sorry, add layoutDirection: 'horizontal' to the slider :)

Thank you. I thought it would be vertical because of the vertical slider orientation inside of the wheel.
But it works :)

[AtmiyaVaghela]

@AtmiyaVaghela you can re-render the color picker with a new layout with the updateOptions method

var colorPicker = new iro.ColorPicker('#color-picker', {
  layout: [
    ... initial layout
  ]
});

// update color picker layout whenever you like
colorPicker.updateOptions({
  layout: [
    ... new layout
  ]
})

@AtmiyaVaghela you can re-render the color picker with a new layout with the updateOptions method

var colorPicker = new iro.ColorPicker('#color-picker', {
  layout: [
    ... initial layout
  ]
});

// update color picker layout whenever you like
colorPicker.updateOptions({
  layout: [
    ... new layout
  ]
})

Thank you very much. You have done a great job.

[jaames]

Sorry for such a slow response on this, things have been super busy for me recently. ':)

iro.js v5 is finally done, which includes a new kelvin slider type (as well as circular sliders!). If you update to the latest version, you can create a circular kelvin slider like so:

var colorPicker = new iro.ColorPicker('#picker', {
  layout: {
    { 
      component: iro.ui.Slider,
      options: {
        sliderType: 'kelvin' ,
        sliderShape: 'circle'
      }
    },
  }
});

Relevant documentation: https://iro.js.org/advanced.html#sliders