Sublime Forum

(ST3) ColorHelper

#5

Cool, I will check it out.

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).

0 Likes

#6

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.

0 Likes

#7

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 :smiley: !

Nice job!

0 Likes

#8

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.

0 Likes

#9

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.

0 Likes

#10

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!

0 Likes

#11

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

0 Likes

#12

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.

0 Likes

#13

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

0 Likes

#14

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.

0 Likes

#15

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

0 Likes

#16

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.

0 Likes

#17

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)
0 Likes

#18

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:

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:

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

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 :wink::

[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]
0 Likes

#19

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

0 Likes

#20

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 :wink: .

0 Likes

#21

Now indexes colors in CSS, HTML, or PHP file when it is opened or saved. This is currently done by file extension.

Current colors are shown as a palette in the palette panel which you can select colors from. On demand, manual index command is provided.

0 Likes

#22

Some small bug fixes and improvements have made it in, and also a new feature allowing the colors to be bookmarked in a special palette called Favorites. I plan on adding a way to add colors to other palettes through the UI , but the bookmark feature allows you to add colors real quick clicking the bookmark icon on the color info panel.

So give it a try and let me know if it is something that should stay. By the way, palettes are now split out into a separate file now: color_helpers.palettes.

0 Likes

#23

I added a way that other plugins can call @weslly’s ColorPicker plugin (though it hasn’t been released yet, I but probably soon) and added support to call it from ColorHelper. To make things more obvious, I have added a palette icon, a dropper icon, and the bookmark/fav icon for opening the palette panel, opening the color picker, or bookmarking the current color respectively. I know the icons rendering is not the best, but that is because of Sublime HTML renderier. I still think meh icons are better than verbose links. Anyways, feedback is welcome, and hope everyone likes the recent changes.

I think the next step is creating a way to add colors or remove colors from palettes and even create new palettes or delete existing ones. I think after that, I can think more about how colors would be managed in a per project way and how they may or may existing along side global ones.

After all that, I may start thinking about project scanning, but I make no promises. I’m going to need to think how I can do it without impacting performance, and probably implement a simple caching system to keep from scanning stuff that doesn’t need scanning again…I don’t really care to think about all of that now.

0 Likes

#24

A number of new things have been added:

  • Now can delete colors from a palette via the UI
  • Now can delete whole palettes via the UI
  • Can now add a color to an existing palette via the UI
  • Somewhere I along the line I broke color indexing of the current file; this is fixed again
  • weslley released a new Colorpicker version which should now work with ColorHelper
  • Evan better color detection in files. Please see settings file to tweak behavior

So I still need a way to add a color to a non-existent palette (create new palette). That should be coming soon. I think I am also going to offer a way to convert colors to different formats; need to think about how to work that in the UI.

I think after that, I am ready to think about per project stuff. Along the way I need to figure out a flow for importing ASE palettes.

0 Likes