(semi?) radial layout in Roassal

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

(semi?) radial layout in Roassal

Usman Bhatti

I am trying to create a view with a center node and " provider"  and " clients"  nodes on either side of the central one. (see attached script)

I would like the provider and client to be each arranged in a radial layout (see attached figure)

How can this be achieve with Roassal?Inline image 1




| view |
view := ROView new.
view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) @ RODraggable addShape: ROLabel).
ROVerticalLineLayout on: sourceElements; on:targetElements.
sourceLayer := ROElement new addAll: sourceElements.
view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
targetLayer := ROElement new addAll: targetElements.
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).
(ROHorizontalLineLayout new horizontalGap: 130) applyOn: {sourceLayer. centerElement. targetLayer}.
view open 


Usman

_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: (semi?) radial layout in Roassal

abergel
Hi Usman,

Thanks for your emails. Having a better circle layout has been on our todo list for quite some time. Your email is a nice push up!

First of all, remove @RODraggable it is not necessary since you are using spritesOn:
I am not really sure why you need the targetLayer and sourceLayer variables. I suspect this is to group the elements right? This is not necessary, you can simply translate them.

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).

view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).

view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).


ROVerticalLineLayout 
on: sourceElements; 
on: targetElements.

targetElements do: [ :e | e translateBy: 300 @ 0 ].
centerElement translateBy: 150 @ 0.

view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).

view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=


Update the last version of Roassal. I have worked on a better circle layout. Your script can be:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).

ROCircleLayout new
initialAngleInDegree: 130; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: sourceElements.

ROCircleLayout new
initialAngleInDegree: -45; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: targetElements.

centerElement translateBy: 150 @ 0.

view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).

view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Here is the screenshot:


Well... A nicer version could be:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).


ROCircleLayout new
initialAngleInDegree: 130; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: sourceElements.

ROCircleLayout new
initialAngleInDegree: -45; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: targetElements.

centerElement translateBy: 150 @ 150.

view addAll: (sourceElements collect: 
[ :source | (ROEdge from: source to: centerElement) 
addShape: (ROLine new 
attachPoint: ROHorizontalAttachPoint instance;
add: (ROArrow new offset: 0.3)) ]).
view addAll: (targetElements collect: 
[ :target | (ROEdge from: centerElement to: target) 
addShape: (ROLine new 
attachPoint: ROHorizontalAttachPoint instance;
add: (ROArrow new offset: 0.3)) ]).
view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

The screenshot is:


I also have added an animating example:
ROExample new circle

Does this help? I guess more can be built, for example the amount of elements to locate on the left hand side, and the amount on the right hand side. This should not be that hard.

Alexandre



On Jan 23, 2013, at 12:33 PM, Usman Bhatti <[hidden email]> wrote:


I am trying to create a view with a center node and " provider"  and " clients"  nodes on either side of the central one. (see attached script)

I would like the provider and client to be each arranged in a radial layout (see attached figure)

How can this be achieve with Roassal?<image.png>




| view |
view := ROView new.
view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) @ RODraggable addShape: ROLabel).
ROVerticalLineLayout on: sourceElements; on:targetElements.
sourceLayer := ROElement new addAll: sourceElements.
view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
targetLayer := ROElement new addAll: targetElements.
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).
(ROHorizontalLineLayout new horizontalGap: 130) applyOn: {sourceLayer. centerElement. targetLayer}.
view open 


Usman
_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

-- 
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: (semi?) radial layout in Roassal

Usman Bhatti



On Wed, Jan 23, 2013 at 11:01 PM, Alexandre Bergel <[hidden email]> wrote:
Hi Usman,

Thanks for your emails. Having a better circle layout has been on our todo list for quite some time. Your email is a nice push up!

No problem :-). And thx for the scripts.
 

First of all, remove @RODraggable it is not necessary since you are using spritesOn:
I am not really sure why you need the targetLayer and sourceLayer variables. I suspect this is to group the elements right?


