Home ›

Dojo, Now with Drawing Tools!

Issue 178

From Issue #178
February 2009

Feb 01, 2009  By Matthew Russell
 in
Internalizing Dojo's “write once, deploy anywhere” philosophy, Dojo's gfx (pronounced “g-f-x” or sometimes “graphics”) library packs a powerful 2-D drawing API that's capable of plugging in to an arbitrary renderer. Out of the box, it works with Canvas, Silverlight, SVG and VML, so regardless of which browser your application is ultimately viewed within, gfx has you covered.

Listing 4. Drag-and-Drappable Dominoes


<html>
  <head>
    <title>Dominoes!</title>
    <script type="text/javascript"
        src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">
    </script>
    <script type="text/javascript">
        dojo.require("dojox.gfx");
        dojo.require("dojox.gfx.move");
        dojo.addOnLoad(function() {
            var node = dojo.byId("surface");
            var surface = dojox.gfx.createSurface(node, 600, 300);

            /* Using sane ratios for layout, construct a domino */
            function drawDomino(surface,x,y,num1,num2,_width) {
                var surface = surface.createGroup();
                var _width = _width || 200;
                var _height = 2*_width, _r = _width/20;

                //draw an empty domino...
                var rect1 = surface.createRect({
                    x : x,
                    y : y,
                    width : _width,
                    height : _height,
                    r : _r
                })
                .setStroke("black")
                .setFill("black")
                ;
                var rect2 = surface.createRect({
                    x : x+ _r/2,
                    y : y+ _r/2,
                    width : _width -_r,
                    height :_height -_r,
                    r : _r
                })
                .setStroke({width: _r/4, color: "white"})
                ;
                var line = surface.createLine({
                    x1 : x + _r/2,
                    y1 : y+_height/2,
                    x2 : x+ _width - _r/2,
                    y2 : y+_height/2,
                })
                .setStroke({width: _r/4, color: "white"})
                ;
                //numbers 1,3,5 have dots in the center
                if (num1 == 1 || num1 == 3 || num1 == 5) {
                    surface.createCircle({
                        cx : x+_width/2,
                        cy : y+_height/4,
                        r : _width/10
                    })
                    .setStroke("white")
                    .setFill("white")
                    ;
                }
                if (num2 == 1 || num2 == 3 || num2 == 5) {
                    surface.createCircle({
                        cx : x+_width/2,
                        cy : y+_height/4*3,
                        r : _width/10
                    })
                    .setStroke("white")
                    .setFill("white")
                    ;
                }
                //numbers >= 2 have two of the corners filled in
                if (num1 >= 2) {
                    surface.createCircle({
                        cx : x+_width/6*5,
                        cy : y+_height/12,
                        r : _width/10
                    })
                    .setStroke("white")
                    .setFill("white")
                    ;
                    surface.createCircle({
                        cx : x+_width/6,
                        cy : y+_height/12*5,
                        r : _width/10
                    })
                    .setStroke("white")
                    .setFill("white")
                    ;
                }

                /*** SNIP - Go to LJ FTP site to download
                     the rest of this code (see Resources) ***/                  

                return surface;
            }
            var width=50,
                padding=50;

            for (var i=0; i <= 6; i++) {
                var d = drawDomino(
                    surface,
                    i*75+padding,
                    2*padding,
                    i,
                    Math.floor(Math.random()*7),
                    width
                );
                //Make the group drag-and-droppable
                new dojox.gfx.Moveable(d);
            }
            //Adjust the z-index so last domino is on top
            dojo.subscribe("/gfx/move/start", function(m) {
                m.shape.moveToFront();
            });
        })
    </script>
  </head>
  <body>
    <div id="surface"
     style="position:absolute;width:600;height:300;border:solid1px;">
    </div>
  </body>
</html>

Figure 8. With the logic to draw the drag-and-droppable dominoes in place, now all that's left is to write some game logic. (An exercise for the most interested of readers.)

Charting: gfx on Steroids

Perhaps the ultimate test of an API is a few good examples of what you can build with it. One of the ultimate demonstrations of gfx's flexibility and power is Dojo's charting library, another DojoX subproject. A comprehensive introduction of the charting library would entail an article of its own, so until that time comes, you can find some great documentation on Dojo charting from the Dojo Key Links page. And, of course, you always can read over the source, which is located in the dojox.charting module of the toolkit's source code, if you want to get an idea of how much work goes into aligning labels, drawing tick marks and so on.

In addition to equipping you with many of the basic charts you'd want to use in a Web application, charting recently got a boost with a number of cool new features, including event support so that custom tooltips and animations can occur within charts—that kind of visual flair makes all the difference. To give you an idea of just how easy the charting API is to get up and running, consider the code blurb in Listing 5 that shows how to create a chart.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Please post missing file 10308.tgz

Anonymous's picture
Submitted by Anonymous (not verified) on Wed, 08/25/2010 - 01:01.

When I try this link in the resources:

ftp://ftp.linuxjournal.com/pub/lj/issue178/10308.tgz

It's a bad link. I found this
ftp://ftp.linuxjournal.com/pub/lj/listings/issue178/README178

10042.tgz -- Web 2.0 Development with the Google Web Toolkit
Federico Kereki

10308.tgz -- Dojo, Now with Drawing Tools!
Matthew Russell

but this file is missing: 10308.tgz

very interesting, good for

Anonymous's picture
Submitted by Anonymous (not verified) on Wed, 07/01/2009 - 02:52.

very interesting, good for gfx beginner just like me. thanks!

where is the download for listing 4

forestial's picture
Submitted by forestial on Thu, 02/12/2009 - 23:16.

Trying to download the code from listing 4 from the ftp link in Resources. I get a "550 Failed to change directory" error.

Tried browsing the ftp site, but there seems to be nothing there for this issue (178).

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions