Roassal nested layout

Hi Ben,

Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 

How would you like to specific the layout?

Cheers,
Alexandre


On Aug 30, 2012, at 6:10 PM, Ben Coman [hidden email] wrote:

  

I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
How can these be made for the circle layout to leave spacing between the middle node1 nodes?

cheers -ben

--------------------
  | view nodes1 |
  view := ROView new.
  view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
  nodes1 do: [:n | n addShape: ROLabel].
  nodes1 do:
  [     :node1 |
      ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
      [    :x |
          node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
      ].
  ROGridLayout on: node1 elements.
  ].

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

roassal simple composition.png (11K) Download Attachment
roassal children overlapping parent label.png (3K) Download Attachment

Hi Ben,

Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 

How would you like to specific the layout?

Cheers,
Alexandre


On Aug 30, 2012, at 6:10 PM, Ben Coman [hidden email] wrote:

  

I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
How can these be made for the circle layout to leave spacing between the middle node1 nodes?

cheers -ben

--------------------
  | view nodes1 |
  view := ROView new.
  view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
  nodes1 do: [:n | n addShape: ROLabel].
  nodes1 do:
  [     :node1 |
      ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
      [    :x |
          node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
      ].
  ROGridLayout on: node1 elements.
  ].

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

ROCircleLayout-original-10nodes.png (30K) Download Attachment
ROCircleLayout-sumCircumference-10nodes.png (41K) Download Attachment
ROCircleLayout-sumCircumference-3nodes.png (15K) Download Attachment
ROCircleLayout-sumCircumference-2nodes.png (9K) Download Attachment

Thanks Ben for all the effort you are putting in Roassal.
  

The core of Roassal should have the minimum amount tools to let one built any extensions. Currently, Roassal does not support a mechanism to compose shapes. It will probably come on some point. However, this future mechanism will not be at the core of Roassal. It should rather be done by having a small language on top of it.

Is having an offset for shape be useful when come the time to have a FormBuilder? I have the impression that yes. I can work on it this week.

Cheers,
Alexandre


On Sep 1, 2012, at 11:36 AM, Ben Coman [hidden email] wrote:

  

My question was less about compositing and more about ROCircleLayout, so I've split my response into two posts.  

About compositing, really I'm not sure yet.  However I have a couple of thoughts that may be easier prior to full compositing.  Referring to the attached images, you can see that the children shapes overlap the label shape of the parent, and also multiples within the one shape overlap.  IT would help to have a way to offset shapes, and as a default the children should be offset below the label.  One way to do that would be being able to specify an offset for shapes, and have some way for the user to set up the specific linking of the bounds.  For instance, perhaps adding two label shapes at the top with the children nodes below.  The user would have to specifically define the offset of the 

Take for instance this code for Roassal Easel... 
    n1 := ROElement spriteOn: 'XX___'.
    n1 + (ROLabel new text: #model). 
    n1 + (ROLabel new text: #bounds ).
    rawView add: n1.

...where the two labels overlap.  I think you would gain a lot if you could do something like the following...
    n1 := ROElement spriteOn: 'XX___'.
    n1 + (shape1 := ROLabel new text: #model). 
    n1 + (ROLabel new text: #bounds; offset: [ shape1 bottomLeftCorner ] ).
    rawView add: n1.

This should handle shape1 being a multi-line label.

As a second stage, there should be some way to add text under the children nodes.  The perhaps (only a wild guess) means that ROChildrenShape should not inherit from RONullShape to be forced to appear at the end of the list of shapes. Or perhaps since ROChildrenShape might be more coupled to the internals than other shapes, something like....
    n1 := ROElement spriteOn: 'XX___'
    n1 + (shape1 := ROLabel new text: #model). 
    n1 + (ROLabel new text: #bounds; offset: [ (shape1 bottomLeftCorner) + (n1 childrenShape bottomLeftCorner) ] ).
    rawView add: n1.

Perhaps this is fairly rough - but it at least makes things possible.  

hope that makes sense :)
cheers -ben

Alexandre Bergel wrote:
    

Hi Ben,

Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 

How would you like to specific the layout?

Cheers,
Alexandre


On Aug 30, 2012, at 6:10 PM, Ben Coman 
[hidden email]
 wrote:

  

      

I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
How can these be made for the circle layout to leave spacing between the middle node1 nodes?

cheers -ben

--------------------
  | view nodes1 |
  view := ROView new.
  view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
  nodes1 do: [:n | n addShape: ROLabel].
  nodes1 do:
  [     :node1 |
      ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
      [    :x |
          node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
      ].
  ROGridLayout on: node1 elements.
  ].

  ROCircleLayout on: nodes1.
  view openInWindow.
_______________________________________________
Moose-dev mailing list

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

    

        

<roassal simple composition.png><roassal children overlapping parent label.png>_______________________________________________
Moose-dev mailing list
[hidden email]
https://www.iam.unibe.ch/mailman/listinfo/moose-dev
    

Hi Ben!

  

...where the two labels overlap.  I think you would gain a lot if you could do something like the following...
    n1 := ROElement spriteOn: 'XX___'.
    n1 + (shape1 := ROLabel new text: #model). 
    n1 + (ROLabel new text: #bounds; offset: [ shape1 bottomLeftCorner ] ).
    rawView add: n1.
    

I have improved the way shapes are drawn. If you update, you can then create the following class:

-=-=-=-=-=-=-=-=-=-=-=-=
ROShape subclass: #ROTranslatingShape
	instanceVariableNames: 'offset'

initialize
	super initialize.
	offset := 0 @ 0

chainedDrawOn: aCanvas for: aROElement
	aROElement translateBy: offset negated. 
	super chainedDrawOn: aCanvas for: aROElement.
	aROElement translateBy: offset.

offset: aPoint
	offset := aPoint
-=-=-=-=-=-=-=-=-=-=-=-=

I've attached the .cs for convenience. 
  

You can then do the following:

el := ROElement new + ROBorder + (ROTranslatingShape new offset: 20 @ 20) + ROBox . 
el extent: 50 @ 50.
el @ RODraggable.
rawView add: el.

  

---

Without the translation, you have 

el := ROElement new + ROBorder + ROBox . 
el extent: 50 @ 50.
el @ RODraggable @ ROPopup. 
rawView add: el.

  

---

I haven't included ROTranslatingShape in Roassal. I first would like to see use cases of it.
Let me know how it goes.

Cheers,
Alexandre


  

Alexandre Bergel wrote:
    

Hi Ben,

Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 

How would you like to specific the layout?

Cheers,
Alexandre


On Aug 30, 2012, at 6:10 PM, Ben Coman 
[hidden email]
 wrote:

  

      

I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
How can these be made for the circle layout to leave spacing between the middle node1 nodes?

cheers -ben

--------------------
  | view nodes1 |
  view := ROView new.
  view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
  nodes1 do: [:n | n addShape: ROLabel].
  nodes1 do:
  [     :node1 |
      ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
      [    :x |
          node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
      ].
  ROGridLayout on: node1 elements.
  ].

  ROCircleLayout on: nodes1.
  view openInWindow.
_______________________________________________
Moose-dev mailing list

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

    

        

<roassal simple composition.png><roassal children overlapping parent label.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
  

Hi Ben!

  

...where the two labels overlap.  I think you would gain a lot if you could do something like the following...
    n1 := ROElement spriteOn: 'XX___'.
    n1 + (shape1 := ROLabel new text: #model). 
    n1 + (ROLabel new text: #bounds; offset: [ shape1 bottomLeftCorner ] ).
    rawView add: n1.
    

I have improved the way shapes are drawn. If you update, you can then create the following class:

-=-=-=-=-=-=-=-=-=-=-=-=
ROShape subclass: #ROTranslatingShape
	instanceVariableNames: 'offset'

initialize
	super initialize.
	offset := 0 @ 0

chainedDrawOn: aCanvas for: aROElement
	aROElement translateBy: offset negated. 
	super chainedDrawOn: aCanvas for: aROElement.
	aROElement translateBy: offset.

offset: aPoint
	offset := aPoint
-=-=-=-=-=-=-=-=-=-=-=-=

I've attached the .cs for convenience. 
  

You can then do the following:

el := ROElement new + ROBorder + (ROTranslatingShape new offset: 20 @ 20) + ROBox . 
el extent: 50 @ 50.
el @ RODraggable.
rawView add: el.

  

---

Without the translation, you have 

el := ROElement new + ROBorder + ROBox . 
el extent: 50 @ 50.
el @ RODraggable @ ROPopup. 
rawView add: el.

  

---

I haven't included ROTranslatingShape in Roassal. I first would like to see use cases of it.
Let me know how it goes.

Cheers,
Alexandre


  

Alexandre Bergel wrote:
    

Hi Ben,

Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 

How would you like to specific the layout?

Cheers,
Alexandre


On Aug 30, 2012, at 6:10 PM, Ben Coman 
[hidden email]
 wrote:

  

      

I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
How can these be made for the circle layout to leave spacing between the middle node1 nodes?

cheers -ben

--------------------
  | view nodes1 |
  view := ROView new.
  view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
  nodes1 do: [:n | n addShape: ROLabel].
  nodes1 do:
  [     :node1 |
      ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
      [    :x |
          node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
      ].
  ROGridLayout on: node1 elements.
  ].

  ROCircleLayout on: nodes1.
  view openInWindow.
_______________________________________________
        

ROTranslatingShape-usecases.png (41K) Download Attachment

Thanks for looking at this Alexandre.  That is an interesting approach.  I had 
been considering that each shape might just store an offset internally that cold 
be set.

Attached is "ShapeTranslation-20120916a-bencoman.st" containing some simple use 
cases for ROTranslatingShape
as well as "ROTranslatingShape-usecases.png" containing compiled screenshots.

Having worked through those use cases, it seems that how the offset shapes 
affect the element extent needs to be considered - particular in relation to 
mouse events.  For example, if an element is made up of two shapes at opposite 
corners, then the blank space at the other two corners remains selectable to 
drag the element, which might not be quite right.  So as wild and uninformed 
speculation... I wonder if rather than the element registering for events, the 
individual shapes might register for events and forward them on to the element 
for processing.

cheers -ben

Alexandre Bergel wrote:
> Hi Ben!
>
>   
>> ...where the two labels overlap.  I think you would gain a lot if you could do something like the following...
>>     n1 := ROElement spriteOn: 'XX___'.
>>     n1 + (shape1 := ROLabel new text: #model). 
>>     n1 + (ROLabel new text: #bounds; offset: [ shape1 bottomLeftCorner ] ).
>>     rawView add: n1.
>>     
>
> I have improved the way shapes are drawn. If you update, you can then create the following class:
>
> -=-=-=-=-=-=-=-=-=-=-=-=
> ROShape subclass: #ROTranslatingShape
> 	instanceVariableNames: 'offset'
>
> initialize
> 	super initialize.
> 	offset := 0 @ 0
>
> chainedDrawOn: aCanvas for: aROElement
> 	aROElement translateBy: offset negated. 
> 	super chainedDrawOn: aCanvas for: aROElement.
> 	aROElement translateBy: offset.
>
> offset: aPoint
> 	offset := aPoint
> -=-=-=-=-=-=-=-=-=-=-=-=
>
> I've attached the .cs for convenience. 
>   
> --------------------------------------------------------------------------------
>
>
>
> You can then do the following:
>
> el := ROElement new + ROBorder + (ROTranslatingShape new offset: 20 @ 20) + ROBox . 
> el extent: 50 @ 50.
> el @ RODraggable.
> rawView add: el.
>
>   
>
> --------------------------------------------------------------------------------
>
> --------------------------------------------------------------------------------
>
>
>
> Without the translation, you have 
>
> el := ROElement new + ROBorder + ROBox . 
> el extent: 50 @ 50.
> el @ RODraggable @ ROPopup. 
> rawView add: el.
>
>   
>
> --------------------------------------------------------------------------------
>
> --------------------------------------------------------------------------------
>
>
>
>
> I haven't included ROTranslatingShape in Roassal. I first would like to see use cases of it.
> Let me know how it goes.
>
> Cheers,
> Alexandre
>
>
>   
>> Alexandre Bergel wrote:
>>     
>>> Hi Ben,
>>>
>>> Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 
>>>
>>> How would you like to specific the layout?
>>>
>>> Cheers,
>>> Alexandre
>>>
>>>
>>> On Aug 30, 2012, at 6:10 PM, Ben Coman 
>>> [hidden email]
>>>  wrote:
>>>
>>>   
>>>
>>>       
>>>> I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
>>>> How can these be made for the circle layout to leave spacing between the middle node1 nodes?
>>>>
>>>> cheers -ben
>>>>
>>>> --------------------
>>>>   | view nodes1 |
>>>>   view := ROView new.
>>>>   view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
>>>>   nodes1 do: [:n | n addShape: ROLabel].
>>>>   nodes1 do:
>>>>   [     :node1 |
>>>>       ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
>>>>       [    :x |
>>>>           node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
>>>>       ].
>>>>   ROGridLayout on: node1 elements.
>>>>   ].
>>>>
>>>>   ROCircleLayout on: nodes1.
>>>>   view openInWindow.
>>>> _______________________________________________
>>>>         

  

---

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

Another use case #6: centering a label on an object, in this case a circle shape.
Not sure if this is the most appropriate use but just brainstorming... see 
attached file-in.

Ben Coman wrote:
> Thanks for looking at this Alexandre.  That is an interesting approach.  I had 
> been considering that each shape might just store an offset internally that cold 
> be set.
>
> Attached is "ShapeTranslation-20120916a-bencoman.st" containing some simple use 
> cases for ROTranslatingShape
> as well as "ROTranslatingShape-usecases.png" containing compiled screenshots.
>
> Having worked through those use cases, it seems that how the offset shapes 
> affect the element extent needs to be considered - particular in relation to 
> mouse events.  For example, if an element is made up of two shapes at opposite 
> corners, then the blank space at the other two corners remains selectable to 
> drag the element, which might not be quite right.  So as wild and uninformed 
> speculation... I wonder if rather than the element registering for events, the 
> individual shapes might register for events and forward them on to the element 
> for processing.
>
> cheers -ben
>
> Alexandre Bergel wrote:
> > Hi Ben!
> >
> >   
> >> ...where the two labels overlap.  I think you would gain a lot if you could do something like the following...
> >>     n1 := ROElement spriteOn: 'XX___'.
> >>     n1 + (shape1 := ROLabel new text: #model). 
> >>     n1 + (ROLabel new text: #bounds; offset: [ shape1 bottomLeftCorner ] ).
> >>     rawView add: n1.
> >>     
> >
> > I have improved the way shapes are drawn. If you update, you can then create the following class:
> >
> > -=-=-=-=-=-=-=-=-=-=-=-=
> > ROShape subclass: #ROTranslatingShape
> > 	instanceVariableNames: 'offset'
> >
> > initialize
> > 	super initialize.
> > 	offset := 0 @ 0
> >
> > chainedDrawOn: aCanvas for: aROElement
> > 	aROElement translateBy: offset negated. 
> > 	super chainedDrawOn: aCanvas for: aROElement.
> > 	aROElement translateBy: offset.
> >
> > offset: aPoint
> > 	offset := aPoint
> > -=-=-=-=-=-=-=-=-=-=-=-=
> >
> > I've attached the .cs for convenience. 
> >   
> > --------------------------------------------------------------------------------
> >
> >
> >
> > You can then do the following:
> >
> > el := ROElement new + ROBorder + (ROTranslatingShape new offset: 20 @ 20) + ROBox . 
> > el extent: 50 @ 50.
> > el @ RODraggable.
> > rawView add: el.
> >
> >   
> >
> > --------------------------------------------------------------------------------
> >
> > --------------------------------------------------------------------------------
> >
> >
> >
> > Without the translation, you have 
> >
> > el := ROElement new + ROBorder + ROBox . 
> > el extent: 50 @ 50.
> > el @ RODraggable @ ROPopup. 
> > rawView add: el.
> >
> >   
> >
> > --------------------------------------------------------------------------------
> >
> > --------------------------------------------------------------------------------
> >
> >
> >
> >
> > I haven't included ROTranslatingShape in Roassal. I first would like to see use cases of it.
> > Let me know how it goes.
> >
> > Cheers,
> > Alexandre
> >
> >
> >   
> >> Alexandre Bergel wrote:
> >>     
> >>> Hi Ben,
> >>>
> >>> Currently no. We definitely need a better way to specific layouts and their composition. However this will take time before we have this. 
> >>>
> >>> How would you like to specific the layout?
> >>>
> >>> Cheers,
> >>> Alexandre
> >>>
> >>>
> >>> On Aug 30, 2012, at 6:10 PM, Ben Coman 
> >>> [hidden email]
> >>>  wrote:
> >>>
> >>>   
> >>>
> >>>       
> >>>> I have been looking at the ROExample "Nesting" examples and expanded #nesting2 with another level as shown in the code below, such that there is the outer view, middle "#1" nodes and inner "#2" nodes. However the initial state of this has much of the middle node1 and inner node2 nodes overlapping. 
> >>>> How can these be made for the circle layout to leave spacing between the middle node1 nodes?
> >>>>
> >>>> cheers -ben
> >>>>
> >>>> --------------------
> >>>>   | view nodes1 |
> >>>>   view := ROView new.
> >>>>   view add: (ROElement sprite addAll: (nodes1 := ROElement spritesOn: (1 to: 10))).
> >>>>   nodes1 do: [:n | n addShape: ROLabel].
> >>>>   nodes1 do:
> >>>>   [     :node1 |
> >>>>       ( (node1 model) *100+1 to: (node1 model)*100+5 ) do:
> >>>>       [    :x |
> >>>>           node1 add: ( (ROElement spriteOn: x) addShape: ROLabel).
> >>>>       ].
> >>>>   ROGridLayout on: node1 elements.
> >>>>   ].
> >>>>
> >>>>   ROCircleLayout on: nodes1.
> >>>>   view openInWindow.
> >>>> _______________________________________________
> >>>>         
>
>   
>
> --------------------------------------------------------------------------------
>
> --------------------------------------------------------------------------------
>
> _______________________________________________
> 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