Suit UI Theming

[Semeon]

Hey, I don't know how many of you LOVERS are familiar with the SUIT library (UI Library) for LOVE2d, but I have a problem when trying to create a new theme here is my code:
( I've still left some code that isn't SUIT related )

Code: Select all

suit = require 'suit'

function env_set()
    -- Set background color to minimalist gray
    love.graphics.setBackgroundColor(91, 81, 81)
    
    -- Create & Set fonts
    fnt_dir = "assets/fonts/Raleway-Thin.ttf"   -- Font Directory
    
    small = love.graphics.newFont(fnt_dir, 30)
    medium = love.graphics.newFont(fnt_dir, 50)
    big = love.graphics.newFont(fnt_dir, 60)
    large = love.graphics.newFont(fnt_dir, 80)
    extralarge = love.graphics.newFont(fnt_dir, 100)
    
    love.graphics.setFont(medium)
    
    -- Customize Button
    suit.theme.color.normal = {bg = {158, 142, 142}, fg = {255, 255, 255}}
    suit.theme.color.hovered = {bg = {119, 107, 107}, fg = {255, 255, 255}}
    suit.theme.color.active = {bg = {100, 100, 100}, fg = {255, 255, 255}}
    
end

function env_update(dt)
    -- Create a start button
    if suit.Button("START", love.graphics.getWidth() * 0.5 - 100, 200, 250, 100).hit then
        -- If the button is clicked then go to the playing state
        gamestate = "playing"
    end
    
    
end

function env_draw()
   -- Game title    
   love.graphics.setFont(extralarge)
   love.graphics.setColor(196, 176, 176)
   love.graphics.print("GRID", 10, love.graphics.getWidth() * 0.5 - 50)
     
   -- Draw all suit ui
   love.graphics.setFont(big)   -- Set font to big for the suit ui elements
   suit.draw()
end

[Positive07]

SUIT UI elements have an option table, and one of the fields you can set is font, where you put the font you want to use

Another option would be to redefine the theme.lua file, but I think this is better:

Code: Select all

suit = require 'suit'

function env_set()
    -- Set background color to minimalist gray
    love.graphics.setBackgroundColor(91, 81, 81)
    
    -- Create & Set fonts
    fnt_dir = "assets/fonts/Raleway-Thin.ttf"   -- Font Directory
    
    small = love.graphics.newFont(fnt_dir, 30)
    medium = love.graphics.newFont(fnt_dir, 50)
    big = love.graphics.newFont(fnt_dir, 60)
    large = love.graphics.newFont(fnt_dir, 80)
    extralarge = love.graphics.newFont(fnt_dir, 100)
    
    love.graphics.setFont(medium)
    
    -- Customize Button
    suit.theme.color.normal = {bg = {158, 142, 142}, fg = {255, 255, 255}}
    suit.theme.color.hovered = {bg = {119, 107, 107}, fg = {255, 255, 255}}
    suit.theme.color.active = {bg = {100, 100, 100}, fg = {255, 255, 255}}
    
end

function env_update(dt)
    -- Create a start button
    -- Second argument a table with options, the font property is set to the desired font
    if suit.Button("START", {font = big}, love.graphics.getWidth() * 0.5 - 100, 200, 250, 100).hit then
        -- If the button is clicked then go to the playing state
        gamestate = "playing"
    end
    
    
end

function env_draw()
   -- Game title    
   love.graphics.setFont(extralarge)
   love.graphics.setColor(196, 176, 176)
   love.graphics.print("GRID", 10, love.graphics.getWidth() * 0.5 - 50)
     
   -- Draw all suit ui
   suit.draw()
end

[Semeon]

Hey, there thanks for the support but it doesn't quite work. The 2st button which I apply the changes the way you mentioned gets the styling of the default button

Default button styling Code:

Code: Select all

  -- Customize Button
    suit.theme.color.normal = {bg = {158, 142, 142}, fg = {255, 255, 255}}
    suit.theme.color.hovered = {bg = {119, 107, 107}, fg = {255, 255, 255}}
    suit.theme.color.active = {bg = {100, 100, 100}, fg = {255, 255, 255}}
    

Creating a button with that styling

Code: Select all

    -- Create the start button
    if suit.Button("START", love.graphics.getWidth() * 0.5 - 100, 200, 250, 100).hit then
        -- If the button is clicked then go to the playing state
        gamestate = "playing"
    end

Second button, the one that doesn't function correctly

Code: Select all

    -- Create a new exit button
    if suit.Button("X", {normal = {bg = {91, 81, 81}, fg = {255, 255, 255}}, hovered = {bg = {192, 57, 43}, fg = {255, 255, 255}}, active = {bg = {192, 57, 43}, fg = {255, 255, 255}} }, love.graphics.getWidth() * 0.5 - 20, 0, 250, 100).hit then
        
    end

[Positive07]

Well, I guess you are not reading the docs at all! You should do that before just randomly posting issues, you can also go and check SUIT source code which is not that hard to get

The options table IS NOT A COLOR TABLE!, the option table has got specific fields, like font, align, id and draw, what you want is to set the color option in that option table, which is a table like you have there:

Code: Select all

 -- Create a new exit button
if suit.Button("X", {color = {normal = {bg = {91, 81, 81}, fg = {255, 255, 255}}, hovered = {bg = {192, 57, 43}, fg = {255, 255, 255}}, active = {bg = {192, 57, 43}, fg = {255, 255, 255}} }}, love.graphics.getWidth() * 0.5 - 20, 0, 250, 100).hit then
        
end

Read the SUIT docs before posting another issue

[Semeon]

Hey, I read the docs in fact I read the docs but I was unable to fix my problem so as a result I created this forum thread for someone who is more experienced with SUIT to help me out.

[Positive07]

Well did my example work? If so you should understand that there are a few fields to look at when theming:

First the signature of any widget is this:

Code: Select all

suit.Widget(image/text/table, options, x, y, w, h)

The first argument has multiple types depending on what you need, Labels and Buttons expect text, Slider and Inputs expect tables and ImageButtons expect an image.

The second argument is a table commonly called options table. This table has some defined fields that allows you to change how the widget behaves, this are

• id: If you have many widgets that have the same first argument you will need to set this to difference them
• font: This sets the font which will be used when drawing the widget
• align: This changes the alignment of the text, default is "center" but you can align to the "right" or "left"
• valign: Same as above but for vertical alignment, default is "center" but you can use "top" and "bottom"
• color: This is a table with three fields, normal, hovered and active, each of this is a table with the fields bg and fg, which are also tables, but are used as a list of numbers specifying the color
• cornerRadius: This changes the radius of the corners of the widget
• draw: This changes the draw function for the specified element entirely, it receives the same arguments that were passed to suit.Widget

Hope this helps, again I have never used SUIT, I just read the docs and that is it, you should try to do the same when using a library, read the docs, re read them, look at the source, re read the docs, program something, try different options until something works