Home Download Buy Blog Forum Support

ST2 visual theme editor and more

ST2 visual theme editor and more

Postby dmorrill on Thu Oct 20, 2011 12:40 pm

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.

st2_theme_editor_2_50.jpg
st2_theme_editor_2_50.jpg (233.6 KiB) Viewed 10592 times

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

st2_vip_shell_50.jpg
st2_vip_shell_50.jpg (225.6 KiB) Viewed 10565 times

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:

Code: Select all
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:

Code: Select all
{ "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%...
dmorrill
 
Posts: 11
Joined: Sun Oct 16, 2011 4:47 pm

Re: ST2 visual theme editor and more

Postby SeanWcom on Thu Oct 20, 2011 2:40 pm

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!
Multiple selections... one of my favorite ST2 features. View some noob-friendly screen casts here.
SeanWcom
 
Posts: 101
Joined: Wed Aug 03, 2011 1:31 am
Location: Georgia

Re: ST2 visual theme editor and more

Postby dmorrill on Thu Oct 20, 2011 3:12 pm

SeanWcom wrote: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...
dmorrill
 
Posts: 11
Joined: Sun Oct 16, 2011 4:47 pm

Re: ST2 visual theme editor and more

Postby adzenith on Thu Oct 20, 2011 5:07 pm

This is awesome. I am impressed.
adzenith
 
Posts: 1214
Joined: Mon Oct 19, 2009 9:12 pm

Re: ST2 visual theme editor and more

Postby dmorrill on Fri Oct 21, 2011 6:08 am

SeanWcom wrote: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.


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:

st2_theme_editor_3_50.jpg
st2_theme_editor_3_50.jpg (47.74 KiB) Viewed 10358 times


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!
dmorrill
 
Posts: 11
Joined: Sun Oct 16, 2011 4:47 pm

Re: ST2 visual theme editor and more

Postby stefanpausch on Fri Oct 21, 2011 7:22 am

Woaw! Great work (as far as i can tell). Looking forward for a release.
stefanpausch
 
Posts: 19
Joined: Mon Oct 03, 2011 5:39 pm

Re: ST2 visual theme editor and more

Postby oriceon on Fri Oct 21, 2011 9:14 am

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

stefanpausch wrote:Woaw! Great work (as far as i can tell). Looking forward for a release.
oriceon
 
Posts: 56
Joined: Tue Jun 14, 2011 6:06 am

Re: ST2 visual theme editor and more

Postby Mylith on Fri Oct 21, 2011 10:02 am

Very impressive work! How I can obtain vip_shell module (its very helpful I guess) ? Can't find it.
Mylith
 
Posts: 30
Joined: Mon Oct 17, 2011 12:58 pm

Re: ST2 visual theme editor and more

Postby dmorrill on Fri Oct 21, 2011 11:32 am

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:

st2_theme_editor_4_50.jpg
st2_theme_editor_4_50.jpg (45.14 KiB) Viewed 10269 times

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
 
Posts: 11
Joined: Sun Oct 16, 2011 4:47 pm

Re: ST2 visual theme editor and more

Postby dmorrill on Fri Oct 21, 2011 1:17 pm

Mylith wrote: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.

sublimator wrote: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:

Code: Select all
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...
dmorrill
 
Posts: 11
Joined: Sun Oct 16, 2011 4:47 pm

Next

Return to General Discussion

Who is online

Users browsing this forum: jfcherng, rgidney and 42 guests