Dynamic Canvas - am I doing it right?

[squidkeeper]

I have a custom widget that lays out a lot of canvas objects to make vector images, and allows mouse interactions. The widget state changes all the time, and the renderer's Refresh updates the objects accordingly. It is all very pleasing. But I find that I need to call Refresh on a container in order for the updates to appear on screen. Refresh on the widget is not enough. It's easy enough to wrap my widget in a container, but am I missing a way of combining the refresh behaviour of a container with the interactions of a widget? I can't see any relevant documentation. But it's a lot of fun.

Example of an application here. The zoom is driven by a mouse interaction.

[andydotxyz]

If calling Refresh on your widget does not actually refresh it usually means you missed the call to ExtendBaseWidget. Should not be any need to wrap it in a container just to get it working as expected.

[squidkeeper]

Thanks for taking a look. Here's a toy app that illustrates the problem, yet it has ExtendBaseWidget. The allocation of work between Layout and Refresh is a bit uncertain, since objects can come, go, and change at any time. But I have found no combination that helps. Everything works when you refresh a container, see the comments in the goroutine.

package main

import (
	"math"
	"math/rand"
	"time"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/driver/desktop"
	"fyne.io/fyne/v2/widget"
	"golang.org/x/image/colornames"
)

// Toy interactive graphics app to investigate widget Refresh

func main() {
	mainWin := app.New().NewWindow("Blob World")
	world := NewBlobworld() // custom widget
	status := widget.NewLabel("Blobworld is go")
	adder := widget.NewButton("Click here or in image. Right click resets", func() {
		world.AddAt(rand.Float64()*30+20, 0)
	})
	worldContainer := container.NewMax(world)
	content := container.NewBorder(adder, status, nil, nil, worldContainer)
	mainWin.SetContent(content)
	world.Add(&Blob{0, 0, 20, 0})   // Sun
	world.Add(&Blob{25, 40, 10, 1}) // Mars
	go func() {
		for { // move the blobs around
			time.Sleep(time.Millisecond * 50)
			world.Advance(2 * math.Pi / 100) // 100 steps per orbit at speed 1.0
			// Update the view -- but how?
			world.Refresh() // Does not change the display ...

			//content.Refresh() // ... but this does
			//worldContainer.Refresh() // and this, if I put my Widget in an empty container

			// These do too, but only if layout does recreate()
			//status.SetText(fmt.Sprintf("Nblobs = %d", len(world.blobs)))
			//status.Refresh() // ditto this
		}
	}()
	mainWin.Resize(fyne.NewSize(400, 400))
	mainWin.ShowAndRun()
}

// Entities in the Blobword: just Blobs.
type Blob struct {
	x, y, z float64 // position and size, as % of the entire world (widget)
	s       float64 // fraction of standard speed
}

// The Blobworld widget //
type Blobworld struct {
	widget.BaseWidget
	blobs []*Blob
	r     *BlobworldRenderer // need renderer to translate pixels to user units
}

func NewBlobworld() *Blobworld {
	b := &Blobworld{}
	b.ExtendBaseWidget(b)
	return b
}

func (b *Blobworld) Add(blob *Blob) {
	b.blobs = append(b.blobs, blob)
}

func (b *Blobworld) AddAt(x, y float64) {
	b.blobs = append(b.blobs, &Blob{x, y, 5 + rand.Float64()*10, 3 - rand.Float64()*6})
}

func (b *Blobworld) Advance(dt float64) {
	for _, blob := range b.blobs {
		x1 := math.Cos(dt*blob.s)*blob.x - math.Sin(dt*blob.s)*blob.y
		y1 := math.Sin(dt*blob.s)*blob.x + math.Cos(dt*blob.s)*blob.y
		blob.x, blob.y = x1, y1
	}
	b.blobs[0].s += dt // The sun doesn't move, so make it pulsate
	b.blobs[0].z = math.Cos(b.blobs[0].s)*10 + 30
}

