-
intro
The "Tron" legacy HTML5 app is a pretty great app and is a predominantly "canvas" delivered experience, that is most of the app is generated on a canvas element.
It has great gesture support particularly scrolling and if you F12 their code you can see ALOT of great dev tips such as those around the decision to target a framerate of 60 fps ..
I basically want to take some of their great tips and some code bits and build ontop of it my own UI framework to deliver a Windows 8 like dashboard :)
Don't forget to F12 the source at any time to see what's going on and/or how things are working! This is a work in progress so expect big changes between each step!
Checkout Disney's Tron Website
Follow me as I create this
application
intro
Building the Windows 8 dashboard with HTML5 "Canvas" and "JS"
1
The "Dashboard" is one single <canvas> tag, which i've colored purple just to make it easy to distinguish from the page.
2
This dashboard "Canvas" has all the following events wired up MouseDown, MouseUp, MouseMove, MouseOut, MouseOver, and they allow us to create the panning/flowing/clicking gesture experience. The viewport & timeline give us the size of the visible area this is important when building the flowing experience. The document itself has the KeyDown event wired up so you can scroll using "left","right" keys!
3
The "Dashboard" can contains many "Pages" all flowing horizontally in one long stream
4
A "Page" is made up of evenly-distributed "cells" where each cell is 'mouse-input' and 'boundary' aware.
5
A grouping of cells is called a "Slot". Each cell is used to work out the dimensions & attributes of the slot.
6
A "Control" can be placed within a slot". This is an example of a basic control, the "Rectangle"
7
This is an example of a control that uses the "clicked" property of the "ControlBase" from which ALL controls inherit. The control is called "ToggleOnOff", and as the name suggests when clicked it will toggle itself on/off.
8
This "ImageBasic" control show's some interesting traits, particularly with how it downloads images and prepares itself for presentation onto the canvas.
9
This new "RectangleAnimated" control builds on top of the Rectangle control but allows for simple animation of the X,Y position of the rectangle.
10
The new "ImageAnimated" control builds on top of the ImageBasic control but allows for animating the crop points in the X,Y direction BUT also the Width & Height of the image under the crop boundaries.
11
The new "TextAnimated" control animates text into view after time X seconds have passed. You also define the direction that the text is rotated based on the boundary it sits.
12
This is a Silverlight control that is animated/controled via the the canvas movements. I've called it "SilverlightHost" and it's interesting because the canvas coordinate system controls the position and movement of this control.
13
"CanvasHost" is like SilverlightHost in that it loads a complete Canvas html5 object within a slot. It is fully interactive and flows with the page as you move it.
14
"FrameHost" loads an IFrame into a slot. It flows with the slot as you slide the dashboard.
15
"VideoBasic" loads a HTML5 Video control into a slot. It does not have any controls, you need to use the "VideoControlsBasic" control in another slot for that functionality.
16
"AnimationEngine", "Storyboard" & "Easing" . Let's you create simple storyboard animations for any control including defining what easing to use. It's currently wired up to the OnLoad event for every control so when the page loads the control will fire the animation if it exists :)
17
"Storyboard" part 2. Extending the functionality of the storyboard by allowing TopToBottom & BottomToTop direction for the animations
18
"Storyboard" part 3. Extending the functionality of the storyboard by allowing you to fadein the control using it's opacity
19
Configuring "Multiple Applications". In preparation for some really cool things i needed to be able to tear down one application (it's pages/controls) and load another application (pages/controls etc) all within the client. There is no full or partial page postbacks, this is pure client side reloading of a new application and it's domain.
20
Allow "Vertical" panning in the experience.
21
"Elastic Button" - controls now are getting more complex, this control shows sequenced easing animations to give a nice button click experience.
22
"Behaviors", "MouseOver", "MouseOut", "HitTest" - the ControlBase has been extended exposing the MouseOver & MouseOut events. In this example I have extended the "ElasticButton" to change it's color based on if the mouse hovers over it. Also I refactored step 21, pulling out the click animation logic into a "Behavior" that can now be reused across other controls :)
23
Refresh of alot of the controls fixing bugs. And the basic visibility tests in the controlbase and pagebase have been tweaked to be more optimized. Also starting to give the tiles more substince to give a more realistic example!
24
"Calendar Control" (part 1) - using some nice animations and a infinite dashboard to create a calendar optimized for the Win8 dashboard experience. The Win8 dashboard metaphor really causes you to rethink traditional controls. There will be a couple of parts to this control where my ultimate goal is to push our ideas of what a calendar is. But this first step is to create the basic calendar itself :)
25
"Calendar Control" (part 2) - Created a new type of base control called the "FloatingControl" that doesn't adhere to the page/slot model, these "floating" controls can dock themselves in the visible area in a fixed location. The first of these controls is "PageNavigator", it's docked always at the top and lets' you quickly move between "pages".
26
"Calendar Control" (part 3) - Added a "CalendarDay" control, when you click on a 'day' it loads up this 'CalendarDay' control, it shows hours scrolling horizontally.
27
"Calendar Control" (part 4) - Added a way to choose the calendar date. Created a new generic 'SingleSwipeList' that let's you navigate a list of items with a swipe (up/down)
28
"ToolTip" is a new control of type 'FloatingControl'. Each control of type ControlBase can turn on tooltips by defining a tooltip for itself.
Find me on Twitter as
JoseFajardo
This site is best experienced with Internet Explorer 9 for Windows Vista and Windows 7.
Learn more about Internet Explorer 9
