Tuesday, April 01, 2008

Using MIF files in Symbian OS (Part 1)

What is a Mif File

.mif files - Machine-readable files with all the SVG-t/bmp icons packed into them.

How to create a MIF File.

There are at least three ways.
1. The easiest way is to buy Adobe Illustrator CS2 to draw icons. Illustrator CS2 can save to SVG-Tiny format. It costs some money but it will save you a lot of time. If you're not great at drawing - there's a feature that will convert a photo to an SVG line drawing with color fills. So, make a photo of an object with your phone and have illustrator convert it to a line drawing.

2. You can download a free editor named Inkscape. Inkscape saves to SVG format but not SVG-Tiny. You'll have to use the SVG2SVGT tool to convert the icon (found under S60Tools folder in SDK). But there's a problem. If you use certain draw object types then Inkscape will produce SVG code that will not work. Start with a very simple image such as a box - test it - and then add some details. (Inkscape is open source Java so anyone of us could fix it to directly generate SVG-T for S60.)

3. You can type an SVG file into a text editor. It's XML syntax. {not recomended}

How to create a MIF file.

1. Direct mifconv call method
go to your folder where your SDKs tools folder then run following command

c:\Symbian\9.1\S60_3rd_MR\Epoc32\tools>mifconv MyNewApp.mif /c32 C:\TestIConPrj\gfx\Test_Icon1.svg ...
in this case the mif is created in the tools folder.

2. Using Make File Method
a) Edit bld.inf File

        PRJ_MMPFILES
gnumakefile Test_Icon.mk
TestIConPrj.mmp


b) Create Test_Icon.mk file
You can use the Templete as given below.
  
ifeq (WINS,$(findstring WINS, $(PLATFORM)))
ZDIR=$(EPOCROOT)epoc32\release\$(PLATFORM)\$(CFG)\Z
else
ZDIR=$(EPOCROOT)epoc32\data\z
endif

TARGETDIR=$(ZDIR)\resource\apps
ICONTARGETFILENAME=$(TARGETDIR)\Test_Icon.mif

HEADERDIR=$(EPOCROOT)epoc32\include
HEADERFILENAME=$(HEADERDIR)\Test_Icon.mbg

ICONDIR=..\gfx

do_nothing :
@rem do_nothing

MAKMAKE : do_nothing

BLD : do_nothing

CLEAN : do_nothing

LIB : do_nothing

CLEANLIB : do_nothing

# In the below lines the c32,8 the 32 is for the image and
# 8 is for it's mask. See how the BMP file is mentioned
# below the SVG's here.

RESOURCE :
mifconv $(ICONTARGETFILENAME) /h$(HEADERFILENAME) \
/c32,8 $(ICONDIR)\Test_Icon1.svg\
/c32,8 $(ICONDIR)\Test_Icon2.svg\
/c32,8 $(ICONDIR)\Test_IconN.svg\
/c24 $(ICONDIR)\Test_BMPIcon1.bmp\
/c8 $(ICONDIR)\Test_BMPIcon1_Mask.bmp\
/c24 $(ICONDIR)\Test_BMPIcon2.bmp\
/c8 $(ICONDIR)\Test_BMPIcon2_Mask.bmp\
/c24 $(ICONDIR)\Test_BMPIconN.bmp\
/c8 $(ICONDIR)\Test_BMPIconN_Mask.bmp


FREEZE : do_nothing

SAVESPACE : do_nothing

RELEASABLES :
@echo $(HEADERFILENAME)&& \
@echo $(ICONTARGETFILENAME)

FINAL : do_nothing


c) Clean build your project.
(note: you can't do this step from carbide.c++ or carbide.vs you have to use commandline).
        bldmake bldfiles
abld reallyclean
abld build gcce urel



Note:
1. Make your icon on a 44x44 pixel canvas. This might not be necessary in some cases but it is not clear whether S60 will scale your icon in all the places it can be used.

2. Keep in mind that S60 caches icons between runs of your application - so sometimes when you update an icon you still see the previous version. Do not losing your mind - it's caching the icon. Try restarting the phone when updating icons.

6 comments:

Take0n said...

Hello

Interesting but could you please tell me if it is possible to edit a .mif file?

You see, I own a Nokia N95 and I have the Menu.mif which contains all 16 folder icons in the N95 menu.

I have an application that allows you to change icons of different folders but one can only choose from those 16 icons that Menu.mif has. I want to edit this file and add more icons to it. Is it possible to do this? Do I have to create a new .mif file, call it menu.mif and replace it with the original one? Does a .mif file only contain icons? do the icons have to have the same name as the original ones?

Please let me know if you can help me

Thank you

Sunil kumar said...

Sorry takeOn can't help you on that

Rawshan said...
This comment has been removed by the author.
Rawshan said...

Thanks for the article. I did created the mif file and the mif entries are there in mif file now. As I changed the original svg file, i see the new entry in enumeration and that makes sense. Now my application icon as well as staus pane icon is gone when i run the applicaiton. I guess the new mif entry should be referenced somewhere to indicate this icon in the application. I could not find that in the application. I am using carbide full version with UI.

Sunil kumar said...

Restart your device might help also make sure you svg is compatible with your device.

Major Sputnik said...

thanks for the useful tutorial! on the other note, you may want to check out mobile app development Singapore in case you are interested in this field.

stats counter