jaames / iro.js Goto Github PK

Hi, this project looks very promising.

How do I use this with react? I am trying to create a new picker with a unique id in every loop of my map function.

As seen in this picture I want to control the color of each controller with a picker for every card.

Hey @jaames,

First of all let me say that iro.js is excellent! As you know I am using it in my pwa Color Deck.

I found a bug when setting the color using an HSL string. It causes iro.js to crash, with only a reload fixing it. This can be recreated in the iro.js demo (as shown below). Open the Console and type colorPicker.color.hslString = 'hsl(182, 35%, 65%)'.

I did notice that this extends to parsing an HSL string with the iro.Color.parseHslStr method as well. It returns 'parsed is null'. Perhaps, the two are related?

I would love to use this in a react native app, has anyone tried to convert this

I'm using input:start and :end to disambiguate when the user makes a change vs when the color changes by code. When I see input:start, I set a boolean to indicate the user is interacting. When I see input:end, I turn it off. However due to the order of the events, this doesn't work. If I click on the color picker (at least on firefox), the events are:

1. color:change
2. input:start
3. input:end

Steps 1 and 2 should be swapped.

I am able to work around this issue by manually calling my onColorChange handler inside my input:start handler, but this seems like something that should be fixed.

Hello James,
I would like to set the initial color dynamically, I've been trying but wasn't able to solve it.
When I place call within the listener, it doesn't do anything.
color.set('#ff0');
https://codepen.io/artmelkon/pen/Ybmrbp?editors=1010

Is there way to do it?
Thanks in advanced.

Using Chromium on Android (Also looks the same in FireFox)

Strangely enough, the picked color is correct(what color should be at that location on the wheel).

Hi!

I've been testing iro.js library and it's working quite nicely besides this problem I seem to be having only on iOS devices with any browser I test ( Chrome, Safari etc ).I can see that someone else had the exact same problem but only on Safari apparently.

