game.player.gui.center.add{type="picture", [...]}

[hirnwunde]

As topic says ...
It would be great if you have images as interface object instead of only buttons or checkboxes.

These can be limited to 64x64 or even 32x32 ...
Like the building menu.

[rk84]

You can style gui elements to have picture, but yea it would be convient if you could add "icon"-key to gui element. Atleast it would make test mod look better and remove the need of creating style for every item.

[hirnwunde]

You can style gui elements to have picture

which elements i can style with pictures and how can i do this?
Until now i could'nt find any example.

[FreeER]

which elements i can style with pictures and how can i do this?
Until now i couldn't find any example.

at least buttons (see first spoiler, and second for others types), which rk84 used for his test mode mod (and checkboxes too). For an example download it and look at the styles subfolder.

some mostly button specific info

-- note scroll to bottom for button_style definition and scroll up as needed for subdefinitions...
ALIGNMENT = {"center", "left", "right"}
colorType = {r=0-1, g=0-1, b=0-1, a=0-1}
Sound = {
filename="sound_file_path",
volume=float, -- default 1
preload = bool -- default true
}

ELEMENTTYPE = {"composition", "monolith", "none"}
ElementImageSet = { -- see subsets based on type below
type = ELEMENTTYPE[x]
opacity = double -- default of 1
}
ElementImageSet_composition =
{
-- see parent ElementImageSet
type = "composition"
filename = "iameg_filepath"
corner_size = PositionType -- specifies width and height
position = PositionType -- ? no idea exactly what this represents...
}
ElementImageSet_monolith = {
-- see parent ElementImageSet
type = "monolith"
monolith_image = Sprite -- see wiki
top_monolith_border = int -- default 0
right_monolith_border = int -- default 0
bottom_monolith_border = int -- default 0
left_monolith_border = int -- default 0
}
ElementImageSet_none = { -- not sure why you'd use this...perhaps combined with an opacity of 0 = invisible?
type = "none"
}

SpritePriority = {"extra-high-no-scale", "extra-high", "high", "medium", "low", "very-low"}

Sprite = {
filename = "image_filepath"
priority = SpritePriority[x] -- default "medium"
width = int
height = int
x = int -- default 0
y = int -- default 0
shift = Vector
scale = double -- default 1
}

generic_style = {
parent = "parent-style-name" -- optional
visible = bool
align = ALIGNMENT[x]
scalable = bool -- optional

width = int
or
minimal_width = int -- default 0
minimal_height = int -- default 0

height = int
or
maximal_height = int -- default 0
maximal_height = int -- default 0

top_padding = int -- default 0
right_padding = int -- default 0
bottom_padding = int -- default 0
left_padding = int -- default 0
}

button_style = {
-- parent = generic_style -- <- this line for documentation purposes only
font = font_prototype_name -- a completely different prototype
default_font_color = colorType -- optional
hovered_font_color = colorType -- optional
clicked_font_color = colorType -- optional
disabled_font_color = colorType -- optional

default_graphical_set = ElementImageSet -- optional
hovered_graphical_set = ElementImageSet -- optional
clicked_graphical_set = ElementImageSet -- optional
disabled_graphical_set = ElementImageSet -- optional
left_click_sound = Sound

pie_progress_color = colorType -- optional
}

then you just need to add it to data.raw["gui-style"].default["some_unique_name"] = button_style

I'd imagine you could have non-default ones if you set it up but.. data/core/prototypes/style.lua which defines the default style is 1723 lines long... seems like a LOT of work if you did want to lol

other elements with image elements

CheckBox Styles - default_background, hovered_background, clicked_background
Frame Style - graphical_set
Progress Bar - the bar and diodes are definable as ElementImages... would really need the full template to use this one.
Table Style - column_graphical_set
Textfield - graphical_set