(ST3) ColorHelper

[facelessuser]

After seeing the neat stuff @huot25 and @jbrooksuk are working on with there color tooltips, I started playing around with color tooltips just for grins.

The idea is that when you select a color (hex, rgb, or rgba) it will show a preview with some color info. You transform the colors to formats, bookmark colors, save and load colors to and from color palettes that can be stored either global or per project. ColorHelper will even scan your current file and show you a palette with all the colors found in that file.

If your cursor is left after the # symbol in your css, and there is no valid hex color after it, it will display the palette tooltip instead of the color info (like when you are typing a new color). The same occurs for rgb( and rgba(. This allows you to pick a color from one of your palettes.

Repo is here: https://github.com/facelessuser/ColorHelper.

[iamntz]

It would probably need a lot of clean up if I decide to seriously make something like this available

Please make it available

It really looks pretty damn awesome!

[facelessuser]

[quote=“iamntz”]Please make it available

It really looks pretty damn awesome![/quote]

Thanks . I have a number of things I’d like to do with this if I keep rolling with it. Maybe handle common web color names and, optionally, when inserting colors, use the common names if it aligns with the color. I want to improve rgb/rgba handling but it is usable as is. Maybe make a clickable button from the color info panel to initiate adding the current color to a palette, or maybe just star them to be sorted manually later. Probably per project palettes would be good too. I don’t know, we’ll have to see. I think I will end up posting it for people to play with; the code’s a bit sloppy right now, but it works pretty good. If I get enough positive responses, maybe I will officially release it. Either way, I thought the concept was neat. I kind of like the big preview of the color, and it also supports showing transparency with rgba as well with the checkered background.

[jbrooksuk]

This looks really nice @facelessuser!

Maybe handle common web color names and, optionally, when inserting colors, use the common names if it aligns with the color.

Checkout my SublimeWebColors package, it may help?

I want to improve rgb/rgba handling but it is usable as is. Maybe make a clickable button from the color info panel to initiate adding the current color to a palette, or maybe just star them to be sorted manually later. Probably per project palettes would be good too.

All of this sounds really good!

I don’t know, we’ll have to see. I think I will end up posting it for people to play with; the code’s a bit sloppy right now, but it works pretty good. If I get enough positive responses, maybe I will officially release it. Either way, I thought the concept was neat. I kind of like the big preview of the color, and it also supports showing transparency with rgba as well with the checkered background.

Now if we could make a proper colour wheel picker in a tooltip, that’d be awesome.

I really like this and would love to see it go further.

[facelessuser]

Checkout my SublimeWebColors package, it may help?

Cool, I will check it out.

Now if we could make a proper colour wheel picker in a tooltip, that’d be awesome.

I have actually thought about this and I think there are two ways to accomplish this:

1. One could be implemented similar to this w3schools.com/tags/ref_colorpicker.asp. Create an image chop it up with key regions made as links. The brightness portion one could be auto generated, and you could throw in one that gives you options of saturation tones. But with that said, it would be limited. You can truly get what you want unless you did it and had access to mouse cursor positions and such via Javascript.

2. The better option is to probably remove the idea of having the color picker embedded in the tooltip. Instead, I could have a little eyedropper icon (or maybe something else) that you click and it opens your system color picker. I could accomplish this by leveraging wessly’s github.com/weslly/ColorPicker. The bad part is that I don’t think it is really coded in a way to be used like a library where you could intercept the color. The needed scripts and binaries wrappers are there, so I could just call his binaries or scripts directly and re-write the trivial wrapper code that is needed, but I would need permission from him to do this as I have looked at all his code; I don’t see a license so I would probably have to ask him. I guess a pull request to weslly’s repo could also be done rewrite it in such a way it could also be used as a library in another plugin where I can intercept the color and do what I want with it (he would have to be on board though).

[facelessuser]

I think I will release a preview of this once I rewrite code to detect when the cursor is on a color. I think this allow me to handle hsl and hsla colors as well. I think I would also like to look into implementing the web colors. After that, I think I will post a repo where people can play with it.

[huot25]

That looks pretty freakin’ awesome! I cant wait to download a copy and play with it a bit.

One thing I was going to add to my plugin was the ability to import .ase files so a users could import a set color palette from Adobe products or website apps like kuler or colourlovers.com. Making that a seamless process would make me very happy !

Nice job!

[weslly]

2. The better option is to probably remove the idea of having the color picker embedded in the tooltip. Instead, I could have a little eyedropper icon (or maybe something else) that you click and it opens your system color picker. I could accomplish this by leveraging wessly’s github.com/weslly/ColorPicker. The bad part is that I don’t think it is really coded in a way to be used like a library where you could intercept the color. The needed scripts and binaries wrappers are there, so I could just call his binaries or scripts directly and re-write the trivial wrapper code that is needed, but I would need permission from him to do this as I have looked at all his code; I don’t see a license so I would probably have to ask him. I guess a pull request to weslly’s repo could also be done rewrite it in such a way it could also be used as a library in another plugin where I can intercept the color and do what I want with it (he would have to be on board though).

Well, I can give you push access to the repo if you are interested. I didn’t have any free time for the past year so I actually need help to maintain the plugin.

[facelessuser]

One thing I was going to add to my plugin was the ability to import .ase files so a users could import a set color palette from Adobe products or website apps like kuler or colourlovers.com. Making that a seamless process would make me very happy !

This doesn’t look too complicated. I just opened one in a hex editor, and it looks like it wold be fairly easy to reverse engineer, though I imagine there is probably a spec sheet somewhere to make it easier.

[facelessuser]

Well, I can give you push access to the repo if you are interested. I didn’t have any free time for the past year so I actually need help to maintain the plugin.

Cool, I saw you just did. I will take a little time and refactor the actual color picker stuff to a separate object that sublime commands can wrap around. To avoid people having directly import your source, maybe I can then add a simple command to write it the color to the view settings or maybe to a given sublime settings file. That way the data can be shared real in a simple way. If people really want to import the source, that would work as well.

Maybe while I am at it I can knock out some other issues as well.

Thanks, weslly!

[huot25]

This doesn’t look too complicated. I just opened one in a hex editor, and it looks like it wold be fairly easy to reverse engineer, though I imagine there is probably a spec sheet somewhere to make it easier.

I was going to use this as a starting point to see if I could make something happen. Colourlovers is using the following php script to create the ase files. Maybe it will help.
http://www.colourlovers.com/ase.phps

[facelessuser]

ASE reader and writer gist.github.com/facelessuser/80 … d206c05cf9. I was able to read palettes from colourlovers and kuler. It was able to translate back and forth without issue. Binaries were 1:1 for colourlovers, but varied slightly with kuler, but the data translated perfectly regardless; this most likely stems from the floats sometimes being slightly different in precision due to maybe rounding or something, but the content still translates on read completely to what it should be.

[facelessuser]

Oh, and the ASE spec is here: selapa.net/swatches/colors/f … #adobe_ase. This is mainly what I used to write the lib.

[facelessuser]

Repo is available for playing: github.com/facelessuser/ColorHelper.

Reworked the auto-color detection stuff, hsl/hsla and webcolor names are supported now. Currently, if a color is being inserted and it has a web color name, it will use the webcolor name. That will probably be optional in the future.

[iamntz]

Repo is available for playing: github.com/facelessuser/ColorHelper.

Although I’m not too sure (yet) how i can set multiple colors for a project, this looks great!

[facelessuser]

Although I’m not too sure (yet) how i can set multiple colors for a project, this looks great!

Thanks! Make sure if there are things you want in this plugin, or ideas on how you think it should change, to make sure you elaborate here. This was mainly a fun experiment, so I haven’t thought everything out yet. And keep in mind, I am not a web developer (I just goof around with some web stuff on occasions), so I very likely haven’t looked at this from that kind of an angle, so hearing how a web developer may actually use this will give me insight. I obviously won’t promise everything suggested here will make it in, but I am open to suggestions for the future of this.

[iamntz]

In one of your first pics posted on this thread, you had some kind of color picker (image 2 & 3), which i’m not sure how i can replicate.

However, in terms of functionality, would be nice to:

• scan project for all colors (and provide an option to re-scan at any time)
• specify a prefered color format (e.g. hex, rgb/a) per project
• be able to insert an existing color
• group colors by usage rates, nuances, etc
• suggest replacing similar colors (e.g. if you have 5 #fffffe and one #ffffff, suggest to replace the later)
• provide links to where the same color was used on the project before (would be even nicer to be context-aware; i.e. if i’m inserting a text color, don’t display border-color or background)

[facelessuser]

In one of your first pics posted on this thread, you had some kind of color picker (image 2 & 3), which i’m not sure how i can replicate.

Click the colorbox of the preview panel. I think I mention it on the OP. Also, it should, when you are typing things like #, rgb(, rgba(, hsl(, or hsl(, show the panel to select pallets/colors from.

FWIW, functionality is the first priority, so thinks like this will be fast-tracked:

- specify a preferred color format (e.g. hex, rgb/a) per project

I think I will be adding a general bookmark system for colors, where you can click a bookmark icon on the preview and it will add the color to a global bookmark palette, maybe project specific if/when I get that far.

I think I want to address how we can handle replace multiple colors, maybe show tooltip of first color in visible region. ColorHelp doesn’t necessarily care that cursors are placed proper for replace; only the auto show tooltip cares. So maybe I can just adjust the logic of the auto tooltip to show with multi-cursors, but focus on the first visible cursor. And on replace, you just need to make sure your cursors are where they need to be. I may even expose a limit to how many colors it will replace as I do calculate how I should replace.

Project stuff will probably come last as I first want to make the interface as good as possible, and I need time to think about a good indexer (@huot25 ran into performance issues which I would like to avoid if I go down that route), but I think so far I am on board with these for the future:

- scan project for all colors (and provide an option to re-scan at any time)

This would obviously come when I am aware of exiting colors in the project:

- be able to insert an existing color

Here we are getting real fancy, so I will have to see how well things go and how motivated I am when I get to this point :

[quote=“facelessuser”]- group colors by usage rates, nuances, etc

• suggest replacing similar colors (e.g. if you have 5 #fffffe and one #ffffff, suggest to replace the later)
• provide links to where the same color was used on the project before (would be even nicer to be context-aware; i.e. if i’m inserting a text color, don’t display border-color or background)[/quote]

[facelessuser]

Had some bugs in color insertion (really hadn’t tested it that well), but that should be resolved now.

[facelessuser]

You can now set your preferences of what is used for color and alpha colors globally in the settings. You can also specify whether you want to use webcolor names if available.

Will probably add the option to specify case of hex colors soon 'cause I know I’m going to get that request later .