Droptiles - Metro style Live Tiles powered Web Dashboard

Droptiles mimics the experience of Windows 8 Start screen using HTML, Javascript and CSS. It offers a framework to build Dashboards comprised of Tiles. Tiles are mini-Apps built using Javascript. They launch a full screen app when clicked. Apps can be any regular website to custom built applications

Introduction

Droptiles is a Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles . Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform. The sample project is built using ASP.NET to show some server side integration, like Signup, Login and getting dynamic data from server. But with very little change you can port it to PHP, Ruby, JSP or any other platform. Droptiles is the sequel of my Dropthings, which is the first Open Source Web 2.0 Dashboard.

Main parts

App Store shows a collection of apps available for users to add on the Dashboard.

Login, Signup, Settings areas are built using ASP.NET and uses ASP.NET Membership provider.

The Dashboard

Dashboard comprises of Sections. Each section contains a collection of tiles. Each box you see is a Tile. Tiles are mini apps. A tile can be of the following type:

Simple html pages

A dynamic Javascript mini-App

Dynamic page

Coding a Tile

Let's look at the Flickr tile. First of all, all the tiles appearance are defined in the Tiles.js file, which contains the meta data for all the tiles. For example, the Flickr tile metadata is defined as following:

The icon is the default icon shown on the tile while the javascript, css, html are loaded. The horizontal and vertical size of the tile is defined in the size attribute. Then when clicked, what URL to host in the full screen view is defined in appUrl. The additional CSS, Javascripts to load are defined in cssSrc and scriptSrc. Finally the initFunc tells what function to invoke once the javascripts are loaded.

The metadata defines how the tile is displayed on the Dashboard. The behavior to load data from Flickr comes from the Flickr.js file, defined as follows:

First it tries to read the section and tiles setup from the cookie, if it is saved. If not found in cookie, it loads the default definition. Then the framework in TheCore.js kicks in and takes care of creating the tiles and injecting the dynamic behavior inside the tiles.

The code is heavily documented, so you can read the details from there.

App Store

The App Store experience is built the same way as the Dashboard. The App Store shows how reusable the Droptiles framework is. It uses the same TheCore.js to provide the experience. The only difference is instead of Tiles.js which defines the tile metadata and the default tiles, it has its own AppStoreTiles.js that defines the Tile metadata and the default tiles to show on the App Store.

That's all that differs.

Here's the code in AppStore.js:

var viewModel = new DashboardModel("App Store", [], window.currentUser, ui,
TileBuilders);
$(document).ready(function () {
// Hide the body area until it is fully loaded in order to prevent flickrs
$('#content').css('visibility', 'visible');
// Initiate KnockoutJS binding which creates all the tiles and binds the whole// UI to viewModel.
ko.applyBindings(viewModel);
viewModel.switchTheme('theme-white');
viewModel.loadSectionsFromString(window.AppStoreTiles);

That's it. The loadSectionsFromString function takes care of creating the AppStore Tiles. It takes the section and tile configuration in a string serialized format, like this:

Section1~flickr1,flickr.news1,news|Section2~angrybirds1,angrybirds

This is how it is stored in the cookie as well so that next time you visit the Dashboard, it shows you how you have left it.

Conclusion

Droptiles is an open source project to show how Windows 8 Start experience can be built using just HTML, Javascript and CSS. It can be adopted to build various web applications, especially touch enabled applications. The modern Metro look & feel makes it very attractive to use as a self-service portal experience or as a content aggregator.

I've converted DropTiles to a Drupal theme which is in Sandbox at the moment at Drupal.com http://drupal.org/sandbox/charlie_love/1880114[^] I'm looking for developers to work on the project with me and I'm happy to add people to the sandbox.

I just found this today and I love this idea. I downloaded the zip and I uploaded the code to my web server. It wasnt running correctly. I opened up the code and ran through it briefly. I stopped looking after after these 2 instances...

Demo.html:

File is named Droptiles.css

Default.aspx:

Location is Tiles/Tiles.js

I am pretty amatuer at this, so these errors could just be me. Please tell me what I am doing wrong.

I really like your project. I am considering to buy it in the near future. However I am developing a website in Razor MVC4 where I use dynamic views everywhere. How can I plugin any of such views as tile? I see that you are using Asp.net in earlier versions. Are there any ways of pointing a tile to a view located in a different directory - not just inside of a Tiles folder?

Hi Omar Al Zabir your blog is awesome now here i need to create some task plz help now we have to do drag and drop things like let me explain you we have empty place right now iam droping somemenu now it is placed at droped place now i need to drop one more menu it should place like sub menu for before menu how could we do this could u plz help me to do this task thanks in advance

Id like to create an HTML5 web apps/site which could be consumed on Desktop, tablet and Mobile devices. I want it to be flexible in such a way that I could use PHP or Java with it. After intensive googling I found your Droptiles. Since I was also thinking of incorporating the Windows Live Tiles look and functionality in my mobile web site, I thought that this would be a good choice.
My question is what are the HTML5 features which are supported by Droptiles? I need to know this before commiting to this framework. So far I have not read of any html5 feature.

Im really interested in using your framework and purchase a license but I first need to know if this framework will cater my present requirements. I hope you reply as soon as possible thanks.
Overall amazing framework!

Hi,
Droptiles does not have any feature now that requires HTML 5. So, it is not using HTML 5 yet.

If you want to use HTML 5 features, you can easily add them. There's nothing in droptiles that will prevent that. It has been designed to have negligible footprint on the server side and 98% on client side html, js. So, you can easily make Single page Applications out of it, utilizing the html 5 features.

Thanks for the quick reply sir!
One more thing, when will the android support update be coming? I watched your screencast and you said that presently it does not support Android devices/browser. I also tested viewing your droptiles example on a Note 10.1 tablet with a chrome browser and the example seems to be buggy. When you said that it does not support android did you mean that droptiles framework does not support android? or did you mean that only the example does not support android?
Could I easily fix the rendering issue on android devices using viewport tags and progressive enhancement techniques?

I was told it does not work in Android. I believe there's some javascript or CSS issue for which it does not work. I haven't tested it myself. Need to get hold of an Android device to play around. Might be a good excuse to buy a Nexus tablet.