SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for December, 2008

Nasty style bug in Dojo’s Nihilo Button css

Posted by Shane O'Sullivan on December 23, 2008

For anyone using Dojo v1.2.3 and the Nihilo theme, you may have noticed that performing a build with it breaks your styles.  After much tracking down, it turns out that there is abug in Nihilo’s Button.css.

On line 80, there is an extra curly brace

.nihilo .dijitComboBoxActive .dijitDownArrowButton {

which should be

.nihilo .dijitComboBoxActive .dijitDownArrowButton,

I’ve submitted a bug at http://bugs.dojotoolkit.org/ticket/8311, which should be in v1.3.  However, if you need a fix before that (as Nihilo is pretty unusable without it) just change that one line and you’re back in business.

Posted in Ajax, Dojo | Leave a Comment »

Displaying a ‘JavaScript is Required’ message

Posted by Shane O'Sullivan on December 21, 2008

A quick tip on a very simple pattern that can be used to tell a user who has JavaScript disabled that they have to turn it on.  Place the message you want to show between two script blocks that simply write a div around the message, setting it’s display to ‘none’.  If JavaScript is enabled, the user will never see this message.  If it is disabled, they will see it.

The main advantage of this approach is that there is no flicker waiting for the page to load before the message is hidden.  See the example blow.

<script type=”text/javascript”>document.write(‘<div style=”display:none”>’);</script>
You must enable JavaScript to use this site
<script type=”text/javascript”>document.write(“</div>”);</script>

Update: As pointed out in the comment thread, this is the same as <noscript> really, but no harm in having one more pattern out there

Posted in Ajax, Javascript | 4 Comments »

dojox.gfx: Rotating in an elliptical line

Posted by Shane O'Sullivan on December 7, 2008

This post describes how to get a shape to rotate a central point following an elliptical path, using the Dojo Ajax Toolkits cross browser graphics engine, dojox.gfx. To see it in action, go to http://www.skynet.ie/~sos/misc/EllipseAnim.html

dojox.gfx is built in much the same way as SVG, with most of the same capabilities.  When it comes to moving shapes around a surface, it provides useful translations that move objects in straight lines, circles and more.

You can also combine different transformation matrices together to create more complex animations.  However, this is difficult in the extreme unless you have an really (and I mean REALLY) good grasp of matrix transformations and Cartesian coordinate manipulation.  Which I don’t.  And it is unlikely that you, the good reader, do either (if you do, I heartily apologise).

Anyhow, I had the requirement to rotate a small circle in an elliptical shape around a central point.  After much hacking, I gave in and asked Eugene, the dojox.gfx author, and one of the guys who DOES understand all this matrix stuff, and he solved it.

The trick is use two transformations simultaneously:

  • The first transformation rotates the shape around a point by 180 degrees.  This is not the central point of the ellipse.  For simplicitys sake, I start the animation with the shape at the leftmost point of the ellipse, level with the ellipse central Y point.  The point around which the shape should rotate has an X position equal to the central point of the shape plus the Y radius of the ellipse, and a Y point equal to the centre Y of the ellipse.
  • The second transformation moves the shape from left to right in a straight line.  This starts from the origin of the shape, and ends just short of the right hand median point of the ellipse.  The distance between the end of the lateral linear transformation and the rightmost point of the ellipse is twice the radius of the circle used for the rotation translation.  The reason for this is that the rotation transformation will, by the end of the linear transformation, have moved the shape twice the radius of the rotation circle in the X direction, so this must be subtracted from the lateral linear transformation.

The code I used for this is shown below.  Feel free to take it and play around.

<html>
<head>
<style type="text/css">
@import "../dojo/resources/dojo.css";
@import "../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js"
djConfig="isDebug: true"></script>

<script type="text/javascript">
dojo.require("dojox.gfx");
dojo.require("dojox.gfx.fx");
dojo.require("dojo.fx");
dojo.require("dojox.gfx.matrix");
dojo.require("dojo.fx.easing");

var circle, surface, cx = 50, cy = 200, rx = 40, ry = 20;
var ellipse;

dojo.addOnLoad(function(){

var domNode = dojo.byId("test");
// Create the surface, this contains all the graphics objects
surface = dojox.gfx.createSurface(domNode, 400, 400);

// Create the circle shape to be moved in a elliptical line
circle = surface.createEllipse({cx: 10, cy: cy, rx: 5, ry:5});
circle.setFill("blue");

// Create an elliptical line, just to show you the path it will take
ellipse = surface.createEllipse({cx: cx, cy: cy, rx: rx, ry: ry});
ellipse.setStroke("black");
});
// Define a function to create an animation.
//'isLTR' means 'Is Left To Right'

function getAnim(isLTR) {

var g = dojox.gfx, m = g.matrix;
var startAngle = isLTR ? 0 : 180;
var endAngle = isLTR ? 180: 360;
var startX = isLTR ? 0 : rx;
var endX = isLTR ? rx: 0;

return g.fx.animateTransform({
shape: circle,
duration: 1000,
transform: [
// The first transform just moves the shape either from
// left to right, or right to left

{name: "translate",
start: [startX, 0], end: [endX, 0]},
// The second transform rotates the shape in a circular
// path

{ name: "rotateAt",
start: [m._degToRad(startAngle), cx - ry, cy],
end: [m._degToRad(endAngle), cx - ry, cy]}
],
onEnd: function(){
// When the animation to make the circle go
// half way around the ellipse finishes,
// start it again in the opposite direction

getAnim(!isLTR).play();
},
easing: dojo.fx.easing.linear
});
}

function animate() {
var anim1 = getAnim(true);
anim1.play();
}

</script>
</head>
<body>
<button onclick="animate()">Animate!</button><br/>
<div id="test" style="border:1px solid black;margin-top:10px;"></div>

</body>
</html>

Posted in Ajax, Dojo, dojox, dojox.gfx, Javascript, open source, svg, Technical | 2 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: