[aida] Using Raphael JS Grapics Library with AIDA

Herbert König herbertkoenig at gmx.net
Wed Nov 7 12:45:49 CET 2012

Hi folks,

just a short report for those who need to do vector graphics in AIDA:
I need to generate CAD like printouts like in profiles.png. Before I 
used the Protochart JS graphics Library (in the incarnation of 
AIDAcharts) but Protochart is discontinued. So I tried Raphael 
http://raphaeljs.com/ and I'm quite happy with it.

Necessary steps:
-You need WebStyle>>ensureJavascriptForRaphaelInHeader
     | page url headerValue |
     page := self app context page.
     url := '/raphael-min.js'. "which is a file in /static"
     headerValue := ' src="', url, '" language="JavaScript" 
     (page headers contains: [:each | each key = 'script' and: [each 
value = headerValue] ]) ifFalse:
         [page addHeader: 'script' value: headerValue].

-My class for using Raphael is WebGraphics which in its initialize needs 
to send:
myStyle ensureJavascriptForRaphaelInHeader.

-Then WebGraphics>>printHTMLPageOn: aStream for: aRequest on: aSession
can start issuing JavaScript containing Raphael commands.

Raphael is easy to use, well documented and there is an independent 
tutorial at:
If I had read that earlier, I'd have done a few things different. 
Raphael also seems to be used widely.
As a replacement for Protochart's charting capabilities there is 
http://g.raphaeljs.com/ from the same author which even comes in 
modules. Other than Protochart Raphael has nice animation capabilities, 
the site has some examples.

I have written only the Smalltalk bindings mentioned because my kind of 
grapics is quite computational expensive and will be used frequently in 
my app. Smalltalk only creates some JSON from my model which are the 
coordinates of the closed polygons (cross sections) shown in the 
attached png. For example offsetting the vertical lines to keep the 
texts from overlapping is an iterative process. Sending all the JS and 
data takes 300ms (everything running on an old Laptop), Firefox needs 
another second to build up the graph.

The other point against Smalltalk wrappers is that building this kind of 
graphics is just a long sequence of:
plot this, plot that, place that text there..... with only very few 
natural functions like coordinate transformations. The other functions 
are arbitrary selections to structure the source and usually are only 
called once. I keep them in jsXXXmethods in Smalltalk to use the 
Smalltalk versioning but in production I concatenate them put them 
through jsmin and have them served by the static server.

And I need to learn some JS anyway :-))

Anyone interested can have a fileout of my WebGraphics class to use as 
an example or ask me directly or here.



-------------- n?chster Teil --------------
Ein Dateianhang mit Bin?rdaten wurde abgetrennt...
Dateiname   : profiles.PNG
Dateityp    : image/png
Dateigr??e  : 25921 bytes
Beschreibung: nicht verf?gbar
URL         : <http://lists.aidaweb.si/pipermail/aida/attachments/20121107/a2ee4bef/attachment-0001.png>

More information about the Aida mailing list