~eliasnaur/gio-patches

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

~pierrec
~pierrec: 1
 kitchen: added more gradient examples

 1 files changed, 49 insertions(+), 15 deletions(-)
#391286 linux.yml success
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 :
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~eliasnaur/gio-patches/patches/16434/mbox | git am -3
Learn more about email & git
View this thread in the archives

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

~pierrec
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
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