Visualization: How to get numbers inside epicycles

Hi Offray,

CompositeShape are not the right thing to use here. 

I have just created a new class Epicycle, subclass of Object.

I have added the method on that class:

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

epicycleAt: diameter inView: v

| circle ex1 ex2 line retweets reach radious  origin background els |

 

background := (RTBox new color: Color transparent) element.

v add: background.

origin := (0@0).

radious := diameter / 2.

 

circle := (RTEllipse new size: diameter; borderColor: Color black; color: Color transparent) element.

ex1 := RTBox element.

ex2 := RTBox element.

circle translateTo: origin.

ex1 translateTo: ((radious negated @ 0) + circle center).

ex2 translateTo: (radious @ 0) + circle center.

line := (RTLine new; color: Color black) edgeFrom: ex1 to: ex2.

v add: circle; add: line.

 

retweets := (RTLabel text: 5) element.

reach := (RTLabel text: '3.1k') element.

v add: retweets; add: reach.

retweets translateTo: (0 @ -12) + circle center.

reach translateTo: (0 @ 12) + circle center.

els := RTGroup with: retweets with: reach with: circle with: ex1 with: ex2.

RTNest new on: background nest: els.

^ background

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

I am then able to write:

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

v := RTView new.

e1 := Epicycle new epicycleAt: 50 inView: v.

e2 := Epicycle new epicycleAt: 100 inView: v.

e1 @ RTDraggable.

e2 @ RTDraggable.

e2 translateBy: 10 @ 100.

v

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

Let me know how it goes.

Alexandre

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

On May 30, 2015, at 11:03 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Hi Alexandre,

Thanks for your answer and sorry for my late one. Only until today we return to our workshops (Hackerspace is small and was kind of crowded previous weekend).

I have tested your code and produced some minor changes at [1]

[1] http://pastebin.com/wmF2JUZn

I have even created a composite shape (just a circle with a line in the middle) with this code:

~~~~~~~~~~~~~~~~~~~~~
MyClass>>epicycleAt: center withSize: diameter
"Creates a little epicycle with an horizontal line at the middle. Future helper for silence maps."

| epicycle circle ex1 ex2 line "retweets reach" radious   |


radious := diameter / 2.
epicycle := RTCompositeShape new.

circle := (RTEllipse new size: diameter; borderColor: Color black; color: Color transparent) element.
ex1 := RTBox element.
ex2 := RTBox element.
circle translateTo: center.
ex1 translateTo: ((radious negated @ 0) + circle center).
ex2 translateTo: (radious @ 0) + circle center.
line := (RTLine new; color: Color black) edgeFrom: ex1 to: ex2.
epicycle add: circle; add: line.

"retweets := (RTLabel text: 5) element.
reach := (RTLabel text: '3.1k') element.
v add: retweets; add: reach.
retweets translateTo: (0 @ -12) + circle center.
reach translateTo: (0 @ 12) + circle center."
^ epicycle.
~~~~~~~~~~~~~~~

But I don't know how to add this composite shape to a view. All examples in composite shapes are kind of difficult and require creating some kind of collection and then using addAll on the extraction of the members of that collection. So, for a better understand on how composite shapes work, could you please help me on how to create a simple composite shape (a circle with a horizontal line) and show it in a view?

About the variation point of the visual element, it should be mainly the center where it is located, and eventually the color.

Thanks,

Offray


El 24/05/15 a las 05:06, Alexandre Bergel escribió:

Hi!

Well, it all depends what the circle actually mean.
You can simply draw it like that:

v := RTView new.

circle := (RTEllipse new size: 80; borderColor: Color black; borderWidth: 0.014; color: Color transparent) element.
ex1 := RTBox element.
ex2 := RTBox element.
ex1 translateTo: -40 @ 0.
ex2 translateTo: 40 @ 0.
line := (RTLine new width: 2; color: Color black) edgeFrom: ex1 to: ex2.
v add: circle; add: line.

lbl1 := (RTLabel text: 5) element.
lbl2 := (RTLabel text: '3.1k') element.
v add: lbl1; add: lbl2.
lbl1 translateTo: 0 @ -20.
lbl2 translateTo: 0 @ 20.

v

But I am sure this is not what you want. How many circle do you plan to have? What are the variation point of a visual element? Color? Size?

A proper implementation will likely be based on a dedicated builder.

Cheers,
Alexandre

On May 21, 2015, at 2:24 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Hi Alexandre :),

We're trying to create, programmaticaly in Roassal, something like the attached image (which, by the way was created with the powerful DrGeo). Forget about  the points in red. I only want to create a circle with a horizontal line in the middle and two text on each half. Eventually I would like to change the contrast of the text with the background of the circle's filling, but that could be a second exercise.

Cheers,

Offray

El 19/05/15 a las 07:08, Alexandre Bergel escribió:

Hi Offray!

I am not sure to understand. How we can help you?

Alexandre

On May 17, 2015, at 3:35 PM, [hidden email] wrote:

Hi,

With some friends, we're playing with the idea of using epicycles [1] for a visualization. So far, so good and we have some beta code script at [2]. We would like to put a pair of numbers inside the epicycle. So the question is: How can we add a horizontal line wich divides the epicycle in the middle and how can we put a number on each part?


[1] http://en.wikipedia.org/wiki/Deferent_and_epicycle
[2] http://ws.stfx.eu/2S8R9YAGSJHO

Thanks,

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

<epycicleNumbered.png>_______________________________________________
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

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

Hi Offray,

CompositeShape are not the right thing to use here. 

I have just created a new class Epicycle, subclass of Object.

I have added the method on that class:

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

epicycleAt: diameter inView: v

| circle ex1 ex2 line retweets reach radious  origin background els |

 

background := (RTBox new color: Color transparent) element.

v add: background.

origin := (0@0).

radious := diameter / 2.

 

circle := (RTEllipse new size: diameter; borderColor: Color black; color: Color transparent) element.

ex1 := RTBox element.

ex2 := RTBox element.

circle translateTo: origin.

ex1 translateTo: ((radious negated @ 0) + circle center).

ex2 translateTo: (radious @ 0) + circle center.

line := (RTLine new; color: Color black) edgeFrom: ex1 to: ex2.

v add: circle; add: line.

 

retweets := (RTLabel text: 5) element.

reach := (RTLabel text: '3.1k') element.

v add: retweets; add: reach.

retweets translateTo: (0 @ -12) + circle center.

reach translateTo: (0 @ 12) + circle center.

els := RTGroup with: retweets with: reach with: circle with: ex1 with: ex2.

RTNest new on: background nest: els.

^ background

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

I am then able to write:

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

v := RTView new.

e1 := Epicycle new epicycleAt: 50 inView: v.

e2 := Epicycle new epicycleAt: 100 inView: v.

e1 @ RTDraggable.

e2 @ RTDraggable.

e2 translateBy: 10 @ 100.

v

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

Let me know how it goes.

Alexandre

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

On May 30, 2015, at 11:03 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Hi Alexandre,

Thanks for your answer and sorry for my late one. Only until today we return to our workshops (Hackerspace is small and was kind of crowded previous weekend).

I have tested your code and produced some minor changes at [1]

[1] http://pastebin.com/wmF2JUZn

I have even created a composite shape (just a circle with a line in the middle) with this code:

~~~~~~~~~~~~~~~~~~~~~
MyClass>>epicycleAt: center withSize: diameter
"Creates a little epicycle with an horizontal line at the middle. Future helper for silence maps."

| epicycle circle ex1 ex2 line "retweets reach" radious   |


radious := diameter / 2.
epicycle := RTCompositeShape new.

circle := (RTEllipse new size: diameter; borderColor: Color black; color: Color transparent) element.
ex1 := RTBox element.
ex2 := RTBox element.
circle translateTo: center.
ex1 translateTo: ((radious negated @ 0) + circle center).
ex2 translateTo: (radious @ 0) + circle center.
line := (RTLine new; color: Color black) edgeFrom: ex1 to: ex2.
epicycle add: circle; add: line.

"retweets := (RTLabel text: 5) element.
reach := (RTLabel text: '3.1k') element.
v add: retweets; add: reach.
retweets translateTo: (0 @ -12) + circle center.
reach translateTo: (0 @ 12) + circle center."
^ epicycle.
~~~~~~~~~~~~~~~

But I don't know how to add this composite shape to a view. All examples in composite shapes are kind of difficult and require creating some kind of collection and then using addAll on the extraction of the members of that collection. So, for a better understand on how composite shapes work, could you please help me on how to create a simple composite shape (a circle with a horizontal line) and show it in a view?

About the variation point of the visual element, it should be mainly the center where it is located, and eventually the color.

Thanks,

Offray


El 24/05/15 a las 05:06, Alexandre Bergel escribió:

Hi!

Well, it all depends what the circle actually mean.
You can simply draw it like that:

v := RTView new.

circle := (RTEllipse new size: 80; borderColor: Color black; borderWidth: 0.014; color: Color transparent) element.
ex1 := RTBox element.
ex2 := RTBox element.
ex1 translateTo: -40 @ 0.
ex2 translateTo: 40 @ 0.
line := (RTLine new width: 2; color: Color black) edgeFrom: ex1 to: ex2.
v add: circle; add: line.

lbl1 := (RTLabel text: 5) element.
lbl2 := (RTLabel text: '3.1k') element.
v add: lbl1; add: lbl2.
lbl1 translateTo: 0 @ -20.
lbl2 translateTo: 0 @ 20.

v

But I am sure this is not what you want. How many circle do you plan to have? What are the variation point of a visual element? Color? Size?

A proper implementation will likely be based on a dedicated builder.

Cheers,
Alexandre

On May 21, 2015, at 2:24 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Hi Alexandre :),

We're trying to create, programmaticaly in Roassal, something like the attached image (which, by the way was created with the powerful DrGeo). Forget about  the points in red. I only want to create a circle with a horizontal line in the middle and two text on each half. Eventually I would like to change the contrast of the text with the background of the circle's filling, but that could be a second exercise.

Cheers,

Offray

El 19/05/15 a las 07:08, Alexandre Bergel escribió:

Hi Offray!

I am not sure to understand. How we can help you?

Alexandre

On May 17, 2015, at 3:35 PM, [hidden email] wrote:

Hi,

With some friends, we're playing with the idea of using epicycles [1] for a visualization. So far, so good and we have some beta code script at [2]. We would like to put a pair of numbers inside the epicycle. So the question is: How can we add a horizontal line wich divides the epicycle in the middle and how can we put a number on each part?


[1] http://en.wikipedia.org/wiki/Deferent_and_epicycle
[2] http://ws.stfx.eu/2S8R9YAGSJHO

Thanks,

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

<epycicleNumbered.png>_______________________________________________
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

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

- Why composite shape was not the right thing to use and how can a newbie could differenciate which strategy to use?

I think that the problem is the lack of good documentation. With all this time, I am convinced that composite shapes are good at naming elements. E.g., putting a name on top of circle or a square.

As soon as you want to glue two or more object

- A sytle question "labeledCircleSized: upLabel: downLabel: at:" seems descriptive to me, but I don't know if has the proper style for a method name. I can read Smalltalk with Style to look at it, now that I know more about the environment, but advice of seasoned smalltalkers would help a lot in getting proper style also.

You may want to use a factory object to configure its creation :-)

Will you be at Esug by the way? We will have a camp about Roassal.

Which is pretty close to what we originally planed. I would like to play with some color saturation on the epicycle, which could imply, at some point changing the color of the font of the numbers on it, changing from black to other colors. I also presume that would be nice to have some kind of scale in the graph. Distance between epycicle and nucleus avatar is measured in a logarithmic inspired scale, first days (green), then weeks (orange), then months (red) and finally years (black).

Excellent!

So, two more questions:

- How can I select the zoom out level of the view, making all object to fit in that view automatically (the screenshot was obtained by manually zooming out and arranging the visual objects).

you simply have to send #focusOnCenterScaled to the Trachel canvas. Consider the following example (the most important line is the menu):

-=-=-=-=-=-=-=-=-=-=-=-=
| b |
b := RTMondrian new.
b shape circle
	size: 8;
	if: [ :c | '*Line*' match: c name ] fillColor: Color red.

b nodes: TRShape withAllSubclasses, RTShape withAllSubclasses.

b shape line.
b edges
	connectFrom: #superclass.

b shape bezierLineFollowing: #superclass; color: (Color blue alpha: 0.2).

b edges
	objects: TRShape withAllSubclasses, RTShape withAllSubclasses;
	notUseInLayout;
	connectToAll: #dependentClasses.
	
b layout tree.
b build.

“VVVVV important line VVVVVV"
b view addMenu: 'focus' callback: [ b view canvas focusOnCenterScaled. b view signalUpdate ].
^ b
-=-=-=-=-=-=-=-=-=-=-=-=

- How can I get this kind of "logarithmic" scale a rule in the bottom of the view.

I do not understand. What such a scale is supposed to do?

- A sytle question "labeledCircleSized: upLabel: downLabel: at:" seems descriptive to me, but I don't know if has the proper style for a method name. I can read Smalltalk with Style to look at it, now that I know more about the environment, but advice of seasoned smalltalkers would help a lot in getting proper style also.

You may want to use a factory object to configure its creation :-)

I remember reading something about factory of objects in the book Squeak Learn programming with Robots, but that was the name for a class... still I don't get it :-/

>From Slide 16 until Slide 24 in:
https://www.dropbox.com/s/w7r17a5xlahj6oa/14-MoreDesignPatterns.pdf?dl=0

Cheers,
Alexandre

Another possibility is not use this custom scale ruler and instead we will use some kind of arcs, but I would like to test different approaches to choose from. By the way testing the arcs approach (code at [2] http://ws.stfx.eu/EGZ9ZYULOR0 and graphic 3) I start to wonder if there is not a better way by having overlapping ellipsis with transparent background and custom colored borders. Is this possible?