--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+ <title>visualising dojo._Animation.easing via dojox.charting</title>
+
+ <link rel="stylesheet" type="text/css" media="screen"
+ href="../../../dojo/resources/dojo.css">
+
+ <link rel="stylesheet" type="text/css" media="screen"
+ href="../../../dijit/themes/tundra/tundra.css">
+
+ <style type="text/css">
+ .box { padding:14px;
+ border:1px solid #b7b7b7;
+ -moz-border-radius:8pt;
+ }
+ </style>
+
+ <script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true"
+ src="../../../dojo/dojo.js"></script>
+
+ <script type="text/javascript">
+ // one simple theme, and the charting engine:
+ dojo.require("dojox.charting.Chart2D");
+ // and easing functions:
+ dojo.require("dojox.fx.easing");
+
+ var d=0;
+ var masterData = {};
+ var makeSeries = function(/* string */str, /* Function */ func){
+ // make some data by running a 2sec animation with an easing function
+ // and adding it to the chart
+ var seriesData = [];
+ if(str in masterData){
+ seriesData=masterData[str];
+ }
+
+ if(!seriesData.length){
+ var func = func || dojox.fx.easing[str];
+ func = (dojo.isFunction(func) ? func : dojo._defaultEasing);
+
+ for(var i=0; i<=120; i++){
+ var pct = i/120;
+ seriesData.push({ y: 30 * func(pct), x: (pct) * 30});
+ }
+ if(!str.match(/^dynSeries/)){
+ masterData[str] = seriesData;
+ }
+ chart.addSeries(str,
+ seriesData,
+ { stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" }
+ ).render();
+ }else{
+ chart.updateSeries(str, seriesData).render();
+ }
+ };
+
+ var removeSeries = function(str){
+ chart.updateSeries(str, []);
+ if(!clearAll){ chart.render(); }
+ };
+
+ var toggleChart = function(widget, str){
+ if(!chart) return;
+ if(widget.checked){
+ makeSeries(str);
+ }else{
+ removeSeries(str);
+ }
+ }
+
+ var chart;
+ var clearAll=false;
+
+ dojo.addOnLoad(function(){
+
+ // setup our chart
+ chart = new dojox.charting.Chart2D("easingChart");
+ chart.addAxis("x", {
+ fixLower: "major",
+ fixUpper: "major",
+ majorTickStep: 10,
+ minorTickStep: 1,
+ minorLabels: false,
+ htmlLabels: false
+ });
+ chart.addAxis("y", {
+ vertical: true,
+ fixLower: "major",
+ fixUpper: "major",
+ majorTickStep: 10,
+ minorTickStep: 1,
+ htmlLabels: false
+ });
+ chart.addPlot("default", {type: "Areas"});
+ });
+
+ var opt;
+ dojo.addOnLoad(function(){
+
+ var c = dojo.query(".clone")[0];
+ opt = dojo.byId("select");
+
+ for(var i in dojox.fx.easing){
+ var n = opt.appendChild(dojo.clone(c));
+ n.value = n.innerHTML = i
+ // n.innerHTML = i;
+ }
+
+ dojo.connect(opt,"onchange",function(e){
+ dojo.query("option",opt)
+ // we only want "selected" nodes
+ .filter(function(n){ return n.selected; })
+ // yay, here they are:
+ .forEach(function(n){
+ console.log(n);
+ });
+ makeSeries(opt.value,dojox.fx.easing[opt.value]);
+ });
+
+ dojo.query(".box").connect("onclick",function(e){
+ console.log(opt.value,dojox.fx.easing[opt.value]);
+ });
+
+ makeSeries("visible",dojo._defaultEasing);
+
+ });
+
+ </script>
+</head>
+<body class="tundra" style="padding:20px">
+
+ <h1>dojox.fx.easing</h1>
+
+ <p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p>
+
+ <select id="select" multiple="true" size="7" name="easing">
+ <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
+ </select>
+
+ <div class="box">
+ <div id="easingChart" style="height:300px"></div>
+ </div>
+
+</body>
+</html>
projects / eow / blobdiff