// Implement Mouseable (MouseUp, MouseDown)
func (b *Blobworld) MouseUp(me *desktop.MouseEvent) {
	if me.Button == desktop.MouseButtonPrimary {
		b.AddAt(b.r.pixelsToUser(me.Position))
	}
	if me.Button == desktop.MouseButtonSecondary {
		b.blobs = b.blobs[:1] // remove all except sun
	}
}
func (b *Blobworld) MouseDown(me *desktop.MouseEvent) {
}

func (b *Blobworld) CreateRenderer() fyne.WidgetRenderer {
	b.ExtendBaseWidget(b)
	r := &BlobworldRenderer{}
	b.r = r
	r.b = b
	return r
}

type BlobworldRenderer struct {
	b              *Blobworld
	worldW, worldH float32
	objs           []fyne.CanvasObject
}

func (r *BlobworldRenderer) MinSize() fyne.Size {
	return fyne.NewSize(20, 20)
}

func (r *BlobworldRenderer) Layout(s fyne.Size) {
	r.worldW, r.worldH = s.Components()
	//r.recreate() //redundant
}

func (r *BlobworldRenderer) recreate() {
	r.objs = r.objs[:0]
	for _, entity := range r.b.blobs {
		diam := float32(entity.z) * r.worldH / 100 // convert to fyne pixels
		x := float32(entity.x)*r.worldW/100 - diam/2 + r.worldW/2
		y := float32(entity.y)*r.worldH/100 - diam/2 + r.worldH/2
		circle := canvas.NewCircle(colornames.Dodgerblue)
		circle.Move(fyne.NewPos(x, y))
		circle.Resize(fyne.NewSize(diam, diam))
		r.objs = append(r.objs, circle)
	}
}

// Inverse of that in recreate except no shift to corner
func (r *BlobworldRenderer) pixelsToUser(p fyne.Position) (float64, float64) {
	return float64(100*p.X/r.worldW - 50), float64(100*p.Y/r.worldH - 50)
}

func (r *BlobworldRenderer) Refresh() { //"copies state from widget to renderer"
	r.recreate()
}

func (r *BlobworldRenderer) Objects() []fyne.CanvasObject {
	return r.objs
}

func (r *BlobworldRenderer) Destroy() {
}

[andydotxyz]

I guess the problem is that whilst refreshing the renderer you completely change what objects will be used to paint it, but not notifying anything. So the container and refresh is closing this loop for you.

Refreshing a renderer isn't expected to be this heavy, but if you do change how your widget is made up you need to refresh (again?). It feels like you're approaching this in an "immediate mode" technique but Fyne is a retained style API where we re-use widgets as much as possible for performance.

[squidkeeper]

Good point about immediate-mode! Can't see myself going there for a whole desktop app though.

Further investigation (with circles; not sure how general it is) shows:
container.Refresh calls Layout, Objects, Objects.
So long as Layout creates the canvas objects as desired, the Objects call picks it up and they are redrawn.

widget.Refresh calls renderer.Refresh, but changes to objects are not picked up (as you said).

The system knows if you cheat on Layout: just changing properties is not enough. If the subsequent Objects call returns the same list twice, it stops calling Layout until it wants a new size. Nice! So I am kind of forced into immediate mode to make the Layout look legitimate. Although re-creating one object gets them all redrawn, which suggests an evil (and likely fragile) efficiency trick.

Anyway, all I need is an idiomatic way of saying RefreshYesNow; if that is poking an enclosing container and never returning the same object list twice, so be it. Maybe native widgets have it easier.

If a Canvas widget (in the Tk sense) would be of general interest, I'll publish it once I believe it works by more than luck.
Thanks.

[andydotxyz]

Anyway, all I need is an idiomatic way of saying RefreshYesNow; if that is poking an enclosing container and never returning the same object list twice, so be it. Maybe native widgets have it easier.

Just call canvas.Refresh(render.myWidget) and it will force a re-draw using the new info. Among other things that is what the container was doing but your renderer was not. That will ask it to re-paint without setting up a circular loop through the renderer Refresh call.

[squidkeeper]

Terrific. I can confirm that canvas.Refresh(renderer.widget) does what I hoped, thanks. Actually, running Layout in immediate mode like this is not an efficiency problem, so long as when there are thousands of objects I (re-)allocate from a sync.Pool and not directly.

[andydotxyz]

Yes, re-using canvas objects is always preferrable.