BlackBerry Forums Support Community               

Closed Thread
 
LinkBack Thread Tools
Old 05-10-2009, 12:27 AM   #1 (permalink)
New Member
 
Join Date: Feb 2007
Model: 8900
Carrier: T-Mobile
Posts: 5
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default 8900 theme - walkthrough with ThemeBuilder/Composer

Please Login to Remove!

Hi All,

Well, I finally created my first full-fledged theme. Being a programmer, not an artist (by a long shot!), some may question my aesthetic sense. Anyway, here are the two main reasons I undertook his endeavor:

1. I wanted more (and smaller) icons on the home screen, but I also wanted to see my backgrounds.
2. I wanted smaller text throughout.

Can you sense an overarching theme? I like things small! I *think* I've attached some screen shots (if I can figure out how to get them posted! -- I think I got the first five; I'll post the rest separately).

I also created this theme to learn more about ThemeBuilder. I didn't realize I would need to get into Composer to create the different sized buttons; nor did I realize how quickly I needed to get *out* of Composer to get things to work the way I wanted.

ThemeBuilder Notes:

As I started playing with ThemeBuilder I found quite a few quirks -- I think all have been mentioned here or there in various forums, but here's my list:

If you customize anything on the applications screen in ThemeBuilder, then when utilizing the theme on your BB, you get the mysterious bug (feature?) where setting a custom home screen image also changes the image on the applications screen. The customizations necessary to trigger this may be more specific than changing "anything," but I didn't bother to track this down. The bummer is once your theme is "infected" this way, it's permanent. But since it can be cool to have the background display on both your homescreen and applications screen, I can live with this and now consider it a feature.

If you change *anything* about the list font (color, size, font, etc) then you get the mysterious bug whereby certain text (most noticeably the non-highlighted text on the Profiles menu) appears dark -- this is circumvented (somewhat) by choosing a slightly lighter color for the list text (I use RGB 60,60,84) so that the Profile text is slightly readable.

You can't seem to change the two alarm indicators separately (applications vs homescreen) -- once you change one, the other follows along. Not a problem really, but initially they start off different. I wish the .thm format was published. You probably could tweak some values in there to fix a lot of these issues!

You don't seem to be able to completely remove Today icon text -- the trick of setting it to a size of 1 doesn't work in all cases (it can still show up as a single pixel on screen), and makes controlling alignment of the icons in ThemeBuilder a pain in the butt, as the text (even at size 1) still affects the width of the control. This became less of an issue after I abandoned Today icons for my smaller SVG created icons (more on those later).

