Chili: Difference between revisions

From Spring
Jump to navigationJump to search
← Older edit
Sunspot (talk | contribs)
0 edits
No edit summary
mNo edit summary
 
(48 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Main_Page|Wiki]] < {{FULLPAGENAME}}
== Chili UI ==
== Chili UI ==
ChiliUi is a framework still in development by author JK.  It's a very flexible class based framework, with it's structure derived from Delphi.  It has most of the basic components you expect a framework like for example Swing in jawa must have.  It might feel a bit daunting at first to get started but with a little reverse engineering and this tutorial page you'll get a long way !


== Getting Chili ==
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]].
[https://github.com/jk3064/chiliui Chili UI framework git hub]
=== 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]]


Download it , and put the extracted files in LuaUi/widgets.  It should run out of the box, but user experiences have been conflicted on that.  If you are in trouble getting Chili to run, I advice to login to the lobby and join /j moddev.  People there will help you figure it out.  I could write something here, but by the time it's written , someone else probably has another problem installing it !
== Documentation: Chili Component Hierarchy ==


== Chili Component Hiearchy ==
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:


  object
  [https://gajop.github.io/chiliui/modules/controls.object.html Object]
  |_font
  |_ [https://gajop.github.io/chiliui/modules/controls.screen.html Screen]
  |_screen
  |_ [https://gajop.github.io/chiliui/modules/controls.control.html Control]
|_control
  |_ [https://gajop.github.io/chiliui/modules/controls.button.html Button]
   |_button
  |_ [https://gajop.github.io/chiliui/modules/controls.checkbox.html Checkbox]
    |_image
   |_ [https://gajop.github.io/chiliui/modules/controls.checkbox.html ColorBars]
   |_checkbox
  |_ [https://gajop.github.io/chiliui/modules/controls.combobox.html ComboBox]
   |_colorbars
   |_ [https://gajop.github.io/chiliui/modules/controls.editbox.html EditBox]
   |_label
   |_ [https://gajop.github.io/chiliui/modules/controls.font.html Font]
   |_layoutpanel
   |_ [https://gajop.github.io/chiliui/modules/controls.label.html Label]
     |_imagelistview
   |_ [https://gajop.github.io/chiliui/modules/controls.layoutpanel.html LayoutPanel]
     |_grid
     |_ [https://gajop.github.io/chiliui/modules/controls.imagelistview.html ImageListView]
     |_stackpanel
     |_ [https://gajop.github.io/chiliui/modules/controls.grid.html Grid]
     |_treeview
     |_ [https://gajop.github.io/chiliui/modules/controls.stackpanel.html StackPanel]
   |_panel
     |_ [https://gajop.github.io/chiliui/modules/controls.tabpanel.html TabPanel]
   |_progressbar
  |_ [https://gajop.github.io/chiliui/modules/controls.line.html Line]
   |_scrollpanel
  |_ [https://gajop.github.io/chiliui/modules/controls.image.html Image]
   |_textbox
  |_ [https://gajop.github.io/chiliui/modules/controls.multiprogressbar.html MultiProgressBar]
   |_trackbar
  |_ [https://gajop.github.io/chiliui/modules/controls.panel.html Panel]
   |_treeview
   |_ [https://gajop.github.io/chiliui/modules/controls.progressbar.html ProgressBar]
   |_treeviewnode
   |_ [https://gajop.github.io/chiliui/modules/controls.scale.html Scale]
   |_window
   |_ [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]


== Hello World ==
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.


As in every first baby steps in a framework we are going to get hello world to work. First we are going to need to make a script file in the widgets directory. It's usually a good idea to keep the chili implemented files seperate from the other script files in naming convention. 
== Skinning Chili ==
Start with your desired <code>skin.lua</code>.


Create a file gui_chili_helloworld.lua and copy following basic structure.
An example button skin will look like this:
-- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- CHILI CONTROLS
-- MEMBERS
-- SCRIPT FUNCTIONS
-- WIDGET CODE


As in every widget code you will need the basic info part telling about the widget. Who made it what it serves for and who the author is etc...  Next you will also need the code for initializing the widget.  For this example, we are going to need a few Chili controls.  We have need for the Chili, Window and Label control.  That makes the script look like this now.
<syntaxhighlight lang="lua">
skin.positive_button = {
  clone    = "window";


-- INCLUDES
  TileImageBK = ":cl:tech_button_bright_small_bk.png",
-- CONSTANTS
  TileImageFG = ":cl:tech_button_bright_small_fg.png",
-- SYNCED CONTROLS
-- CHILI CONTROLS
local Chili     
local Window   
local Label


-- MEMBERS
  tiles = {40, 40, 40, 40}, --// tile widths: left,top,right,bottom
-- SCRIPT FUNCTIONS
  padding = {10, 10, 10, 10},
-- WIDGET CODE
function widget:GetInfo()
return {
name = "helloworld",
desc = "hello world tutorial",
author = "Sunspot",
date = "2011-06-19",
license    = "GNU GPL v2",
layer = 1,
enabled  = true
}
end
function widget:Initialize()
if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end
Chili      = WG.Chili
Window    = Chili.Window
Label      = Chili.Label
local screen0 = Chili.Screen0
end


Now everything you need to start creating windows and labels will be initialised and we can go on to the gritty fun stuff.  We are going to use a label to contain the hello world string. This Label will then be put on a Window wich on his turn will be put on the gamescreen. You see what I'm going for, everything in Chili is nested on eachother like lego building blocks. The resulting script will look like this now.
  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},


-- INCLUDES
  DrawControl = DrawButton,
-- CONSTANTS
}
-- SYNCED CONTROLS
</syntaxhighlight>
-- CHILI CONTROLS
local Chili     
local Window   
local Label
-- MEMBERS
local helloWorldLabel
local helloWorldWindow
-- SCRIPT FUNCTIONS
-- WIDGET CODE
function widget:GetInfo()
return {
name = "helloworld",
desc = "hello world tutorial",
author = "Sunspot",
date = "2011-06-19",
license    = "GNU GPL v2",
layer = 1,
enabled  = true
}
end
function widget:Initialize()
if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end
Chili      = WG.Chili
Window    = Chili.Window
Label      = Chili.Label
local screen0 = Chili.Screen0
helloWorldWindow = Window:New{
x = '50%',
y = '50%',
dockable = true,
parent = screen0,
caption = "my hello world window",
clientWidth = 500,
clientHeight = 40,
backgroundColor = {0.8,0.8,0.8,0.9},
}
helloWorldLabel = Label:New{
x = '50%',
y = '50%',
width = 12,
parent = helloWorldWindow,
caption = "Hello world",
fontsize = 13,
textColor = {1,1,1,1},
anchors = {left=true,bottom=false,right=false,top=false},
}
end


This would give you , your first Chili UI achievement.  A hello world window in Spring.  This wouldn't be a good tutorial if their wouldn't be some explaination to the code.  First of all we create the window, I've only included  a few basic parameters but they fit in the scope of this tutorial.


x, y : These are your basic x and y coords where you want the object to come on the main screen you can use absolute values , or relative percentage values.  The percentage values are put as a string, the absolute once as integers
* <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>


dockable : boolean value that states if you will be able to dock or undock this window, sofar I only saw this work if you also include the public domain gui_chili_docking.lua script in the widget directory
* <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>


parent : The Chili object where the window will be nested on.
* <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>


caption : Windows can have a title, you put this title here as a string
* <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>


backgroundColor : R, G, B, A values for the background of your window
* <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>


clientWidth : <not sure yet what this does, but it seems to have to be there>
* <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>


clientHeight : <not sure yet what this does, but it seems to have to be there>
* <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>


width : width of your object, kinda obvious, although if the width is smaller then the text of your label your label will be abbrivated with ...


fontsize : size of your label font


textColor : R, G, B, A values for your font


anchors : Each parent object has 4 anchor points, where you can anchor your object to.  That means if you resize the parent the anchored object will move and resize along.
[[Category:Libraries]]

Latest revision as of 12:32, 7 February 2021

Wiki < Chili

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 Screenshots.

Learning Chili

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

Including Chili

Documentation: Chili Component Hierarchy

The Chili framework is object orientated, and each different component is a class. The hierarchy of components, which is documented here, is as follows: 

Object
|_ Screen
|_ Control
 |_ Button
 |_ Checkbox
 |_ ColorBars
 |_ ComboBox
 |_ EditBox
 |_ Font
 |_ Label
 |_ LayoutPanel
   |_ ImageListView
   |_ Grid
   |_ StackPanel
   |_ TabPanel
 |_ Line
 |_ Image
 |_ MultiProgressBar
 |_ Panel
 |_ ProgressBar
 |_ Scale
 |_ ScrollPanel
 |_ TextBox
 |_ TrackBar
 |_ TreeView
  |_ TreeViewNode
 |_ 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 skin.lua.

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>


  • TileImageBK - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
  • TileImageFG - This image will be the foreground (drawn over background) of your control. Alpha values indicate transparency, and color values you will be multiplied with borderColor
  • tiles - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
  • padding - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
  • backgroundColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
  • focusColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
  • borderColor - This image will be the background of your control. Alpha values indicate transparency, and color values you will be multiplied with backgroundColor
Retrieved from "https://springrts-wiki.p2004a.com/mediawiki/index.php?title=Chili&oldid=4128"