Modding tutorial for styles

Place to get help with not working mods / modding interface.
Post Reply
ixu
Fast Inserter
Fast Inserter
Posts: 105
Joined: Sun May 29, 2016 6:18 pm
Contact:

Modding tutorial for styles

Post by ixu »

Is there a tutorial for using styles? I am desperately trying to get the system to do what I want.
Examples:
- Size, Height and Widths, are they pixels or millimeters or what?
- How do I determine how big a scroll-pane is?
- If I want to reuse a build-in style, how do I find out what it is called?

Sometimes I am successful, but it is always try-and-error.
Maybe it is a standard that is described elsewhere?
Mods: ingteb, ixuClock, ixuAutoSave, NoCheating, hardCrafting (Maintainer) and more
Desperately tried to implement redo :)

PFQNiet
Filter Inserter
Filter Inserter
Posts: 289
Joined: Sat Sep 05, 2020 7:48 pm
Contact:

Re: Modding tutorial for styles

Post by PFQNiet »

One thing that may help you is Ctrl+F6 - this will toggle the "style inspector" that lets you see what styles are applied to various GUI elements, including the names of built-in styles.

ixu
Fast Inserter
Fast Inserter
Posts: 105
Joined: Sun May 29, 2016 6:18 pm
Contact:

Re: Modding tutorial for styles

Post by ixu »

I want to display a line of sprite buttons that should have a maximum width, for example 6 buttons wide. If there are more buttons than can be displayed, a horizontal scrollbar should appear.

Code: Select all

function result.SelectTarget()
    local frame = global.Current.Player.gui.screen.add {type = "frame", direction = "vertical"}

    frame.caption = "select"
    local subFrame = frame.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-recipe-pane",
    }
    local scroll = subFrame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-recipe-scroll-pane",
    }
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}

    frame.force_auto_center()
    global.Current.Player.opened = frame
    global.Current.Frame = frame
    return frame

end
How do I define the associated styles now? I have tried that:

Code: Select all

data.raw["gui-style"].default["ingteb-recipe-pane"] =
    {
        type = "horizontal_flow_style",
        witdth = 600,
        height = 40,
        horizontally_squashable = "off",
        vertcally_squashable = "off",

    }

data.raw["gui-style"].default["ingteb-recipe-scroll-pane"] =
    {type = "scroll_pane_style", parent = "scroll_pane", witdth = 500, height = 40}
but it does not work. I get something that I cannot understand at all:
StyleHowto.PNG
StyleHowto.PNG (377.98 KiB) Viewed 1074 times
Mods: ingteb, ixuClock, ixuAutoSave, NoCheating, hardCrafting (Maintainer) and more
Desperately tried to implement redo :)

ixu
Fast Inserter
Fast Inserter
Posts: 105
Joined: Sun May 29, 2016 6:18 pm
Contact:

Re: Modding tutorial for styles

Post by ixu »

... Hours later I found a solution. I'll post it here so that the next ones can benefit from it.

Code: Select all

function result.SelectTarget()
    local frame = global.Current.Player.gui.screen.add {
        type = "frame",
        direction = "vertical",
    }

    frame.caption = "select"
    local scroll = frame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-scroll-6x1",
    }

    local subsubFrame = scroll.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-flow-right",
    }

    local scroll2 = frame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-scroll-6x1",
    }

    local subsubFrame2 = scroll2.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-flow-right",
    }

    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}

    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}


    frame.force_auto_center()
    global.Current.Player.opened = frame
    global.Current.Frame = frame
    return frame

end
And in data.lua:

Code: Select all

data.raw["gui-style"].default["ingteb-scroll-6x1"] =
    {
        type = "scroll_pane_style", --
        parent = "scroll_pane",
        width = 42 * 6,
    }

data.raw["gui-style"].default["ingteb-flow-right"] =
    { --
        type = "horizontal_flow_style", --
        horizontally_stretchable = "on",
        horizontal_align = "right",
    }
The result can be seen here - I even managed to do the right-alignment:
StyleHowto2.PNG
StyleHowto2.PNG (443.64 KiB) Viewed 1049 times
Mods: ingteb, ixuClock, ixuAutoSave, NoCheating, hardCrafting (Maintainer) and more
Desperately tried to implement redo :)

Post Reply

Return to “Modding help”