Yes that's correct. Now, I do not have one root composed of all the elements. I have some legend elements also to be placed so I create distinct groups of elements. Yes, this requires writing a few lines of code but the manipulation of all these groups of elements is easy. Otherwise, I'll have to calculate all the translations by hand and it requires manually placing elements contained in other elements on the canvas, which would be cumbersome.
 
This is not necessary, you can simply translate them.

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).

view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).

view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).



ROVerticalLineLayout 
on: sourceElements; 
on: targetElements.

targetElements do: [ :e | e translateBy: 300 @ 0 ].
centerElement translateBy: 150 @ 0.


view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).

view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=


Update the last version of Roassal. I have worked on a better circle layout. Your script can be:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).

ROCircleLayout new
initialAngleInDegree: 130; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: sourceElements.

ROCircleLayout new
initialAngleInDegree: -45; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: targetElements.

centerElement translateBy: 150 @ 0.


view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).

view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Here is the screenshot:


Well... A nicer version could be:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
| view |
view := ROView new.

view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n ) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n ) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) addShape: ROLabel).


ROCircleLayout new
initialAngleInDegree: 130; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: sourceElements.

ROCircleLayout new
initialAngleInDegree: -45; 
initialRadius: 200;
initialIncrementalAngleInDegree: 30;
on: targetElements.

centerElement translateBy: 150 @ 150.

view addAll: (sourceElements collect: 
[ :source | (ROEdge from: source to: centerElement) 
addShape: (ROLine new 
attachPoint: ROHorizontalAttachPoint instance;
add: (ROArrow new offset: 0.3)) ]).
view addAll: (targetElements collect: 
[ :target | (ROEdge from: centerElement to: target) 
addShape: (ROLine new 
attachPoint: ROHorizontalAttachPoint instance;
add: (ROArrow new offset: 0.3)) ]).
view open 
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

The screenshot is:


I also have added an animating example:
ROExample new circle

Does this help?

Absolutely. The last script provides a better way of displaying arrows when there are too many connections. I'll have a look into the way the script behaves when we have large number of clients and providers. I'll update you on my progress.

usman

 
I guess more can be built, for example the amount of elements to locate on the left hand side, and the amount on the right hand side. This should not be that hard.

Alexandre



On Jan 23, 2013, at 12:33 PM, Usman Bhatti <[hidden email]> wrote:


I am trying to create a view with a center node and " provider"  and " clients"  nodes on either side of the central one. (see attached script)

I would like the provider and client to be each arranged in a radial layout (see attached figure)

How can this be achieve with Roassal?<image.png>




| view |
view := ROView new.
view addAll: ((sourceElements := ROElement spritesOn: (1 to: 4)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view addAll: ((targetElements := ROElement spritesOn: (6 to: 10)) do: [:n | (n @ RODraggable) addShape: ROLabel]).
view add: ((centerElement := ROElement spriteOn: 5) @ RODraggable addShape: ROLabel).
ROVerticalLineLayout on: sourceElements; on:targetElements.
sourceLayer := ROElement new addAll: sourceElements.
view addAll: (sourceElements collect: [:source | ROEdge arrowedLineFrom: source to: centerElement ]).
targetLayer := ROElement new addAll: targetElements.
view addAll: (targetElements collect: [:target | ROEdge arrowedLineFrom: centerElement to: target ]).
(ROHorizontalLineLayout new horizontalGap: 130) applyOn: {sourceLayer. centerElement. targetLayer}.
view open 


Usman
_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev

-- 
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev



_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Reply | Threaded
Open this post in threaded view
|

Re: (semi?) radial layout in Roassal

abergel
> Does this help?
>
> Absolutely. The last script provides a better way of displaying arrows when there are too many connections. I'll have a look into the way the script behaves when we have large number of clients and providers. I'll update you on my progress.

Ok, let us know. Your experience is really helpful

Cheers,
Alexandre

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.



_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev