← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/graphics/graphics-radial-tool.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/graphics/graphics-radial-tool.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Graphics: Radial Gradient Tool</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Graphics: Radial Gradient Tool</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><div class="example">
23
 
<style scoped>
24
 
.example{
25
 
    position: relative;
26
 
    background-color: #000;
27
 
    font-family: verdana;
28
 
    color: #ccc;
29
 
    height: 250px;
30
 
}
31
 
 
32
 
.example #mygraphiccontainer {
33
 
    position: absolute;
34
 
    top: 20px;
35
 
    left: 20px;
36
 
    width: 250px;
37
 
    height: 233px;
38
 
    background-color: #333;
39
 
    /*border: 3px solid #ff0000;*/
40
 
}
41
 
 
42
 
.example .code-div{
43
 
    position: absolute;
44
 
    top: 70px;
45
 
    left: 305px;
46
 
    text-align: left;
47
 
}
48
 
 
49
 
.example .code-div label{
50
 
    display: inline-block;
51
 
    color: #ccc;
52
 
    width: 7em;
53
 
    text-align: right;
54
 
}
55
 
 
56
 
.example #output-grad input{
57
 
    width: 5em;
58
 
}
59
 
 
60
 
/*gradient controls*/
61
 
.example .grad-c{
62
 
    position: absolute;
63
 
    top: 50px;
64
 
    left: 50px;
65
 
    width: 1px;
66
 
    height: 1px;
67
 
    cursor: move;
68
 
}
69
 
 
70
 
.example .grad-f{
71
 
    position: absolute;
72
 
    top: 40px;
73
 
    left: 40px;
74
 
    width: 20px;
75
 
    height: 20px;
76
 
    background-color: #ff8800;
77
 
    -moz-border-radius: 10px;
78
 
    -webkit-border-radius: 10px;
79
 
    cursor: move;
80
 
}
81
 
 
82
 
.example .grad-r{ /* is contained within .grad-c */
83
 
    position: absolute;
84
 
    top: -50px;
85
 
    left: -50px;
86
 
    width: 100px;
87
 
    height: 100px;
88
 
    background-color: #300060;
89
 
    -moz-border-radius: 50px;
90
 
    -webkit-border-radius: 50px;
91
 
    opacity: 0.8;
92
 
    filter: alpha(opacity=80);
93
 
}
94
 
 
95
 
.example #grad-control{
96
 
    position: relative;
97
 
    width: 100px;
98
 
    height: 100px;
99
 
    border: solid 1px #555;
100
 
 
101
 
}
102
 
 
103
 
.example #grad-control label{
104
 
    position: absolute;
105
 
    width: 100px;
106
 
    top: 100%;
107
 
    padding-top: 0.3em;
108
 
    text-align: center;
109
 
    color: #555;
110
 
}
111
 
 
112
 
.example #output-grad {
113
 
    position: absolute;
114
 
    left: 182px;
115
 
    top: -53px;
116
 
    width: 200px;
117
 
}
118
 
 
119
 
.example #output-grad ul{
120
 
    list-style: none;
121
 
    margin: 0;
122
 
    padding: 0;
123
 
    margin-bottom: 1.3em;
124
 
}
125
 
 
126
 
.example #output-grad li{
127
 
    padding: 0.3em;
128
 
}
129
 
 
130
 
.example #output-grad li span {
131
 
    display: inline-block;
132
 
    width: 5em;
133
 
    color: #fff;
134
 
    margin-left: 0.5em;
135
 
}
136
 
 
137
 
.example #panel-content textarea {
138
 
    width: 100%;
139
 
    height: 257px;
140
 
    resize: none;
141
 
}
142
 
 
143
 
.example #output-grad .button-item{
144
 
    text-align: right;
145
 
    padding: 1.5em 2.3em 0 0;
146
 
}
147
 
 
148
 
</style>
149
 
        <div id="mygraphiccontainer">
150
 
        </div>
151
 
        <div class="code-div">
152
 
            <div id="output-grad">
153
 
                <ul>
154
 
                    <li><label>cx:</label> <span id='out-cx'>0.5</span></li>
155
 
                    <li><label>cy:</label> <span id='out-cy'>0.5</span></li>
156
 
                    <li><label>fx:</label> <span id='out-fx'>0.5</span></li>
157
 
                    <li><label>fy:</label> <span id='out-fy'>0.5</span></li>
158
 
                    <li><label>r:</label> <span id='out-r'>0.5</span></li>
159
 
                    <li><label>Center color:</label> <input type="text" id='center-color' value="#ff8800" /></li>
160
 
                    <li><label>Outer color:</label> <input type="text" id='outer-color' value="#300060" /></li>
161
 
                    <li class="button-item"><button id="btn-get-code" class='yui3-button'>Get Code Snippet</button></li>
162
 
                </ul>
163
 
 
164
 
            </div>
165
 
            <div id="grad-control" title="Represents the boundary of the object">
166
 
                <label>Interactive Control</label>
167
 
                <div class="grad-c">
168
 
                    <div id="resize-r" class="grad-r" title="Drag to set 'cx,cy' properties. Resize to set 'r' property."></div>
169
 
                </div>
170
 
                <div class="grad-f" title="Drag to set 'fx,fy' properties."></div>
171
 
            </div>
172
 
        </div>
173
 
 
174
 
        <div class="yui3-skin-night">
175
 
            <div id="panel-content">
176
 
            </div>
177
 
        </div>
