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
Hi Offray!
I am not sure to understand. How we can help you?
Alexandre
On May 17, 2015, at 3:35 PM, 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@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
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@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@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@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@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@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
<epycicleNumbered.png>_______________________________________________ Moose-dev mailing list Moose-dev@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
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@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@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@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
<epycicleNumbered.png>_______________________________________________ Moose-dev mailing list Moose-dev@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
Thanks Alexandre,
We will test your approach in our workshop this Saturday:
http://hackbo.co/hackboweb/eventos/evento/386
Cheers,
Offray
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 -=-=-=-=-=-=-=-=-=-=-=-=
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@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@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@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@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@iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >> https://www.iam.unibe.ch/mailman/listinfo/moose-dev > _______________________________________________ Moose-dev mailing list Moose-dev@iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Moose-dev mailing list Moose-dev@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Hi Alexandre :),
Thanks! Now is working pretty well. My modified method was:
~~~~~~~~~ myClass>>labeledCircleSized: diameter upLabel: label1 downLabel: label2 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: label1) element. reach := (RTLabel text: label2) 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 ~~~~~~~~~
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.
Cheers,
Offray
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 -=-=-=-=-=-=-=-=-=-=-=-=
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@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@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@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@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@iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> >> https://www.iam.unibe.ch/mailman/listinfo/moose-dev > _______________________________________________ Moose-dev mailing list Moose-dev@iam.unibe.ch <mailto:Moose-dev@iam.unibe.ch> https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Moose-dev mailing list Moose-dev@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Thanks! Now is working pretty well. My modified method was:
Excellent!
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?
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.
Alexandre
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@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@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@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@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@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@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@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@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
Hi,
On 05/06/15 17:03, Alexandre Bergel wrote:
- 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
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.
Now, with some tweaks on the view, I'm capable of getting something like this:
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 :-/
Will you be at Esug by the way? We will have a camp about Roassal.
Unfortunately I will not (long distance between Colombia and Europe), but hopefully I will find the way to visit Chile :-).
Cheers,
Offray
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.
Yes it does. From what I have seen, composite shapes are well adapted for naming elements.
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
Hi :),
On 07/06/15 06:50, Alexandre Bergel wrote:
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!
Ok. I will keep all you posted on our advances.
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 -=-=-=-=-=-=-=-=-=-=-=-=
Thanks. Tested is working pretty fine.
- 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?
My bad. Again a picture is worth a thousand of words :-). So I have send you some pictures of what I mean:
- Graphic 1:
- Graphic 2 (left) and Graphic 3 (right):
The graphic 1 is just my grafoscopio notebook where I'm testing your help notes. The code to produce the graphic at the right most panel is published at: [1] http://ws.stfx.eu/4AZSKR2NH7AO. The graphic 2 is an exportation of that graphic as a png edited by hand with the things I would like to add. Some labeled boxes with color conventions (white: days, light gray: weeks, gray: months) and this custom ruler scale at the bottom of the graphic. I have read the visualization composition chapter but If I remember well, you shared with us some other way to put conventions on a graph, which seem easier. How can I add the custom ruler and labeled convention boxes?
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?
Another strange thing happen when I was making this test: The circular tree layout examples started to work funny, with a background being all gray or all black. See video example at: [3]
[3] https://archive.org/details/funny-roassal.mp4
- 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
Ohh ok! Bookmarked. Surely in the future, the Dataviz package will contain some "Visual helpers" with this kind of custom forms, like the labeled circle, which can be used for several objects in their custom visualizations. I was wondering if the name "labeledCircleSized: upperLabel: bottomLabel: at:" was a good one and follows the Smalltalk-ish good style rules.
Cheers, Alexandre
Thanks as always,
Offray
Hi,
On 11/06/15 18:53, Offray Vladimir Luna Cárdenas wrote:
[...]
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?
[...]
By the way this code paints a totally gray circle, not a transparent one with a gray border:
~~~~~~ | weeksOrbit diameter v |
v := RTView new. diameter := 55. weeksOrbit := (RTEllipse new size: diameter; color: Color white; borderColor: Color lightGray) element. v add: weeksOrbit. v. ~~~~~~
Cheers,
Offray
Hi Offray,
Sorry about this bug. It has now been fixed.
Cheers, Alexandre
On Jun 11, 2015, at 11:14 PM, Offray Vladimir Luna Cárdenas offray@riseup.net wrote:
Hi,
On 11/06/15 18:53, Offray Vladimir Luna Cárdenas wrote:
[...]
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?
[...]
By the way this code paints a totally gray circle, not a transparent one with a gray border:
| weeksOrbit diameter v | v := RTView new. diameter := 55. weeksOrbit := (RTEllipse new size: diameter; color: Color white; borderColor: Color lightGray) element. v add: weeksOrbit. v.Cheers,
Offray _______________________________________________ Moose-dev mailing list Moose-dev@iam.unibe.ch https://www.iam.unibe.ch/mailman/listinfo/moose-dev
-
Alexandre Bergel -
Offray Vladimir Luna Cárdenas -
offray＠riseup.net