Morphic layout: Proportional centering of cells

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Morphic layout: Proportional centering of cells

Christoph Thiede

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets 0.5@0.25 and 0.5@0.75, but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Nicola Mingotti

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Christoph Thiede

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti <[hidden email]>
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners

pastedImage.png (4K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Nicola Mingotti

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:
http://www.squeaksource.com/MorphicAddendum.html

Look in the CenteringMorph class documentation to see how to run the example.

bye
Nicola






On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners



_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Christoph Thiede

Thanks for your efforts! Based on your example, I can solve the problem on an even simpler way, using a ProportionalLayout:


   "Just shows a resizable table where each cell contains a Morph, centered into it."
  |out cm1 cm2 sm1 sm2 m|

   "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

   "container for picture1"
   cm1 := Morph new.
   cm1 changeTableLayout.
   cm1 listCentering: #center.
   cm1 wrapCentering: #center.
   cm1 color: (Color transparent ).
   cm1 width: 220; height: 220. 
   cm1 position: 120@120.

   "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.
   cm1 addMorph: sm1.

   "container for picture2"
   cm2 := Morph new. 
   cm2 changeTableLayout.
   cm2 listCentering: #center.
   cm2 wrapCentering: #center.
   cm2 color: (Color transparent ).
   cm2 width: 220; height: 220. 
   cm2 position: 220@220.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.
   cm2 addMorph: sm2.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: cm1 fullFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ (1 / 2))). 
   m addMorph: cm2 fullFrame: (LayoutFrame fractions: (0 @ (1 / 2) corner: 1 @ 1)). 
   
   m openInWorld.

Copy it into clipboard, select all of your test1 method and press <cmd>C (uppercase c) to view the differences.


Will work as long as there is enough space for both SketchMorphs. My actual question was rather: Does Morphic support any way to aim this result without using two auxiliary morphs? Something like a ProportionalCenteredLayout?


Best,

Christoph


Von: Nicola Mingotti <[hidden email]>
Gesendet: Sonntag, 8. September 2019 11:33:08
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: [Newbies] Morphic layout: Proportional centering of cells
 

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:
http://www.squeaksource.com/MorphicAddendum.html

Look in the CenteringMorph class documentation to see how to run the example.

bye
Nicola






On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners



_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Christoph Thiede

I wrote a CenteredLayoutFrame implementation that does it for me. Consider the following example:


   |out sm1 sm2 m|

  "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

  "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: sm1 fullFrame: (CenteringLayoutFrame fractions: 2 @ 1 / 4). 
   m addMorph: sm2 fullFrame: (CenteringLayoutFrame fractions: 2 @ 3 / 4).
   m openInWorld.

It works for me, and by the way, one could extend the CenteringLayoutFrame class to allow defining an extent as well, but I am still curious whether Morphic has another ace up its sleeve that does not require your own class.

Best,
Christoph

Von: Thiede, Christoph
Gesendet: Sonntag, 8. September 2019 20:53:04
An: Nicola Mingotti; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: AW: AW: [Newbies] Morphic layout: Proportional centering of cells
 

Thanks for your efforts! Based on your example, I can solve the problem on an even simpler way, using a ProportionalLayout:


   "Just shows a resizable table where each cell contains a Morph, centered into it."
  |out cm1 cm2 sm1 sm2 m|

   "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

   "container for picture1"
   cm1 := Morph new.
   cm1 changeTableLayout.
   cm1 listCentering: #center.
   cm1 wrapCentering: #center.
   cm1 color: (Color transparent ).
   cm1 width: 220; height: 220. 
   cm1 position: 120@120.

   "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.
   cm1 addMorph: sm1.

   "container for picture2"
   cm2 := Morph new. 
   cm2 changeTableLayout.
   cm2 listCentering: #center.
   cm2 wrapCentering: #center.
   cm2 color: (Color transparent ).
   cm2 width: 220; height: 220. 
   cm2 position: 220@220.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.
   cm2 addMorph: sm2.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: cm1 fullFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ (1 / 2))). 
   m addMorph: cm2 fullFrame: (LayoutFrame fractions: (0 @ (1 / 2) corner: 1 @ 1)). 
   
   m openInWorld.

Copy it into clipboard, select all of your test1 method and press <cmd>C (uppercase c) to view the differences.


Will work as long as there is enough space for both SketchMorphs. My actual question was rather: Does Morphic support any way to aim this result without using two auxiliary morphs? Something like a ProportionalCenteredLayout?


Best,

Christoph


Von: Nicola Mingotti <[hidden email]>
Gesendet: Sonntag, 8. September 2019 11:33:08
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: [Newbies] Morphic layout: Proportional centering of cells
 

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:
http://www.squeaksource.com/MorphicAddendum.html

Look in the CenteringMorph class documentation to see how to run the example.

bye
Nicola






On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners



_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners

CenteringLayoutFrame.st (2K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Nicola Mingotti

Hello Thiede,

I prefer my CenteringMorph way for these reasons:
-] It is specific, you read it and you see immediately what the morph is used for.
-] It will work well with a table of different dimensions. No need to think
to add one or more cells or change the table geometry.
-] I wrote it ;P

I have no idea if it is possible to center without using an on purpose class.
I saw that in table TableLayout that is not a default behavior so, i suppose not.

Hey, the Ctrl-C thing to compare to clipboard is cool ! I did not know that, thank you !

bye
nicola







On 9/8/19 11:59 AM, Thiede, Christoph wrote:

I wrote a CenteredLayoutFrame implementation that does it for me. Consider the following example:


   |out sm1 sm2 m|

  "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

  "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: sm1 fullFrame: (CenteringLayoutFrame fractions: 2 @ 1 / 4). 
   m addMorph: sm2 fullFrame: (CenteringLayoutFrame fractions: 2 @ 3 / 4).
   m openInWorld.

It works for me, and by the way, one could extend the CenteringLayoutFrame class to allow defining an extent as well, but I am still curious whether Morphic has another ace up its sleeve that does not require your own class.

Best,
Christoph

Von: Thiede, Christoph
Gesendet: Sonntag, 8. September 2019 20:53:04
An: Nicola Mingotti; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: AW: AW: [Newbies] Morphic layout: Proportional centering of cells
 

Thanks for your efforts! Based on your example, I can solve the problem on an even simpler way, using a ProportionalLayout:


   "Just shows a resizable table where each cell contains a Morph, centered into it."
  |out cm1 cm2 sm1 sm2 m|

   "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

   "container for picture1"
   cm1 := Morph new.
   cm1 changeTableLayout.
   cm1 listCentering: #center.
   cm1 wrapCentering: #center.
   cm1 color: (Color transparent ).
   cm1 width: 220; height: 220. 
   cm1 position: 120@120.

   "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.
   cm1 addMorph: sm1.

   "container for picture2"
   cm2 := Morph new. 
   cm2 changeTableLayout.
   cm2 listCentering: #center.
   cm2 wrapCentering: #center.
   cm2 color: (Color transparent ).
   cm2 width: 220; height: 220. 
   cm2 position: 220@220.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.
   cm2 addMorph: sm2.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: cm1 fullFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ (1 / 2))). 
   m addMorph: cm2 fullFrame: (LayoutFrame fractions: (0 @ (1 / 2) corner: 1 @ 1)). 
   
   m openInWorld.

Copy it into clipboard, select all of your test1 method and press <cmd>C (uppercase c) to view the differences.


Will work as long as there is enough space for both SketchMorphs. My actual question was rather: Does Morphic support any way to aim this result without using two auxiliary morphs? Something like a ProportionalCenteredLayout?


Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Sonntag, 8. September 2019 11:33:08
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: [Newbies] Morphic layout: Proportional centering of cells
 

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:
http://www.squeaksource.com/MorphicAddendum.html

Look in the CenteringMorph class documentation to see how to run the example.

bye
Nicola






On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners




_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners
Reply | Threaded
Open this post in threaded view
|

Re: Morphic layout: Proportional centering of cells

Christoph Thiede

Hi Nicola,


this might be subjective, but personally I will prefer the CenteringLayoutFrame, as it saves you two additional morphs and has less of a reinvention of the wheel :)

However, I am still a newbie to TableLayout, so I would appreciate any third opinion. :)


Hey, the Ctrl-C thing to compare to clipboard is cool ! I did not know that, thank you ! 

I discovered this myself by chance while browsing the #initializeShiftCmdKeyShortcuts implementations. For more information, also see https://wiki.squeak.org/squeak/1844.


Best,

Christoph


Von: Nicola Mingotti <[hidden email]>
Gesendet: Montag, 9. September 2019 04:32:55
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: AW: [Newbies] Morphic layout: Proportional centering of cells
 

Hello Thiede,

I prefer my CenteringMorph way for these reasons:
-] It is specific, you read it and you see immediately what the morph is used for.
-] It will work well with a table of different dimensions. No need to think
to add one or more cells or change the table geometry.
-] I wrote it ;P

I have no idea if it is possible to center without using an on purpose class.
I saw that in table TableLayout that is not a default behavior so, i suppose not.

Hey, the Ctrl-C thing to compare to clipboard is cool ! I did not know that, thank you !

bye
nicola







On 9/8/19 11:59 AM, Thiede, Christoph wrote:

I wrote a CenteredLayoutFrame implementation that does it for me. Consider the following example:


   |out sm1 sm2 m|

  "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

  "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: sm1 fullFrame: (CenteringLayoutFrame fractions: 2 @ 1 / 4). 
   m addMorph: sm2 fullFrame: (CenteringLayoutFrame fractions: 2 @ 3 / 4).
   m openInWorld.

It works for me, and by the way, one could extend the CenteringLayoutFrame class to allow defining an extent as well, but I am still curious whether Morphic has another ace up its sleeve that does not require your own class.

Best,
Christoph

Von: Thiede, Christoph
Gesendet: Sonntag, 8. September 2019 20:53:04
An: Nicola Mingotti; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: AW: AW: [Newbies] Morphic layout: Proportional centering of cells
 

Thanks for your efforts! Based on your example, I can solve the problem on an even simpler way, using a ProportionalLayout:


   "Just shows a resizable table where each cell contains a Morph, centered into it."
  |out cm1 cm2 sm1 sm2 m|

   "get a picture from the web"
   out := HTTPSocket httpGif:  'https://euriscom.it/data/squeak-ja.gif'.

   "container for picture1"
   cm1 := Morph new.
   cm1 changeTableLayout.
   cm1 listCentering: #center.
   cm1 wrapCentering: #center.
   cm1 color: (Color transparent ).
   cm1 width: 220; height: 220. 
   cm1 position: 120@120.

   "picture1"
   sm1 := SketchMorph new. 
   sm1 form: out. 
   sm1 width: 200. 
   sm1 height: 200.
   sm1 position: 600@300.
   cm1 addMorph: sm1.

   "container for picture2"
   cm2 := Morph new. 
   cm2 changeTableLayout.
   cm2 listCentering: #center.
   cm2 wrapCentering: #center.
   cm2 color: (Color transparent ).
   cm2 width: 220; height: 220. 
   cm2 position: 220@220.

   "picture2"
   sm2 := SketchMorph new. 
   sm2 form: (out deepCopy). 
   sm2 width: 200. 
   sm2 height: 200.
   sm2 position: 300@300.
   cm2 addMorph: sm2.

   "Make the big container frame"
   m := RectangleMorph new.
   m extent: 600@600; position: 100@100.
   m color: (Color green) darker darker darker.

   "extension of containers"
   m layoutPolicy: ProportionalLayout new.
   m addMorph: cm1 fullFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ (1 / 2))). 
   m addMorph: cm2 fullFrame: (LayoutFrame fractions: (0 @ (1 / 2) corner: 1 @ 1)). 
   
   m openInWorld.

Copy it into clipboard, select all of your test1 method and press <cmd>C (uppercase c) to view the differences.


Will work as long as there is enough space for both SketchMorphs. My actual question was rather: Does Morphic support any way to aim this result without using two auxiliary morphs? Something like a ProportionalCenteredLayout?


Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Sonntag, 8. September 2019 11:33:08
An: Thiede, Christoph; A friendly place to get answers to even the most basic questions about Squeak.
Betreff: Re: AW: [Newbies] Morphic layout: Proportional centering of cells
 

ook, this is what i did to solve your problem.

I defined a class CenteringMorph. It is simply a rectangle which has a 'son' element, it  keeps the 'son' always in its center.

Then, you put  CenteringMorph instances in the TableLayout, and let them expand to eat all the available space.

The class CenteringMorph is defined in this Package:
http://www.squeaksource.com/MorphicAddendum.html

Look in the CenteringMorph class documentation to see how to run the example.

bye
Nicola






On 9/7/19 12:35 AM, Thiede, Christoph wrote:

Thank you for your answer.


Actually, I chose TextMorphs as an example for a non-scalable morph. It is interesting to hear that SimpleButtons center themselves, but how could I achieve the same for, let me say, two ImageMorphs?




Best,

Christoph


Von: Nicola Mingotti [hidden email]
Gesendet: Samstag, 7. September 2019 00:24:16
An: A friendly place to get answers to even the most basic questions about Squeak.; Thiede, Christoph
Betreff: Re: [Newbies] Morphic layout: Proportional centering of cells
 

I guess you are looking from something like this:

note: the ButtonMorph is the only one that by default put the
text in center of its geometry. StringM and TextM do not.

========================

m := RectangleMorph new.
m openInWorld.
m extent: 300@300; position: 100@100.

m layoutPolicy: TableLayout new.
m listDirection: #topToBottom.   "default, place elements as rows in a table."
m listCentering: #topLeft.
m layoutInset: 5.   "space to container morph."
m cellInset: 5@5. "Space between table cells."
m hResizing: #spaceFill.
m vResizing: #spaceFill.
m color: (Color yellow darker darker darker).

t1 := SimpleButtonMorph new.
t1 openInWorld.
t1 color: ((Color green) lighter lighter lighter) .
t1 borderColor: (Color black).
t1 borderWidth: 2.
t1 hResizing: #spaceFill.
t1 vResizing: #spaceFill.
m addMorphBack: t1.

t2 := SimpleButtonMorph new.
t2 openInWorld.
t2 color: ((Color yellow) lighter lighter lighter) .
t2 borderColor: (Color black).
t2 borderWidth: 2.
t2 hResizing: #spaceFill.
t2 vResizing: #spaceFill.
m addMorphBack: t2.

========================


On 9/6/19 6:22 AM, Thiede, Christoph wrote:

Hi,


I am probably not seeing the wood for the trees: How can I achieve the following situation? When the layout changes, both texts should keep their center relative to their owner's bounds:




If I use a ProportionalLayout, I can position the TextMorphs at the offsets [hidden email] and [hidden email], but only with their upper left corner, so they will not really be centered.

If I use a TableLayout, I can center the TextMorphs at the top and the bottom using #listCentering:. However, I cannot center each morph relative to one vertical halft of the owner.

How can I stretch both cells to half the height of the morph? I also experimented with #cellSpacing: but still did not achieve the desired layout. (Also, I did not found any senders of the property in the image.)


Of course, I could use two auxiliary morphs which are arranged using a ProportionalLayout and each contain one text as a centered cell (with #listCentering: and #wrapCentering:). But for me, this feels a quite heavy solution for such a simple problem. Or is this the only way to go?


Thanks in advance,

Christoph


_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners




_______________________________________________
Beginners mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/beginners