iPod touch UI

Download iPodTouch_UI.zip - 151.72 KB

Contents   

• Introduction
• Background
• How to work with WMP
• Using the code
• The solution
• iPlayer class
• The Background
• The Topbar
• The SongBar with text resize
• The LocationBar
• The Middle of the screen
• The Bottom bar
• Points of Interest 
• Links
• History 

Introduction      

It's a Media Player that works with transparency effects, also it's play mp3 and wav files, display the tags if present and display the album art image if present.   

Original Media Player user interface is impossible to control using your finger. Here I have tried to solve also this problem.

As a sample I used an interface just like the iPod touch one. In this tutorial mostly I continue to explaining a better way to work with transparency on Windows Mobile.  For a beginning introduction to this article I suggest to you to read before my previous article on transparency iPhone UI[^].

In this article you can also read about: 

• Resolution-aware and Orientation-aware  
• Dynamic graphic text resize  
• Mouse gesture   
• Intercepting button  
• Work with Windows Media Player OCX on Windows Mobile.    

Background  

I found some problem with sound files in particular for retrieving the tag info and the current position time, after a long search, I choose to use the the Windows Media Player OCX. The article Audio Book Player [^] by brochpirate give you a fast way to use the OCX on Mobile trough the OpenNETCF.org, it's a great working sample. Hereunder I explain a bit how you can play with it.  

How to work with WMP   

To use the Windows Media Player only you need to import this dll as reference:  

• OcxControls
• OpenNETCF.Windows.Forms.AxHost  
• WMPLib   

And add the cPlayer to your app. Now you are ready to get control of WMP, really cool, isn't it?   

Using the code  

The solution  

Going deep into the solution you can find  

• iPlayer class, the main form with: Resolution-aware, dynamic graphic text resize, mouse gesture, and work also with Windows Media Player COM .
• cPlayer class, this class work with Media Player OCX, it's under the abPlayer. I add only few property the loop and the volume 
• FilesManger class, this class get all the mp3 and Wav files of your mobile device.
• ImageButtons class, a class button with transparency  and other stuff
• PlatformAPIs class, it is the class to manage the P/Invoke  
• SlideButton class, the class that move the Image (progress). 
• BMPs folder, it contains all the BMP  used in the code  

iPlayer class  

This is the main form of the app.  I paint all the form in the method myPaint(Graphics dc). The myPaint can be called from the Paint eventhandler and use the e.Graphics or can be called when a state change and the  dc used is the CreateGraphics(). The my paint draw all the screen with all the control inside, begin with the background, the TopBar, the SongBar, LocationBar (if needed),  BottomBar, and the various button used. 

The Background   

The bitmapBackImage Bitmap is load as background and  the default image of the first image found in the song directory. To choose the image I preferred to display the "Folder.jpg" if exist because is the default used by the default internet CD searching. 

this is the code

