23 Jan
2013
23 Jan
'13
6:33 p.m.
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: 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
23 Jan
23 Jan
11:01 p.m.
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 <usman.bhatti(a)gmail.com> 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
Moose-dev(a)iam.unibe.ch
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
24 Jan
24 Jan
2:36 p.m.
On Wed, Jan 23, 2013 at 11:01 PM, Alexandre Bergel
<alexandre.bergel(a)me.com>wrote;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 <usman.bhatti(a)gmail.com> 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
Moose-dev(a)iam.unibe.ch
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
_______________________________________________
Moose-dev mailing list
Moose-dev(a)iam.unibe.ch
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
4:06 p.m.
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
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
4350
days inactive
4351
days old
3 comments
2 participants
participants (2)
-
Alexandre Bergel -
Usman Bhatti