YUI 3.x Home -

YUI Library Examples: Dial: Dial With Interactive UI

Dial: Dial With Interactive UI

This Dial widget example shows the following:
  1. A demonstration of a large value range combined with fine increment control.
  2. Setting UI strings before rendering
  3. Setting configuration attributes
  4. Construction-time event subscription allowing Dial to control an interactive UI
  5. Calling one of Dial's value change methods from the click of a link. <a>Hubble</a>

Notice the Dial can traverse the entire 6,000+ pixels of the scene height, but by pulling the handle farther away from the Dial's center while rotating, the user can get 1 pixel movements, without strain. After the dial has focus, the following keys also opperate the Dial, arrow up/down/left/right, page up/down, home, end.

View example in new window.

hubble
thermosphere
mesosphere
stratosphere
troposphere
ozone
crust
mantle
From Earth to Hubble

Making a Dial Drive an Interactive UI

The valueChange event of a Dial can be the means of controling other UI displayed on a page.

The Markup

The only markup requirement for the Dial itself is a div to contain the Dial. The rest of the markup and CSS in this example is just for the scene of the earth to the Hubble. 

  1. <div id="demo"></div>
<div id="demo"></div>

The JavaScript

Dial extends the Widget class, following the same pattern as any widget constructor, accepting a configuration object to set the initial configuration for the widget.

After creating and configuring the new Dial, call the render method on your Dial object passing it the selector of a container object. This renders it in the container and makes it usable.

This example also shows how to modify the visible UI strings before the dial renders.

During instatiation of a Dial, several configuration attributes can be set. See below.

Note the construction-time event subscription

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	var dial = new Y.Dial({
  4. 			// The units in this example are Altitude in Kilometers...
  5. 			min:-35, 		// min altitude -35 Kilometers (below earth's surface)
  6. 			max:559, 		// max altitude = Hubble's orbit
  7. 			stepsPerRev:30, 	// One revolution of the Dial's handle will change the altitude this many units
  8. 			value: 0,		// starting altitude of sea level
  9. 			diameter: 100,		// diameter of the ring of the dial control in pixels
  10. 			minorStep: 1,		// keyboard (arrow key) changes this many units
  11. 			majorStep: 10,		// keyboard pg up/down changes this many units
  12. 			decimalPlaces: 2,	// display this many digits to the right of the decimal point
  13.  
  14. 			// an object literal containing key-value pairs of the visible strings in the Dial UI
  15. 			strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},
  16.  
  17. 			// construction-time event subscription.
  18. 			// Whenever the value of this dial object changes, the event handler function (setSceneY) fires
  19.             after : {
  20.                 valueChange: Y.bind( setSceneY, dial )
  21.             }
  22. 	});
  23. 	dial.render("#demo");
  24.  
  25. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
			// The units in this example are Altitude in Kilometers...
			min:-35, 		// min altitude -35 Kilometers (below earth's surface)
			max:559, 		// max altitude = Hubble's orbit
			stepsPerRev:30, 	// One revolution of the Dial's handle will change the altitude this many units
			value: 0,		// starting altitude of sea level
			diameter: 100,		// diameter of the ring of the dial control in pixels
			minorStep: 1,		// keyboard (arrow key) changes this many units
			majorStep: 10,		// keyboard pg up/down changes this many units
			decimalPlaces: 2,	// display this many digits to the right of the decimal point
 
			// an object literal containing key-value pairs of the visible strings in the Dial UI
			strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},
 
			// construction-time event subscription.
			// Whenever the value of this dial object changes, the event handler function (setSceneY) fires
            after : {
                valueChange: Y.bind( setSceneY, dial )
            }
	});
	dial.render("#demo");
 
});
The Event Handler

Preceeding the code that instatiates the Dial widget, declare the event handler. Of course we can use the value of the Dial to do whatever we want, but in this example, the event handler updates the CSS top of the pictoral scene <div id="scene"> of the earth to the Hubble. This scene is moved up or down inside a viewframe <div class="viewframe"> that has CSS overflow:hidden;. The reason e.newVal is multiplied by 10 is so that the scene moves 10px for every 1 kilometer of the Dial's value. 

  1. /**
  2. * The Dial's valueChange event is passed to this.
  3. * sets the CSS top value of the pictoral scene of the earth to the hubble.
  4. * This scene is an absolute positioned div inside another div with
  5. * overflow set to hidden.
  6. */
  7. setSceneY = function(e) {
  8. 	Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
  9. }
/**
* The Dial's valueChange event is passed to this.
* sets the CSS top value of the pictoral scene of the earth to the hubble.
* This scene is an absolute positioned div inside another div with
* overflow set to hidden.
*/
setSceneY = function(e) {
	Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
}

Full Code Listing

