Image overlay / background image

[0pcom]

I've been having a lot of fun with the core libraries recently.

Some things I still can't quite figure out:

• Setting background image / svg
• overlaying a svg with text, button, canvas, etc.

Basically I have a canvas animation that I'm trying to overlay on top of a SVG

I've yet to see any documented use of z-index for styling widgets, though I see the property exists
https://pkg.go.dev/cogentcore.org/core/styles#Style

I'm just unable to set it with, for example:

w.Styler(func(s *styles.Style) {
	s.ZIndex = 5
})

./ui.go:184:9: s.ZIndex undefined (type *styles.Style has no field or method ZIndex)

Perhaps it's not exposed as I'm thinking it would be? I'm using the latest version of the core libraries.

I see some other style properties pertaining to background but no method to set them, or documentation of this.

...

It's hard not to notice the evolution of the core libraries and the performance and stability improvements - since just the beginning of the year! Kudos to the developers for such tremendous progress!

[kkoreilly]

@0pcom Thanks for filing this.

You can use the s.Background property directly with any image. Notably, when I went to get the example to link to for this (https://www.cogentcore.org/core/colors#image), I noticed that it is not working, so I filed #1576.

We in fact just commented out the ZIndex property because it is not supported and is therefore confusing that it is present in the struct (#1569). However, you can use custom layout to accomplish the same effect. If you put your two widgets in a parent frame with s.Display = styles.Custom, they will render on top of each other (you can set s.Pos on the child widgets to adjust the positioning if needed). You will need to set s.RenderBox = false on the top widget so that it doesn't render its background over the bottom widget. (The widget that you make later will be the one on top).

Here is an example I gave to someone on Slack who wanted to render a table over an SVG widget, which you can adopt to your needs:

fr := core.NewFrame(b)
fr.Styler(func(s *styles.Style) {
	s.Display = styles.Custom
	s.Min.Set(units.Dp(512))
})
errors.Log(core.NewSVG(fr).OpenFS(mySVG, "icon.svg"))
tb := core.NewTable(fr)
type user struct {
	Name, Password string
}
tb.SetSlice(&[]user{{"Go", "hello"}, {"Python", "test"}})
tb.Styler(func(s *styles.Style) {
	s.Pos.Set(units.Dp(50))
	s.RenderBox = false
})
tree.AddChildInit(tb, "header", func(w *core.Frame) {
	w.Styler(func(s *styles.Style) {
		s.RenderBox = false
	})
})
tree.AddChildInit(tb, "grid", func(w *core.ListGrid) {
	w.Styler(func(s *styles.Style) {
		s.RenderBox = false
	})
})

Please let me know if you have any other questions. Also, thanks for the feedback on the framework! We hope to release v1 this year (#1526), and we will post more blog posts and videos soon.

[0pcom]

Thanks for the helpful advice. That worked, at least partially. I've updated the code above to include those changes, for reference

I'm no longer getting a panic with pc.Clear() ; nor am I getting the desired behavior. I am getting some odd behavior when experimenting with it's use.

when I call pc.Clear() without setting any fill color first:

func globeAnimation(w *core.Canvas) {
	w.SetDraw(func(pc *paint.Painter) {
		if pause {
			pc.Clear()
			return
		}

I get the following behavior where upon pause, instead of disappearing, the whole canvas turns black. The blackness seems to spill over to other widgets and follow the mouse, without clicking or highlighting anything.

cogentcore_pcClear-2025-07-16_16.46.56.mp4

when I call pc.Clear() - setting the transparent fill first:

func globeAnimation(w *core.Canvas) {
	w.SetDraw(func(pc *paint.Painter) {
		if pause {
		pc.Fill.Color = colors.Uniform(colors.Transparent)
			pc.Clear()
			return
		}

cogentcore_pcClear-2025-07-16_16.54.39.mp4

Same behavior with white instead of black.

I'm not sure what I'm missing here in terms of the right way of simply erasing lines that were previously drawn before drawing new ones.

[0pcom]

Thanks for the helpful advice. That worked, at least partially [...] I'm not sure what I'm missing here in terms of the right way of simply erasing lines that were previously drawn before drawing new ones.

If you have any further insights or advice on how to resolve this, I would appreciate it.

It seems to me that the behavior is not what one might expect, but again I'm not sure if it's some mistake on my part.

Sincere thanks for all your help & effort developing this exceptional library! I hope my feedback is helpful.

[kkoreilly]

@0pcom Thanks for following up on this, and apologies for the delayed response. The issue here is that the painter the canvas uses is the same one used for rendering the entire scene, so pc.Clear clears the entire region occupied by the canvas, and then also somehow corrupts the rest of the scene. The impact on other widgets is certainly a bug that we need to fix; I filed #1601.

Regardless of the bug, if you can call NeedsRender or Update on the svg when you pause (you can make it a global variable), then that might get that to not disappear. You could also experiment with calling NeedsRender or Update on the whole b, which might fix or exacerbate the issue (what happens would be informative for fixing it). Trying core.UpdateAll could also work as a workaround. It would also be informative to see if the same bug happens on desktop native.

Please let me know if any of these things can workaround the issue. We will work on fixing the underlying issue when we have the time.

[0pcom]

@0pcom Thanks for following up on this, and apologies for the delayed response.

No worries on the delay - I sincerely appreciate your help with this. I will test your workaround ASAP and update this thread with my findings.

You and @rcoreilly are doing great work on Cogent Core, keep it up!

...

Your suggestion worked.

• I made mySvg a global pointer variable:

var mySvg *core.SVG

• adjusted associated code:

mySvg = core.NewSVG(w)
errors.Log(mySvg.OpenFS(mySVG, "icon.svg"))

• added mySvg.Update() to the canvas animation loop

w.Animate(func(_ *core.Animation) {
	if pause {
		return
	}
	mySvg.Update()
	rotationX += dX
	rotationY += dY
	rotationZ += dZ
	w.NeedsRender()
})

The animation remains a bit choppy at this point, but at least it's correct otherwise.

cogentcore_-2025-07-29_12.08.40.mp4

I trust the library will continue being improved along these lines.

...

It would also be informative to see if the same bug happens on desktop native.

it does happen on desktop as well, here is the animation without mySvg.Update() in the animation loop

cogentcore_-2025-07-29_12.12.01.mp4

but I'm not using pc.clear there, so I'll have to check that and get back to you

[0pcom]

It would also be informative to see if the same bug happens on desktop native.

From my tests just now, it appears that setting fill color before calling pc.Clear() makes no difference - but the bug is happening on desktop.

Setting fill color before calling pc.Clear() does have an impact on web. The behavior is slightly different on web at this point than as documented in my previous posts.

using cogentcore.org/core v0.3.13-0.20250724000930-74c72927e235 (latest commit of main branch)

desktop native - no fill

func globeAnimation(w *core.Canvas) {
	w.SetDraw(func(pc *paint.Painter) {
		//pc.Fill.Color = colors.Uniform(colors.Transparent)
		pc.Clear()

go run .

(original recording was messed up!)

cogentcore_-2025-07-29_13.29.30.mp4

...

desktop native - transparent fill

func globeAnimation(w *core.Canvas) {
	w.SetDraw(func(pc *paint.Painter) {
		pc.Fill.Color = colors.Uniform(colors.Transparent)
		pc.Clear()

go run .

same as above video