ST2 visual theme editor and more

[dmorrill]

Hello, I’m a total ST2 noob, having just “discovered” it last week. I took it for a test drive and ended up purchasing my license the next day.

I tried downloading a few TextMate themes, but didn’t find any that really suited me. After taking a look at the contents of some of the .tmTheme files (gack!), I thought it might be interesting to try and create a visual TextMate/ST2 theme editor. Since RAD building of GUI tools is basically what I do for a living, I spent a few hours at my local Starbucks and quickly had a first pass at a TextMate theme editor GUI up and running.

The next part was how to integrate it into ST2. I tried a few different approaches over the last few days with varying levels of success. And then last night I had a Eureka moment when suddenly everything just snapped into place. I’ve attached a screen shot in case anyone is interested.

The theme editor on the right is showing a popup color picker that appeared after I clicked on the Comments/Foreground cell. After I select a new color using the picker, the ST2 editor window on the left immediately updates to show the effect of the theme change on the file text. BTW, the color picker remains on screen until I mouse away from it, making it easy to rapidly try different colors or tints.

The thing that actually has me the most excited however is that the technique is very general. I’ve attached another screen shot showing a VIP Shell window I launched from ST2 (a VIP Shell is basically a Python console on steroids).

As you can see, the shell window is showing some live data about the current state of the ST2 editor. In this case, the only thing I had to add was a new Command:

import sublime_plugin

class VipShellCommand ( sublime_plugin.WindowCommand ):

    def run ( self ):

        from facets.extra.tools.vip_shell import VIPShell

        VIPShell().edit_facets()

and a key binding:

{ "keys": "ctrl+f12"], "command": "vip_shell", "args": {} }

Since I had never heard of ST2 before last week, this is still a very early WIP, but I just thought I’d drop by to see if there might be any community interest in this work. Also, sorry for the large images. I tried scaling them down to fit, but the text ended up being illegible, so I left them at 100%…

[SeanWcom]

Wow, that’s awesome! I’m definitely interested!

As a suggestion, one thing that would make it even better (not sure if it’s possible): based on wherever the cursor is in ST2, then highlight that in your theme editor to show which option needs to be changed (if I have my cursor on a keyword, highlight that in your editor). In some cases I’m not sure what things affect which colors without a lot of trial and error.

Cool stuff!

[dmorrill]

As a suggestion, one thing that would make it even better (not sure if it’s possible): based on wherever the cursor is in ST2, then highlight that in your theme editor to show which option needs to be changed (if I have my cursor on a keyword, highlight that in your editor). In some cases I’m not sure what things affect which colors without a lot of trial and error.

I hear ya! Sounds like a good idea, and I think it should be doable, but I will need to learn more about some of the intricacies of the TextMate theme format. There are still a few things I’m a bit fuzzy about…

[adzenith]

This is awesome. I am impressed.

[dmorrill]

[quote=“SeanWcom”]As a suggestion, one thing that would make it even better (not sure if it’s possible): based on wherever the cursor is in ST2, then highlight that in your theme editor to show which option needs to be changed (if I have my cursor on a keyword, highlight that in your editor). In some cases I’m not sure what things affect which colors without a lot of trial and error.
[/quote]

OK, I did some more research on the TextMate theme format and figured out how to do what you requested, as can be seen in the attached screen shot:

In this example, the cursor was in the middle of the ‘class’ keyword in a Python file, so the ‘Types’ entry in the theme editor is selected. If I click somewhere else in my ST2 file, a different theme editor entry will be highlighted. Defintely a very useful feature…thanks for the suggestion!

[stefanpausch]

Woaw! Great work (as far as i can tell). Looking forward for a release.

[oriceon]