The Markup

  1. <div id="example_container">
  2. 	<div id="view_frame">
  3. 		<div id="scene">
  4. 			<div id="stars"></div>
  5. 			<img id="hubble" src="assets/images/hubble.png"/>
  6. 			<img id="earth" src="assets/images/mountain_earth.png"/>
  7. 			<div class="label hubble">hubble</div>		
  8. 			<div class="label thermosphere">thermosphere</div>		
  9. 			<div class="label mesosphere">mesosphere</div>		
  10. 			<div class="label stratosphere">stratosphere</div>		
  11. 			<div class="label troposphere">troposphere</div>		
  12. 			<div class="label ozone">ozone</div>		
  13. 			<div class="label crust">crust</div>		
  14. 			<div class="label mantle">mantle</div>		
  15. 		</div>
  16. 	</div>
  17. 	<div class="controls">
  18. 		<div class="intro-sentence">From Earth to <a id="a-hubble">Hubble</a></div>
  19. 		<div id="altitude_mark"></div>
  20. 		<div id="demo"></div>
  21. 	</div>
  22. </div>
<div id="example_container">
	<div id="view_frame">
		<div id="scene">
			<div id="stars"></div>
			<img id="hubble" src="assets/images/hubble.png"/>
			<img id="earth" src="assets/images/mountain_earth.png"/>
			<div class="label hubble">hubble</div>		
			<div class="label thermosphere">thermosphere</div>		
			<div class="label mesosphere">mesosphere</div>		
			<div class="label stratosphere">stratosphere</div>		
			<div class="label troposphere">troposphere</div>		
			<div class="label ozone">ozone</div>		
			<div class="label crust">crust</div>		
			<div class="label mantle">mantle</div>		
		</div>
	</div>
	<div class="controls">
		<div class="intro-sentence">From Earth to <a id="a-hubble">Hubble</a></div>
		<div id="altitude_mark"></div>
		<div id="demo"></div>
	</div>
</div>

The JavaScript

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	// get and set some variable used to calculate the orininal Y position of the scene
  4. 	var sceneH = Y.one('#scene').get('region').height,
  5. 	subSea = 350,
  6. 	viewFrameH = Y.one('#view_frame').get('region').height - 2, // minus 2 for border
  7. 	zeroPt = 100,
  8.  
  9. 	// original Y position of the scene
  10. 	originY = -sceneH + subSea + viewFrameH - zeroPt;
  11.  
  12. 	// initialize the Y of the scene so earth surface aligns with altitude marker
  13. 	Y.one('#scene').setStyle('top', originY + 'px');
  14.  
  15. 	/**
  16. 	* The Dial's valueChange event is passed to this.
  17. 	* sets the CSS top value of the pictoral scene of the earth to the hubble.
  18. 	* This scene is an absolute positioned div inside another div with
  19. 	* overflow set to hidden.
  20. 	*/
  21. 	setSceneY = function(e) {
  22. 		Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
  23.     }
  24. 	var dial = new Y.Dial({
  25. 			min:-35,
  26. 			max:559,
  27. 			stepsPerRev:30,
  28. 			value: 0,
  29. 			diameter: 100,
  30. 			minorStep: 1,
  31. 			majorStep: 10,
  32. 			decimalPlaces: 2, 
  33.  
  34. 			// an object literal containing key-value pairs of the visible strings in the Dial UI
  35. 			strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},
  36.  
  37. 			// construction-time event subscription.
  38. 			// Whenever the value of this dial object changes, the event handler (setSceneY) function fires
  39.             after : {
  40.                 valueChange: Y.bind( setSceneY, dial )
  41.             }
  42. 	});
  43. 	dial.render('#demo');
  44. 	Y.one('#altitude_mark').setXY([Y.one('#view_frame').get('region').right, Y.one('#view_frame').get('region').bottom - 100] );
  45.  
  46. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	// get and set some variable used to calculate the orininal Y position of the scene
	var sceneH = Y.one('#scene').get('region').height,
	subSea = 350,
	viewFrameH = Y.one('#view_frame').get('region').height - 2, // minus 2 for border
	zeroPt = 100,
 
	// original Y position of the scene
	originY = -sceneH + subSea + viewFrameH - zeroPt;
 
	// initialize the Y of the scene so earth surface aligns with altitude marker
	Y.one('#scene').setStyle('top', originY + 'px');
 
	/**
	* The Dial's valueChange event is passed to this.
	* sets the CSS top value of the pictoral scene of the earth to the hubble.
	* This scene is an absolute positioned div inside another div with
	* overflow set to hidden.
	*/
	setSceneY = function(e) {
		Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
    }
	var dial = new Y.Dial({
			min:-35,
			max:559,
			stepsPerRev:30,
			value: 0,
			diameter: 100,
			minorStep: 1,
			majorStep: 10,
			decimalPlaces: 2, 
 
			// an object literal containing key-value pairs of the visible strings in the Dial UI
			strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},
 
			// construction-time event subscription.
			// Whenever the value of this dial object changes, the event handler (setSceneY) function fires
            after : {
                valueChange: Y.bind( setSceneY, dial )
            }
	});
	dial.render('#demo');
	Y.one('#altitude_mark').setXY([Y.one('#view_frame').get('region').right, Y.one('#view_frame').get('region').bottom - 100] );
 
});

The CSS

  1. #example_container {
  2. 	position:relative;
  3. }
  4. #demo{
  5. 	margin:0;
  6. 	position:absolute;
  7. 	top:321px;
  8. 	left:0;
  9. }
  10. .controls {
  11. 	position:absolute;
  12. 	top:0;
  13. 	left:328px;
  14. 	margin:0 0 0 0;
  15. 	color:#808080;
  16. 	width:300px;
  17. }
  18. .controls a {
  19. 	color:#4B78D9 !important; 
  20. 	cursor:pointer;
  21. }
  22. .intro-sentence{
  23. 	font-size: 183%;
  24. 	left: 0;
  25. 	line-height: 0.9em;
  26. 	position: absolute;
  27. 	top: 273px;
  28. 	width: 6em;
  29. }
  30. #view_frame{ 
  31. 	position:relative;
  32. 	height:500px;
  33. 	width:300px;
  34. 	border:solid 1px #cccccc;
  35. 	overflow:hidden;
  36. }
  37. #scene{position:absolute;
  38. 	left:0;
  39. 	top:-6440px;
  40. 	height:6440px;
  41. 	width:100%;
  42. 	background:url(assets/images/earth_to_hubble_bkg.png) repeat;
  43. }
  44. #altitude_mark {
  45. 	border-top:solid 1px #CCCCCC;
  46. 	left:-33px;
  47. 	position:absolute;
  48. 	top:403px;
  49. 	width:30px;
  50. }
  51. #earth{
  52. 	position:absolute;
  53. 	left:0;
  54. 	top:5834px;
  55. 	height:214px;
  56. 	width:300px;
  57. }
  58. #hubble{
  59. 	position:absolute;
  60. 	left:5px;
  61. 	top:7px;
  62. 	height:393px;
  63. 	width:300px;
  64. }
  65. #stars{
  66. 	position:absolute;
  67. 	left:0;
  68. 	top:0;
  69. 	background:url(assets/images/stars.png) repeat;
  70. 	height:5000px;
  71. 	width:300px;
  72. }
  73. .label{
  74. 	text-transform:uppercase;
  75. 	width:100%;
  76. 	letter-spacing:5px;
  77. 	font-family:Verdana;
  78. 	font-size:85%;
  79. 	position:absolute;
  80. 	left:0;
  81. 	text-align:center;
  82. }
  83. .hubble{
  84. 	bottom:6023px;
  85. 	color:#612C88;
  86. }
  87. .thermosphere{
  88. 	bottom:1290px;
  89. 	color:#5A009D;
  90. }
  91. .mesosphere{
  92. 	bottom:840px;
  93. 	color:#570BFF;
  94. }
  95. .stratosphere{
  96. 	bottom:540px;
  97. 	color:#006999;
  98. }
  99. .troposphere{
  100. 	bottom:477px;
  101. 	color:#036585;
  102. }
  103. .ozone{
  104. 	bottom:692px;
  105. 	color:#005AAE;
  106. }
  107. .crust{
  108. 	bottom:270px;
  109. 	color:#4F2D00;
  110. }
  111. .mantle{
  112. 	bottom:42px;
  113. 	color:#897701;
  114. }
#example_container {
	position:relative;
}
#demo{
	margin:0;
	position:absolute;
	top:321px;
	left:0;
}
.controls {
	position:absolute;
	top:0;
	left:328px;
	margin:0 0 0 0;
	color:#808080;
	width:300px;
}
.controls a {
	color:#4B78D9 !important; 
	cursor:pointer;
}
.intro-sentence{
	font-size: 183%;
	left: 0;
	line-height: 0.9em;
	position: absolute;
	top: 273px;
	width: 6em;
}
#view_frame{ 
	position:relative;
	height:500px;
	width:300px;
	border:solid 1px #cccccc;
	overflow:hidden;
}
#scene{position:absolute;
	left:0;
	top:-6440px;
	height:6440px;
	width:100%;
	background:url(assets/images/earth_to_hubble_bkg.png) repeat;
}
#altitude_mark {
	border-top:solid 1px #CCCCCC;
	left:-33px;
	position:absolute;
	top:403px;
	width:30px;
}
#earth{
	position:absolute;
	left:0;
	top:5834px;
	height:214px;
	width:300px;
}
#hubble{
	position:absolute;
	left:5px;
	top:7px;
	height:393px;
	width:300px;
}
#stars{
	position:absolute;
	left:0;
	top:0;
	background:url(assets/images/stars.png) repeat;
	height:5000px;
	width:300px;
}
.label{
	text-transform:uppercase;
	width:100%;
	letter-spacing:5px;
	font-family:Verdana;
	font-size:85%;
	position:absolute;
	left:0;
	text-align:center;
}
.hubble{
	bottom:6023px;
	color:#612C88;
}
.thermosphere{
	bottom:1290px;
	color:#5A009D;
}
.mesosphere{
	bottom:840px;
	color:#570BFF;
}
.stratosphere{
	bottom:540px;
	color:#006999;
}
.troposphere{
	bottom:477px;
	color:#036585;
}
.ozone{
	bottom:692px;
	color:#005AAE;
}
.crust{
	bottom:270px;
	color:#4F2D00;
}
.mantle{
	bottom:42px;
	color:#897701;
}

More Dial Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings