YUI 3.x Home -

YUI Library Examples: Dial: Dial With a Surrounding Image

Dial: Dial With a Surrounding Image

This example shows how to create a Dial widget using an image that surrounds (or is larger than) the Dial.

View example in new window.

Creating a Dial and Surrounding It With a Larger Image

Some cases may require a Dial that has an image surrounding it such as tick marks, units, or other visual enhancements. These images can be larger than the ring of the dial and therefore may not fit as a background image. To provide for this use case, an extra image object will need to be added to the DOM.

In this example we'll simulate the climate control on an car dashboard. The image we'll add contains two curved wedges of color, blue and red, that wrap around the dial, signifying the temperature of air conditioning or heat.

The Markup

The only markup requirement is a div to contain the Dial.

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

The JavaScript

The same JavaScript can be used as in the basic Dial example, with a bit of extra code to add the image object.

Some commonly used configuration attributes are shown below. This example also shows how to modify the visible UI strings after the Dial renders.

  1. YUI({ filter: 'raw' }).use("dial", function(Y) {
  2.  
  3. 	var dial = new Y.Dial({
  4. 		min: -90,
  5. 		max: 90,
  6. 		stepsPerRev: 200,
  7. 		value: 0,
  8. 		diameter: 100
  9. 	});
  10. 	dial.render("#demo");
  11.  
  12. 	//Setting visible strings after Dial renders.
  13. 	//See other example for setting strings before rendering the Dial.
  14. 	dial._setLabelString('Climate:');
  15. 	dial._setTooltipString('Drag for cool or heat.');
  16. 	dial._setResetString('Off');
  17.  
  18. });
YUI({ filter: 'raw' }).use("dial", function(Y) {
 
	var dial = new Y.Dial({
		min: -90,
		max: 90,
		stepsPerRev: 200,
		value: 0,
		diameter: 100
	});
	dial.render("#demo");
 
	//Setting visible strings after Dial renders.
	//See other example for setting strings before rendering the Dial.
	dial._setLabelString('Climate:');
	dial._setTooltipString('Drag for cool or heat.');
	dial._setResetString('Off');
 
});

Inserting the Image

After rendering the Dial, we create and insert the image object.

  1. //Create an image node.
  2. var im = Y.Node.create('<img src="assets/images/cold_hot.png"/>');
  3.  
  4. //Position it absolutely to the correct spot depending on it's size.
  5. im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
  6.  
  7. //Insert it in the DOM.
  8. //The north-mark is the first object inside the ring.
  9. //depending on the image, you may need to insert it before the yui3-dial-label 
  10. Y.one('.yui3-dial-north-mark').insert(im, 'before');
//Create an image node.
var im = Y.Node.create('<img src="assets/images/cold_hot.png"/>');
 
//Position it absolutely to the correct spot depending on it's size.
im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
 
//Insert it in the DOM.
//The north-mark is the first object inside the ring.
//depending on the image, you may need to insert it before the yui3-dial-label 
Y.one('.yui3-dial-north-mark').insert(im, 'before');

The CSS

Here, we are just cleaning out the visible styles of the ring and the center button. This is optional. 

  1. /* Adding some margin for the image */
  2. .yui3-dial{
  3. 	margin:0 0 20px 20px;
  4. }
  5. /* Remove visible styles of the ring */
  6. .yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
  7. 	box-shadow: none;
  8. 	-moz-border-radius: none;
  9. 	-webkit-border-radius: none;
  10. 	-moz-box-shadow: none;
  11. 	background:none;
  12. }
  13. /* Remove visible style of the center button */
  14. .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
  15. 	box-shadow: none;
  16. 	-moz-border-radius: none;
  17. 	-webkit-border-radius: none;
  18. 	-moz-box-shadow: none;
  19. 	background:none;
  20. }
  21. /* Hide all VML ovals in IE.*/
  22. .yui3-skin-sam .yui3-dial-ring-vml v\:oval {
  23. 	visibility:hidden;
  24. }
  25. /* Show the marker and the handle ovals */
  26. .yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval,
  27. .yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle v\:oval {
  28. 	visibility:visible;
  29. }
  30. /* Fill center button and ring so their backgrounds accept events in IE */
  31. .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
  32. .yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
  33. 	background:url(assets/images/empty.png);
  34. }
/* Adding some margin for the image */
.yui3-dial{
	margin:0 0 20px 20px;
}
/* Remove visible styles of the ring */
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
/* Remove visible style of the center button */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
/* Hide all VML ovals in IE.*/
.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
	visibility:hidden;
}
/* Show the marker and the handle ovals */
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle v\:oval {
	visibility:visible;
}
/* Fill center button and ring so their backgrounds accept events in IE */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
	background:url(assets/images/empty.png);
}

More Dial Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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