Posted by Herbert König on Nov 07, 2012; 11:45am
URL: https://forum.world.st/Using-Raphael-JS-Grapics-Library-with-AIDA-tp4654265.html

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"
type="text/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:
http://cancerbero.vacau.com/raphaeltut/
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.

Cheers,

Herbert





_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida