Tuesday, February 13, 2018

"Hex to RGBA" and other Colour Conversion Tools for Sublime Text 2/3

Today I'm announcing the first release of a new plugin for Sublime Text 3 (ST2 untested, but may well be supported too, *fingers crossed*) that makes it easier to work with various colour representations in code. As anyone who spends any time working with various colour pickers and colour-related API's on different platforms knows, at some point you're going to have to convert your colours from one representation to another for some reason, and then you suddenly have to waste heaps of time converting and transcribing colour values between different representations. Clearly this can be optimised (we're using modern text editors for goodness sakes!)  So, without further ado, the plugin can be found at the following Github repo:






Key Features:
* Convert Hex (i.e. #RRGGBB) color representation to a RGBA tuple (i.e. rgba(0-255, 0-255, 0-255, 0-1))
* Convert RGB(A) tuple (i.e. rgba(0-255, 0-255, 0-255, 0-1)  OR rgb(0-255, 0-255, 0-255)) to Hex (i.e. #RRGGBB)
* Convert individual colour values from 0-255 (unsigned byte) values to/from float (0.0-1.0) values
* Accessible from menus (shown in screenshot), using hotkeys (shown in screenshot too: Ctrl-Shift-R for "Convert to rgba", and Ctrl-Shift-H for "Convert to hex"), and from the command palette (Ctrl-Shift-P - I recommend searching for "hex" or "ub")

EDIT (20180215):  I've just tested it in Sublime Text 2, and it also works there. So, it's safe to say that it works on both now :)



How this plugin came about:
Fed up by having to spend heaps of time copying, converting, and transcribing colour values between various representations (namely, various combinations of Hex (#RRGGBB), RGBA-Float (0.0, 0.25, 0.5, 1.0), and RGBA Web / Unsigned-Byte (255, 127, 0, 0.1)), I started looking for plugins to automate this process a bit.

Last year, I'd already developed a bunch of text-munging utilities to automate some repetitive text editing tasks a bit (which deserve their own post sometime), so I wasn't a stranger to developing plugins for Sublime Text already (it helps that they're all Python-based :)  However, at the time, I didn't really feel like developing a bunch of new tools from scratch (though the other plugin's readme hints that I was planning on working on these tools at some point), so I went and found an addon that seemed to do what I needed.

Alas, life has a way some times - the irony is not lost on me that in the end, I ended up essentially coding most of the tools I'd planned on coding "at a later date", as the plugin in question was buggered in various ways (but looked close-enough to salvageable that I started trying to fix it)


Usage and Installation
For detailed usage and installation instructions, see the Readme.md in the repo.

Basically though, installation consists of checking out the repo (or downloading a copy) and dumping in your "%HOME%/Sublime Text/Packages/" folder.  It should be able to be used from all the usual places (as mentioned) - just select the existing colour codes to replace, then active the appropriate commands.


Future Development Plans
At this stage, I don't really intend to do any further major earthworks here in the short term. The things I've added should solve most of the pain points I encounter most of the time. There are however a few additional nice features I might consider for a future v3.0 release, such as:
  * Convert to/from various standard color names (e.g. SVG colors or X-color names)
  * HSV/HSL and Lab support
  * Bundle the colour preview popup panel from one of the plugins out there


Other things that would be nice to do at some point are:
  * Setting up some unit tests (using the Sublime Text UnitTesting plugin). I don't see many plugins actually doing this atm (at least most of the major ones I use don't), but especially with all the regex and weird syntax out there, I think it'd be worth testing this out to ward against those kinds of bugs. Plus, it looks like fun to play around with writing some tests for interactive stuff like this.

  * Get this available via the official Package Control channels.  Unfortunately, it's a whole bunch of process-tools that I don't have time investigate and navigate right now, so it might have to wait for a while.

  * Check on whether ST2 is supported (EDIT 20180215: Tested and confirmed to work). 
I actually use ST2 most of the time (for Blender dev now, and I wrote most of my thesis with it too - hence the earlier package to fix various Latex things). But, I suspect the main reason the plugin was broken in the first place was that it wasn't updated to account for some changes in the behaviour of Sublime.
Posted by Aligorith at 1:29 PM
Labels: , , , , , , ,

2 comments:

  1. AnonymousFebruary 14, 2018 at 7:29 PM

    In your re_hex_color you are matching two groups of three digits, shouldn't you search for three groups of two digits each? '\#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})' - that should let you use match.groups() in both RgbToHex and HexToRgb.

    ReplyDelete
    Replies
    1. AligorithFebruary 14, 2018 at 11:36 PM

      Hmm... that's an interesting idea, though two issues come to mind:
      1) Support for 3-letter hexcodes (e.g. #FFF, #000, #AAA - Basically #RGB). In the current formulation, the second group of 3 digits is optional, whereas in if you did 3 groups of 2 digits, you can't really do that. (Note: This part of the regex handling was largely unchanged from the original plugin)

      2) I'm not entirely sure what use only allowing for 2 digits of each would serve for a RgbToHex use-case. AFAIK, hardly any of the standard api's (or at least not the ones I deal with on a regular basis) actually let you enter base-16 values for the arguments - well, not without prefixing them with "0x" IIRC. In general RGB values are either all 0-255 or 0.0-1.0 values, so it doesn't really seem to be too worthwhile.

      Delete

Subscribe to: Post Comments (Atom)