Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.
02-05-2012, 11:28 AM #1iMetro: Windows 8 on the iPad! [Beta 7 Released!]
Hello everyone, I'm linkandzelda. Some of you may know me of other projects external to these forums. I've been a member here for a while but this is my first ever contribution.
iMetro is a new theme for the iPad and iPad 2 which aims to bring the closest Windows 8 experience to your iPad as possible. I was inspired by OS7 and Metro 8 for the iPhone and thought my iPad needed the same touch. The theme is currently a work in progress. I started theming for the first time 3 days ago with the intention to keep this theme to myself. But it's turning out so well I think I'll plan to release it. I have no idea if this will be well received or not but it's worth a shot for those that like it. I love theming and it's very exciting to make this.
All of the tiles are either Internet Explorer or Stocks. This was purely as a placeholder due to not creating the needed icons yet.
This is what has already been done and implemented in iMetro.
Full Tiles Set
The layout of the Tiles are completed and arrange exactly like a 'stock' version of Windows 8, plus a few extra slots for your needs.
Full set of Metro Icons
The theme includes a full set of Metro styled Icons for over 100 different apps including the built in iPad apps.
Just like Windows 8, the background scrolls proportionately to the Scrolling Tiles.
Editable Small Tiles
Currently all the small tiles can be edited using DreamBoard's 'Live editing mode'. Large tiles to come in the future.
On Windows 8 is a small section on the top right showing your Username and User Tile. In iMetro this is implemented.
Pressing this will show the Username Menu where you can change the username, lock the iPad, Log Off out of DreamBoard and cancel to close the menu.
iMetro includes a Personalize menu which mimics the Personalize options in Windows 8. From here you can tap to change your Username to anything you want. Tapping the User Tile will show you instructions for changing it manually, with the ability to change it from within iMetro planned for the future. This menu is animated as you can see in the video.
Badge Icon Numbers
As you would expect from an interface, it shows the current unread badge count for Large and Small tiles. You can see this in the videos.
Live Photos Tile
This tile is a large tile inking to the Photos app. It will currently pull a random image from Photo Stream and transition through it with smooth animations!
'Charms' + Clock menu
On Windows 8 tablets, you get to open a small menu on the right of the screen which includes a pretty clock on the right. This is included in iMetro for quick access to Google Search, All App view and Settings.
All App View
A new feature which allows you to view all the installed apps on your iPad, and open any of them from the All App View.
Live Twitter, Facebook, Gmail and Flipboard Tiles
Finally these amazing tiles are available for your use on the iPad.
- Widget Dashboard system
- Winterboard style to theme the system
- Launch & other animations
- More Live Tiles
As the theme evolves I will get new ideas and they can be added to planned features list.
Beta 4 of iMetro has been released!
To download go here!
Beta 7 has also been released!
For the download, you can go here!
Instructions to install
Before starting make sure you have DreamBoard and Icon Renamer installed from Cydia.
For people who are upgrading then simply delete your Current.plist and replace the contents of the theme folder with the later update. Sorry to inform you, that all of your app configurations and tweaks will be lost and will have to be applied again.
- SSH onto your iPad.
- Put the folder 'iMetro' onto the /DreamBoard/ folder.
- Open DreamBoard and select iMetro. You will see the theme open.
- Exit out of the theme and back into default/theme of your choice (See below Exiting iMetro).
- Back in SSH, change the permissions of the iMetro folder to 775, and make sure it applies to folders within.
- Switch back to the iMetro theme in DreamBoard.
Currently as this is a beta there is no way to see all your installed apps. You can only edit the app icons and run your apps that way. There is over 80 slots for you to use although the Large tiles cannot be edited from within the theme.
Live Photo Tile not working?
Download the 'album.html' from here and put it inside iMetro/HTML/Photos/ folder. Make sure to replace the old one. Then reopen the theme to see the changes.
Fixing Angry Birds & Cut the Rope - Only if you have all 3 of each
Currently the 3 Angry Birds games have the same name. Due to how DreamBoard selects app icons this is a problem, as it will look for the same icon image for all 3 of the games.
- Switch back to the Default theme.
- Press and hold any app icon to start moving mode.
- Tap the Angry Birds Seasons icon and name it "Angry Birds S" and press OK.
- Tap the Angry Birds Rio icon and name it "Angry Birds R" and press OK.
- Tap the Comic (Cut the Rope Gift) icon and name it "Comic X" and press OK.
- Tap the Cut The Rope Experiments icon and name it "Cut the Rope X" and press OK.
- Press the home button to stop editing mode.
- Return to the iMetro theme in DreamBoard. Angry Birds & Cut the Rope games should show the right icons.
This concludes the installation of the theme. Below are a few tweaks and how to use iMetro.
Setting Up Live Tiles
Here you will learn how to setup all of the included Live Tiles to work with your own content. Something should be noted about how the animations of the tiles work. They have been fine tuned to my own internet speed, and are based on the amount of time it takes for the data to be retrieved from the internet. This hopefully will not cause an issue for most people.
For the first time you run Update 7 or higher, the feeds will not work as I removed my own data so as not to show any of my personal information.
In order to get Twitter to work with your News Feed, we need to use Super Tweet.
1. Head over to SuperTweet.Net - Twitter API OAuth Proxy - Command-line Twitter and sign up for a account. On the left you will sign in using the Twitter you want the News Feed for.
2. Once authorised the app, you will be required to enter an Email address, an App name, Description, Website and Organization. Enter as below:
Email: your email.
App Name: Your choice.
Description: Your Choice.
Website: Your choice.
3. Once entered click register application and you will be taken to the next page.
4. Under the section Access Credentials, on the far end press Activate.
5. Enter a password to use with Super Tweet. You will need to remember it. Press submit after entering.
6. Navigate to /iMetro/HTML/Twitter/ and SSH the file widget.js onto your Computer.
7. Open it for editing an search for the text: "enteryourusernames:enteryourpassword".
8. Change them to be your Super Tweet username and Super Tweet password.
9. Save the file and SSH it back onto your iPad.
10. Check that it works. Any problems ask me about it.
Currently this tile will read from your Facebook Notifications.
1. Go to your Facebook account and sign in.
2. Go to your Notifications area.
3. You will see at the top you have the option of an RSS feed.
4. Click that link, and then copy the URL given.
5. Navigate to /iMetro/HTML/Facebook/ and SSH then open the file facebook.html.
6. At the top you will see "YourFeedAddressHere".
7. Place your Facebook RSS address which you copied earlier.
8. Save and test it by SSHing the file back onto your iPad.
9. Any problems ask me.
Currently the Mail tile will only work with a Gmail account. This is a limitation I would like to address in the future.
1. Head over to FreeMyFeed - Free Your Feed From Authentication
2. In the Feed address enter https://mail.google.com/mail/feed/atom.
3. In the username and password area, enter your Gmail Username and Password.
4. You will get a confirmation page showing a link at the bottom of the page.
5. Copy that link address.
6. Navigate to /iMetro/HTML/Mail/ and SSH the file mail.html and open it.
7. Find the area that says "YourEmailFeed" and paste the feed link you copied earlier.
8. Save the file and SSH it back onto your iPad to test it.
9. Any problems then ask me.
This is probably the longest out of every tile to setup. It relies on the use of Yahoo Pipes for the purpose of joining RSS feeds together and sorting them to create one RSS feed, and then passing it into the Flipboard tile.
Before doing this you will need to sign up for a yahoo account, have the links for all of the RSS feeds of the websites you want to show on your Flipboard tile, and also be familiar with how Yahoo Pipes works. Unfortunately all of this goes beyond the scope of this guide, but here is the process for what your Yahoo Pipes setup should look like.
First of all you will need to bring a 'Fetch Feed' onto the Pipe area. Then proceed to fill out all the URLs with the feeds you want. If you want over 10 feeds then you will need to create more 'Fetch Feed' blocks to fill them up. Once you entered all of your Feeds then you will need a 'Union' block to combine all of these feeds into one. After this make the 'Union' block go into a 'Sort' block. For the feed to be most effective you need to make it sort by PubDate in descending order. This will make all of your feeds show the latest ones first. Then finally, make all this go to the 'Pipe Output'.
Save your feed and grab the RSS link.
Follow the instructions for the Mail tile and instead open /iMetro/HTML/Flipboard/flipboard.html and place your Yahoo Pipe feed there. Save the file and test it.
Something that should be noted, if you have multiple Email inboxes and accounts with Gmail that you want to merge, you can use this same method with Yahoo Pipes to combine the feeds of your Emails, and then apply the Feed URL to the Mail tile.
Well that's all of the Live Tiles for now that can be used. Any problems then ask me on the forums and I'll help out.
Changing your Username and User Tiles
iMetro includes a Personalisation menu that lets you change your Username that is displayed on the top of the theme.
- Upon first opening the theme, your Username should read "null".
- Tap the Username or User Tile at the top of the theme.
- Select 'Change Username' from the drop down menu.
- On the new Personalise menu, tap your username.
- Enter your desired Username and press OK.
- Tap the 2 User Tiles to get instructions for changing them at this time.
- To confirm, press the Confirm button. Your Username should change.
- To change again repeat steps above again.
Changing the Small app tiles
Currently iMetro supports the changing of the Small tiles so they open other apps.
- Press the small Gear image currently located on the bottom right of the "Preferences" icon.
- This will open DreamBoard's Live Edit mode.
- Press any of the Small Tiles and a menu will appear.
- Select from the list the app you wish to place.
- Your app has now been changed. Press the home button to close editing mode.
- Repeat these steps until you have arranged all your apps.
Changing Large tiles
I built the theme in such a way that Large tiles cannot be edited from within the theme. They can be edited by changing the entry in the Theme.plist. You will require the App Identifier and a new Large Icon. I won't however cover the instructions here on how to change them.
From the Username menu select "Log Off". This will drum you back to the DreamBoard interface.
Creating Icons - Using the Icon Templates Provided
I included with the theme 2 Icon Templates for building Small and Large tiles.
- Open the tile builder psd that you require.
- Proceed to create your Icon on a new document. Make sure it has a transparent background.
- Place your Icon over the "Icon" layer and position it to match the existing Mail icon.
- Hide the original Mail icon layer.
- Unhide the layer of the background colour you would like, or add in your own background layer.
- Save the image as appname.png.
- Place it onto your device at /DreamBoard/iMetro/Icons/ folder.
- Change your app in iMetro to see your new icon in action.
Me: For making the theme
Wyndwarrior: For creating DreamBoard
Microsoft: For creating Windows 8 Metro UI
Enfinity & Wyndwarrior: For creating the amazing OS7
Ragatony: For creating Metro 8
GaN-MaN, Rimbol, hughaas, navarr, BCSCustom, dharris, rpgpromaster, Angrypig, homokimark, dacheezypuffs - Various OS7 mods, icons and addons
What do people think so far? Got any ideas or suggest? Don't like it? Please tell me here so I can get some feedback.
If there are any issues with the theme, contact me here by posting them in the thread or in a PM.
For updates on the theme follow me @linkandzelda137
Any new videos and I'll post them here. I mostly post screenshots to Twitter and other small updates.
Well then, have fun and enjoy iMetro!
Tell me your thoughts, ideas, suggestions, criticisms and anything else!
Last edited by linkandzelda; 03-02-2012 at 02:21 PM.