HTML5 output for Roassal


We have worked very hard on a Roassal exporter for the Web.

Milton has produced the class RTHTML5Exporter, which may be simply invoked as: RTHTML5Exporter new export: aRoassalView.

Check this out:

Try moving the mouse above the circle or dots in the curve.

The html file you see from your web browser is the result of do-iting the following expression:
| c b c2 |
c := RTComposer new.

b := RTGraphBuilder new.
b view: c view.
b edges
connectFrom: #superclass;

b edges
if: [ :fromClass :toClass | toClass name beginsWith: ‘TR’ ];
connectTo: #dependentClasses;
color: (Color blue alpha: 0.3).

b nodes
if: [ :cls | cls name beginsWith: ‘RT’ ];
color: Color blue.
b nodes
color: Color red.
b layout cluster.

b global
normalizeSize: #numberOfMethods min: 5 max: 40 using: #sqrt;
alphaColor: 0.4.

b addAll: TRShape withAllSubclasses, RTShape withAllSubclasses.

b build.
c group.

c2 := RTCharterBuilder new.
c2 view: c view.

c2 interaction popup.
c2 extent: 300 @ 200.
c2 points: (RTShape withAllSubclasses sortedAs: #numberOfMethods).
c2 connectDotColor: Color blue.

c2 points: (TRShape withAllSubclasses sortedAs: #numberOfMethods).
c2 stackX.
c2 allY: #numberOfMethods.
c2 connectDotColor: Color red.

c2 axisX.
c2 axisY.
c2 build.
c group.

c layout: RTVerticalLineLayout new.
c propagateHighlightToAll.

legend := RTLegendBuilder new.
legend view: c view.
legend addText: ‘This is a demonsration of a combination of builders’.
legend addText: ‘The above visualization shows the dependencies between Roassal and Trachel shapes.’.
legend addText: ‘Curves indicate the distribution of the number of methods’.
legend build.

RTHTML5Exporter new export: c view.
c view


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: