diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/example_easingChart2D.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/fx/tests/example_easingChart2D.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/example_easingChart2D.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_easingChart2D.html b/includes/js/dojox/fx/tests/example_easingChart2D.html new file mode 100644 index 0000000..fd0d171 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_easingChart2D.html @@ -0,0 +1,147 @@ +<!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> |