I can confirm that your demo page ( https://iro.js.org/ ) works just fine on the testing devices yet while I access my testing page the output is black.Even with the output being black the functionality "is there", I can drag around the circle and the color is generated correctly.

Link to the similar Issue thread on GitHub: #18

Example of how I create the color picker (even though is really basic, should not and does not seem to be a parameters problem or anything similar)

<div id="demoWheel_101"></div> <input type="text" name="tst_101" class="input_101" value=""> var demo = new window.iro.ColorPicker("#demoWheel_101", { width: 360, height: 360, color: "#f00", borderWidth: 2, padding: 4, anticlockwise: true, }); demo.on("input:end", function onInputStart(color) { console.log("0"); console.log(color.rgb); $(".input_101").css("background-color", "rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ")"); }); </script>

First: Thanks for this powerful tool!

In a project from me, I add the colorpicker every time if i open a container and also once on page first loading. Before I add the picker, i empty the picker-div. Now is the problem, if the container is opened to fast while first initalisation, i have two pickers in the div.

I tried to reproduce this in jsfiddle, but it don't worked.
So here the link to my project: Demo

While initalisation, you have to click on the pen at the left side. Then you see the 2 colorpicker.

So my suggestion is to add a option, if the container should be emptied before appending the picker.

My Code:

$('#colorPicker').empty();
    // Create a new color picker instance
    // https://iro.js.org/guide.html#Getting-Started
    var colorPicker = new iro.ColorPicker("#colorPicker", {
        // color picker options
        // Option guide: https://iro.js.org/guide.html#Color-Picker-Options
        width: 180,
        height: 180,
        color: colorobj.fill,
        anticlockwise: true,
        borderWidth: 1,
        borderColor: "#fff",
        // Dynamic CSS guide: https://iro.js.org/guide.html#Dynamic-CSS
        css: {
            ':root': {
                '--color-wheel': '$color'
            }
        }
    });

Thanks

As-is, there seems to be no way to distinguish between which picker has been used when you have multiple instances.

The 'this' within the eventlistener 'color:change' seems to just return the window, so likely isn't set. There's also no event which gets passed to the function parameters, so I can't find a target or anything either.

It would be pretty great if I could find out which picker is being called upon, whether through an instance name, finding it through the element (by going through the DOM or adding a custom class or something) or through an event.

I am trying to change color on each individual box, even though I set them blur and one of them active, still the colors are being manipulated on all three of them.
Can you please check if this is on my end, or is there something could be done to change each box separately.

https://repl.it/@artmelkon/color-picker-v2

Thanks.

I need multiple colorpickers on one single page, so I put them into an object through a loop.

basically (just an example of my steps, won't work):

var colorpickers = {};

elements.foreach(){
  colorpickers[this.id] = new colorPicker();
  colorpickers[this.id].on('color:change', function(color){
      // This will now trigger on the last or first one I set multiple times
  });
}

I can work around this for now by using external info to filter out which colorpicker is actually the one being triggered, I think... But I thought I should let you know that the instances share eventListeners. I'm sure that's not intended.

Hey James,
I was trying to space out the sliders, but could find any solution. "sliderMargin" sets distance between the wheel and the slider, is it possible to apply to sliders as well?

Hey, this relate to issue #9, in addition to have the ability to disable the brightness bar, is it also possible to draw the brightness canvas as a separate modular html element? cause the current layout may not be applicable to all applications.

I tried the sliderType initiate as opacity/transparency but none of them worked.
My brightness slider and opacity linked together, when you move one, the other moves with it.
How could I do that?
Here is the link https://repl.it/@artmelkon/HSL-color-picker-individual-v1-1

Thanks,
Arthur

Can you please show how to mount or unmount the color picker.
Thanks in advanced.

Hi,

let me say this first, this is one of the best color picker wheel implementations out there! simple to easy, low friction api and very well designed!

I just had a question, is there a way for me to disable the brightness bar? or a way to pass in a init option?

Thanks!

I use iro.js to control my lights.
At night I want the lowest brightness available for the color.
At step 0, the light goes out and I always try to touch step 1 to reach it.
Maybe a flag would be nice to change the behavior on step 0.
Off, or the lowest possible brightness.

Is there a way to create RGB slider?
I coun't fine a documentation about it, and created my own, however, I would like to keep UI the same for all tools.
Any suggestion?

Thanks,
Arthur

Hey,

is it possible to the value registered on these events, just like how it is right now on the color:change event? this would be incredibly useful to throttle the events to get the final value

I want to use it in the project I developed with ReactJS and TypeScript. That's why I need types. Is it possible to provide this?

Hi,
i faced with problem when tried to use this awesome color picker in IE11. In IE11 picker doesn`t ends selection at 'mouseup' event. Seems problem in this function:

function unlisten(el, eventList, callback) {
	  for (var i = 0; i < eventList.length; i++) {
	    el.removeEventListener(eventList[i], callback);
	  }
}

in IE removeEventListener doesn`t removes event handler. To resolve this issue, you must modify the function as follows:

	function unlisten(el, eventList, callback) {
	  for (var i = 0; i < eventList.length; i++) {
	    el.removeEventListener(eventList[i], callback, { capture: false });
	  }
	}

Hi,

Thanks for fixing the Safari/Angular bug I encountered. And since you asked, I do have a few little requests:

• It would be nice if there were an option to set the colorwheel brightness to fixed. Because sliding the slider to dark will only show black in the wheel.
• The designers would have liked a vertical slider over an horizontal slider. So maybe an option to tweak the orientation (or position: top, bottom, left, right).
• It would be nice to be able to use custom handle styles. The designers suggested these handles:
  

Well these are all 'would be nice', but I won't stop using your library anyway :)

Hey this is a great tool! The transparency plugin makes it top level.

I work with an older color data (vb) where colors are represented in decimal format, ie, #FFFFFF equals 16777215, This website is for reference: https://www.mathsisfun.com/hexadecimal-decimal-colors.html

It would be nice/convenient to get the decimal value of the color as well as the other options you provide.

Additionally, using the wheel on a small mobile device is great! It would also be nice to dumb down the colors quite a bit for fat thumbs or when color precision isn't necessary. It would be nice to have a parameter that would change the amount of colors available: 8, 16, 32, etc., up to millions.

Just some thoughts to make it next level.

Thanks,

Jake

Hi! Thanks for all you've done and achieved here. Great project and a great API! I'd like to have the option to hide and reveal the color wheel. I followed the FAQs and can now do both with CSS . I can hide it. I can reveal it. But if I hide the wheel and then move the slider the wheel is automatically revealed again ( must be overriding my css?) Any suggestions? Many Thanks

I hope you can help.
I tried with a stupid way: g[0].innerHTML = '' in before mount event.
Remove some element and it hidden but when I clicking on the white space (show it before) It still works as if nothing had happened.
p/s: same #13

Hi @jaames

I'm completely failing to use the new input:change, and it never fires for me... I tried both Firefox and Chromium, but nothing fires.

Here's an extremely basic pen to demo it, although the whole code is :

colorPicker.on("input:change", function(color){
  console.log("change")
});

Did I understand how to use input:change wrong?
In case it's related (although I doubt it), I'm running Ubuntu 18.10

Thanks!

Hey, first of all thanks for this awesome plugin! It's a wonderful job on how it is documented and its functionality!
But so far I had no success using the "resize" method.
Below my piece of code:

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>

<div id="color-picker-container"></div>

<script>
    var colorPicker = new iro.ColorPicker("#color-picker-container", {
    width: 500,
    color: "rgb(255, 0, 0)",
    borderWidth: 7,
    borderColor: "#313131",   
    });
        colorPicker.resize(200);
</script>

I'm using firefox atm.

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?

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?

Great stuff, thanks! Deserves many more stars!

Hello, lovely library! It would be great if the watch functionality also had the ability to detect if the user is done manipulating the color, in the case that you are running a function afterwards. For example, I add colors to a palettes once the user has chosen a color. Right now, using the watch function, it adds a ton of colors if the user swipes their finger around the wheel - as it adds 1 each time it detects a change. I'd rather only add a color once they are done - as right now it will add 20 or 30 in just a couple of seconds.

I am going to try adding a listener inside the watch fn and see if I can capture the touch end or something.

thanks again!

This thread is for discussion about future additions and changes to iro.js, starting with the next major version (4.0.0) and beyond.

So far, the feedback I've received has been overwhelmingly positive (thank you!!), but I've also noticed a need for the library to evolve into something more featureful and customisable.

When I started working on this project I tried to keep it as minimal as possible, one thing that's still really important to me is finding the right balance between having a low-friction, easy to comprehend API, and having enough features for it to be useful in different situations. Hence why I'd like to take some time to consider new additions and how they can be accommodated.

I've compiled an overview of the various features and changes I'd like to see:

• Overall goals:

  • Transparency support (see #22)
  • Lay down groundwork for plugins and custom UI elements (like the swatch requested in #19)
  • New slider types for hue / saturation / transparency
  • Alternate layout directions, e.g left-to-right (see #19)
  • Add support for custom handles (also see #19)
  • New "group" component for composing layouts
  • Continue to improve documentation

• ColorPicker API changes:

  • New methods: mount, unmount, reset
  • Alias marker param with handle
  • Possibly remove the anticlockwise param and make it true by default
  • New layout param, which can be used for more advanced layout and custom UI elements:

  layout: [
    {
      component: iro.components.slider,
      type: "hue",
      height: 32,
      ...
    },
    {
      component: myCustomComponent
      custom component options...
    }
  ]

• Code improvements:

  • Tests! I really need to wrap my head around javascript testing frameworks and find a suitable way of testing that both the UI and API work correctly
  • Stop stressing quite so much about the size of the minified output, obviously keeping the library relatively minimal should still be an overall goal, but it shouldn't come at the cost of code quality
  • Rename marker ->handle, opts -> params internally
  • Consider debouncing color update events
  • Simplify internal SVG lib, add support for use
  • Add helpful warnings and checks to the dev build to catch common errors, but strip them out of the production build to keep it small

• Side projects:

  • Official iro.js component for React, Vue and possibly Angular
  • Optional integration with Chroma.js
  • Experiment with using Svelte and/or web components
  • Investigate using CSS variables instead of a full dynamic stylesheet writer

I should also note that development is going to be slow down for a bit, right now I'm trying to focus on other projects so I have a few extra portfolio pieces -- I'd like to get an internship soon :P

pointer visually is not moving but functionality is working
issue is in below link
https://codesandbox.io/s/github/spicynaresh/React-Color-Picker-IRO

onColorChange = color => {
this.setState({
color:color
})
console.log(color.hexString);
};
render() {
console.log(this.state.color);
return (

I would like to have a method for changing the current color so that this change would not trigger the color:change event. This would be useful for example when you want to set the color inside the color:change handler function in response to some changes. Otherwise it might create even an infinite event loop.

Hi
I was playing with the library a bit and it seems there an error in Chrome 68 at least.

[Intervention] Unable to preventDefault inside passive event listener due to the target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 => iro.js:1025

iro.js:1025 is

switch (e.type) {
      ...
      case EVENT_MOUSEUP:
      case EVENT_TOUCHEND:
        this._mouseTarget = false;
        this.emit("input:end", this.color);
        unlisten(document, [EVENT_MOUSEMOVE, EVENT_TOUCHMOVE, EVENT_MOUSEUP, EVENT_TOUCHEND], this);
        break;
    }
    if (this._mouseTarget) {
      e.preventDefault();  // HERE IS LINE 1025 
    }
  }

I just wanted to inform you. If I continue using your library, I will fix and will send a PR.

Thanks for your cool library.

It would be nice to also pass color params to callback function for the events:

input:start and input:end

especially for input:end.

Right now we have to do:

demoColorPicker.on("input:end", function onInputEnd() {
  console.log(demoColorPicker.color.hexString);
});

It would be better to also do:

demoColorPicker.on("input:end", function onInputEnd(color) {
  console.log(color.hexString);
});

In issue #59 you mention that the color:change event fires intentionally:

It's worth noting that color:update also (intentionally) fires once with the initial color value too

To me, this isn't straightforward.
I'm trying to prevent firing the event when programmatically setting the color, so I tried to first remove the callback, set the color, and add the callback, but then it fires again:

colorPicker.off("color:change", colorChangeCallback);
colorPicker.color.set("#00FF00");
colorPicker.on("color:change", colorChangeCallback);

I think the most obvious solution would be to not fire the event when adding the callback, but having a way to set the color with an extra boolean to trigger (or not) the event would also suit me (I think v3 had that at some point ?, like colorPicker.color.set("#00FF00", false);)

Tell me if I'm missing something obvious.

BTW, thanks for the awesome project!

In line 1380:

svgElement.call(this, this, parent, "svg", { width: width, height: height, style: "display:block" });

It would be better if that "display:block" was a param so we could add for example "display:inline-block".

Right now a new iro.ColorPicker(...) immediately returns an object but finishes initialisation of the object after the document.readyState changed to "complete".

It would be amazing if there would be an event issued after the _init function finished doing its job and the colorPicker object is completely initialized.

For example the following at the end of the _init function:

_init: function _init(el, opts) {
    ...
    this.emit("initialized", this);
},

Thanks!

I'd like to change the svg layout to 4:3 square and I like to be able to change the color gradients. I had a look in the docs but couldn't find something related to it.

Hello!
Firstly thanks for writing such a neat colour picker library!

My application uses client-side routing and I've encountered the dreaded black wheel when using Safari browsers. This only occurs when the URL has additional hash parameters, for example, 'www.mydomain.com/' displays fine. Whilst 'www.mydomain.com/#somehash' produces a functional but black wheel the same as in the closed issue 18.

I create a new instance of the colour picker after the hash navigation and then use call emit('history:stateChange') to update the SVG gradient URLs. The hash navigation doesn't change whilst the colour picker is in use. Code below.

`var colourPicker = new iro.ColorPicker('#colour-picker', {
width: 300,
height: 300,
color: "#f00",
});

colourPicker.emit('history:stateChange');`

I've stepped through the .emit function and I can see the SVG URLs being updated but the dreaded black wheel doesn't update. Can you help me pinpoint whats going on?

Hello,

Nice job with the picker. It would be nice for the user to have some basic preset colors to choose from, underneath the picker.
Cheers

iro.Color seems to round the rgb values in some cases:

new iro.Color("#fff").hexString //=> "#fff"    (ok)
new iro.Color("#eee").hexString //=> "#ededed" (rounded)
new iro.Color("#ddd").hexString //=> "#dedede" (rounded)
new iro.Color("#ccc").hexString //=> "#ccc"    (ok)

You can also see this effect by modifying the CodePen Demo (linked on the intro page) to use #eee as the color option rather than {r: 255, g: 0, b: 0}.

Is it possible to add an option for an additional transparency slider? This would make the color picker so perfect.
Thanks.

Hi,
The color picker library works great on all browsers, except Safari. Actually it is also fully functional. I can interact with it, feed it color hex and receive color updates from the library.
Except the color wheel and lightness bar are all black. What could be wrong?

Sir, is there a way we can change the color on mouse hover over the color picker?

Is there any option to place the slider vertically?

I'd like to have an option for always drawing the wheel with full brightness (V channel = 100%) regardless of the slider value.

This issue is a follow-up of the conversation in #68.

let colorPicker = new iro.ColorPicker("#color-picker", {
width: 320,
height: 320
}

How can i responsive design with this ?
because i only see fixed width and heigh on colorPicker object !