| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/loose.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>visualising dojo.Animation.easing via dojox.charting</title> |
|---|
| 6 | |
|---|
| 7 | <link rel="stylesheet" type="text/css" media="screen" |
|---|
| 8 | href="../../../dojo/resources/dojo.css"> |
|---|
| 9 | |
|---|
| 10 | <link rel="stylesheet" type="text/css" media="screen" |
|---|
| 11 | href="../../../dijit/themes/tundra/tundra.css"> |
|---|
| 12 | |
|---|
| 13 | <style type="text/css"> |
|---|
| 14 | .box { padding:14px; |
|---|
| 15 | border:1px solid #b7b7b7; |
|---|
| 16 | -moz-border-radius:8pt; |
|---|
| 17 | } |
|---|
| 18 | </style> |
|---|
| 19 | |
|---|
| 20 | <script type="text/javascript" data-dojo-config="isDebug:false, parseOnLoad: true" |
|---|
| 21 | src="../../../dojo/dojo.js"></script> |
|---|
| 22 | |
|---|
| 23 | <script type="text/javascript"> |
|---|
| 24 | // one simple theme, and the charting engine: |
|---|
| 25 | dojo.require("dojox.charting.Chart2D"); |
|---|
| 26 | // and easing functions: |
|---|
| 27 | dojo.require("dojo.fx.easing"); |
|---|
| 28 | |
|---|
| 29 | var d=0; |
|---|
| 30 | var masterData = {}; |
|---|
| 31 | var makeSeries = function(/* string */str, /* Function */ func){ |
|---|
| 32 | // make some data by running a 2sec animation with an easing function |
|---|
| 33 | // and adding it to the chart |
|---|
| 34 | var seriesData = []; |
|---|
| 35 | if(str in masterData){ |
|---|
| 36 | seriesData=masterData[str]; |
|---|
| 37 | } |
|---|
| 38 | |
|---|
| 39 | if(!seriesData.length){ |
|---|
| 40 | var func = func || dojo.fx.easing[str]; |
|---|
| 41 | func = (dojo.isFunction(func) ? func : dojo._defaultEasing); |
|---|
| 42 | |
|---|
| 43 | for(var i=0; i<=120; i++){ |
|---|
| 44 | var pct = i/120; |
|---|
| 45 | seriesData.push({ y: 30 * func(pct), x: (pct) * 30}); |
|---|
| 46 | } |
|---|
| 47 | if(!str.match(/^dynSeries/)){ |
|---|
| 48 | masterData[str] = seriesData; |
|---|
| 49 | } |
|---|
| 50 | chart.addSeries(str, |
|---|
| 51 | seriesData, |
|---|
| 52 | { stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" } |
|---|
| 53 | ).render(); |
|---|
| 54 | }else{ |
|---|
| 55 | chart.updateSeries(str, seriesData).render(); |
|---|
| 56 | } |
|---|
| 57 | }; |
|---|
| 58 | |
|---|
| 59 | var removeSeries = function(str){ |
|---|
| 60 | chart.updateSeries(str, []); |
|---|
| 61 | if(!clearAll){ chart.render(); } |
|---|
| 62 | }; |
|---|
| 63 | |
|---|
| 64 | var toggleChart = function(widget, str){ |
|---|
| 65 | if(!chart) return; |
|---|
| 66 | if(widget.checked){ |
|---|
| 67 | makeSeries(str); |
|---|
| 68 | }else{ |
|---|
| 69 | removeSeries(str); |
|---|
| 70 | } |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | var chart; |
|---|
| 74 | var clearAll=false; |
|---|
| 75 | |
|---|
| 76 | dojo.addOnLoad(function(){ |
|---|
| 77 | |
|---|
| 78 | // setup our chart |
|---|
| 79 | chart = new dojox.charting.Chart2D("easingChart"); |
|---|
| 80 | chart.addAxis("x", { |
|---|
| 81 | fixLower: "major", |
|---|
| 82 | fixUpper: "major", |
|---|
| 83 | majorTickStep: 10, |
|---|
| 84 | minorTickStep: 1, |
|---|
| 85 | minorLabels: false, |
|---|
| 86 | htmlLabels: false |
|---|
| 87 | }); |
|---|
| 88 | chart.addAxis("y", { |
|---|
| 89 | vertical: true, |
|---|
| 90 | fixLower: "major", |
|---|
| 91 | fixUpper: "major", |
|---|
| 92 | majorTickStep: 10, |
|---|
| 93 | minorTickStep: 1, |
|---|
| 94 | htmlLabels: false |
|---|
| 95 | }); |
|---|
| 96 | chart.addPlot("default", {type: "Areas"}); |
|---|
| 97 | }); |
|---|
| 98 | |
|---|
| 99 | var opt; |
|---|
| 100 | dojo.addOnLoad(function(){ |
|---|
| 101 | |
|---|
| 102 | var c = dojo.query(".clone")[0]; |
|---|
| 103 | opt = dojo.byId("select"); |
|---|
| 104 | |
|---|
| 105 | for(var i in dojo.fx.easing){ |
|---|
| 106 | var n = opt.appendChild(dojo.clone(c)); |
|---|
| 107 | n.value = n.innerHTML = i |
|---|
| 108 | // n.innerHTML = i; |
|---|
| 109 | } |
|---|
| 110 | |
|---|
| 111 | dojo.connect(opt,"onchange",function(e){ |
|---|
| 112 | dojo.query("option",opt) |
|---|
| 113 | // we only want "selected" nodes |
|---|
| 114 | .filter(function(n){ return n.selected; }) |
|---|
| 115 | // yay, here they are: |
|---|
| 116 | .forEach(function(n){ |
|---|
| 117 | console.log(n); |
|---|
| 118 | }); |
|---|
| 119 | makeSeries(opt.value, dojo.fx.easing[opt.value]); |
|---|
| 120 | }); |
|---|
| 121 | |
|---|
| 122 | dojo.query(".box").connect("onclick",function(e){ |
|---|
| 123 | console.log(opt.value, dojo.fx.easing[opt.value]); |
|---|
| 124 | }); |
|---|
| 125 | |
|---|
| 126 | makeSeries("visible",dojo._defaultEasing); |
|---|
| 127 | |
|---|
| 128 | }); |
|---|
| 129 | |
|---|
| 130 | </script> |
|---|
| 131 | </head> |
|---|
| 132 | <body class="tundra" style="padding:20px"> |
|---|
| 133 | |
|---|
| 134 | <h1>dojo.fx.easing</h1> |
|---|
| 135 | |
|---|
| 136 | <p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p> |
|---|
| 137 | |
|---|
| 138 | <select id="select" multiple="true" size="7" name="easing"> |
|---|
| 139 | <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> |
|---|
| 140 | </select> |
|---|
| 141 | |
|---|
| 142 | <div class="box"> |
|---|
| 143 | <div id="easingChart" style="height:300px"></div> |
|---|
| 144 | </div> |
|---|
| 145 | |
|---|
| 146 | </body> |
|---|
| 147 | </html> |
|---|
