Qrow: 1 revision imported

2025-11-14T05:22:16Z

1 revision imported

← Older revision	Revision as of 22:22, 13 November 2025
(No difference)

Interwiki>Beherith at 11:32, 7 February 2021

2021-02-07T11:32:01Z

New page

[[Main_Page|Wiki]] < {{FULLPAGENAME}}

== Chili UI ==

Chili is Springs very own GUI framework. It's a flexible, class based framework which allows you to create great looking GUIs very quickly. See [[Chili:ScreenShots| Screenshots]].

=== Learning Chili ===

* [[Chili:Tutorial| Chili Tutorial]]
* [[Chili:Examples| Examples of Chili widgets]]

Before working with Chili, it is strongly recommended to be familiar with using [[Lua_Scripting| Lua in Spring]], in particular with writing simple widgets.

=== Including Chili ===

* [[Chili:Adding_To_Game|Adding Chili to a game]]
* [[Chili:Hiding_The_Default_GUI|Hiding Springs default GUI]]

== Documentation: Chili Component Hierarchy ==

The Chili framework is object orientated, and each different component is a class. The hierarchy of components, which is documented [https://gajop.github.io/chiliui/index.html here], is as follows:

[https://gajop.github.io/chiliui/modules/controls.object.html Object]
|_ [https://gajop.github.io/chiliui/modules/controls.screen.html Screen]
|_ [https://gajop.github.io/chiliui/modules/controls.control.html Control]
|_ [https://gajop.github.io/chiliui/modules/controls.button.html Button]
|_ [https://gajop.github.io/chiliui/modules/controls.checkbox.html Checkbox]
|_ [https://gajop.github.io/chiliui/modules/controls.checkbox.html ColorBars]
|_ [https://gajop.github.io/chiliui/modules/controls.combobox.html ComboBox]
|_ [https://gajop.github.io/chiliui/modules/controls.editbox.html EditBox]
|_ [https://gajop.github.io/chiliui/modules/controls.font.html Font]
|_ [https://gajop.github.io/chiliui/modules/controls.label.html Label]
|_ [https://gajop.github.io/chiliui/modules/controls.layoutpanel.html LayoutPanel]
|_ [https://gajop.github.io/chiliui/modules/controls.imagelistview.html ImageListView]
|_ [https://gajop.github.io/chiliui/modules/controls.grid.html Grid]
|_ [https://gajop.github.io/chiliui/modules/controls.stackpanel.html StackPanel]
|_ [https://gajop.github.io/chiliui/modules/controls.tabpanel.html TabPanel]
|_ [https://gajop.github.io/chiliui/modules/controls.line.html Line]
|_ [https://gajop.github.io/chiliui/modules/controls.image.html Image]
|_ [https://gajop.github.io/chiliui/modules/controls.multiprogressbar.html MultiProgressBar]
|_ [https://gajop.github.io/chiliui/modules/controls.panel.html Panel]
|_ [https://gajop.github.io/chiliui/modules/controls.progressbar.html ProgressBar]
|_ [https://gajop.github.io/chiliui/modules/controls.scale.html Scale]
|_ [https://gajop.github.io/chiliui/modules/controls.scrollpanel.html ScrollPanel]
|_ [https://gajop.github.io/chiliui/modules/controls.textbox.html TextBox]
|_ [https://gajop.github.io/chiliui/modules/controls.trackbar.html TrackBar]
|_ [https://gajop.github.io/chiliui/modules/controls.treeview.html TreeView]
|_ TreeViewNode
|_ [https://gajop.github.io/chiliui/modules/controls.window.html Window]

Viewing the diagram as a tree, each component inherits from its parent in the tree. In practice, this means each component has the properties/functionality of its own type, and also of all components found upwards from it in the tree. For example, a Grid has it's own properties, but also has those of a LayoutPanel, Control and Object.

== Skinning Chili ==
Start with your desired <code>skin.lua</code>.

An example button skin will look like this:

<syntaxhighlight lang="lua">
skin.positive_button = {
clone = "window";

TileImageBK = ":cl:tech_button_bright_small_bk.png",
TileImageFG = ":cl:tech_button_bright_small_fg.png",

tiles = {40, 40, 40, 40}, --// tile widths: left,top,right,bottom
padding = {10, 10, 10, 10},

backgroundColor = {0.50, 0.50, 0.50, 0.65},
focusColor = {0.50, 0.50, 0.50, 0.9},
borderColor = {0.50, 0.50, 0.50, 0.15},

DrawControl = DrawButton,
}
</syntaxhighlight>

* <code>TileImageBK</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

* <code>TileImageFG</code> - This image will be the foreground (drawn over background) of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>borderColor</code>

* <code>tiles</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

* <code>padding</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

* <code>backgroundColor</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

* <code>focusColor</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

* <code>borderColor</code> - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with <code>backgroundColor</code>

[[Category:Libraries]]

Chili - Revision history

Qrow: 1 revision imported

Interwiki>Beherith at 11:32, 7 February 2021