git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/example_easingChart2D.html

   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" djConfig="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("dojox.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 || dojox.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 dojox.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,dojox.fx.easing[opt.value]);
 120                         });
 121
 122                         dojo.query(".box").connect("onclick",function(e){
 123                                 console.log(opt.value,dojox.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>dojox.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>