Interactive 3D cube menu.
Mouse drag to rotate.
Mouse wheel to expand and shrink the cube menu.

Download source files here

From the designers’ perspective screen’s real estate is always an issue. Surely we jumped from the ‘faint’ 1024×768, to the more reasonable 1280×1024 resolution, but still with the development of a far more complicated web based systems the problem remains.

Recently we had been contracted for a building a moderate scale web solution, based on our Whirlwind/Furia kit, with a total of 30-35 different ‘applications’.
Surely, the first choice was to go with a more traditional approach – using an icons for representation of the different apps.

Icons showcase

Why do we need to ‘copy’ functionality from desktop to web?

Pros: User is already comfortable with the presented interface and there is no need to adapt to a new interface concepts.
A possibility for a creating ‘a copy’ applications – both desktop and web – with a slight touch there will be no visible differences.
Eliminating the F-pattern reading.
Comfortable and ‘intuitive’ presentation.

Cons: Why do we need to continue creating presentation layers based on the limitations of the present new Form(); design?
With the develoment of the cloud computing my expectations are that more and more applications will be ‘moved’ online – SAS (Software As a Service).
pNew technologies like canvas, css3, html5 etc. are giving a far more greater ability to control and create a drastically new concepts for the presentation.

Then I found the Thiemo Mattig’s rotating javascript cube, which made me think of the 3D representation of objects (menu for instance).
Couple of beers later, an initial POC was ready – mouse drag controlls the rotation, wheel expands and shrinks the cube.
Icon’s description was disabled at small cube sizes – which I expect to be the normal use size.
Ctrl-F2 controls the visibility of the icons’ description layer.

Then I thought how should I present that the menu is actually rotating when is dragged? An animation may be? :-)

Build on MooTools

Syntax :

1
2
3
4
5
6
7
8
 
	var menu = new CubeMenu({
		items: [items],
		dimension: dimension,
		centerX: x,
		centerY: y,
		pauseMaxMs: pause
	});

Options:
items – array containing icon text name, icon image url, onClick callback
dimension – initial size of the cube, default 0.3; please note, under 0.4 icon text is hidden;
centerX – X coordinate of cube center relative to parent in px
centerY – Y coordinate of cube center relative to parent in px
pauseMaxMs – auto rotation delay in ms

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	var myCubeMenu = new CubeMenu({
		items: [
			['Charts', 'data/0.png', function(){ alert('Chars clicked..'); }],
			['Games', 'data/1.png', function(){ alert('Games clicked..'); }],
			['Sounds', 'data/2.png', function(){ alert('Sounds clicked..'); }],
			['Internet', 'data/3.png', function(){ alert('Internet clicked..'); }],
			['Calendar', 'data/4.png', function(){ alert('Calendar clicked..'); }],
			['Users', 'data/5.png', function(){ alert('Users clicked..'); }],
			['Palette', 'data/6.png', function(){ alert('Palette clicked..'); }],
			['Monitor', 'data/7.png', function(){ alert('Monitor clicked..'); }],
			['Mail', 'data/8.png', function(){ alert('Mail clicked..'); }],
			['Acrobat', 'data/9.png', function(){ alert('Acrobat clicked..'); }],
			['Flash', 'data/10.png', function(){ alert('Flash clicked..'); }],
			['RecycleBin', 'data/11.png', function(){ alert('RecycleBin clicked..'); }],
			['Connections', 'data/12.png', function(){ alert('RecycleBin clicked..'); }],
			['', 'data/13.png', $empty ],
			['Blocks', 'data/14.png', function(){ alert('Blocks clicked..'); }],
			['Chess', 'data/15.png', function(){ alert('Chess clicked..'); }],
			['Languages', 'data/16.png', function(){ alert('Languages clicked..'); }],
			['Board', 'data/17.png', function(){ alert('Board clicked..'); }],
			['Battery', 'data/18.png', function(){ alert('Battery clicked..'); }],
			['Newspaper', 'data/19.png', function(){ alert('Newspaper clicked..'); }],
			['Clock', 'data/20.png', function(){ alert('Clock clicked..'); }],
			['MSN', 'data/21.png', function(){ alert('MSN clicked..'); }],
			['Printer', 'data/22.png', function(){ alert('Printer clicked..'); }],
			['Database', 'data/23.png', function(){ alert('Database clicked..'); }],
			['Shutdown', 'data/24.png', function(){ alert('Shutdown clicked..'); }],
			['Reload', 'data/25.png', function(){ alert('Reload clicked..'); }],
			['Camcorder', 'data/26.png', function(){ alert('Camcorder clicked..'); }]
		],
		dimension: 0.4,
		centerX: 600,
		centerY: 400
	});

by CTORH