Does the Fyne library redraw all the controls in the container entirely, even if only one button is clicked?

[a0k1i2n3g]

I have a machine on an arm64 platform, and the touchscreen it uses and doesn't have a GPU accelerator. I placed 10 buttons with icons and a label in the container of the main screen to display the value of the clicked button, and I found that there was a significant delay. Later, my test revealed that clicking on a certain button would cause all the controls within the entire container to be redrawn. Since an IconButton has at least one icon image and two rectangles to be drawn, it results in at least more than 30 elements to be drawn. Moreover, when the button shows the hover effect and updates the label, it triggers the redrawing of the entire container twice, leading to a large delay. Later, I conducted a simple test and confirmed that when one of the two buttons is clicked, the container containing the label and the two buttons will be redrawn in its entirety. Why isn't it a local redrawing of a single button? Or am I using it incorrectly? Could everyone give me some suggestions? Thank you. The code is as follows:
`
package main

import (
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/widget"
)

func main() {
myApp := app.New()
label := widget.NewLabel("some text")
button1 := widget.NewButton("button1", func() {
label.SetText("button1")
})

button2 := widget.NewButton("button2", func() {
	label.SetText("button2")
})

button3 := widget.NewButton("button3", func() {
	label.SetText("button3")
})

button4 := widget.NewButton("button4", func() {
	label.SetText("button4")
})

content := container.NewVBox(
	label,
	button1,
	button2,
	button3,
	button4,
)

window := myApp.NewWindow("demo")
window.SetContent(content)
window.Resize(fyne.NewSize(300, 150))

window.ShowAndRun()

}

I also made the following modifications: fyne/internal/painter/gl/draw.gofunc (p *painter) drawObject(o fyne.CanvasObject, pos fyne.Position, frame fyne.Size) {
switch obj := o.(type) {
case *canvas.Circle:
fmt.Printf("draw circle\r\n")
p.drawCircle(obj, pos, frame)
case *canvas.Line:
fmt.Printf("draw Line\r\n")
p.drawLine(obj, pos, frame)
case *canvas.Image:
fmt.Printf("draw Image\r\n")
p.drawImage(obj, pos, frame)
case *canvas.Raster:
fmt.Printf("draw Raster\r\n")
p.drawRaster(obj, pos, frame)
case *canvas.Rectangle:
fmt.Printf("draw Rectangle\r\n")
p.drawRectangle(obj, pos, frame)
case *canvas.Text:
fmt.Printf("draw Text\r\n")
p.drawText(obj, pos, frame)
case *canvas.LinearGradient:
fmt.Printf("draw LinearGradient\r\n")
p.drawGradient(obj, p.newGlLinearGradientTexture, pos, frame)
case *canvas.RadialGradient:
fmt.Printf("draw RadialGradient\r\n")
p.drawGradient(obj, p.newGlRadialGradientTexture, pos, frame)
}
}fyne_test/fyne/internal/painter/gl/painter.gofunc (p *painter) Paint(obj fyne.CanvasObject, pos fyne.Position, frame fyne.Size) {
fmt.Printf("Paint\r\n")
if obj.Visible() {
fmt.Printf("Obj: %#v\r\n", obj)
p.drawObject(obj, pos, frame)
}
}`
for debuggin

[andydotxyz]

No, Fyne will only draw what has changed.

I think your debug lines have been inserted before the change check. You'll see that there is a texture cache which is used until an item updates.

If anything on screen changes then we do have to construct a new frame from all of the caches objects.

[dweymouth]

If anything on screen changes then we do have to construct a new frame from all of the caches objects.

I don't know that much about rendering in other toolkits, but is this how it is commonly done, or are there room for later optimizations where we only do a partial update of the last framebuffer if we know only a certain subset of the visible screen is different?

[andydotxyz]

Partial updating is possible and some do it. Graphically the optimisation is a nice one - but it is surprisingly complicated to know the impacted region of a single change on screen because of how many layers stack to create the output.

One "simpler" optimisation we could do is to use the GPU cache instead of our own so that we don't have to push the frames and only the widget rendering up - that will have a bit impact on the WASM perforamance.

[a0k1i2n3g]

