Windows 8 Dashboard in Html5

The Metro design language is now in all Microsoft products, it started with windows phone, whent to the dev tools like silverlight that offers metro ready templates, in the last months also almost every product website was refresh to this new metro look.. and last, the unveiling of Windows 8, it has a new look and feel inspired in Metro using live tiles as the start screen.

One guy called Jose Fajardo, a awesome and inspiring  developer from AU started to play around with the html5 to build a dashboard similiar to the one of Windows 8, you can see his work here, http://discover.cloudapp.net/ he got inspired by the Tron HTML5 app, and started it own little tool helper for creating this immersible experiences.

I love his work, and started playing with his controls of the windows 8 html5 dashboard http://ruimarinho.net/wp-content/uploads/2011/07/9DPGV.mp4 , but the thing thought , it was impossible to make it work on the iPad, even with all the code written in html5, the problem was  that in the ipad we are expecting touch events and not mouse up, our mouse down events.. so i added some lines of code to make it work more or less well in the iPad and iPhone.

I added this code inspried in the already written mouse code

        //ruiespinho stuff
        //hook touch events
        var mCanvas = document.getElementById("Canvas");
        mCanvas.addEventListener('touchstart',this.OnTouchDown);
        mCanvas.addEventListener('touchmove', this.OnTouchMove);
        mCanvas.addEventListener('touchend', this.OnTouchEnd);
        mCanvas.addEventListener('touchleave', this.OnTouchEnd);

 //touch functions

this.OnTouchDown = function (touchEvent) {
        mLastMouseX = touchEvent.targetTouches[0].clientX;
        mCurrentInertiaX = 0;
        mCurrentVelocityX = 0;
        mLastMotionUpdate = 0; //new Date().getTime();

        mKeyboardVelocityX = 0; // touch down resets any keyboard motion

        mMousePointer.x = touchEvent.targetTouches[0].pageX;
        mMousePointer.y = touchEvent.targetTouches[0].pageY;

        mMousePointerDown.x = touchEvent.targetTouches[0].pageX;
        mMousePointerDown.y = touchEvent.targetTouches[0].pageY;

        mLastX = mViewportTargetX;

        var mouseDownHandled = false;

        if (Experience.Instance.RinzlerCalloutActive || Experience.Instance.SamCalloutActive) {
            mouseDownHandled = true;
        }

        touchEvent.preventDefault();

        /* not doing mouse handling in canvas
        // update all of the visible pages
        for( var i = 0; i < pages.length; i ++ )
        {
        // degrade in case of unhandled errors by dropping broken pages
        if( pages[i].Broken )
        continue;

        var localMousePointer = { "x": mMousePointer.x, "y": mMousePointer.y };

        // the mouse pointer will be in each page's local space regardless of scrolling
        var localOffsetX = pages[i].X - mViewportX;
        localMousePointer.x -= localOffsetX;
        localMousePointer.x = Math.round(localMousePointer.x);

        try
        {
        // handle contact down event
        var handled = pages[i].HandleContactDown(localMousePointer);
        mouseDownHandled |= handled;
        }
        catch( err )
        {	// if a page commits an error, remove it from circulation
        pages[i].Broken = true;
        Dbg.Print("Page " + pages[i].Label + " unhandled error in HandleContactDown(): " + err);
        }
        }
        */

        // if mouse wasnt handled by any of the pages, use it for scrolling
        if (!mouseDownHandled) {
            mPanningActive = true;
            mMouseDragOpacityTarget = 1;
        }
    }

    this.OnTouchMove = function (touchEvent) {
        if (mPanningActive) {
            // the granularity of JS timers in IE9 is around 16msec
            // which means if we are getting 60+ mouse-move updates per second
            // once in a while we will get a near-zero timespan
            // which throws any velocity/inertia computation out the window
            var timeNow = new Date().getTime();
            //var deltaTime = timeNow - mLastMotionUpdate;

            mMouseDragOpacityTarget = 1;

            // apply camera panning
            var newX = touchEvent.targetTouches[0].clientX;
            var deltaX = newX - mLastMouseX;

            mLastMouseX = newX;
            mLastMotionUpdate = timeNow;

            mMousePointer.x = touchEvent.targetTouches[0].pageX;
            mMousePointer.y = touchEvent.targetTouches[0].pageY;

            mViewportTargetX -= deltaX;
        }

        mMousePointerReal.x = touchEvent.targetTouches[0].pageX;
        mMousePointerReal.y = touchEvent.targetTouches[0].pageY;
    }

    this.OnTouchEnd = function (touchEvent) {

        if (mPanningActive) {
            mPanningActive = false;
            mCurrentInertiaX = Math.abs(mCurrentVelocityX);
            mInertiaMaxTime = 300 + mCurrentInertiaX * 500;
            mbProcessInertia = true;

            // decrease velocity; duration of last mousemove to this mouseup event
            // indicates a hold gesture
            var timeNow = new Date().getTime();
            var deltaTime = timeNow - mLastMotionUpdate;
            deltaTime = Math.max(10, deltaTime); // low-timer granularity compensation
            mLastMotionUpdate = 0;

            // 100msec is a full hold gesture that complete zeroes out the velocity to be used as inertia
            mCurrentVelocityX *= 1 - Math.min(1, Math.max(0, deltaTime / 100));
        }

        mLastX = 0;
        mMouseDragOpacityTarget = 0;

        $.doTimeout("clearmousedown", 50, function () {
            mMousePointerDown.x = 0;
            mMousePointerDown.y = 0;
        });

    }