my button class is tha beast :-)

MoKaLux · March 2020

how are you all doing?
My button class is the best

? It has:
- text, pixels, textures, up/down/disabled states, automatic nine patch
- all params are optional
Can you tell me if you spot any errors/improvement?
PS: I wanted to add tool tips in the hover function but I leave it for now.

	local mybtn02 = ButtonTextUDDP.new({
		imgup="gfx/ui/btn_03.png",
		text="B\nU\nT\nT\nO\nN", font=g_font1, fontsize=32, textcolorup=mytextcolorup, textcolordown=mytextcolordown,
		imagepaddingx=64, imagepaddingy=32
	})

MoKaLux · March 2020

Excerpt:

	-- the params
	self.params = xparams or {}
	-- textures?
	self.params.imgup = xparams.imgup or nil -- img up path
	self.params.imgdown = xparams.imgdown or self.params.imgup -- img down path
	self.params.imgdisabled = xparams.imgdisabled or self.params.imgup -- img disabled path
	self.params.imagealpha = xparams.imagealpha or 1 -- number
	self.params.imgscalex = xparams.imgscalex or 1 -- number
	self.params.imgscaley = xparams.imgscaley or 1 -- number
	self.params.imagepaddingx = xparams.imagepaddingx or nil -- number (nil = auto)
	self.params.imagepaddingy = xparams.imagepaddingy or nil -- number (nil = auto)
	-- pixel?
	self.params.pixelcolorup = xparams.pixelcolorup or nil -- color
	self.params.pixelcolordown = xparams.pixelcolordown or self.params.pixelcolorup -- color
	self.params.pixelcolordisabled = xparams.pixelcolordisabled or 0x555555 -- color
	self.params.pixelalpha = xparams.pixelalpha or 1 -- number
	self.params.pixelscalex = xparams.pixelscalex or 1 -- number
	self.params.pixelscaley = xparams.pixelscaley or 1 -- number
	self.params.pixelpaddingx = xparams.pixelpaddingx or 12 -- number
	self.params.pixelpaddingy = xparams.pixelpaddingy or 12 -- number
	-- text?
	self.params.text = xparams.text or nil -- string
	self.params.font = xparams.font or nil -- ttf font path
	self.params.fontsize = xparams.fontsize or 16 -- number
	self.params.textcolorup = xparams.textcolorup or 0x0 -- color
	self.params.textcolordown = xparams.textcolordown or self.params.textcolorup -- color
	self.params.textcolordisabled = xparams.textcolordisabled or 0x777777 -- color
	self.params.textscalex = xparams.textscalex or 1 -- number
	self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
	-- EXTRAS
	self.params.isautoscale = xparams.isautoscale or 1 -- number (default 1 = true)
	self.params.hover = xparams.hover or 1 -- number (default 1 = true)
	self.params.defaultpadding = xparams.defaultpadding or 12 -- number

PS: it's on the wiki and it's called UDDP https://wiki.giderosmobile.com/index.php/UI_Buttons

MoKaLux · March 2020

added tooltips.
https://wiki.giderosmobile.com/index.php/UI_Buttons#Button_with_Text.2C_Pixel.2C_Images_UDD.2C_9_Patch.2C_Tooltip

PS: one problem though, if you move the mouse too quickly the tooltip will remain on screen, the same on mobiles!
PS2: I have removed the TOUCH event listeners as they seem not necessary

Any improvements would be much appreciated

MoKaLux · January 15

I have a question for you guys

Is using mouse hover in an app a frame killer?
For example I have this code to check if a button is hovered with the mouse:

elseif self.params.hover then -- hover, you can do whatever fx you want :-) new 20210115
	if self.focus then -- button hover state
		print("hover in")
		if self.params.imgup ~= nil then self.bmpup:setAlpha(1) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
	else -- not button hover state
		print("hover out")
		if self.params.imgup ~= nil then self.bmpup:setAlpha(0.5) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
	end

As you can see above, when the button is not hovered it is calling in a loop:

print("hover out")
if self.params.imgup ~= nil then self.bmpup:setAlpha(0.5) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end

Is this valid/acceptable code? Thank you for your help

Viva gideros!

EDIT: it is valid code only if you use it correctly:

function ButtonTextP9UDDT:onMouseHover(e)
	if self.sprite:hitTestPoint(e.x, e.y) and self.sprite:isVisible() then
		self.focus = true
		self:updateVisualState(self.focus)
	end
end

You shouldn't call self:updateVisualState(self.focus) outside hitTestPoint(...) as I was doing

.

I am becoming good at it

rrraptor · January 15

My guess is that if you have lots of buttons then it might be a frame killer. The reason is very simple. Each button have its own event listener which checks for "hitTestPoint", so for 100 buttons you will have 100 listeners and 100 checks each time mouse is moved. I remember @hgy29 said that event system is not very performant, but I think you dont need to wory about performance till it becomes a real problem.

MoKaLux · January 15

I have 104 buttons !!! that's why I was a little bit concerned, and I think my latest change (see post above) was needed

Thank you rrraptor for your answer

rrraptor · January 15

You can organize you button in a grid like that:

When mouse is moved translate its coords to grid coords, then pick all objects in that grid rect and check for "hitTestPoint". This method is used in bump.

Actually, you can use bump itself to speed things up

MoKaLux · January 16

btw rrraptor I used Tiled for my gui.

rrraptor · January 16

Tiled for GUI?) How?) Positioning...?

MoKaLux · January 16

yes positioning and size as well (for buttons and pixels)

I like it because once I know what buttons I need I can program them in gideros and then modify the UI as I wish for both size and position.
I use it a lot in gideros (box2d, r3d, cbump, now GUI) thanks to antix for showing me how to use it.
I think I will use it using imgui as well.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

my button class is tha beast :-)

Comments