Category Archives: iPhone

iPhone’s beautiful "Battery Recharger" as a SilverLight animation

Sub Heading 5

this sample needs silverlight 1.1

Have I told you readers how much I love the user interface of Apple’s iPhone? Well I do!

There are so many goodies in there that over time I’ll reproduce them using Blend and SilverLight 🙂 . Today I’ll be recreating the “Battery Recharger”.

Here’s what it looks like on the iPhone


Now here’s my version done using Blend and if you click on the image it will go to the demo page where I have animated it using SilverLight


Apple took such care in painting a true “glass & light effect”. The light shining on the battery was done with such detail. I had to improvise with numerous separate “paths” to get the same result. If you look at my source you will see that each face (there are 4, top of the battery, middle of the battery, bottom of the battery, knob of the battery) has several “path shapes” each with complicated gradient brushes to produce  the lighting & glass effect of Apple’s control.

I love this control 🙂

Below is the tutorial of how I made this control. Enjoy!


“Top” and the “Bottom” are mirror images of each other. It is made up of several path’s each with different gradient fills.

Middle is made up of the “Filler” and a series of path’s with gradients. There are 2 groupings of paths (“group behind” and “group in-front” ) that surround the “filler path”, they were done this way to give a true 3D like affect.

The “Knob” is an exact copy of the “Top” that’s just shrunken down.

The “Filler” is a simple path shape that can be any color, which is currently showing as burgundy red.

The “Status” is a textblock that shows the status of the recharging battery.

The “Reflection” is an exact mirrored copy of the entire battery (without the text). Even the “Filler” is copied so that when the real “Filler” is animated we can animate the reflection as well giving an truly real reflection effect (see the demo animation).

The “TOP” part of the battery was achieved as follows, remember the “Bottom” and the “Knob” are just copies of the “Top”:

Take the basic “top” shape and make 5 copies, each copy will be the exact same shape but will have different gradients applied to them to give the glass/lighting effect.

First copy : forms the basic overall color of the top of the battery. It’s a black themed battery with a tinge of gray gradient at the bottom


Second copy: Lighting effect at the bottom part of the overall top shape

Third copy: Lighting effect in the middle of the overall top shape

Forth copy: Another lighting effect near the top of the overall top shape

Fifth copy: top most lighting effect of the overall top shape

all parts combined results in:

The “Middle” part of the battery was achieved as follows:

Like the “top” the “Middle” is made up of 5 copies of the same shape.

First copy: Basic color of the middle shape. Made up of a gradient

Second copy: Filler that we programmatically slide in width

Third copy: a lighting effect layer

Forth copy: another lighting effect layer

Fifth copy: another light effect layer


Combining all the layers without the filler layer it looks like this:

Add the filler layer to the combined layers above it looks like this:

I don’t think I need to go into the showing the rest of the parts of the battery, as I mentioned above they are all just variations of the previously covered 2 groups “Top”, “Middle”.

As you can see from my demo page this can be animated any way your heart desires. Create a stack of batteries and have them animate in different colors, the options are endless. I love SilverLight 🙂

Source code will soon be added to the “Blend Candy” area, stay tuned.

iPhone clones

subheading 3

Came across a great article talking about China’s cloning industry and how it’s transitioning to a legitimate economy. It was a great article that describes the dark world of cloning, was definitely an eye opener.

The whole iPhone cloning is just an introduction to a greater point. The article is saying that China is going through the same transitional period as Japan in the 70’s and Korea in the 80’s, where their industry moves first from shoddy clones, to quality clones, and then finally to legitimate original products. Look at Japanese and Korean products now. The interesting thing, as the article points out, is that China’s gone through most of this change in just 10 years–faster than Japan or Korea ever did.

The article talked about 3 possible clones:  miniOne, P168, HTC’s. The video is of P168 clone, in my opinion it looked pretty bad, but none-the-less it was a sign of things to come.

I personally don’t like apple’s original iPhone, very limiting in it’s version 1 design’s. I as a consumer am open to purchasing any product that meets my financial and personal needs. If the iPhone cost’s over 800 Aussie dollars, that’s where I’m from, then I’ll resort to a cheaper no-named brand. Much like shopping for food.

The popularity of the open-source movement is based on the same premise. If there’s a software product that’s cheaper but delivers the same functionality then people will naturally flock to it. Of course there are other factors at play that may be an equally important reason for moving across such as revolutionary features etc but, in my opinion, the main reasons are cost based.

Read the article here

iPhone – Graphics and TidBits

 Subheading 10

Found a great reference site for all the graphics shipped with the iPhone. It’s a discussion about what goes into the UI of the iPhone as well as a link to the zip file containing the images.

Thread discussing iPhone graphics : link

Actual ZIP file containing the extracted iPhone graphics (for convenience) : zip