@andydotxyz
Paint
Obj: &fyne.Container{size:fyne.Size{Width:292, Height:196}, position:fyne.Position{X:4, Y:4}, Hidden:false, Layout:layout.vBoxLayout{paddingFunc:(func() float32)(0x75aea0)}, lock:sync.Mutex{state:0, sema:0x0}, Objects:[]fyne.CanvasObject{(*widget.Label)(0xc00032a0e0), (*widget.Button)(0xc00004fb80), (*widget.Button)(0xc00004fc20), (*widget.Button)(0xc00004fcc0), (*widget.Button)(0xc00004fd60)}}
Paint
Obj: &widget.Label{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x420c500043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc0002e5be0)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Text:"button1", Alignment:0, Wrapping:0, TextStyle:fyne.TextStyle{Bold:false, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, Truncation:0, Importance:0, provider:(*widget.RichText)(0xc000436000), binder:widget.basicBinder{callback:atomic.Pointer[func(fyne.io/fyne/v2/data/binding.DataItem)]{:[0]*func(binding.DataItem){}, :atomic.noCopy{}, v:(unsafe.Pointer)(nil)}, dataListenerPairLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, dataListenerPair:widget.annotatedListener{data:binding.DataItem(nil), listener:binding.DataListener(nil)}}}
Paint
Obj: &widget.RichText{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x420c500043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc000409b30)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc000434000)}, Wrapping:0, Scroll:3, Truncation:0, inset:fyne.Size{Width:0, Height:0}, rowBounds:[]widget.rowBoundary{widget.rowBoundary{segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc000434000)}, firstSegmentReuse:0, begin:0, end:7, ellipsis:false}}, scr:(*widget.Scroll)(nil), prop:(*canvas.Rectangle)(0xc0006cbf80), visualCache:map[widget.RichTextSegment][]fyne.CanvasObject{(*widget.TextSegment)(0xc000434000):[]fyne.CanvasObject{(*canvas.Text)(0xc000230cf0)}}, cacheLock:sync.Mutex{state:0, sema:0x0}, minCache:fyne.Size{Width:68.5, Height:35.078125}}
Paint
Obj: &canvas.Text{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042520000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4100000041000000}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, Alignment:0, Color:color.NRGBA{R:0xf3, G:0xf3, B:0xf3, A:0xff}, Text:"button1", TextSize:14, TextStyle:fyne.TextStyle{Bold:false, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, FontSource:fyne.Resource(nil)}
draw Text
DrawArrays
Paint
Obj: &widget.Button{DisableableWidget:widget.DisableableWidget{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x421c500000000000}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc0002e5c00)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, disabled:atomic.Bool{:atomic.noCopy{}, v:0x0}}, Text:"button1", Icon:fyne.Resource(nil), Importance:0, Alignment:0, IconPlacement:0, OnTapped:(func())(0xaafc40), hovered:false, focused:false, tapAnim:(*fyne.Animation)(0xc00257ea20)}
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.NRGBA{R:0x28, G:0x29, B:0x2e, A:0xff}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:5}
draw Rectangle
DrawArrays
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.Alpha16{A:0x0}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:0}
draw Rectangle
Paint
Obj: &widget.RichText{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4107600042ebe400}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc00068f1a0)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b1f0)}, Wrapping:0, Scroll:3, Truncation:0, inset:fyne.Size{Width:8, Height:8}, rowBounds:[]widget.rowBoundary{widget.rowBoundary{segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b1f0)}, firstSegmentReuse:0, begin:0, end:7, ellipsis:false}}, scr:(*widget.Scroll)(nil), prop:(*canvas.Rectangle)(0xc0003a11a0), visualCache:map[widget.RichTextSegment][]fyne.CanvasObject{(*widget.TextSegment)(0xc00024b1f0):[]fyne.CanvasObject{(*canvas.Text)(0xc000231b00)}}, cacheLock:sync.Mutex{state:0, sema:0x0}, minCache:fyne.Size{Width:56.109375, Height:19.078125}}
Paint
Obj: &canvas.Text{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, Alignment:1, Color:color.NRGBA{R:0xf3, G:0xf3, B:0xf3, A:0xff}, Text:"button1", TextSize:14, TextStyle:fyne.TextStyle{Bold:true, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, FontSource:fyne.Resource(nil)}
draw Text
DrawArrays
Paint
Obj: &widget.Button{DisableableWidget:widget.DisableableWidget{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x429e280000000000}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc0002e5c20)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, disabled:atomic.Bool{:atomic.noCopy{}, v:0x0}}, Text:"button2", Icon:fyne.Resource(nil), Importance:0, Alignment:0, IconPlacement:0, OnTapped:(func())(0xaafc00), hovered:false, focused:false, tapAnim:(*fyne.Animation)(0xc00257eed0)}
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.NRGBA{R:0x28, G:0x29, B:0x2e, A:0xff}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:5}
draw Rectangle
DrawArrays
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.Alpha16{A:0x0}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:0}
draw Rectangle
Paint
Obj: &widget.RichText{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4107600042ebe400}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc00068f2f0)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024af50)}, Wrapping:0, Scroll:3, Truncation:0, inset:fyne.Size{Width:8, Height:8}, rowBounds:[]widget.rowBoundary{widget.rowBoundary{segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024af50)}, firstSegmentReuse:0, begin:0, end:7, ellipsis:false}}, scr:(*widget.Scroll)(nil), prop:(*canvas.Rectangle)(0xc0003a1380), visualCache:map[widget.RichTextSegment][]fyne.CanvasObject{(*widget.TextSegment)(0xc00024af50):[]fyne.CanvasObject{(*canvas.Text)(0xc000231c20)}}, cacheLock:sync.Mutex{state:0, sema:0x0}, minCache:fyne.Size{Width:56.109375, Height:19.078125}}
Paint
Obj: &canvas.Text{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, Alignment:1, Color:color.NRGBA{R:0xf3, G:0xf3, B:0xf3, A:0xff}, Text:"button2", TextSize:14, TextStyle:fyne.TextStyle{Bold:true, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, FontSource:fyne.Resource(nil)}
draw Text
DrawArrays
Paint
Obj: &widget.Button{DisableableWidget:widget.DisableableWidget{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x42ee280000000000}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc0002e5c40)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, disabled:atomic.Bool{:atomic.noCopy{}, v:0x0}}, Text:"button3", Icon:fyne.Resource(nil), Importance:0, Alignment:0, IconPlacement:0, OnTapped:(func())(0xaafbc0), hovered:false, focused:false, tapAnim:(*fyne.Animation)(0xc002790480)}
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.NRGBA{R:0x28, G:0x29, B:0x2e, A:0xff}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:5}
draw Rectangle
DrawArrays
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.Alpha16{A:0x0}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:0}
draw Rectangle
Paint
Obj: &widget.RichText{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4107600042ebe400}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc00068f450)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b110)}, Wrapping:0, Scroll:3, Truncation:0, inset:fyne.Size{Width:8, Height:8}, rowBounds:[]widget.rowBoundary{widget.rowBoundary{segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b110)}, firstSegmentReuse:0, begin:0, end:7, ellipsis:false}}, scr:(*widget.Scroll)(nil), prop:(*canvas.Rectangle)(0xc0003a1560), visualCache:map[widget.RichTextSegment][]fyne.CanvasObject{(*widget.TextSegment)(0xc00024b110):[]fyne.CanvasObject{(*canvas.Text)(0xc000231d40)}}, cacheLock:sync.Mutex{state:0, sema:0x0}, minCache:fyne.Size{Width:56.109375, Height:19.078125}}
Paint
Obj: &canvas.Text{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, Alignment:1, Color:color.NRGBA{R:0xf3, G:0xf3, B:0xf3, A:0xff}, Text:"button3", TextSize:14, TextStyle:fyne.TextStyle{Bold:true, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, FontSource:fyne.Resource(nil)}
draw Text
DrawArrays
Paint
Obj: &widget.Button{DisableableWidget:widget.DisableableWidget{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x431f140000000000}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc0002e5c60)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, disabled:atomic.Bool{:atomic.noCopy{}, v:0x0}}, Text:"button4", Icon:fyne.Resource(nil), Importance:0, Alignment:0, IconPlacement:0, OnTapped:(func())(0xaafb80), hovered:false, focused:false, tapAnim:(*fyne.Animation)(0xc002791470)}
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.NRGBA{R:0x28, G:0x29, B:0x2e, A:0xff}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:5}
draw Rectangle
DrawArrays
Paint
Obj: &canvas.Rectangle{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4210000043920000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, FillColor:color.Alpha16{A:0x0}, StrokeColor:color.Color(nil), StrokeWidth:0, CornerRadius:0}
draw Rectangle
Paint
Obj: &widget.RichText{BaseWidget:widget.BaseWidget{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4107600042ebe400}}, Hidden:false, impl:atomic.Pointer[fyne.io/fyne/v2.Widget]{:[0]*fyne.Widget{}, :atomic.noCopy{}, v:(unsafe.Pointer)(0xc00068f5a0)}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}, themeCache:fyne.Theme(nil)}, Segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b730)}, Wrapping:0, Scroll:3, Truncation:0, inset:fyne.Size{Width:8, Height:8}, rowBounds:[]widget.rowBoundary{widget.rowBoundary{segments:[]widget.RichTextSegment{(*widget.TextSegment)(0xc00024b730)}, firstSegmentReuse:0, begin:0, end:7, ellipsis:false}}, scr:(*widget.Scroll)(nil), prop:(*canvas.Rectangle)(0xc0003a1740), visualCache:map[widget.RichTextSegment][]fyne.CanvasObject{(*widget.TextSegment)(0xc00024b730):[]fyne.CanvasObject{(*canvas.Text)(0xc000231e60)}}, cacheLock:sync.Mutex{state:0, sema:0x0}, minCache:fyne.Size{Width:56.109375, Height:19.078125}}
Paint
Obj: &canvas.Text{baseObject:canvas.baseObject{size:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x4198a00042607000}}, position:async.Position{pos:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, Hidden:false, min:async.Size{size:atomic.Uint64{:atomic.noCopy{}, :atomic.align64{}, v:0x0}}, propertyLock:sync.RWMutex{w:sync.Mutex{state:0, sema:0x0}, writerSem:0x0, readerSem:0x0, readerCount:atomic.Int32{:atomic.noCopy{}, v:0}, readerWait:atomic.Int32{:atomic.noCopy{}, v:0}}}, Alignment:1, Color:color.NRGBA{R:0xf3, G:0xf3, B:0xf3, A:0xff}, Text:"button4", TextSize:14, TextStyle:fyne.TextStyle{Bold:true, Italic:false, Monospace:false, Symbol:false, TabWidth:0, Underline:false}, FontSource:fyne.Resource(nil)}
draw Text
DrawArrays

The above is the debug output I added. Every time a button is clicked, four text and eight rectangles are drawn (there are four buttons in total), and all of them enter the DrawArrays stage. That is to say, OpenGL is notified to draw the vertex array, instead of only drawing the button that was clicked. Is it that which specific control is updated is finally completed in the OpenGL stage?

[andydotxyz]

Ah I see - there is ambiguity in the word draw sorry. There are two stages to get something from code onto the screen with our drivers:

1. Create the graphical elements / textures needed to draw an item (slow)
2. Draw these to screen using OpenGL (fast)

What your debug is showing you is that 2 happens on every changed frame for all items on screen.
However the slow part, actually rasterising or calculating what to draw (1 - the slow bit) is only done when something is changed and its "Refresh()" is called.

So what you are seeing as "always drawing" is really just blitting items to the screen which is fast and skipping all the slow parts.

[a0k1i2n3g]

@andydotxyz My current question is still: Why is it that when I only click on button1 in the first step of the calculation, all four buttons need to be updated instead of just button1 being updated and redrawn? This ultimately leads to the redrawing of all four buttons in the second step, even though OpenGL rendering is quite fast.

[dweymouth]

See Andy's reply to my comment above:

Partial updating is possible and some do it. Graphically the optimisation is a nice one - but it is surprisingly complicated to know the impacted region of a single change on screen because of how many layers stack to create the output.

