Arbitrary Font Images Tutorial

[lubbi]

This tutorial shows you how to change ANY string constant into an image.

Examples of what you can do using this technique:

• Change the length of a string (Not byte-wise, but in appearance.)
• Add icons to the menu.
• Change your iPod string into an image.

This is a pretty straightforward technique, but it can get a little tricky at times.

I recommend the following prior knowledge:

• Basic understanding of character encodings.
• Good understanding of iPodWizard, including its font and hex string editor.
• Good understanding of image processing, down to pixel level.

The basic idea is to substitute certain characters in the font, and replace them with images.

Limitations to this technique:

• Maximum height of the images is the height of the font you're editing (typically the main font.)
• Images will only have the bit depth of the original font (typically 1- to 4-bit gray scale)
• For every image you put in, you will have to sacrifice real litteral characters (you can't change the length of the font bitmap and just add at the end)
• To use this technique, you need at least a three byte string, or else you will have to do some major sacrificing of characters, and metrics editing.

I only have experience with the iPod nano, so I will use this as an example. This technique should be applicable to any firmware, except 5G, as far as I know. The fonts are very different for the 5G, and support for them in iPW is still being developed. If/when it's implemented, I think the basic concept of this article will still apply.

Simply substitute the nano specific values with those of your own firmware.

In this tutorial I will show you how to edit the "iPod" string on an iPod nano into an image.


1)

Begin with loading you updater into iPW, and select your firmware.
Then save the font bitmap and metrics file of the main font (index 29).
I also advise you to save a backup copy of each. You never know!


2)

The bitmap should be 7600 pixels wide, and 15 pixels tall.

Here's how the last 200 pixels look:



Now we're going to create a 100 pixels wide image at the very end of the file. 100px because that's about the width that fits in the header of the iPod nano.
It will cover the "ffl's", the apple, and some of the digits. Don't worry, those aren't the normal digits, they are at the front of the bitmap. Also, I have never seen the apple or any other of the character at the end used for anything. But who knows, they might be. This is where the sacrifice comes in, as you will mess up those characters. It's all up to you.

Again, the last 200 pixels of the font bmp, now with my custom 100px iPod string character at the end:




Remember that white is transparent.

Save the image and load it into iPW as the main font.


3)

Now we'll edit the metrics of that character.
Scroll to the very last character using the Unicode hex code point list (marked in pink below.)
Edit this character, and make it 100 pixels wide. Mine looks like this:



Save the metrics, and Write the firmware. You now have a funky character to insert into your iPod string.


4)

Look up the iPod string in the firmware (picture below).
Now you will need to change this string to only hold the U+FB04 character we edited.
First, we convert this Unicode hex code point into the UTF-8 bytes the iPod likes.
Here's a good tool for that: UTF-8 Tool

Enter "FB04" as the hex code point, and it will produce the UTF-8 bytes "EF AC 84".
That's what we need to enter into the iPW hex editor!

Do NOT use the "Change string" function for this. Locate the iPod string in the hex editor.

It will look like this: "69 50 6F 64"
You need to change it into: "EF AC 84 00"

Don't forget to add that extra "00" as padding, since the new string is only three bytes, where the original one was four bytes long.



Write the changes to the firmware, downgrade your iPod if possible, and run the updater, and update your iPod.


5)

Enjoy:




------------------------------
Here's a modification I did, that adds menu icons to the iPod nano's menues. It was accomplished much the same way as the mod above, by making a wide image in the font, containing icon and text, and then substituting the strings with 3-byte characters.



The font (including the menu icons) is now available!
Download it here: http://www.ipodwizard.net/showthread.php?t=4523

There are many ways to use this technique, and probably many variations in the specifics, but the basic idea remains the same. I'm looking forward to seeing what you creative brains out there will accomplish using it.


Good luck and have fun!

// Joachim N
2005-11-04

Originally Posted by Xtreme984

ok... I wanted to change the iPod that displays in the title bar on my 4G, now after upgrading it only displays 3 dots instead of the image, it wouldn't matter if I added space to the bitmap instead of sacrificing right?

If you mean that you actually changed the dimensions of the bitmap, that could possibly cause problems.. You can't change the dimensions, because there is only X amount of space for that image in the firmware, and that can't be changed AFAIK.
iPods normally display dots, '...', when the string is too long for its container. Make sure you didn't make the character too long.


Another important note while I'm on the subject:
Doing this with a custom font that has been generated using the "Make font" function, might screw up some of the Unicode hex code points. I have no idea why, must be an iPW bug. It made it impossible to save the correct metrics for those chars. Scrolling backwards in the code point list until chars started appearing normally again, and then editing from there, fixed it.

[rosswf]

im not sure about that, but for the ipod one it is the one above cancel, for the rest,
when you search "music" change the first one that is surrounded by other strings that appear in the menu, and strings of the same lanuage!



ok, heres the font, metrics and a list of the strings to change!


This is for 4g ipods(monochrome), font index #28.

settings = "@Settings"
clock = "%Clock"
music = "#Music"
ipod = "&pod"
playlists = "~Playlist"
extras = "?Extras
now playing = "=NowPlayin"

"@" = spanner icon
"%" = clock icon
"#" = musical note
"&" = Union jack type pic
"~" = playlist icon
"?" = plus sign
"=" = play sign


for now they are the only strings i changed, because they are the only ones i have on my menu!

lol i couldnt get you on msn so here ya go kikko!
Bassically, you have a choice of 6 font files (the metrics is the same for all of them), the only difference between them, is the "ipod" title at the top of the screen!
I made 2 with your kikko fish :tongue:
So open ipw,
load the font and metrics under #28
change the specified strings that i hae stated in the read me
then update!
any problems just shout hope its what your looking for

whoops, that indeed was the wrong metrics!
here you go, all fixed in this one!
(this one 100% works, as its the one i use on my ipod!)

[np101137]

here is my menu icons for mini, with all icons, but not all centered.....

EDIT: do not use these, use this...
Menu Icons For Mini

[Mäde]

i have done menu-icons for the german menu in the ipod nano. it runs on the firmware version 1.1.1

give me feedback about it...

[Mäde]

look to this thread for icons for the firmware 1.1.1:
http://www.ipodwizard.net/showthread.php?t=10164