private void SearchBGImage()
{
    if (FormListScanFiles.lvwSoundFiles.Items.Count != 0)
    {
        string path = Player.PlayingPath.Remove(Player.PlayingPath.LastIndexOf(@"\"), Player.PlayingPath.Length - Player.PlayingPath.LastIndexOf(@"\"));
        String[] ImageFiles = GetImageFiles(path);
        if (ImageFiles.Length != 0)
        {
            foreach (string ImageFile in ImageFiles)
            {
                //If you use the internet CD databases you can have more than a picture inside the folder
                //This method chooses the one that best fit screen
                if (ImageFile.Remove(0, ImageFile.LastIndexOf(@"\") + 1).ToLower() == "folder.jpg")
                {
                    bitmapBackImage = new Bitmap(ImageFile);
                    return;

                }
            }
            bitmapBackImage = new Bitmap(ImageFiles[0]);
            return;
        }
    }         
    bitmapBackImage = bitmapBackImageDefault;
}

The default image:

 

If I need to stretch the image I used this code  

Rectangle srcRect = new Rectangle(0, 0, bitmapBackImage.Width, bitmapBackImage.Height);
Rectangle destRect = new Rectangle(0, 0, this.Width, this.Height);
gxBuffer.DrawImage(bitmapBackImage, destRect, srcRect, GraphicsUnit.Pixel); 

else I draw centre & unscaled  

int x = (this.Width - this.bitmapBackImage.Width) / 2;
int y = (this.Height - this.bitmapBackImage.Height) / 2;
gxBuffer.DrawImage(this.bitmapBackImage, x, y);

The Topbar 

This part is similar to the iPhone UI article but here I change the position of the images dimanically. The Topbar is divided in 4 images and the time text:  

• the Battery level, with a left anchor with no stretch  
• the timeline, with left anchor (the battery level width), right anchor (the GSM level width +
• Current Player status width),  use the stretch  
• Current Player status, with left anchor  (timeline  width+ battery level width), right anchor (the battery level width). no stretch 
• the GSM level, with a right anchor with no stretch 
• The time is drowned in the middle of the screen width and in the middle centred in the middle of the timeline ( timeline height/2- text height/2) 

All the images:    

• Battery Level Bitmaps
• GSM Level Bitmaps    
• Top Player status       

and this two samples of the view: 

The SongBar with text resize 

This part is a stretch of a single bitmap to all the width of the screen and with a fixed height.

This is the original bitmap:

And these are two stretch samples:  

Over it I put two ImageButton one for Exit and one for the files list. The buttons are centred in the middle of the SongTopBar bitmap height, and the exit has the left anchor, the right have the right anchor.  

In the middle of the screen I put the Artist name, the song name and the album name. The strings are the tags retrieved from the current file selected.  

Here I use my DynamicGraphicTextResizing for a "Dynamic graphic text resize" If the width of the displayed string is much greater than the display width I modify the string with the minimum size that fit the screen weight and i add to the end "..."   

private void DynamicGraphicTextResizing(ref string text, ref SizeF size, Font songTitleFont)
{
    while (size.Width > this.Width - buttonExit.Image.Width - buttonList.Image.Width)
    {
        text = text.Remove(text.Length - 4, 4);
        text = text + "...";
        size = gxBuffer.MeasureString(text, songTitleFont);
    }
} 

To draw the string I use this code:  

string title = Player.GetMediaTAG(eTagNames.TITLE); 

SizeF sizeTitle = gxBuffer.MeasureString(title, FontsongTitle);
DynamicGraphicTextResizing(ref title, ref sizeTitle, FontsongTitle);
xSong = this.Width / 2 - (int)sizeTitle.Width / 2 + buttonExit.Image.Width / 2;
gxBuffer.DrawString(title, FontSong, BrushWhite, xSong, bitmapTopHeader.Height + sizeTitle.Height - 2);

 

Info: brochpirate in his article add a way to scroll the text. Take a look there, I think you can find it useful.

This are all the images used:   

 

This is a sample on how it works:   

The LocationBar     

Info:  This part is showed only if the users click on the SongBar, it dispaly the current location, the song duration, and a progress bar for the current location.

To show the Location bar I useuser an internal bool value  ShowTimeLine and I decide to draw it  if you click over the SongBar. When the LocationBar is showed it enable a timer every second to draw the current location and to draw the step for the progress.   

private bool SongMouseUp(MouseEventArgs e)
{
    if (ClientAreaSong().Contains(e.X, e.Y))
    {
        ShowTimeLine = !ShowTimeLine;
        timerDrawLocation.Enabled = SetTimerDrawLocation();
        return true;
        }
    return false;
}

The LocationBar is divided in 8 parts.  

• Repeat button with 2 state, pressed On, Off 
• Current Location time + the background 
• Progress of the song is divided in 2 part the played and not played 
• Duration time + the background 
• Shuffle button with 2 state , pressed On, Off 

Note: Here I’ve not covered everything in algorithm but I believe that you will understand these easily. 

The Repeat button is set to the WMP repeat state. The anchor is left and it's not stretched.

The current location time and the duration time are string retrieved from the player Player.LocationString Player.DurationString. The Back ground image are this: 

The progress is divided in 2 part the played and not played, I use two image and I calculate the location position on the screen iWidthProgressPlayed. After I draw the PalyedProgress from a fixed start to the iWidthProgressPlayed and the NotPalyedProgress from  iWidthProgressPlayed with a dynamic width (all the size possible less than played) iWidthTotal - iWidthProgressPlayed.

The Shuffle button is set to the WMP repeat state. 

All the images used:  

   

These are 3 samples on how it works:

 

Attention:  I tried the app under few devices and sometime I found it slow, I suggest to you to use the LocationBar only if needed. The program starts with the LocationBar Hided.

Middle of the screen    

If the search doesn't find a file (mp3 or wav) it displays a text in the middle of the screen "No files found". 

This is the code:   

private void DrawSongNumber(Graphics gx)
{
    if (FormListScanFiles.lvwSoundFiles.Items.Count == 0)
    {
        NoFilesFound = "No files found";
        SizeF sizeNoFilesFound = gxBuffer.MeasureString(songname, FontSongNoFilesFound);
        int xSong = this.Width / 2 - (int)sizeNoFilesFound.Width / 2;
        int ySong = this.Height / 2 - (int)sizeNoFilesFound.Height / 2;

        int widthMessage = (int)sizeNoFilesFound.Width ;
        int xMessage = (this.Width / 2 - (int)widthMessage / 2 )-10;
                
        int yMessage = this.Height / 2 - (int)bitmapMessage.Height / 2;

        DrawAlphaStretchX(gxBuffer, bitmapMessage, 170, xMessage, yMessage, widthMessage);
                
        gxBuffer.DrawString(NoFilesFound, FontSongNoFilesFound, BrushWhite, xSong, ySong);
    }
}

and this is a sample

 

The Bottom bar      

For the bottom I used a large background with the left anchor and the right anchor.

The bitmap is divided in two section (the first half and the second half).

In the first half I put the Player controls: previous, Play/Pause, Next. these images are stored in three ImageButton. Also the player status is over in the Topbar.

The second half contain the volume slide, it's a SlideButton. Here I add a modifyed on the previous posted in the iPphone UI. I add possibily to interact with the progress, and set it with a percentage. When the mouse is moved over the Slide button the volume change and it display the percentage is similar to the used in the location bar.
these are all the entire image used:

 

these are two samples: 

Points of Interest   

I would like to remind that this program is not a complete interface. This article adds some features used in to the iPhone UI and I hope you find useful.  

Note: I believe that the article contains some translation errors, please humour me and go ahead reading the article. Soon I'll translate it better. 

Links      

Audio Book Player here[^], many thanks for your help BrochPirate.

The Hosting ActiveX Controls in the .NET Compact Framework 2.0  here[^]

The introduction of this article iPhone UI[^]   

History  

• 7 Gen 2009 - First release.  
• 10 Gen 2009 - Second release.   

Minor bug fixing, Hided the LocationBar at the start, added the Message bitmap. 

    

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh) FirstPrevNext

Terrific. victorbos 5:39 7 Nov '09   Hi Dr Luigi. It never ceases to amaze me how little I know and the many interesting people like you have to teach me. Thanks for the example and the clean code; it will teach me a lot and I will even have fun in the process! BTW: I tried it on a new HTC Tilt2 running WM6.5. I was able to build it (VS2008+Vista) and it worked without a hitch. However, as I am not familiar with WMP or the iPhone music player, the only problem I had was trying to figure out how to quit/close/exit the program. I finally stopped it from VS. I guess one of these days I will figure out how to close it on the Tilt2! (Of course, if you can tell me that would be great.) Cheers! --VVX Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Terrific. Dr.Luiji 8hrs 50mins ago  Hi Victor, It's really difficult to find people that think like us. Thanks for your words, I appreciated Concerning your question, the exit on the original iPod Touch was the phone red button. Unfortunately to do that I had to implement a keyboard hooking but I've made a commercial program were I use KB Hooking and my boss was not happy to see that code on this project, my contract will not let me free to write this part. So far, I have added the exit in the Files Manager (you can find it over the battery image in the top right). Inside the Files manager You can find the exit app. Cheers. Dr.Luiji Trust and you'll be trusted. My Blog : The Code Is Art Sign In·View Thread·PermaLink Good Job PavanPareta 7:31 9 Aug '09   Hello Dr.Luiji, Very good Job, appreciable job my vote - 5 Pavan Pareta Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Good Job Dr.Luiji 8:38 10 Aug '09   Thanks man Dr.Luiji Trust and you'll be trusted. My Blog : The Code Is Art Sign In·View Thread·PermaLink Good job Justx 23:36 27 Jul '09   It's realy good job Dr.Luiji. I really appreciate to you for this example. We are waiting more projects Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Good job Dr.Luiji 3:28 28 Jul '09   Thank you, Justx. Happy to hear that!! Dr.Luiji Trust and you'll be trusted. My Blog : The Code Is Art Sign In·View Thread·PermaLink DrawSongName thows exception VIJAY1510 7:10 30 Apr '09   Hi I compiled the application in VS 2008 and ran it on windows mobile 6.0 classic emulator I got this exception. I think this because there is no song information available. Sign In·View Thread·PermaLink 3.63/5 (5 votes) Re: DrawSongName thows exception Dr.Luiji 2:08 4 May '09   Thanks Vijay, You are right, I've not added there the Try/Catch Block to catch exceptions. Soon I'll add a new version with this bug solved. Thank you for your help. Dr.Luiji Trust and you'll be trusted. Try iPhone UI [^] a new fresh face for your Windows Mobile, here on Code Project. Sign In·View Thread·PermaLink 2.00/5 (3 votes)

Last Visit: 16:20 8 Nov '09     Last Update: 16:20 8 Nov '09 1