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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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) {
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff var dial = new Y.Dial({
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff stepsPerRevolution: 200,
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff diameter: 100
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff //Setting visible HTML strings before Dial renders.
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff 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.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniffvar im = Y.Node.create('<img src="{{{dialPathAssets}}}/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>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff ConniffIn the CSS, we're just cleaning out the visible styles of the ring and the
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniffcenter button to allow for the images.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<h3>Complete Example Source</h3>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-surrounding-complete}}