New Terrarium UI

So I’ve spent the evening working on the UI for the 1.2 version of Terrarium. (This is the version built on .NET 1.1 and will sync with the release of the source code).  At first I was going the Photoshop route for the buttons, etc. but realized that I could do much of what I was doing just using GDI+.  So here is a screen shot of tonight’s progress:

Obviously the UI is just laid out in “skeleton” mode right now, with none of the Terrarium functionality hooked up to it.  I also need to create some icons for a few of the items.  It supports a very basic “skinning” functionality as well.  Via an xml file, you can provide all of the colors for the gradients, buttons, etc.

[Edit: I’ve updated it with a more recent shot….]

Comments (10)

  1. Ferris Beuller says:

    Blank screen, PERFECT!!

  2. Brian says:

    What’s the deal with Terrarium? I’ve never come across the page until today and it looks like a ton of fun. I am going to create a bug to let loose myself. However, the forums appear kind of dead, there is nowhere to study other people’s bugs and as far as I can tell there was a contest last year that no one knows who won… Is the project still going, still actively competitive, etc?

  3. Mitch Walker says:

    Yup. Terrarium is still going on. There is a bit of a lull right now, but it should pick up soon as we release the next version. This will include the source code, so we should start to see some neat variations.

    Read the advanced developer’s guide as well as take a look at the Animal Farm. Quite a few people have posted various algorithms as well as full implementations of bugs.

    Have Fun!

  4. Can you post the latest source code? I am developing a Tablet PC app and I’m trying to decide if I should use Photoshop images or straight GDI+ for my graphics.

    Basically, I want to learn how you create that full-screen window without any WinXP decorations for the titlebar, etc.

  5. Mark, creating a basic window without the WinXP decorations is fairly easy. I examine creating a completely blank, transparent form in one of my blog posts:

    In most cases you are going to want to use straight Photoshop images for your buttons. Unless of course you want to support skinning like Mitch says above. Here are some basic guidelines:

    1. Are your graphics always going to be the same size? If yes then use Photoshop.

    2. Are your graphics always going to be the same colors? If yes then use Photoshop.

    3. Are your graphics relatively complex? If yes then use Photoshop.

    If any of the above are no, then you’ll want to use GDI+ or some mixture of static images and GDI+. For Mitch, rendering the panels using a gradient in Photoshop is easy, until he resizes things and the images stretch causing artifacts. In his case gradients were the best approach. Not to mention his skinning modes.

  6. Mitch Walker says:

    You guys should see the Skin Editor I created today. 🙂

  7. We don’t beleive you 😉

  8. Okay guys, I’ve gotten to play with this UI and the style editor. I have to say it is pretty cool.