Morphic layout: Proportional centering of cells

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

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

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