gio-example: kitchen: added more gradient examples v1 PROPOSED

~pierrec: 1
 kitchen: added more gradient examples

 1 files changed, 49 insertions(+), 15 deletions(-)

Hi Chris,

I agree and had the same thoughts before I submitted. Wasnt sure what
the best option was.
Thinking about it more, I think a dedicated example is best, although
this is more about reference/documentation than example. What about an
example to be used as a reference for other things as well? I was
thinking about layouts for instance as I had to learn it by trial and
error before understanding it fully.

What do you think?

Cheers,

Pierre

Le sam. 9 janv. 2021 à 17:22, Chris Waldon
<christopher.waldon.dev@gmail.com> a écrit :

[PATCH gio-example] kitchen: added more gradient examples Export this patch

From: Pierre Curto <pierre.curto@gmail.com>

Signed-off-by: pierre <pierre.curto@gmail.com>
---
 kitchen/kitchen.go | 64 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 49 insertions(+), 15 deletions(-)

diff --git a/kitchen/kitchen.go b/kitchen/kitchen.go
index 1c0b374..24fc7ad 100644
--- a/kitchen/kitchen.go
+++ b/kitchen/kitchen.go
@@ -257,22 +257,56 @@ func kitchen(gtx layout.Context, th *material.Theme) layout.Dimensions {
 			})
 		},
 		func(gtx C) D {
-			gtx.Constraints.Min.Y = gtx.Px(unit.Dp(50))
-			gtx.Constraints.Max.Y = gtx.Constraints.Min.Y
-
-			dr := image.Rectangle{Max: gtx.Constraints.Min}
-			defer op.Push(gtx.Ops).Pop()
-			paint.LinearGradientOp{
-				Stop1:  layout.FPt(dr.Min),
-				Stop2:  layout.FPt(dr.Max),
-				Color1: color.NRGBA{R: 0x10, G: 0xff, B: 0x10, A: 0xFF},
-				Color2: color.NRGBA{R: 0x10, G: 0x10, B: 0xff, A: 0xFF},
-			}.Add(gtx.Ops)
-			clip.Rect(dr).Add(gtx.Ops)
-			paint.PaintOp{}.Add(gtx.Ops)
-			return layout.Dimensions{
-				Size: gtx.Constraints.Max,
+			side := 110
+			square := func(gtx C, label string, p1, p2 image.Point) D {
+				defer op.Push(gtx.Ops).Pop()
+				gtx.Constraints.Min = image.Pt(side, side)
+				dr := image.Rectangle{Max: gtx.Constraints.Min}
+				paint.LinearGradientOp{
+					Stop1:  layout.FPt(p1),
+					Stop2:  layout.FPt(p2),
+					Color1: color.NRGBA{R: 0x10, G: 0xff, B: 0x10, A: 0xFF},
+					Color2: color.NRGBA{R: 0x10, G: 0x10, B: 0xff, A: 0xFF},
+				}.Add(gtx.Ops)
+				clip.Rect(dr).Add(gtx.Ops)
+				paint.PaintOp{}.Add(gtx.Ops)
+				th := th.WithPalette(material.Palette{Fg: color.NRGBA{R: 255, G: 255, B: 255, A: 255}})
+				layout.NW.Layout(gtx, material.Caption(&th, "A").Layout)
+				layout.NE.Layout(gtx, material.Caption(&th, "B").Layout)
+				layout.SE.Layout(gtx, material.Caption(&th, "C").Layout)
+				layout.SW.Layout(gtx, material.Caption(&th, "D").Layout)
+				layout.Center.Layout(gtx, material.Caption(&th, label).Layout)
+				return D{Size: gtx.Constraints.Min}
 			}
+			A, B, C, D := image.Pt(0, 0), image.Pt(side, 0), image.Pt(side, side), image.Pt(0, side)
+			return layout.Flex{
+				Spacing: layout.SpaceEvenly,
+			}.Layout(gtx,
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "A to C", A, C)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "B to D", B, D)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "C to A", C, A)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "D to B", D, B)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "A to B\nD to C", A, B)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "A to D\nB to C", A, D)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "B to A\nC to D", B, A)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return square(gtx, "D to A\nC to B", D, A)
+				}),
+			)
 		},
 		func(gtx C) D {
 			in := layout.UniformInset(unit.Dp(8))
-- 
2.26.2

Chris Waldon

7 days ago

Hi Pierre!

Thanks for putting this reference together! Having this set of squares
available will definitely help people use gradients in gio effectively!

However, I do think that their current placement makes the kitchen look
a little less... polished? It adds a lot of visual noise that is useful
as a reference, but looks cluttered. We use that particular example to
showcase all of the things that Gio supports, and I think its first
impression matters.

I have two thoughts about how to integrate this change:

- switch between the basic gradient that predates this change and the
  set of squares you added when the user checks a box or presses a
  button. We could introduce a new widget to control this.
- create a new, separate example program that just demonstrates how to
  use gradients.

What do you think?

Cheers,
Chris