iro.js 5.0 discussion #83
Comments
|
i would really like the kelvin scale to be implemented. i am designing a app now to control led lights and this would be a added bonus. also might b able to add it to the esp8266 milight hub |
Small update: I've made a semi-working Svelte port of the standalone version of iro.js. I'm not convinced that it's worth going forward with this idea:
I'm going to investigate updating the codebase to make use of new Preact X features and see how that works out instead :) |
Pull request #85 adds the groundwork for this via a global |
I made some pretty good progress with this today! The Typescript port is complete, although it needs a bit of polish, and I think I may eventually move the build process over to microbundle to simplify that a bit. I've also been thinking a lot about how the "split-core" idea could work. My initial plan was to separate all of the code that wasn't directly related to the UI (e.g. color conversion) into an "iro-core" package and leave the UI implementation ambiguous, although on second thought I think it's also sensible to expose some generic UI utilities (like some methods to get the handle position for a slider given a specific color, or getting the orientation of a hue wheel when given specific options, etc). This would make it a lot easier for different UI implementations to remain consistent, and a nice added benefit is that all these methods could be easily tested with the current automated test setup! |
|
I made some significant progress with the split core milestone! You can see the new iro-core package at https://github.com/jaames/iro-core This will act as a base set of functionality thats shared across multiple UI implementations, including the current standalone version of iro.js and any future components for specific frameworks like React or Vue :) |
|
Would be great to also support multiple thumbs with numbers for choosing multiple colors on one picker. |
|
@DanielPeinhopf Thanks for the input! I can see how picking multiple colors at once might be useful, I'll have to think about how to implement that though :) |
Also, I just implemented an optional hue-saturation square to see how it would fit with the rest of the picker. This means iro.js could be made into the same type of color picker you see elsewhere.
It doesn't add too much extra code (<1kb), but I'm not sure if anyone is desperate to have this as an option. Would it be useful? |
|
Have you looked at stencil? |
|
@jcesarmobile Stencil is neat, I've used it before for an unrelated project My only real complaint is that it lazy-loads extra polyfill scripts, since my motivation for creating iro.js came from wanting a colorpicker library that could be dropped into a project as a single script without any extra jQuery / images / css / etc, I feel like it wouldn't be suitable I might consider it again in the future, their fall 2019 roadmap looks promising :) |
|
Taking a short break from code to mock up a new design for the iro.js.org landing page. The current one is pretty minimal and doesn't really show what iro.js can do very well. I decided I want to put more focus on being a bit more flashy and visually demonstrating what sets iro.js apart from other javascript color pickers. I also think it's important to have a basic setup guide on the initial landing page now, especially when there's going to be three separate packages (iro.js, iro-react and iro-vue). Users will be able to toggle between packages to show setup information for the one that's most relevant to their needs. I welcome any feedback on this preview! Just note that it's definitely not 100% finished yet :)
|
|
I love it. Cant wait to see it in action 😍 |
Would a brightness slider fit in there as well ? And to top it off - a slider without a wheel (as some lights only support brightness and no color). Or is that like the last example on the mockup ? Would be nice. |
|
@bakman2 Removing components (and adding extra ones) can already be done with Custom Layouts, although granted, redoing this documentation is on the to-do list since it's not particularly obvious right now :) I'm unsure if a brightness slider (referring to the intensity of a light source rather than the color of it?) is really within iro.js' area of expertise, I'd prefer for it to focus on manipulating and choosing a color and let devs build extra controls around it if they need anything else. |
|
Thanks for your response
I am referring to the L/V in HSL/V, but I guess that is already covered Do you perhaps have a little hint how I can use this library in vue ? When I include it in my main index.html, somehow I cannot initialize a new picker (using the mount option referred somewhere else in the issues, and using the vue mount() method) - sorry it is offtopic |
|
@bakman2 for now there's a wrapper; https://github.com/irojs/vue-iro-color-picker. This was written by a third party and I'm yet to do any work on it myself, so I can't guarantee that it's totally complete, but it might be useful to reference at least. In the next week or so I intend to write React and Vue implementations of iro.js as part of the 5.0 milestone. |
|
Speaking of which, it's probably time for a progress report! iro.js 5.0 is mostly complete and on feature-lock, the current changelog looks something like this: Additions
Breaking changes
Bundle size
From this point I'm going to focus on code cleanup and new documentation so I can get a 5.0 beta out, after that I plan to work on the React and Vue components and the new landing page. The first beta should be ready to try in a couple of days, and hopefully 5.0 will be complete in the next week or two depending on how my schedule goes -- I'm also currently working on applying to a job at the same time so I might get a little busy :) |
|
A 5.0.0 beta is now available if anybody would like to try it! This is a beta so obviously I don't recommend using it in production, and documentation is still in progress. From NPM: Manual download: https://raw.githubusercontent.com/jaames/iro.js/v5-dev/dist/iro.min.js |
|
Hey, sorry for the lack of progress. TBH I've been really struggling with burnout recently and I'm finding it difficult to find motivation to keep going with this project. The job hunt I mentioned also hasn't been going very well -- I live in a very tech-illiterate area and moving isn't possible, so there aren't a lot of options to begin with, and those who are hiring don't seem to be interested in anybody under the age of 30. Overall I feel like I'm stuck in a bit of a rut ¯\_(ツ)_/¯ I'm not, like, starving or anything, so please don't feel obligated, but I would greatly appreciate it if people would consider donating to help support my work on this. I still think open-source is cool but throwing endless hours into something just so that other people can make ungodly amounts of money from your work while you literally get nothing in return... kinda honestly sucks Thanks :) |
|
@jaames I would be happy to sponsor some work on selecting multiple colors in a single color wheel. I'm trying to replicate the functionality of something like https://color.adobe.com/ I don't have a ton of extra cash, but definitely interested in helping further this along 😃 |
|
Sorry for the slow response @rwwagner90, I really appreciate the offer! Multiple colors should be totally possible, although in order to fit in with other features of iro.js I might have to depart from the way Adobe Color does things a tiny bit. Can I ask how closely you're hoping to replicate the functionality of Adobe Color? Are you just looking to have multiple colors on one picker or do you also need color harmonies etc? |
|
@jaames I am implementing the harmonies myself, I would just need the color wheel to accept multiple values and I would supply the values. |
|
@rwwagner90 Alright, that shouldn't be too complicated then! I'm going to be a little busy until the new year, but I'll start working on multicolor and wrap up iro 5.0 as soon as I can after that :) |
|
@jaames what's the best way to donate to the cause? |
|
@rwwagner90 I usually take donations for iro.js via PayPal if that works for you, otherwise I could try getting set up with GitHub Sponsors or something |
|
@jaames GitHub sponsors should have matching I think, unless that is over now. Maybe try setting it up? |
|
LEDs are very different in its behavior so this should be handled as close as possible to the hardware. So i think your LED controller should handle this. |
|
@rwwagner90 I put together a beta build with multicolor support! Everything works as detailed in the feature proposal, except From NPM: Manual download: https://raw.githubusercontent.com/jaames/iro.js/v5-dev/dist/iro.min.js I have to focus on freelance work next week, but after that I'll get everything polished for release and return to work on writing v5 documentation and updating the iro.js.org website. :) |
|
Awesome, thanks @jaames! I will play with the beta in the next day or two. |
|
@jaames is there a way to set the selected colors programmatically? I'm able to get it to render with the list of colors, but then I do not know how to overwrite the list with a new set of colors. |
|
@rwwagner90 Yep! Once the color picker is set up you can access the selected colors with Here's some example code to make it a bit clearer: // Create a color picker with multiple colors
const colorPicker = new iro.ColorPicker({
...
colors: [
'rgb(255, 0, 0)',
'rgb(0, 255, 0)',
'rgb(0, 0, 255)',
]
});
// Log the first color value as hsl
console.log(colorPicker.colors[0].hsl) // logs {h: 0, s: 100, l: 50}
// Set the first color to green
colorPicker.colors[0].rgbString = 'rgb(0, 255, 0)';
// Set the second color to white
colorPicker.colors[1].hsv = { h: 0, s: 100, v: 100 };
// Copy the hsv value of the second color to the third color
colorPicker.colors[2].hsv = colorPicker.colors[1].hsv;Also, while they're not documented yet, there's lots of new iro.Color properties in v5 if you'd like to give them a whirl! They're listed here under "New iro.Color properties": #83 (comment) |
|
@jaames I need a way to change the entire array of colors, insert and remove colors etc. I'm thinking like colorPicker.addColor('#ffffff');
colorPicker.removeColor('#ffffff');
colorPicker.setColors([
'rgb(255, 0, 0)',
'rgb(0, 255, 0)',
'rgb(0, 0, 255)',
]);The use case is for selecting a color palette and changing out all the colors to match the palette. An alternative would be to create a new iro instance each time, but I wasn't sure the correct way to destroy the existing one before creating a new one. |
|
@rwwagner90 I'll look at adding something like iro.ColorPicker.prototype.setColors = function(newColorValues) {
// Unbind color events
this.colors.forEach(color => color.unbind());
// Destroy old colors
this.colors = [];
// Add new colors
newColorValues.forEach(colorValue => this.addColor(colorValue));
// Reset active color
this.setActiveColor(0);
} |
|
The new multi color picker is great 👍 |
|
@jaames ah, thanks! I did not see |
|
@rwwagner90 no problem! yeah, theyre new, they were added as part of the multicolor proposal above :) @DanielPeinhopf I like those ideas! I think I'll save them for a future version though, I really need to focus on updating documentation for now |
|
@jaames how are things going? |
|
I need a way to know which handle is associated with which color, so I can "select" the handle and style it differently, move it above all other handles, etc. Is this something that is currently supported? Like how on color.adobe.com when you click other colors it moves the handle above all the other handles. |
|
@rwwagner90 Things are going alright! I'm still working away on updating the documentation website, progress has been a little slow since I've also been busy with freelance work and applying to a job, but it is very nearly done now. I just need to give it a bit more polish and write some examples to demonstrate new features. At the moment the handle for the currently active color should always be drawn on top of the others. SVG doesn't really support anything like CSS' z-index, so the 'top' handle is always last. As such, it's possible to target the 'active' color's handle with a CSS selector like I'll look into making it a bit easier to target specific handles after the docs are done :) |
|
@jaames sounds good! Docs in general are definitely more important.
Sounds like we may need a function like |
|
@rwwagner90 There's a Obviously the multicolor stuff isn't publicly documented yet (...heh), but here's the relevant part of the source if you want to see what's available: Lines 79 to 113 in e66e0ee |
|
@jaames |
|
@rwwagner90 It's the same method called internally when you interact with one of the UI handles, so as long as the last handle you interacted with is shown on top of all the others, it should definitely be working correctly. In lieu of documentation I put together a quick Codepen demo, hopefully that will help make things a bit clearer :) https://codepen.io/rakujira/pen/bGddRyq?editors=0010 |
|
@jaames I was passing the index. It still doesn't seem to work for me. However, I do not have a reference to the actual color index, I was just setting to the index it was from the order of colors I had. If I set all the colors a few times, does the index keep growing? I wonder if with several palettes, my indices are like 15, even though I only have 4-5 colors. I suppose I should find a way to store the index somehow to be sure. |
|
@rwwagner90 Ah, my bad. The color index shouldn't keep growing, assuming that you're using the I'll take a deeper look tomorrow since it's getting late here, but sounds like there might be a bug on my end somewhere if that doesn't work as expected. |
|
@jaames I'm doing this |
|
@rwwagner90 That looks correct to me. I made a basic multi-palette demo on Codepen to test, and everything seems to be working okay as far as I can tell. Not sure if there was something I missed? The only change I made was having https://codepen.io/rakujira/pen/poJJYVP?editors=0010 I should maybe mention that only the active color handle is guaranteed to be drawn on top of the other ones. The other handles will be drawn in the same order that they're provided to the color picker with. |
|
@jaames when I call |
|
@rwwagner90 That's really strange. Just to rule out any potential browser differences, does that last Codepen work for you? It shouldn't matter whether you use color objects or hex values, etc -- I'm not extremely familiar with Ember, but is there a chance that it's doing something that affects the color picker in some way? If you don't manage to get to the bottom of it, I think a reproduction repo would be helpful. |
|
@jaames yeah, the codepen works for me. I will debug more later and report back. To confirm, this should work in 5.0.0-5 right? |
|
@rwwagner90 Yeah, 5.0.0-5 is the right version. |
|
@jaames I got it to work. I was doing something dumb. Sorry about that! I was just looking at the image above of the new stuff like the square picker, additional slider types, etc and I was curious if that stuff had also been implemented? I would love to try some of it out 😃 |
|
@rwwagner90 Hah, no worries! Yep, those are implemented now! The documentation can be found here: https://iro.js.org/advanced.html#custom-ui-layouts |
|
Also, I finally published iro.js v5 and the new documentation site! I'm going to continue working on things over the course of the next week or two, so there's still some pending changes on the docsite and little bits like the readme that I need to finish. :) But without further ado, here's the full v5 changelog! 🎉
Additionally, there's some smaller features that I'm hoping to add next week:
I'm sorry that it's taken me so long to finish all of this - it's been a pretty big undertaking! I also owe a huge thanks to @rwwagner90 from Ship Shape for sponsoring the project, it's really helped out a lot :) I'm going to close this thread now, but please feel free to continue the conversation! You can also reach me via email, Twitter or Discord ( |
|
Thanks so much for all the hard work @jaames! We'll hopefully be announcing our product using your library soon 😃 |
What a wild year! iro.js hit 500 stars on Github, over 1000 NPM installs per week, and was featured on a number of web publications such as Creative Bloq, Codrops and JS Weekly!
I've been thinking a lot about what the next steps for this project might look like now that it's finally stable and fitting most people's requirements pretty well. I figured it would be worth sharing my ideas for discussion:
Svelte has matured a lot recently, and it seems like a good time to investigate whether it's worth using it for the standalone version instead of Preact.Wasn't worth it, trying Preact X instead.An option to choose a vertical layout has been requested for a long time, it's probably time to make an effort to implement that.Pull request Support vertical sliders #85 adds a globallayoutDirectionoption, this will be merged after the Typescript + Preact X ports are completedI think this would take iro.js to the next level and make it one of the best damn color picker libraries out there. I welcome everybody's opinions though!
The text was updated successfully, but these errors were encountered: