-
-
Notifications
You must be signed in to change notification settings - Fork 80
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TriangleWheel picker #136
Comments
@WojciechKrakowiak Wow! That's really great! I've been wanting to add this for a while :) Personally I think separate components for the hue ring and the triangle would be perfect. Feel free to ping me if you need help with that. You don't have to do this, but in the future I was planning to implement a radial slider that supports all the current slider types, like requested in #128. These radial sliders would also have some way to insert any other component inside them, whether that's your triangle, the box, or another radial slider. So I think treating the hue ring as a separate component would be a good way to get started on that. |
Ok, I'll make them separately :) – I'll write when it's ready or I'll have some questions. I checked out Canva's code in inspektor, and the ring is a rounded div with a linear gradient, and hsl whell inside is made out of several css radial gradients on a single div: https://www.canva.com/colors/color-wheel/ (Another solution can be css conic gradient – it's supported by most of browsers (not by IE and android Firefox), but there's a polyfill: https://projects.verou.me/conic-gradient/) For now, I stick to your method - in fact to create hsl ring I had to just change a couple of values from hsl circle. |
Yeah, I've been wanting to move to proper conic gradients for a while, but in the past support for it wasn't where I wanted it to be. I suppose it could be worth looking into that again, would make a lot of things easier :) |
Hey @WojciechKrakowiak ! Wondering if you got anywhere with this? I recently moved to using conical gradients in iro.js, and I'm working on other changes that would make this a lot easier to implement. I'm curious how you did this? |
Hey @jaames, sorry for silence, I stuck and didn't really had time to solve it. Here's, what I have: http:https://wojciechkrakowiak.com/iro/ https://github.com/WojciechKrakowiak/iro.js The problem is inside combination of hueRing with triangle: If you have any idea or anybody else would like to dig into it feel free to continue with my changes. |
No worries @WojciechKrakowiak! Thank you very much for sharing what you have anyway. I'll see if I can get it finished :) |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
I'm working on TriangleWheel picker for Iro.js and ico-core. For me (as graphic designer) it's the best color picker type, as it covers all HSL without additional sliders and is the most intuitive one (as opposite to HSL circle with white in the middle makes selecting pure white really hard).
I've H selecting done, generating triangle done and now it's time to add second drag.
@jaames I'd be happy for TriangleWhell to become a part of IRO when it's ready, if you'd agree.
If yes, I would like to consult which approach should I choose:
small GIF of current progress:
![ezgif com-video-to-gif](https://user-images.githubusercontent.com/21331719/96355618-dad5d700-10e3-11eb-83df-9cb5101cdfe1.gif)
The text was updated successfully, but these errors were encountered: