Hi Offray! I am not sure to understand. How we can help you? Alexandre > On May 17, 2015, at 3:35 PM, offray(a)riseup.net 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 > Moose-dev(a)iam.unibe.ch > https://www.iam.unibe.ch/mailman/listinfo/moose-dev

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 <offray(a)riseup.net&gt; 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, offray(a)riseup.net 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 >>> Moose-dev(a)iam.unibe.ch >>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev >> > > <epycicleNumbered.png>_______________________________________________ > Moose-dev mailing list > Moose-dev(a)iam.unibe.ch > 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 > <offray(a)riseup.net <mailto:offray@riseup.net>> 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 >>> <offray(a)riseup.net <mailto:offray@riseup.net>> 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, offray(a)riseup.net >>>>> <mailto:offray@riseup.net> 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 >>>>> Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >>>>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev >>>> >>> >>> <epycicleNumbered.png>_______________________________________________ >>> Moose-dev mailing list >>> Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev >> > > > _______________________________________________ > Moose-dev mailing list > Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> > https://www.iam.unibe.ch/mailman/listinfo/moose-dev _______________________________________________ Moose-dev mailing list Moose-dev(a)iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev

Thanks! Now is working pretty well. My modified method was:

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

- 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.

On 02/06/15 18:07, Alexandre Bergel wrote: > 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 > -=-=-=-=-=-=-=-=-=-=-=-= > > <Mail Attachment.png> > > Let me know how it goes. > > Alexandre > -- > _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: > Alexandre Bergel http://www.bergel.eu <http://www.bergel.eu/> > ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;. > > > >> On May 30, 2015, at 11:03 PM, Offray Vladimir Luna Cárdenas <offray(a)riseup.net <mailto:offray@riseup.net>> 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 <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 <offray(a)riseup.net <mailto:offray@riseup.net>> 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, offray(a)riseup.net <mailto:offray@riseup.net> 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 <http://en.wikipedia.org/wiki/Deferent_and_epicycle> >>>>>> [2] http://ws.stfx.eu/2S8R9YAGSJHO <http://ws.stfx.eu/2S8R9YAGSJHO> >>>>>> >>>>>> Thanks, >>>>>> >>>>>> Offray >>>>>> _______________________________________________ >>>>>> Moose-dev mailing list >>>>>> Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >>>>>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev <https://www.iam.unibe.ch/mailman/listinfo/moose-dev> >>>>> >>>> >>>> <epycicleNumbered.png>_______________________________________________ >>>> Moose-dev mailing list >>>> Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >>>> https://www.iam.unibe.ch/mailman/listinfo/moose-dev <https://www.iam.unibe.ch/mailman/listinfo/moose-dev> >>> >> >> >> _______________________________________________ >> Moose-dev mailing list >> Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >> https://www.iam.unibe.ch/mailman/listinfo/moose-dev <https://www.iam.unibe.ch/mailman/listinfo/moose-dev> > > > > _______________________________________________ > Moose-dev mailing list > Moose-dev(a)iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> > https://www.iam.unibe.ch/mailman/listinfo/moose-dev <https://www.iam.unibe.ch/mailman/listinfo/moose-dev> _______________________________________________ Moose-dev mailing list Moose-dev(a)iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev

Umm... I still don't get it. Seems that the proper way to group objects together is not by Composite shapes but with RTGroup and RTNest. Hopefully with the time I will. Anyway I hope this question can help to improve documentation.

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).

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).

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

>> - 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:

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?