Home        Squared Rectangle


The Walter Zorn Graphics Libraries Still Exist!

Graphics can be done directly in browsers. Simply create div elements in the right places with the right sizes and colors.

Software packages have been written for the purpose.

Walter Zorn wrote wz_jsgraphics.js and wz_dragdrop.js, complete with user manuals and examples. Walter Zorn’s wz_tooltip.js is well known, too.

His site, www.walterzorn.com, ceased to work following his death in 2009. Numerous other sites were left with non-functioning links to it. The user guides were gone.

Don’t panic. Walter Zorn’s software did not disappear along with his site.

Thanks to efforts by family members and friends, his good old site can now be found at
        www.walterzorn.de        (In German)
and at
        www.walterzorn.de/en   (In English).

They tell us that the site will from now on be static, technical support cannot be provided, and the copyright and LGPL licence terms must still be complied with.

The software libraries, which can be downloaded from the site as .zip files, seem to be up-to-date (jsgraphics version 3.05; dragdrop version 4.91; tooltip version 5.31. In case Notepad scrambles an unzipped source text, try Wordpad.) The user manuals seem up-to-date as well.

In case you cannot access the site, see the note at the end of this page.

wz_jsgraphics.js  Version 3.05:  What’s New?

Version 3.05 was last modified on February 2, 2009. There are a few technical changes and a bug fix relative to Version 3.03. That was the version in which the design of

  drawImage(imgSrc, x, y, w, h, a)
was improved such that w (image width) and h (image height) are now optional. Omit them, and the image will default to its original size. The sixth parameter a is an optional html text string which you can use to insert one or more eventhandlers. If you need a but not w and h, put w and h to zero.

(Looking for a "Click + Execute" example?  Sorry, it had to be removed, because navigation by JavaScript was identified as a possible source of problems with some security software.)

wz_jsgraphics.js:  How Many Div Elements?  How to Access Them?

There are a total of 591 div elements in the illustration near the top of this page.

(The grapics assumes a zoom level that is not necessarily identical to the default zoom level of today’s browsers.  Try and change your browser’s zoom level a couple of times until the illustration presents itself in the right graphics quality.)

In order to minimize the number of div elements,  jsgraphics combines as many pixels as possible into each element.

For instance, it took as few as four div elements to draw the blue unfilled rectangle near the illustration’s top right corner – to be compared with 52 for the thin blue ellipse at the top left, and just one for the blue filled rectangle.

A filled ellipse is put together of horizontal line segments, each with a carefully chosen thickness.

In order to see how jsgraphics economizes with the div elements, let us draw a filled ellipse and color different div elements with different colors:

Click to draw a filled ellipse!

As the code snippet demonstrates, when  jg  is a jsGraphics instantiation, then the array  jg.cnv.children  gives you access to the individual div elements. (Note that the coloring is intentionally slowed down.)

But the above example is oversimplified. In a multi-shape illustration such as the one near the top of this page, you may sometimes need to know which div elements belong to which shapes.

One way to do this relies on the observation that Walter Zorn's div elements are created with an empty name property. I have written a very simple function that looks for elements with empty names and collects them into an array. It assigns non-empty names to those elements so that they will not be found next time, and returns the array to the calling function. Whenever I need to access the div elements of a shape, I call that function before and after the shape has been drawn.

The source text of the function, which is called  .getNewcomers, is easily accessible in a file called something like  graphutils.js  on the server. Feel free to copy it in case you are interested. I always add it dynam­ically to  jsGraphics.prototype  in order to keep Walter Zorn’s library unchanged.

Walter Zorn’s wz_jsgraphics reference manual says nothing about access to individual div elements. Curiously, an ellipse with stratified colors, similar to the above example but smaller, appears in his manual as a GIF image – suggesting that the idea is not new.

An example of in-browser graphics made with  wz_jsgraphics  can be found elsewhere at this site:  It is used for the author’s squared rectangle calculator.

Note added June 2012

A few visitors may have difficulties accessing Walter Zorn’s German site, possibly as a result of false positives in some security software. In case you are among them, you may get Walter Zorn’s libraries and user manuals from elsewhere on the net – for instance, from archives dated March 2009 at the Wayback Machine. The archived versions of jsgraphics, dragdrop and tooltips seem to be fully up-to-date.

For the same reason, this site currently uses a slightly modified jsGraphics version called 3.05-B1. It does not use string expressions containing HTML code, as such strings are thought to be a possible cause of false positives. It uses DOM methods and properties instead. These were not available, or did not work well, when Walter Zorn first wrote his library.

Note added April 2015

The drag-drop library used elsewhere on this site has now been re-written to support the new HTML5 canvas element.

Note added June 2016

The inclined thin straight lines in the figure on top of this page often appear in poor graphical quality.  The quality changes if you let the browser zoom.  Most browsers present those lines in good graphical quality for one zoom factor, and poor quality for all other zoom factors.  Other browsers give you poor quality no matter how you zoom.  In order to observe the effect of zooming, watch the figure, then keep the CTRL key down and press  +  or  –  a couple of times.

Browser developers are unlikely to address the problem now that the HTML5 canvas is the modern way to do graphics in-the-browser.

Therefore, in order to ensure uniform quality, the HTML5 canvas is now used for thin inclined lines in the squared rectangle calculator linked to above.

Similarly, a circle is now simply a div element with a large border-radius;  but rectangles and squares are still drawn with jsgraphics.

Home     Squared Rectangle     Walter Zorn Graphics     Who?