Added hoverBackground to buttonRenderer, fixes #1785

[fpabl0]

Description:

Fixes #1785

Checklist:

• Tests included.
• Lint and formatter run with no errors.
• Tests all pass.

[andydotxyz]

It would be better to re-use the existing rectangle which the new one appears immediately above, that way we don’t need more elements rendered for every button.

[fpabl0]

Agreed, however I don't think there is a way for doing it using the current theme.HoverColor(), is that ok?

[andydotxyz]

Perhaps you can expand on why you don’t think it is possible? What is the problem that gets in the way?

[fpabl0]

@andydotxyz Yes, I tried two alternatives before writing this PR, these alternatives are based on changing only the buttonColor function:

1. Allow high importance button to behave in the same way as a normal button:

func (r *buttonRenderer) buttonColor() color.Color {
	switch {
	case r.button.Disabled():
		return theme.DisabledButtonColor()
	case r.button.hovered:
		return theme.HoverColor()
	default:
		if r.button.Importance == HighImportance {
			return theme.PrimaryColor()
		}
		return theme.ButtonColor()
	}
}

2. Use the hover alpha factor to build the hover color for high importance button:

func (r *buttonRenderer) buttonColor() color.Color {
	switch {
	case r.button.Disabled():
		return theme.DisabledButtonColor()
	case r.button.hovered:
		if r.button.Importance == HighImportance {
			_, _, _, aa := theme.HoverColor().RGBA()
			rr, gg, bb, _ := theme.PrimaryColor().RGBA()
			return color.RGBA{R: uint8(rr), G: uint8(gg), B: uint8(bb), A: uint8(aa)}
		}
		return theme.HoverColor()
	default:
		if r.button.Importance == HighImportance {
			return theme.PrimaryColor()
		}
		return theme.ButtonColor()
	}
}

Indeed, I think high-importance button without hover color was intentional instead of real bug.

[andydotxyz]

In version 2 did you consider blending the colours instead of using channels from them in some hybrid approach?
Basically figure out what colour would have been shown if one overlies the other, then set that colour to one rectangle...

Indeed, I think high-importance button without hover color was intentional instead of real bug.

This was not itentional

[fpabl0]

In version 2 did you consider blending the colours instead of using channels from them in some hybrid approach?

Oh yes, that alternative looks good, unfortunately maybe I don't understand very well how to blend colors. I have read this:
https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending, so I tried it but with no success:

func (r *buttonRenderer) getHoverColor() color.Color {
	mainColor := theme.ButtonColor()
	if r.button.Importance == HighImportance {
		mainColor = theme.PrimaryColor()
	}
	srcR, srcG, srcB, srcA := theme.HoverColor().RGBA()
	dstR, dstG, dstB, dstA := mainColor.RGBA()
	outA := srcA + dstA*(0xFFFF-srcA)
	outR := srcR + dstR*(0xFFFF-srcA)
	outG := srcG + dstG*(0xFFFF-srcA)
	outB := srcB + dstB*(0xFFFF-srcA)
	return color.RGBA{R: uint8(outR), G: uint8(outG), B: uint8(outB), A: uint8(outA)}
}

func (r *buttonRenderer) buttonColor() color.Color {
	switch {
	case r.button.Disabled():
		return theme.DisabledButtonColor()
	case r.button.hovered:
		return r.getHoverColor()
	default:
		if r.button.Importance == HighImportance {
			return theme.PrimaryColor()
		}
		return theme.ButtonColor()
	}
}

For normal buttons, works great this implementation:

But for high-importance buttons is not:

This was not itentional

Oh sorry, I just though it, because it seems that the code enforces that behavior here:

fyne/widget/button.go

Lines 315 to 318 in c29a062

	case r.button.Importance == HighImportance:
	return theme.PrimaryColor()
	case r.button.hovered:
	return theme.HoverColor()

[andydotxyz]

so I tried it but with no success:

My first guess is that it's a uint8 vs uint16 casting issue, that has caught me before.
Try moving the channels to uint8 before doing the calculations, then remove the cast in the return instead.
Also you might want to try using destination alpha instead of source.

[fpabl0]

I have tried your suggestion:

func (r *buttonRenderer) getHoverColor() color.Color {
	toUint8 := func(rr, gg, bb, aa uint32) (uint8, uint8, uint8, uint8) {
		return uint8(rr), uint8(gg), uint8(bb), uint8(aa)
	}
	mainColor := theme.ButtonColor()
	if r.button.Importance == HighImportance {
		mainColor = theme.PrimaryColor()
	}
	srcR, srcG, srcB, srcA := toUint8(theme.HoverColor().RGBA())
	dstR, dstG, dstB, dstA := toUint8(mainColor.RGBA())
	outA := srcA + dstA*(0xFF-srcA)
	outR := (srcR*srcA + dstR*dstA*(0xFF-srcA)) / outA
	outG := (srcG*srcA + dstG*dstA*(0xFF-srcA)) / outA
	outB := (srcB*srcA + dstB*dstA*(0xFF-srcA)) / outA
	return color.NRGBA{R: outR, G: outG, B: outB, A: outA}
}

No success. I am sure that:

what colour would have been shown if one overlies the other, then set that colour to one rectangle

is possible, but I don't manage to know how. So, I will close this to keep things organized, maybe someone with more experience working with colors could help us in this issue :)