<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Dial With a Surrounding Image</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<h1>Example: Dial With a Surrounding Image</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>This example shows how to create a <code>Dial</code> widget using an image
that surrounds (or is larger than) the Dial.</p>
</div>
<div class="example yui3-skin-sam">
<style type="text/css">
.example {
text-align:center;
*text-align: left;
}
/* Adding some margin to allow for the image */
.yui3-dial{
margin:0 0 20px 20px;
}
/* Here, we are just cleaning out the visible
styles of the ring and the center button
to allow for the images. */
/* 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;
-webkit-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-vml v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle-vml 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/dial/images/empty.png);
}
</style>
<div id="demo"></div>
<script>
YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min: -90,
max: 90,
stepsPerRevolution: 200,
value: 0,
diameter: 100
});
dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
dial.render('#demo');
var im = Y.Node.create('<img src="http://yuilibrary.com/yui/docs/assets/dial/images/cold_hot.png"/>');
im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
Y.one('.yui3-dial-north-mark').insert(im, 'before');
});
</script>
</div>
<h3 id="creating-a-dial-and-surrounding-it-with-a-larger-image">Creating a Dial and Surrounding It With a Larger Image</h3>
<p>Some cases may require a <code>Dial</code> 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.</p>
<p>
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.
</p>
<h4 id="the-markup">The Markup</h4>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<p>The only markup requirement is a div to contain the <code>Dial</code>.</p>
<pre class="code prettyprint"><div id="demo"></div></pre>
<h4 id="the-javascript">The JavaScript</h4>
<p>The same JavaScript can be used as in the basic Dial example, with a bit of
extra code to add the image object.</p>
<p>Some commonly used configuration attributes are shown below.
This example also shows how to modify the visible UI strings before the <code>Dial</code> renders.</p>
<pre class="code prettyprint">YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min: -90,
max: 90,
stepsPerRevolution: 200,
value: 0,
diameter: 100
});
//Setting visible HTML strings before Dial renders.
dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
dial.render("#demo");
});</pre>
<h4 id="inserting-the-image">Inserting the Image</h4>
<p>After rendering the <code>Dial</code>, we create and insert the image object.</p>
<pre class="code prettyprint">//Create an image node.
var im = Y.Node.create('<img src="http://yuilibrary.com/yui/docs/assets/dial/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');</pre>
<h4 id="the-css">The CSS</h4>
<p>
In the CSS, we're just cleaning out the visible styles of the ring and the
center button to allow for the images.
</p>
<h3 id="complete-example-source">Complete Example Source</h3>
<pre class="code prettyprint"><!DOCTYPE HTML>
<html>
<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>
<style>
/* Adding some margin to allow for the image */
.yui3-dial{
margin:0 0 20px 20px;
}
/* Here, we are just cleaning out the visible
styles of the ring and the center button
to allow for the images. */
/* 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;
-webkit-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-vml v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle-vml 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/dial/images/empty.png);
}
</style>
<body class="yui3-skin-sam"> <!-- You need this skin class -->
<div id="demo"></div>
</body>
<script>
YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min: -90,
max: 90,
stepsPerRevolution: 200,
value: 0,
diameter: 100
});
dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
dial.render('#demo');
var im = Y.Node.create('<img src="http://yuilibrary.com/yui/docs/assets/dial/images/cold_hot.png"/>');
im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
Y.one('.yui3-dial-north-mark').insert(im, 'before');
});
</script>
</html></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#creating-a-dial-and-surrounding-it-with-a-larger-image">Creating a Dial and Surrounding It With a Larger Image</a>
<ul class="toc">
<li>
<a href="#the-markup">The Markup</a>
</li>
<li>
<a href="#the-javascript">The JavaScript</a>
</li>
<li>
<a href="#inserting-the-image">Inserting the Image</a>
</li>
<li>
<a href="#the-css">The CSS</a>
</li>
</ul>
</li>
<li>
<a href="#complete-example-source">Complete Example Source</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Create a Dial from existing markup on the page - a simple use case.">
<a href="dial-basic.html">Basic Dial</a>
</li>
<li data-description="Link a Dial with a text input field.">
<a href="dial-text-input.html">Dial Linked With Text Input</a>
</li>
<li data-description="Use image backgrounds to control the visual display of a Dial.">
<a href="dial-image-background.html">Dial With Image Background</a>
</li>
<li data-description="Use images to surround a Dial instance and provide additional styling.">
<a href="dial-image-surrounding.html">Dial With a Surrounding Image</a>
</li>
<li data-description="This example employs Dial to drive an interactive UI.">
<a href="dial-interactive.html">Dial With Interactive UI</a>
</li>
<li data-description="This example shows how to use Dial to animate an image sprite.">
<a href="duck.html">Image Sprite Animation with Dial</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Use the HSL color picker to select a new color. Then chose the color type you like best.">
<a href="../color/hsl-picker.html">HSL Color Picker</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/dial',
name: 'dial-image-surrounding',
title: 'Dial With a Surrounding Image',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('dial-basic');
YUI.Env.Tests.examples.push('dial-text-input');
YUI.Env.Tests.examples.push('dial-image-background');
YUI.Env.Tests.examples.push('dial-image-surrounding');
YUI.Env.Tests.examples.push('dial-interactive');
YUI.Env.Tests.examples.push('duck');
YUI.Env.Tests.examples.push('hsl-picker');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>