[Lib] SUIT - Simple User Interface Toolkit

[Zireael]

Thanks for the tip!

[VectorNormal]

First off, really great library. I can tell a lot of care went into this.
Now, having looked through the code, it's not immediately apparent how it's storing the keyboard focus state for the input boxes.
Is it possible to have it drop focus after hitting enter?

[felipetesc]

Hello. I'm just sending this post to say the code from https://love2d.org/wiki/SUIT is incorrect and should be changed to the one on top of this post. Changing it will avoid people to think is buggy, at the first impression. Nonetherless, great project

[shoujoq]

Hi,

I'm new to LÖVE and using SUIT to create a user interface for my game in LÖVE and I'm trying to figure out what kind of text formatting can be done on text created with SUIT.

For example, I have some text generated like this:

Code: Select all

suit.Label("PRO", {align = "center", font = Libel128, color = colorBlue}, suit.layout:row(400,60))

where Libel128 and colorBlue have been defined in love.load() as follows:

Code: Select all

Libel128 = love.graphics.newFont("fonts/libel-suit-rg.ttf", 128)
colorBlue	=	{normal = {bg = {71,134,206}, fg = {71,134,206}}}

and I was wondering what else I can do regarding the styling of this text - for example, putting a stroke border around the text?

I couldn't find anything on this in the documentation, so I figured I'd ask here.

[alloyed]

You can read the source to see exactly what options the default theme uses:
https://github.com/vrld/SUIT/blob/master/theme.lua#L44
For labels, you can only customize color, font, and alignment. You can always write your own draw function though, if the default doesn't work.
if stroke text, the easiest thing would probably be to generate an imagefont and then apply the stroke in photoshop or something. In my game I personally reused an outline shader on my text, and this was fiddly enough that I probably wouldn't do it again, but ymmv

[shoujoq]

You can read the source to see exactly what options the default theme uses:
https://github.com/vrld/SUIT/blob/master/theme.lua#L44
For labels, you can only customize color, font, and alignment. You can always write your own draw function though, if the default doesn't work.

Thanks for the response. It's a shame that there's no functionality like this in SUIT already.

Am I right in concluding that the function I would essentially need to rewrite is love.graphics.printf?

[Positive07]

NO! You need to modify the theme.lua file or provide your own. SUIT is a bare UI library that allows people to theme it. It doesn't come with a lot of stuff but users can easily change the themes and other stuff, that is the idea.

[shoujoq]

NO! You need to modify the theme.lua file or provide your own. SUIT is a bare UI library that allows people to theme it. It doesn't come with a lot of stuff but users can easily change the themes and other stuff, that is the idea.

From looking at theme.lua, theme.Label calls love.graphics.printf, passing parameters relating to the string to be displayed, the position of the string and its alignment. Unless love.graphics.printf has a different version that allows one to pass other parameters relating to the kind of styling I want, it doesn't seem to me like changing the methods or variables in theme.lua would be able to achieve what I want to achieve.

[Positive07]

You never change how love functionalities work because you may need them somewhere else, you can easily provide another theme file for SUIT, you just need to do whatever you want to draw around or with the text in the theme.Label function. The idea of having theme files is that anyone can use their own. You can pass other parameters to SUIT functions that you can later access in your theme file. I don't understand why you think it is better to redefine a built in function than using a theme file.

The documentation says that you can pass a draw function to replace the theme's one

[Lifri]

Hey there,
I'm new to LÖVE, however it is fun to use so I went a bit further, trying this ui toolkit.
Everything is working fine, expect one small thing.

I want to have a menu drawn if some boolean variable is true. Now this works the first time the "menu" displayed. However, it appears that the .hit variable stays true after the button was hit and already released. This means that the menu is never drawn again after the first time, since the "Resume" button is always hit.

This is my very basic setup of code, don't want to include anything unrelated( Also, ignore the semicolons, not comming from Lua ):

Code: Select all

local suit = require ('suit');
pauseMenu = suit.new();
...
...
function love.update(dt)

	if (showPauseMenu) then
		pauseMenu.layout:reset((love.graphics.getWidth() / 2 ) - 150,(love.graphics.getHeight() / 2 ) - 45);
    	pauseMenu:Label("Pause", pauseMenu.layout:row(300,30));
    		
    		--Here is the error, the .hit variable stays true, therefore the menu is never drawn
		if (pauseMenu:Button( "Resume", pauseMenu.layout:row() ).hit) then
      			showPauseMenu = false;
      			--resume alle gameplay logics
      		end
      		
	end
end
...
...
function love.draw()
if ( showPauseMenu ) then
    love.graphics.setBackgroundColor(0, 100, 200, 0.2);
    pauseMenu:draw();
    return;
  end
  ...
end
...
...
function love.keypressed(key)
  if key == "escape" then
  	showPauseMenu = true
  end

end