Using Raphael JS Grapics Library with AIDA

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

Nice.  I really like HighCharts as a javascript charting library, although I have only tried it in a mockup in plain HTML/JavaScript environment but considering using Smalltalk to serve dynamic data instead of hardcoded series in the javascript file.

Am 07.11.2012 13:18, schrieb Geert Claes:
> Nice.  I really like HighCharts as a javascript charting library, although I
> have only tried it in a mockup in plain HTML/JavaScript environment but
> considering using Smalltalk to serve dynamic data instead of hardcoded
> series in the javascript file.
>
I'm also coding coding in a HTML file (which is first served by AIDA)
and then copy the JS to Smalltalk. I use Notepad++ for JS Syntax
highlighting and autocompletion and Firebug to debug. Can you recommend
other tools for this kind of work?

Cheers

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

I like Sublime2, also use Twitter Bootstrap

On 11/7/12 9:45 AM, "Herbert König" <[hidden email]> wrote:

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


Aida have few good examples so share any you have.
Also interested in AidaCharts on Aida 6.5

Edgar


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

Hi,
> Aida have few good examples so share any you have.
> Also interested in AidaCharts on Aida 6.5
>
> Edgar
>
>
AidaCharts is depending on Protochart by deensoft. This companies
homepage has vanished from the net. And Protochart depends on Prototype
and afaik Aida switched to JQuery, though Prototype has been updated
quite recently. So I assume there will be no AidaCharts in current Aida
except one based on Raphael + g.Raphael. But someone has to do that
work, preferably keeping the API.

I replied in private with a lot of attachments.

Cheers,

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