178
 
<script src="../assets/graphics/js/radial-tool.js"></script>
179
 
 
180
 
</div>
181
 
 
182
 
<h2>The Radial Gradient Tool</h2>
183
 
 
184
 
<p>The Interactive Control modifies the gradient fill.
185
 
As you drag the center dot, or drag or resize the outer disc,
186
 
the fill preview updates. You can also see the fill's 
187
 
property values update. The center color and outer color can also be changed.
188
 
These are the colors of the gradient stops.
189
 
Click the "Get Code Snippet" button. This code can be copied and pasted 
190
 
into a graphics instance to reproduce the gradient fill in your code.
191
 
</p>
192
 
 
193
 
 
194
 
<h2>Using the Generated Code</h2>
195
 
<p>When you click the "Get Code Snippet" button, generated code is placed
196
 
in the text area control. The generated code assumes you will have a separate
197
 
page to paste it into. This separate page must contain the following code: 
198
 
A graphics container such as this,</p>
199
 
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;</pre>
200
 
 
201
 
<p>CSS such as this,</p>
202
 
<pre class="code prettyprint">#mygraphiccontainer {
203
 
    position: relative;
204
 
    width: 400px;
205
 
    height: 400px;
206
 
}</pre>
207
 
 
208
 
and a YUI instance containing a <code>Graphics</code> object such as this.
209
 
<pre class="code prettyprint">YUI().use(&#x27;graphics&#x27;, function (Y) {
210
 
 
211
 
    var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
212
 
    &#x2F;&#x2F; generated code from the radial gradient tool goes here
213
 
    
214
 
});</pre>
215
 
 
216
 
<p>The tool generates paste-able code for an <code>addShape</code> method that will
217
 
create and render an ellipse. You can change this after it's pasted into 
218
 
your code.</p>
219
 
</div>
220
 
            </div>
221
 
        </div>
222
 
 
223
 
        <div class="yui3-u-1-4">
224
 
            <div class="sidebar">
225
 
                
226
 
 
227
 
                
228
 
                    <div class="sidebox">
229
 
                        <div class="hd">
230
 
                            <h2 class="no-toc">Examples</h2>
231
 
                        </div>
232
 
 
233
 
                        <div class="bd">
234
 
                            <ul class="examples">
235
 
                                
236
 
                                    
237
 
                                        <li data-description="Shows how to create a Graphic instance and add shapes.">
238
 
                                            <a href="graphics-simple.html">Basic Graphics Implementation</a>
239
 
                                        </li>
240
 
                                    
241
 
                                
242
 
                                    
243
 
                                        <li data-description="Shows how to draw lines and polygons.">
244
 
                                            <a href="graphics-path.html">Basic Path</a>
245
 
                                        </li>
246
 
                                    
247
 
                                
248
 
                                    
249
 
                                        <li data-description="Shows how to create linear and radial gradient fills.">
250
 
                                            <a href="graphics-gradients.html">Create Gradient Fills</a>
251
 
                                        </li>
252
 
                                    
253
 
                                
254
 
                                    
255
 
                                        <li data-description="Shows how to add drag to a shape.">
256
 
                                            <a href="graphics-drag.html">Basic drag with graphic object</a>
257
 
                                        </li>
258
 
                                    
259
 
                                
260
 
                                    
261
 
                                        <li data-description="Shows how to apply transforms to shape.">
262
 
                                            <a href="graphics-transforms.html">Using Transforms</a>
263
 
                                        </li>
264
 
                                    
265
 
                                
266
 
                                    
267
 
                                        <li data-description="Shows how to use a custom shape with the Graphics module.">
268
 
                                            <a href="graphics-customshape.html">Custom Shape</a>
269
 
                                        </li>
270
 
                                    
271
 
                                
272
 
                                    
273
 
                                        <li data-description="Shows to use the graphics api to draw a realistic glass.">
274
 
                                            <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
275
 
                                        </li>
276
 
                                    
277
 
                                
278
 
                                    
279
 
                                        <li data-description="Shows to use the graphics api to draw a violin.">
280
 
                                            <a href="graphics-violin.html">Complex Drawing: Violin</a>
281
 
                                        </li>
282
 
                                    
283
 
                                
284
 
                                    
285
 
                                
286
 
                            </ul>
287
 
                        </div>
288
 
                    </div>
289
 
                
290
 
 
291
 
                
292
 
                    <div class="sidebox">
293
 
                        <div class="hd">
294
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
295
 
                        </div>
296
 
 
297
 
                        <div class="bd">
298
 
                            <ul class="examples">
299
 
                                
300
 
                                    
301
 
                                
302
 
                                    
303
 
                                
304
 
                                    
305
 
                                
306
 
                                    
307
 
                                
308
 
                                    
309
 
                                
310
 
                                    
311
 
                                
312
 
                                    
313
 
                                
314
 
                                    
315
 
                                
316
 
                                    
317
 
                                        <li data-description="This example demonstrates animating an element along a curved path using bezier control points.">
318
 
                                            <a href="../anim/curve.html">Animating Along a Curved Path</a>
319
 
                                        </li>
320
 
                                    
321
 
                                
322
 
                            </ul>
323
 
                        </div>
324
 
                    </div>
325
 
                
326
 
            </div>
327
 
        </div>
328
 
    </div>
329
 
</div>
330
 
 
331
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
332
 
<script>prettyPrint();</script>
333
 
 
334
 
</body>
335
 
</html>