I agree Hello there @dmorrill and i like what you`re trying.

Woaw! Great work (as far as i can tell). Looking forward for a release.

[Mylith]

Very impressive work! How I can obtain vip_shell module (its very helpful I guess) ? Can’t find it.

[dmorrill]

In playing around with the theme editor, I ran across some anomalous behavior that caused me to revisit the cursor theme highlighting feature mentioned in my previous post. It turns out that a theme is kind of like a CSS style sheet. That is, more than one theme ‘rule’ may apply to a particular text item in the editor. If the ‘primary’ rule doesn’t define a theme value (such as ‘background color’), then it checks the next rule, then the next rule, etc. So I’ve modified the editor to highlight all matching rules, with a new column ‘S’ (for ‘Score’) that shows the rule priority (1 is the first rule to apply, 2 is the next rule to apply, …). The attached screen shot shows this change:

I’ve also added a ‘clone theme’ button (also shown in the screen shot), that creates a copy of the current theme and selects the copy for editing. This is handy for creating variants or experiments on a theme you already like but want to tinker with.

BTW, the widget next to the clone button is a drop-down selector showing all of your available themes, so you can easily switch between themes using this selector. One nice feature is that once it has the mouse focus, you can use the mouse scroll wheel to quickly cycle through your themes (which also updates your ST2 editor), allowing you to quickly audition various themes on whatever ST2 files you are editing…

[dmorrill]

How I can obtain vip_shell module (its very helpful I guess) ? Can’t find it.

Well, the VIPShell is just an example of one of the many tools that now work right out of the box with ST2. Of course, most of those tools aren’t “ST2 aware” since they were created before I had even heard of ST2. I picked the VIPShell tool as an example because, by its very nature, it could work directly with the ST2 Python API without any changes or extensions.

The VIPShell is part of the Facets package, which is what I used to implement the ST2 theme editor. Briefly, Facets is a Python package for model-driven “reactive” programming. I’ll leave it at that for now, but if there is enough interest, I can provide more details.

What graphics toolkit are you using?

Facets (see above). Assuming I understand what you mean by “graphics toolkit”, here is the Facets code that creates the main display of the theme editor shown in the screen shots:

View(
    VGroup(
        HGroup(
            UItem( 'theme',
                   editor  = EnumEditor( name = 'themes' ),
                   springy = True
            ),
            '_',
            UItem( 'add_theme',
                   tooltip = 'Edit a new copy of this theme'
            )
        ),
        UItem( 'theme_file_name',
               editor = TextMateThemeEditor(
                              interval = 500,
                              modified = SyncValue( self, 'modified' ) )
        ),
    ),
    title  = 'Sublime Text 2 Theme Editor',
    id     = 'sublime_facets.st2_theme_editor',
    width  = 0.4,
    height = 0.3
)

Like I said in my first post, to me the really cool thing is that the entire Facets package works with ST2. The theme editor is just one quick example of the kind of tool that can be built for ST2 using Facets. I’m certainly going to leverage it in my own work, but at this point I’m also curious to see if there is enough ST2 community interest to make it worthwhile looking into packaging and documenting it for use by others…

[dsarch]

I really would love to hear more about this.

Seems pretty cool, thanks for the facets tip, gotta read more about it.

Thanks !

[dmorrill]

Count me as interested. I’d like a pythonic GUI framework outside of Sublime as well.

Well, Facets should certainly fit the bill for that, and that’s the ways its used most often. This is my second experience using Facets as an embedded framework. The first was with the NewTek LightWave ‘Core’ application (a 3D graphics package ala Maya, modo, …). The Facets embedding looked very promising, but unfortunately NewTek ended up terminating developing of the Core project.

Have you read “Facets & Traits of Model Driven, Reactive Programming” by David Morrill? A good read.

Traits is the name of the first version of the package I wrote. Facets is its much improved second generation younger sibling. I’m trying to get it to an “alpha” release now. After 9 years of development it’s pretty stable, but since there are still a couple of subsystems that need major overhauls before it reaches a 1.0 level, I’m only ready to classify it as an “alpha”, since I’m reserving the right to redo some APIs in a non-backward compatible manner.

Definitely interested and would help out in any way you need.

Well, if you’re willing to get involved with “alpha” level code, I’ll put you on the list…

[dmorrill]

What ‘list’ do you mean?

At this point there is no official “alpha” release, so the “list” is virtual. I’m not ready to throw open the doors to the general public, because of the future potential for API breakage, but if anyone really, really wants to get their hands dirty now, they’re welcome to, provided they can live with the possibility of having to make changes to their code in the future for the 1.0 release. BTW, these won’t be changes every couple of days. They’re likely to be just a couple of big changes that happen somewhere along the road to 1.0 that will come with plenty of warning. And unless you’ve already got 100,000 LOC written, even those won’t be that big a deal. So PM’ing me is fine for now if you want to get early access to the code.

How are you running the event loop? Periodic sublime.set_timeout ?

No, that was part of the Eureka moment. After coming up with lots of weird schemes that might or might not work very well, I finally decided to try using the normal Facets API. And guess what…it worked! So the secret is that there isn’t anything special you have to do to make it work (other than making sure that all the right external libraries and packages end up being in the ST2 sys.path.

I could speculate as to why it just works out of the box, but since the creator of ST2 doesn’t seem to provide much detail about how ST2 is written, I won’t either

[dmorrill]

Interesting. Does the Facets have a backend system like TraitsUI seems to?

Yes, although its been totally re-architected in Facets.

Were you using qt or wx?

Qt (that’s a big hint there )

ps. I PM’d ya to get my hands dirty

Yup, got it. Already e-mailed you a reply…

[Jay_Levitt]

I spent a few hours at my local Starbucks and quickly had a first pass at a TextMate theme editor GUI up and running.

…!

I just thought I’d drop by to see if there might be any community interest in this work.

I just thought I’d mention we might be slightly interested if we’re not too busy.

YES YES YES YES YES YES

[NorthIsUp]

I am very interested in the facets library, please count me in as an alpha user

[Fed03]

can’t wait for the first public release…nid something to tweak the syntax highlighting

[s992]

Have there been any updates on this? Seems like a great tool.

If not, are there any similar applications?

[skube]

I would love this!

[Kensai]

As a representative of the non-coding users of ST2, I’d like to say that this would be very useful for us as well.

Thanks,
Kensai