Rotate / flip the circle

[mcer12]

Hi @jaames Is there a way to rotate or flip (mirror) the color picker circle? For example I would need Red on top, Green on the right and Blue on the left?

[jaames]

Hey @mcer12!

At the moment there isn't an option to adjust the hue wheel's angle or direction. I chose not to add that since I didn't see any particular benefit and thought it would just add extra complexity.

That said, if it is something you really need then I'm happy to implement it when I have the time! Can I ask what your use-case is and how urgently is this needed?

[mcer12]

The goal is to make web interface to control philips Hue, that means to make the color picker similar to that on the linked picture.
https://2672686a4cf38e8c2458-2712e00ea34e3076747650c92426bbb5.ssl.cf1.rackcdn.com/2018-05-20-05-57-17.jpeg

[jaames]

Ah, rad. I'll have a look at implementing this sometime (by adding wheelAngle and wheelDirection options to iro.ColorPicker?). I'm slightly busy this week so it'll probably be Saturday at the soonest, hope that's okay

[mcer12]

Sounds like exactly what I need!

[jaames]

Currently working on this over in the features/hue-wheel-angle branch if you'd like to take a look!

I've implemented wheelAngle and wheelDirection options for the color picker constructor, docs still need to be written but wheelAngle is the number of degrees to rotate the wheel by (always in a clockwise direction) and wheelDirection is the direction to draw the hue in -- either "anticlockwise" or "clockwise"

Here's an example:

[jaames]

@mcer12 Just pushed this feature in iro.js 4.4.0!

To get the result you're looking for, you'll need to set wheelDirection and wheelAngle like so:

var colorPicker = new iro.ColorPicker({
  ...
  wheelAngle: 270,
  wheelDirection: 'clockwise',
})

Documentation is also available on the project's GitHub readme and on https://iro.js.org

Gonna close this thread now, but feel free to comment or open up another thread if there's anything else you need!

[mcer12]

Thank you very much, this is exactly what I needed. Great improvement!

[jaames]

Awesome, glad I could help!