Qrow: 1 revision imported

2025-11-14T05:22:17Z

1 revision imported

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

Interwiki>Flozi: /* Control */ use proper subtitles

2016-06-12T20:55:41Z

Control: use proper subtitles

New page

[[Gamedev:Main|Development]] < [[Chili]] < {{FULLPAGENAME}}
{{stub}}
Chili classes are the elements (panels, grids, etc.) that make up the game GUI. The .lua .lua files are stored in the directory <code>LuaUI/Widgets/Chili/controls</code>. Displayed elements such as window, as distinct from non-control classes (specifically, font objects and the screen) are referred to as '''controls'''.

==Source==
The default Chili classes can be found [https://github.com/jk3064/chiliui/tree/master/chili/controls here].

==Data Types==
Tags may be one of the following data types:
* <code>number</code> - A number with or without decimals.
* <code>bool</code> - A value which can be <code>true</code> or <code>false</code>.
* <code>string</code> - Text, or more precisely a string of alphanumeric characters.
* <code>color</code> - An array of colors, in RGBA format.
* <code>number[4]</code> - An array of numbers; used for positioning, etc.
==Details==
Chili classes use OOP with inheritance, with the following hierarchy:
object
|_font
|_screen
|_control
|_button
|_image
|_checkbox
|_colorbars
|_label
|_layoutpanel
|_imagelistview
|_grid
|_stackpanel
|_treeview
|_panel
|_progressbar
|_scrollpanel
|_textbox
|_trackbar
|_treeview
|_treeviewnode
|_window

Consequently, it is possible for widgets to define their own Chili classes (discussed below).

Each Chili control has one parent (<code>Chili.screen0</code> or another Chili control) and any non-negative number of children. Position is specified relative to the parent, taking into account the parent's <code>padding</code> and <code>itemMargin</code> tags.

==Classes==
===Object===
The base Chili object class. It should ''not'' be used directly.

{{tag
|name = classname
|type = string
|default = "object"
|description = The class name.}}

{{tag
|name = hidden
|type = bool
|default = false
|description = Is the object hidden?}}

{{tag
|name = disableChildrenHitTest
|type = bool
|default = false
|description = If true, this object's children are not clickable, draggable, etc. - their mouse events are not processed.}}

===Control===
This is the base class for all Chili controls, specifying common properties. It should ''not'' be used directly.

====General====
{{tag
|name = tooltip
|type = string
|default = nil
|description = The control's tooltip.}}

{{tag
|name = skinName
|type = string
|default = nil
|description = Specifies the control to use a skin other than the default one.}}

====Size====
{{tag
|name = width
|type = number OR string
|description = The width of the control. This can be a number of pixels, or a percentage value enclosed in a string, e.g. "50%" means half as wide as the parent.}}

{{tag
|name = height
|type = number OR string
|description = The height of the control. This can be a number of pixels, or a percentage value enclosed in a string, e.g. "50%" means half as wide as the parent.}}

{{tag
|name = minWidth
|type = number
|default = 10 (50 for windows)
|description = The control's minimum width.}}

{{tag
|name = minHeight
|type = number
|default = 10 (50 for windows)
|description = The control's minimum height.}}

{{tag
|name = maxWidth
|type = number
|default = 1e9
|description = The control's maximum width.}}

{{tag
|name = maxHeight
|type = number
|default = 1e9
|description = The control's maximum height.}}

{{tag
|name = autosize
|type = bool
|default = false
|description = Does the control automatically resize to fit its children?}}

{{tag
|name = savespace
|type = bool
|default = false
|description = If <code>autosize</code> is enabled, it shrinks the control to the minimum needed space; if disabled <code>autosize</code> ''normally'' only enlarges the control.}}

{{tag
|name = fixedratio
|type = bool
|default = false
|description = Does this control attempt to maintain its original aspect ratio when resized?}}

{{tag
|name = resizable
|type = bool
|default = false
|description = Can this control be resized outside of tweakmode?}}

{{tag
|name = tweakResizable
|type = bool
|default = true
|description = Can this control be resized in tweakmode?}}

====Positioning====
These tags can be combined in different ways with each other and the width/height tags to precisely define the bounds of the element.
{{tag
|name = x
|type = number
|description = The distance between the left edge of the control and that of its parent.}}

{{tag
|name = y
|type = number
|description = The distance between the top edge of the control and that of its parent.}}

{{tag
|name = right
|type = number
|description = The distance between the right edge of the control and that of its parent.}}

{{tag
|name = bottom
|type = number
|description = The distance between the bottom edge of the control and that of its parent.}}

{{tag
|name = draggable
|type = bool
|default = false
|description = Can this control be dragged around outside of tweakmode?}}

{{tag
|name = tweakDraggable
|type = bool
|default = true
|description = Can this control be dragged around in tweakmode?}}

====Drawing====
{{tag
|name = padding
|type = number[4]
|default = {5, 5, 5, 5}
|description = How much space there is between the borders of the control and its children. Numbers are for left, top, right and bottom.}}

{{tag
|name = backgroundColor
|type = color
|default = {0.8, 0.8, 1.0, 0.4} (can be overridden by skin)
|description = This is the background color of certain controls, particularly Windows.}}

===Window===
This is the basic container for all other controls. It is the only one that can be moved around by the user and responds to the docking widget. It can be made invisible for a borderless element, or to allow another control such as a Panel to draw the background.

===Panel===
A background element, similar to Window but drawn differently and without the resize/drag functions.

===Button===
Does things when clicked. Comes with its own implementation of <code>HitTest</code>, <code>MouseDown</code> and <code>MouseUp</code>, making it readily usable for this purpose.

{{tag
|name = caption
|type = string
|default = "button"
|description = A caption written on the button.}}

[[Category:Libraries]]

Chili-Classes - Revision history

Qrow: 1 revision imported

Interwiki>Flozi: /* Control */ use proper subtitles