One "simpler" optimisation we could do is to use the GPU cache instead of our own so that we don't have to push the frames and only the widget rendering up - that will have a bit impact on the WASM perforamance.

[andydotxyz]

I'll try stating it another way.
Only the changed button is "redrawn" however all of the things on the screen have to be painted to the screen with OpenGL - because a new frame is needed we paint the whole window.

[a0k1i2n3g]

Yes, for a brand-new frame, everything needs to be redrawn. I understand this point. My current machine doesn't have a GPU, and OpenGL is implemented through software. Since all the controls within a container need to be completely redrawn twice due to the click and hover effects and the modification of the label values, there is a rather significant delay. Is it possible to use a more efficient method? For example, in a new frame, first make a complete copy of the old frame, and then redraw the controls that need to be updated. Will this be faster?

[andydotxyz]

Since all the controls within a container need to be completely redrawn twice due to the click and hover effects

This is not correct - though as above it depends on your definition of redrawn.
We cache everything after it is drawn so that this can be avoided. What has changed will be redrawn but the rest will remain in cache. This is all then sent to the GPU for the next frame.

There is no "partial frame" so every update is a complete blit to the screen, but as I said before this part is very fast.

On a button tap there are not only 2 refreshes - there are more like 18 as we have a tap animation on the button UI. You can disable that with a build tag as at https://docs.fyne.io/explore/compiling.

[a0k1i2n3g]

By using the no_animations tags during compilation, the UI lag has been significantly reduced. Thanks!