CloudBox Image Generator

• Download ImageGenerator.zip - 678.1 KB

Introduction 

This tool is using to generate iOS/Android/WP7 icon or image.

Background 

Hello everybody, I am a iOS/Android/WP7 developer.

In iOS we need generate icon with 57*57, 72*72, 114*114, 144*144, in Android it's 36*36, 48*48, 72*72 and WP7 is 62*62, 173*173.

Every time I develop a new app or modify the icon, I must re-size it.

It's big trouble! I hate modify image every time! 

So I develop this tool to help me.

Requirement 

This is my first requirement.

I have a cross-platform framework named CloudBox that is a iOS/Android cross-platform.

But I think that when I develop a new App, the image size is a big trouble.

The iOS in iPhone need icons with 57*57 pixel size, and retina display need 114*114.

The iPad must provide 72*72 and 144*144(for New iPad) icons.

In Android, the ldpi is 36*36, mdpi is 48*48 and hdpi is 72*72.

In WP7, application icon must 62*62, application tile must 173*173 but also in market need 99*99 and 200*200 icons. 

Using Photoshop to re-size and save image is complicated.

So my first requirement is auto generate icons and put them in different directory.

This is my second requirement. 

When I draw some image or get image from art, I need to re-size and rename to support iOS.

For example, a 300*300 image named test.png, in iOS I want to change size to 50*50(test.png) and 100*100(test.@2x.png).

If I have more images, this is big trouble.

So I develop a batch program to solve it.

This function just use for a single image.

Because sometimes I only modify a image.

About Some Code

FolderBrowserDialog dirDialog = new FolderBrowserDialog();
dirDialog.SelectedPath = Directory.GetCurrentDirectory();
if (dirDialog.ShowDialog(this) == DialogResult.OK)
{
    txtDirectory.Text = dirDialog.SelectedPath;
} 

The FolderBrowserDialog class can select a folder.

<a href="http://msdn.microsoft.com/en-us/library/system.windows.forms.folderbrowserdialog.selectedpath.aspx">SelectedPath</a>:Gets or sets the path selected by the user.  We can program set it for default path.

Between my develop, I use the OpenFileDialog to open file.

First I use the OpenFileDialog.SafeFileName to get file name.

But a friend in China share me a test result, it will cause System.MethodNotFound.

I found the reasone that is the property only support in .NET Framework SP1.

So I use this solution. 

FileInfo file = new FileInfo(fullName);
m_FileName = file.Name;
m_DirectoryName = file.DirectoryName + "\\";

I use the FileInfo the get file information.

the FileInfo.Name can get the file name, and the DirectoryName can get the file path.

public static Bitmap ResizeImage(Bitmap srcImage, int newWidth, int newHeight)
{
    Bitmap newImage = new Bitmap(newWidth, newHeight);
    newImage.SetResolution(72, 72);
    using (Graphics gr = Graphics.FromImage(newImage))
    {
        gr.SmoothingMode = SmoothingMode.AntiAlias;
        gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
        gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
        gr.DrawImage(srcImage, new Rectangle(0, 0, newWidth, newHeight));
    }
    return newImage;

}

At this function, I use GDI to scale image.

Bitmap is an object used to work with images defined by pixel data.

I use Graphic.FromImage to create a new Bitmap then use Graphic to draw source image into new image.

Graphic.FromImage

Creates a new Graphics from the specified Image.  

Graphic.DrawImage 

Draws the specified Image at the specified location and with the specified size.  

Graphic.SmoothingMode

Gets or sets the rendering quality for this Graphics. 

Graphic.InterpolationMode 

Gets or sets the interpolation mode associated with this Graphics. 

Graphic.PixelOffsetMode

Gets or set a value specifying how pixels are offset during rendering of this Graphics.

public static CBIconInfo GenerateDefault()
{
    CBIconInfo icons = new CBIconInfo();
    GenerateiOSDefault(icons);
    GenerateAndroidDefault(icons);
    GenerateWP7Default(icons);

    return icons;
}

private static void GenerateAndroidDefault(CBIconInfo icons)
{
    CBImageInfo info = new CBImageInfo();
    info.DeviceType = DeviceType.Android;
    info.Width = 36;
    info.Height = 36;
    info.FileName = "drawable-ldpi\\icon.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.Android;
    info.Width = 48;
    info.Height = 48;
    info.FileName = "drawable-mdpi\\icon.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.Android;
    info.Width = 72;
    info.Height = 72;
    info.FileName = "drawable-hdpi\\icon.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.Android;
    info.Width = 135;
    info.Height = 135;
    info.FileName = "SamsungMarket.png";
    icons.IconDefines.Add(info);
}