Some of the UI elements you can customize use "tiled" bitmaps to get a larger effect from a smaller bitmap. This can be a pain to deal with (especially since I'm such a lame artist) and I often was confused about exactly what was going on (especially with the Message List background). If you check out my theme, you'll see a teeny calendar icon on the mail header line. I'm awfully proud of that!

I used/stole/borrowed and created (only when totally desperate icons and backgrounds. I made use of the sample icons from Plazmic install (e.g. to get smaller mail icons to match my teeny font) I heartily recommend Paint.NET for image manipulation. It is great and it is free!

Customizing icons is relatively straightforward -- most of the icons are in a tiled format; i.e. a number of them are packed side-by-side into a bitmap. Internally these are just chopped up based on how many are expected -- if the internals want 8 and your bitmap is 800 pixels wide, each icon will be 100 pixels wide.

Moving the OS icons (transmission and key modifiers) is fun -- well, at least unpredictable, until I figured out what was going on. Again, customizing these seemed to cause problems (I forgot if resetting to default fixed this) without realizing that you need to add transparent space to position where you want (they always seem to draw in the upper right corner -- so if you want them in the lower left, you'd need to create a bitmap with a huge area of transparency in the upper right, with your little icon all alone in the lower left).

I finally figured out how to create an animated GIF that worked in my theme, but didn't actually find one I liked better than the Plazmic-CDK included dimension hourglass cursor (I *hate* the precision hourglass). To get them working I saved as an animated GIF (agif) from Paint.NET after making sure what I wanted to be transparent was actually white (this is different from normal GIFs). Go figure.

The simulator works reasonably well -- especially after I realized I didn't have to kill it after each try. The problem I found is that I could never close it, so I stupidly assumed I needed to kill it before rerunning my theme. When I finally (accidentally) started the simulation up without having killed the running simulator, I was pleasantly surprised to see it work.
On the other hand, eventually the simulator seems to stop working. I spent a fair amount of time debugging my home screen SVG animations before realizing I was not the problem (well, at least not the only one!). So occasionally I kill the simulator, when my changes (especially SVG) don't seem to "take."

When testing out new SVG files, try on a test theme first -- that way if you hose the buttons your theme doesn't lose all its navigation information (can you tell this happened to me more than once?)

Sometimes ThemeBuilder will get *really* slow -- usually opening .thm files, or firing up the export dialog. I clicked "Export" and started typing this writeup. About ten minutes later, the Export dialog popped up. Sometimes, though, it's immediate. Don't know if there's any issues/interactions with the simulator and/or the Desktop Manager.

Now on to Composer (or more appropriately SVG)...

Composer Notes:

I found this program daunting to start with, but slowly figured out how to create smaller buttons and assign application slots (or specific applications) to them. I found a lot of what I would call bugs (or at least inconsistencies) changing values through the different Composer UI components. Sometimes the buttons would resize, sometimes the slot order assignment (i.e. which application to use) would get lost. Also, some of things I wanted to do (e.g. change opacity of buttons based on triggers) seemed hard (impossible?) to do in Composer.

But I did get something limping along. That's when I looked at the mysterious SVG file generated by Composer...

After modifying it a little to get what I wanted (usually "trigger this when that happens") I started looking at it more critically. Holy cow! There is a bunch of crap in what's output by Composer! I started to remove more and more and realized that I needed to stop modifying what Composer output and simply edit the SVG myself.

NERD ALERT! I am a professional programmer and my kids proudly call me a nerd (my daughter's nickname for me is Nerdbird I wouldn't expect the average person to be editing SVG files. It's a wacky language (unless you know XML -- I know a lot more now than I did a few days ago!) and there are some concepts many might find incomprehensible. And to top it off, I found good and helpful documentation to be hard to find without a bunch of Internet sleuthing. I certainly started with the Composer-produced framework.

Not to blow my own horn, but rather to demonstrate how insane the Plazmic-generated SVG is, I took a simple Composer-created SVG and edited in some triggers to hide my row of buttons at the bottom. This Plazmic SVG plus my minor changes started at 7500 lines and 284000 characters.

After editing it down and adding a *lot* more functionality (see all my sliding buttons and animations in my theme), my final SVG file (currently) stands at 425 lines and 25000 characters. Wow! I understand that there are some reasons why Plazmic would not be too concerned about optimizing this -- for most casual Composer users, what you get is probably good enough. For professional theme creators (and creators of other content who use SVG) there are probably other/better tools you would use.

BTW, I would have no problems sharing my SVG files (I also created a simple one for my lock screen, just because and my THM files although I don't really want to include content separately (i.e. bitmaps, icons, etc.) just because it's a hassle and I'm lazy.

My Theme:

OK, don't laugh at my aesthetics. The first thing you'll notice is how small everything is -- banners and text are greatly reduced. Also, on my homescreen you'll see no buttons (except for two on the top banner). That's because there's a transparent "hub" button (which animates quite beautifully when it gets the focus). Those two teeny buttons on the top banner use the applications in slots 1 and 2 (0 and 1 for programmers like me!) from your application list. One reason I did this was I wanted Profiles up there without using this feature in ThemeBuilder (by either using a Today button or the Banner Profile button). I also couldn't hardcode the Profiles app in the SVG because then it loses the updating of the button icon based on the profile in use -- but I did want to control its appearance and behavior completely in my SVG file. So I put Profiles in slot 1, and Manage Connections in slot 2 -- if you use this theme, you can put whatever you want there.

Anyway, when you start on the home screen you might see nothing, or you might see my fancy spinning animation indicating the "hub" button has the focus (it spins out of view after a couple of seconds). If you click on the "hub" (visible or not) you'll go to the Applications screen (this is what I have coded in my SVG)

If you go right from the "hub" button (visible or not), you get my set of preset buttons sliding on the screen (Media, Music, Camera, VideoRecorder, VoiceNotes Recorder, Clock).

If you go down from the "hub", you get the next 10 applications (slot 3 through slot 12) sliding on past the lower banner.

If you go left from the "hub", you get the *next* 6 applications (slot 13 through slot 18) sliding on from the left.

Holy cow! 18 customizable icons -- but you don't have to see *anything* on your home screen but the greatly reduced top banner, and the even smaller banner at the bottom.

I also customized much of the remaining user interface -- not because I'm an artist, but mostly because I'm stubborn and wanted to figure out how to change as much as I could.

Questions/Comments/Issues?:

Will my theme work for everyone? For a different screen font? I don't know! This is totally geared to my usage, so there may be issues another user may encounter that I haven't thought of. Although I'm not averse to some tweaking if someone wants something, I'd be more interested in problems that I haven't encountered or anticipated.

The homescreen animation seems chunky to me. I probably could do things differently. I'm pretty sure that having the application name fade in/out slows things down. There's probably other optimizations, although my SVG has gotten pretty darn small -- but that doesn't mean it's as efficient as it could be.

I didn't customize many icons (sure, I recolored a few, but except for the phone volume icon, I pretty much left the rest alone, aside from using smaller versions -- when available -- or resizing existing ones (from the Plazmic CDK). Again Paint.NET rocks!

I wish you could "lock" applications in certain slots on the Applications screen, so I could always have them show up in the same position in the same button set on my homescreen.

Conclusion:

ThemeBuilder is OK and essential -- it has some quirks, but I don't know how else to generate ALX files for Themes.

Composer is not OK -- it generates bloated code, can't do a lot of the really cool things you might want to do in a Theme (or if it can, it's hidden behind a confusing and inconsistent UI). If you are scared of SVG, you'll probably be scared of the Composer UI. Maybe not. For me (remember, I'm a programmer) once I figured out how to work with the SVG directly, things got *a lot* easier. I now only use Composer to generate the needed BB system calls to invoke for various applications.

I love my new theme, but now I guess I'll have to find something else to do!

If you have any specific questions, I'll try to answer them.

FINALLY - I've never posted/retrieved a "theme" for OTA consumption. I've only installed ALX files through DM. If someone wants my theme, I can provide it -- if someone tells me how. I'll guess I'll know if anyone read through this whole message if you request this from me!

Thanks,
Ken
Attached Thumbnails
8900 theme - walkthrough with ThemeBuilder/Composer-applications_screen.png  8900 theme - walkthrough with ThemeBuilder/Composer-bottom_buttons_sliding_on.png  8900 theme - walkthrough with ThemeBuilder/Composer-bottom_buttons_with_focus.png  8900 theme - walkthrough with ThemeBuilder/Composer-empty_homescreen.png  8900 theme - walkthrough with ThemeBuilder/Composer-hub_button_all_there.png  

Offline  
Old 05-10-2009, 12:36 AM   #2 (permalink)
New Member
 
Join Date: Feb 2007
Model: 8900
Carrier: T-Mobile
Posts: 5
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default "Tiny" 8900 theme with walkthrough... more screenshots

Five more screenshots...
Attached Thumbnails
8900 theme - walkthrough with ThemeBuilder/Composer-hub_button_appearing.png  8900 theme - walkthrough with ThemeBuilder/Composer-incoming_call.png  8900 theme - walkthrough with ThemeBuilder/Composer-initiating_call.png  8900 theme - walkthrough with ThemeBuilder/Composer-lock_screen_all_there.png  8900 theme - walkthrough with ThemeBuilder/Composer-lock_screen_coming_up.png  

Offline  
Old 05-10-2009, 12:37 AM   #3 (permalink)
New Member
 
Join Date: Feb 2007
Model: 8900
Carrier: T-Mobile
Posts: 5
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default "Tiny" 8900 theme with walkthrough... last screenshots

The last two!
Attached Thumbnails
8900 theme - walkthrough with ThemeBuilder/Composer-right_button_with_focus.png  8900 theme - walkthrough with ThemeBuilder/Composer-right_buttons_sliding_on.png  
Offline  
Old 05-10-2009, 06:44 PM   #4 (permalink)
BlackBerry Extraordinaire
 
BCollins521's Avatar
 
Join Date: Sep 2006
Location: OH
Model: 9700
PIN: Ask...
Carrier: T-Mobile
Posts: 2,033
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default

Good to see someone diving in and taking a stab at Composer and Theme Builder...some people seem to think that both are something that is easy and can be edited...

From what you said and I totally agree Composer is a very difficult program to use and rather frustrating at times. Heck even my Vista theme that I created took a ton of time to do after Composer mucked it up a ton of times and had to rebuild the dang start menu lol.

Trust me, just take your time and spend time with it and you'll get the hang of both programs and you'll see the faults and positives to each program as they go hand in hand with creating a decent theme
__________________
-Brian

Get My Themes Here! | [email address] | Twitter
Offline  
Old 10-04-2009, 11:42 AM   #5 (permalink)
New Member
 
Join Date: Oct 2009
Model: 8900
PIN: N/A
Carrier: Indosat
Posts: 1
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default

i really need your help. i'm a newbie in this composer stuff, and yet i am willing to learn it, and feeling desperate.

i am resizing the icons in composer around 55 x 55 pixels, to fit 8 icons in my home screen, added quake effect to each icon...but after i tried it, the icons in the homescreen got cropped, i assumed it is still the same original size, is there anything i missed ?

thank you for your help.
Offline  
Old 10-05-2009, 10:57 PM   #6 (permalink)
New Member
 
Join Date: Feb 2007
Model: 8900
Carrier: T-Mobile
Posts: 5
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default

I'm not sure, but my experience is that if you specify "Use Device Application Order" scaling the image doesn't work very well.

What I do is create the images at the various sizes I want (80x80, 64x64, etc.). In my SVG file, that's what I specify (in this case, my non-focus image is 64x64, my focus 80x80 -- here's one of my buttons. Notice the normalImage and focusImage groups -- these cause this image to use the slot6 icons because of the useApplicationIcons line):

<useApplicationIcons app-id="slot6" normal-group="normalImage" focus-group="focusImage"/>
<g id="NormalBL0" visibility="visible" transform="translate(8 8)">
<image width="64" height="64" xlink:href="../built/icons/64x64/icon_underlay.png"/>
<g id="normalImage_B0">
<image width="64" height="64" xlink:href="../built/icons/64x64/activation.png"/>
</g>
</g>
<g id="FocusBL0">
<image width="80" height="80" xlink:href="../built/icons/80x80/icon_focus.png"/>
<g id="focusImage_B0">
<image width="80" height="80" xlink:href="../built/icons/80x80/activation_focus.png"/>
</g>
</g>

I think you may need to create the images at the size you want (55x55) and specify these in Composer.

Honestly, I *never* use Composer to generate my SVG. Sometimes, I'll use it to get something I need (i.e. the name of an app to invoke, etc.) but I always hand code my SVG.

I have no problems providing more SVG examples; but as for Composer help, I'm not going to be much use.

Good luck!
Ken
Offline  
Old 01-30-2010, 11:32 PM   #7 (permalink)
New Member
 
Join Date: Jan 2010
Model: 8520
PIN: N/A
Carrier: T-Mobile
Posts: 3
Post Thanks: 0
Thanked 0 Times in 0 Posts
Default

hey i made a theme and so i how do i apply it to my blackberry?
Offline  
Closed Thread


Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On





Copyright 2004-2014 BlackBerryForums.com.
The names RIM and BlackBerry are registered Trademarks of BlackBerry Inc.