GUI Loading Image to Button?

[Phodex Games]

Hi,

I am currently trying to learn the leadwerks GUI, to be able to improve my own system. I already managed to display a button and make it print something on click. So my question is, how is it possible to load an image and apply it to an button instead of the default greay appearance? If found that there seems to be such a functionality inside the button.lua:

--Draw image if present
local image = self.widget:GetImage()
if image~=nil then
  local imgsz = image:GetSize()
  gui:SetColor(0.7)
  gui:DrawImage(image,pos.x+(sz.x-imgsz.x)/2,pos.y+(sz.y-imgsz.y)/2)
end

I also found that "Image:Load(string path, GUI gui)" exists and should work loading an image from a texture. However Image:Load() does not seem to work in lua. I would have expected that applying an image would work like this:

function Script:Start()
	local gui = GUI:Create(context)
	local guiScale = gui:GetScale()
	local panel	= Widget:Create("", guiScale * 100, guiScale * 100, guiScale * 600, guiScale * 600, gui:GetBase(), "Scripts/GUI/Panel.lua")
	self.textField= Widget:TextField("text", guiScale * 15, guiScale * 10, guiScale * 150, guiScale * 20, panel)
	self.testButton	= Widget:Button("button", guiScale * 175, guiScale * 10, guiScale * 80, guiScale * 20, panel)
	--APPLY THE IMAGE!
  	local image = Image:Load("Image.tex") -->Error Method "Load" does not exist for "Image"
  	self.testButton:SetImage(image)
end

function Script:ProcessEvent(event)
	if event.id == Event.WidgetAction then
		if event.source == self.testButton and event.data == 0 then
			System:Print("Clicking")
		elseif event.source == self.testButton and event.data == 1 then
			System:Print("Hovering!")
		end
	end
end

function Script:UpdateWorld()
	while EventQueue:Peek() do
		local event = EventQueue:Wait()
		self:ProcessEvent(event)
	end
end

So how can I achieve that my button uses an image instead of the standard rect to be drawn?

Thanks in advance

Markus from Phodex Games

[Phodex Games]

Ok I found the solution myself. You need to do the following:

local image = gui:LoadImage("path to texture")
--
local button = Widget:Button("", 0, 0, 1024, 768, gui:GetBase())
button:SetString("style","Push")
button:SetImage(image)

But then the image appears in the middle of button. I fixed that by changing the drawing command inside the button.lua script.

Still I wonder how it is possible to give my new button an automatic hover effect (e.g button is gets brigther) and disable the default rendered rectangle. I also wonder how to change the appearance of the UI, give it a new design etc. This topic is poorly documented, although the system is pretty cool and easy to work with. Would love to get some more input, tutorials etc.

[macklebee]

12 hours ago, Phodex Games said:

This topic is poorly documented

If you notice those commands are not in the official documentation - ergo, not officially supported which means they can change at any time or be removed. But in any case, you should be able to find button hover appearance changes from various examples over the years here. Basically you could just load other brighter button images to be used when the mouse is hovering or maybe you could try changing the SetColor() value when hovering? But in any case, I suspect you will have to rewrite several parts of the inherent GUI code to take in account your images now. If this is something you want to learn how to do on your own or you just want something that does it for you, you could try Aggror's free gui .

[GorzenDev]

On 6/28/2018 at 3:48 PM, Phodex Games said:

Still I wonder how it is possible to give my new button an automatic hover effect (e.g button is gets brigther) and disable the default rendered rectangle. I also wonder how to change the appearance of the UI, give it a new design etc. This topic is poorly documented, although the system is pretty cool and easy to work with. Would love to get some more input, tutorials etc.

you can do all that inside each widget .lua script.