private static void GenerateWP7Default(CBIconInfo icons)
{
    CBImageInfo info = new CBImageInfo();
    info.DeviceType = DeviceType.WP7;
    info.Width = 62;
    info.Height = 62;
    info.FileName = "ApplicationIcon.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.WP7;
    info.Width = 173;
    info.Height = 173;
    info.FileName = "ApplicationTile.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.WP7;
    info.Width = 99;
    info.Height = 99;
    info.FileName = "Market99.png";
    icons.IconDefines.Add(info);

    info = new CBImageInfo();
    info.DeviceType = DeviceType.WP7;
    info.Width = 200;
    info.Height = 200;
    info.FileName = "Market200.png";
    icons.IconDefines.Add(info);
}
static void GenerateiOSDefault(CBIconInfo icons)
{
    // for iOS
    CBImageInfo info = new CBImageInfo();
    info.DeviceType = DeviceType.iOS;
    info.Width = 57;
    info.Height = 57;
    info.FileName = "icon.png";
    icons.IconDefines.Add(info);
    // for iPhone Retina
    info = new CBImageInfo();
    info.DeviceType = DeviceType.iOS;
    info.Width = 114;
    info.Height = 114;
    info.FileName = "icon@2x.png";
    icons.IconDefines.Add(info);
    // for iPad
    info = new CBImageInfo();
    info.DeviceType = DeviceType.iOS;
    info.Width = 72;
    info.Height = 72;
    info.FileName = "icon-72.png";
    icons.IconDefines.Add(info);
    // for new iPad
    info = new CBImageInfo();
    info.DeviceType = DeviceType.iOS;
    info.Width = 144;
    info.Height = 144;
    info.FileName = "icon-72@2x.png";
    icons.IconDefines.Add(info);
} 

This function is using for my requirement.

I need the icons in iOS/Android/WP7 and I will upload my App to App Store, Google Play, Samsung Market and WP7 MarketPlace.

You can modify here for your requirement.

I define a class.

namespace ImageGenerator
{
    public enum DeviceType
    {
        iOS,
        Android,
        WP7
    }

    public class CBImageInfo
    {
        DeviceType m_DeviceType;
        int m_Width;
        int m_Height;
        string m_FileName;

        public DeviceType DeviceType
        {
            get { return m_DeviceType; }
            set { m_DeviceType = value; }
        }
        public int Width
        {
            get { return m_Width; }
            set { m_Width = value; }
        }
        public int Height
        {
            get { return m_Height; }
            set { m_Height = value; }
        }
        public string FileName
        {
            get { return m_FileName; }
            set { m_FileName = value; }
        }

    }
} 

The enum DeviceType is declare some device.

I have iOS/Android/WP7 to use. 

The CBImageInfo declare for generate file.

Width: The new width for image.

Height:The new height for image.

FileName:The file name for image.

DeviceType:The target directory for device type.

namespace ImageGenerator
{
    public class CBDeviceManager
    {
        public const string DEVICE_IOS = "\\iOS";
        public const string DEVICE_Android = "\\Android";
        public const string DEVICE_WP7 = "\\WP7";
        
        string m_RootDirectory;

        static CBDeviceManager()
        {
        }

        public void CreateAllDeviceDirectory(string rootDirectory)
        {
            m_RootDirectory = rootDirectory;
            CreateDir(rootDirectory);
            CreateiOSDir();
            CreateAndroidDir();
            CreateWP7Dir();
        }

        private void CreateWP7Dir()
        {
            CreateDir(m_RootDirectory + DEVICE_WP7);
        }

        private void CreateAndroidDir()
        {
            CreateDir(m_RootDirectory + DEVICE_Android);
            CreateDir(m_RootDirectory + DEVICE_Android + "\\drawable-ldpi");
            CreateDir(m_RootDirectory + DEVICE_Android + "\\drawable-mdpi");
            CreateDir(m_RootDirectory + DEVICE_Android + "\\drawable-hdpi");
        }

        private void CreateiOSDir()
        {
            CreateDir(m_RootDirectory + DEVICE_IOS);
        }

        public static void CreateDir(string path)
        {
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
        }
    }
} 

The CBDeviceManager will create default for iOS/Android/WP7 folder.

In Android it will create icon in drawable-ldip(36*36), drawable-mdip<code>(48*48),  drawable-hdip(72*72) folders. 

In Android, the icon put in these folder.

The class will create all folder for me.

Using the tool    

Click Select, it will pop a dialog then select a icon file and click Generate.

After you click Generate, it will open this directory, you can see the folders like iOS, Android and WP7. 

In iPhone normal icon size is 57*57, retina display is 114*114, iPad is 72*72 and new iPad is 144*144.

In Android it will create icon in drawable-ldip(36*36), drawable-mdip<code>(48*48),  drawable-hdip(72*72) folders.

The SamsungMaket.png is a 135*135 icon.

Because when you need to upload to Samsung market, you will upload a 135*135 icon.

The icon size in WP7 is 62*62, tile size is 173*173.

But in WP7, it will 99*99 and 200*200 size icon for MarketPlace.

Now you can copy you icon to your proejct.  

The default icon is my requirement.

In this function, select a directory and input the image size.(if you need it)

Click generate button will get all result.
 

In this dialog, all .png file is my test images. 

After click Generate it will generate three folders then you can get all result in folder.

 In iOS , it will auto generate normal and retina display image.  

Points of Interest 

This is a open source free tool.

History

v1.3 Update source code and images.

v1.2 Update Section and fix broken images.

v1.1 Add Requirement and Code Description.

v1.0 New.