Maemo UI improvements blog.

February 13, 2010

Theming for Dummies

Filed under: Design guidelines — Tags: , , — Andrew Zhilin @ 20:44

Hello there.

I thought it would be it would be useful and motivating if I’ll describe my way of creating themes. I’ve used it to create Marina in Windows but you can use it in any OS I think. Special thanks to Master Carsten “Stskeeps” Munk for all the info and guides. And here we go.

Step 0: Downloading required software.

[download link] MADDE – Maemo Application Development and Debugging Environment

[download link] Hildon-Theme-Example template

[download link] Coordinates template file

Step 1: Software setup.

First of all you need to install MADDE environment. It’s pretty straightforward so don’t panic, just follow the instructions.

Then you’ll need to untar downloaded Hildon-Theme-Example file called hildon-theme-example-stskeeps-hildon-theme-example-stskeeps-master.tar.gz (yeah yeah :) into <MADDE INSTALLATION FOLDER> / <MADDE VERSION NUMBER> / home / <USER NAME> / Theme name (Marina, for example).

We’re done.

Step 2: Theme editing.

Now lets move to the editing itself. Open theme folder that you’ve just created and filled with files from tar archive.you’ll see a bunch of files and folders. Right now we need the one called template. There you’ll see 4 files: coordinates.png, template.png, template.svg and MakeFile.am. Remember, if you’re a fan of svg editing – go on, but remember that it should be converted to template.png anyway. But let’s pretend that you want to edit template.png. Open it with your favourite Photoshop clone (:P) and you’re good to go. Almost. Cause there’s the only one problem with this file – it doesn’t have “zones” mark up – special layer that will show you exact sizes of different UI elements. This layer is held in coordinates.png as you may have guessed, but there’s the catch – if you’ll just copy and paste it – it won’t be placed right cause it’s actually smaller than it should be. That’s why I’ve created “right” coordinates.png file for you. Download it and paste it into your templates.png file. Now you’re clear to launch your creativity into the stratosphere :)

But before you’ll start, please note that some of the theme files are not covered with templates.png. Take a look at the “applications” folder that lies in your theme folder. It contains different subfolders, where you’ll find different backgrounds, icons and templates, that should be edited too. Especially rtcom-messaging-ui (“Conversations” app). Never forget about it, or terrorists win!

Step 3: Theme packaging.

Ok, you’re done with drawing all this stuff, now let’s move to actual packaging (you want to test your theme, right?)

  • run MADDE and cd to your theme folder (for example cd Marina)
  • type sh try_it_out.sh . It will start some kind of first run wizard that will guide you thru the process of initial theme setup. It will ask you some simple questions, answer honestly :) IMPORTANT: If your theme name has first letter upper case,  directory name must have first letter lower case!
    IMPORTANT: If your theme name has first letter lower case,  directory name must have first letter upper case!

    This is REALLY GODDAMN IMPORTANT, DON’T MESS THIS UP.

  • Ok. Now minimize MADDE and go to debian subfolder in your theme folder. You’ll see some files there, right now we need control. Open it up with your favourite text editor.
    Here, after “Standards version” row you’ll need to insert one more row and it should look like this:

    XSBC-Bugtracker: http://talk.maemo.org/showthread.php?t=32761

    This is the bugtracker URL, replace it with the address where you’ll want to, you know, track bugs.

    Now we need to add a pretty icon for the package and it’s really not that straightforward as it looks like :) Right after “Depends:…” row in the same control file you should add this:

    XB-Maemo-Icon-26:

    then break (new row) and now we came to the most weird part :) Icons are 48×48 png files actually BUT they are stored right in this control file in base64 format. So, you’ve drawn a png with right dimensions (transparency allowed btw) then you need to convert it into base64 fomat. You can do it here. Just upload your file and this website will show you base64 code you need. Paste it on the next row after XB-Maemo-Icon-26:. You’re almost done.

    BUT REMEMBER TO DO LAST IMPORTANT THING. YOU SHOULD PLACE “SPACE” IN THE BEGINNING OF EACH LINE OF THAT BASE64 CODE OR YOU’LL RECEIVE AN ERROR.

    Ok, we’re done with icon, let’s move to Description row. Right now you can see just your theme’s name there, it’s boring. Write something more descriptive there.

    And the last one bit of code you’ll need to add is Pretty Name ©. Without that row your package will be shown in Application Manager like hildon-theme-marina for example, and we want something like Marina Theme instead. Just add a new line after description and place that row there:

    XSBC-Maemo-Display-Name: Marina Theme

    Congratulations, we’re done with control file!

  • Now let’s move to changelog file. Don’t worry, it’s much simplier than control. Open it up with your favourite text editor.
    Though it’s simple, but it’s really important file cause it will tell MADDE which version you want to build and it’s the right place to track your changelog. It should have format like this:
    hildon-theme-marina (1.095) jaunty; urgency=low

    * Calendar agenda view fixed
    * Titlebar arrow color changed

    – Andrew Zhilin <andrew@zhil.in>  Tue, 19 Jan 2010 11:53:02 +0000

    hildon-theme-marina (0.1) jaunty; urgency=low

    * Initial release.

    – Andrew Zhilin <andrew@zhil.in>  Mon, 18 Jan 2010 12:00:00 +0000

    Top row always shows the version you want to build right now, don’t forget about it

  • Ok, we’re done with text editing at last, now the most sacred process – package creating. You’ll be surprised but it’s as easy as typing 1 row of text in MADDE console. Yeah, MADDE will do the rest. So, cd to your theme folder (Marina for example) an simply type:

    mad dpkg-buildpackage -S -us -uc -d

    And that’s it. If you’ve done everything well – you’ll see 3 files appeared in your MADDE home/<user name> folder .changes, .dsc and .tar.gz. Congrats!

Step 4: Autobuilder

Ok, we almost did it, now we only need to upload all this stuff to The Mighty Autobuilder ©.

  • First of all you’ll need to have maemo.org account.
  • Now go to the maemo.org Extras Assistant and just follow the steps. After all this registration stuff it will finally ask you to give it your 3 files (don’t mess up with file versions!) and autobuilder will create a .deb package for you. But how can you find it?
  • There’s an app for that – Maemo Package Interface. There you can search for yor new shiny .deb and, if it’s worth it, you can promote your package from Extras-Devel repository to Extras-Testing repository, where users will judge if it’s worth to be placed in Holy Maemo Extras or not :)
  • IMPORTANT: Every autobuilder or promotion related action takes time. If autobuilder will fail at building your .deb – it will e-mail you with log, don’t worry and be patient.
  • IMPORTANT: SSH key is “blahblah” :)

Well, that’s all, folks, I hope to see some more professional themes for Maemo 5 soon!

Thanks for reading and stay tuned.

About these ads

5 Comments »

  1. Thanks Andrew,

    We have been trying to do a couple of themes, but a lot of problems have turned us down : / specially with the “over” effect on buttons simply stopping work after a quite iterations when using maemo theme maker.

    Like you said, I hope to see more theme as well, we have a couple of templates already, but without the help of (our internal maemo) developers we ( the designers ) are always unsatisfied with the results we get with the tool.

    Thanks for sharing this!

    BR

    Marcelo

    Comment by Marcelo Eduardo — February 14, 2010 @ 06:31

  2. Many thanks for this article. I have some ideas in my head but gave up trying Theme Maker. I hope your instructions will work.

    Comment by michau — February 14, 2010 @ 20:32

  3. With madde 0.6.14 XB-Maemo-Icon-26 data (with leading spaces) can be
    created from command line by entering:

    mad base64 48x48icon.png | sed ‘s/^/ /’

    Comment by Tomi Ollila — February 14, 2010 @ 23:29

  4. Hi, I finish this great tutorial.
    Is there any way to upload the theme to N900 directly before upload to the repository?

    Comment by Bill Chan — April 28, 2010 @ 11:49

  5. How can I change the application’s icons of calculators or other apps?

    Comment by Bill Chan — April 30, 2010 @ 19:42


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: