dial-image-surrounding.mustache revision 2ce1b062532c7895a7093b67252dbaf239fbe6a7
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>This example shows how to create a `Dial` widget using an image
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffthat surrounds (or is larger than) the Dial.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="example yui3-skin-sam">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff {{>dial-image-surrounding-source}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Creating a Dial and Surrounding It With a Larger Image</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Some cases may require a `Dial` that has an image surrounding it such as tick marks, units, or other
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffvisual enhancements. These images can be larger than the ring of the dial and therefore may not fit as a background image.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffTo provide for this use case, an extra image object will need to be added to the DOM.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffIn this example we'll simulate the climate control on an car dashboard.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThe image we'll add contains two curved wedges of color, blue and red, that wrap around the dial,
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffsignifying the temperature of air conditioning or heat.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The Markup</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The only markup requirement is a div to contain the `Dial`.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div id="demo"></div>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The JavaScript</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The same JavaScript can be used as in the basic Dial example, with a bit of
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffextra code to add the image object.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Some commonly used configuration attributes are shown below.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis example also shows how to modify the visible UI strings before the `Dial` renders.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffYUI().use('dial', function(Y) {
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff var dial = new Y.Dial({
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff stepsPerRevolution: 200,
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff diameter: 100
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff //Setting visible HTML strings before Dial renders.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>Inserting the Image</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>After rendering the `Dial`, we create and insert the image object.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff//Create an image node.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffvar im = Y.Node.create('<img src="{{{componentAssets}}}/images/cold_hot.png"/>');
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff//Position it absolutely to the correct spot depending on it's size.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffim.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff//Insert it in the DOM.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff//The north-mark is the first object inside the ring.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff//depending on the image, you may need to insert it before the yui3-dial-label
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffY.one('.yui3-dial-north-mark').insert(im, 'before');
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The CSS</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffHere, we are just cleaning out the visible styles of the ring and the center button.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis is optional.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff{{>dial-image-surrounding-source-css}}