Using dojo for creating geometric forms

The whole idea emerged from Wolfram’s new dojo widget. He created a rating widget, where he uses stars for setting a vote. Because it is using images for each star, you are sticked to the size of your images and also how the images are designed. So I’ve started to code a new widget, that is creating a star as svg/vml/canvas by using the dojox.gfx library. It uses some simple parameters for designing your stars. As I proceeded, I recognized, that there is no javascript-library (or I didn’t saw it :-)), that can create simple (or more complex) geometric forms with just a few input parameters. In my opinion this could be a start to design a general dojox.gfx.geo library, where a base class is defined for common usage (like hovering and basic color schema) and subclasses for each geometric form. I’m thinking of spirals, arrows, stars, hearts and emoticons.

Here some usage examples of this star dojo widget.

First the pretty result

And here the sample code

<div dojoType="dojox.gfx.geo.Star" borderColor="black" borderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,6,12" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,5,10,5" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="3" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="4" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,4" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="5" radiuses="20,17,14,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

A big star! (Try the mouseover)

Sample code for big star

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="30" radiuses="250,200,250,150,200" specialHoverColor='{type: "radial", r:250, cx: 250, cy: 250, colors: [{offset: 0, color: "#FFFFFF"}, {offset: 1, color: "#FF5A00"}]}’ color=”#F1F3E9″ borderWidth=”1″ hoverBorderWidth=”1″></div>

The next step would be using this star widget within the above mentioned rating-engine. Maybe someone else has a better recommendation, where to use this kind of geometric forms within other widgets.

Here you can download an early version of this star widget:

First draft of the geometric star widget

This entry was posted on Thursday, February 07th, 2008 and is filed under Dojo, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.