Spring - User contributions [en]

Chili

2013-07-14T16:06:59Z

Sunspot: /* Getting Chili */

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

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.

Here are some hints that helped me get a vanilla ChiliUI running as of Spring 94.x.

* Create an empty file called lockluaui.txt in the gamedata folder of your game
* Copy luaui.lua from the spring root folder to your games root folder
* Copy main.lua and widgets.lua from the spring /luaUi folder to your games /luaUi folder

This helped me getting started again with a vanilla spring and chiliui install !

== Chili Component Hiearchy ==

object
|_font
|_screen
|_control
|_button
|_image
|_checkbox
|_colorbars
|_label
|_layoutpanel
|_imagelistview
|_grid
|_stackpanel
|_treeview
|_panel
|_progressbar
|_scrollpanel
|_textbox
|_trackbar
|_treeview
|_treeviewnode
|_window

== Tutorials ==
[[Lesson 1 : Hello World]]

[[Lesson 2 : Dynamicly change label content]]

[[Lesson 3 : Command and Build commands in a chili window]]

[[Category:Libraries]]

Chili

2013-07-14T16:06:21Z

Sunspot: /* Getting Chili */

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

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.

Here are some hints that helped me get a vanilla ChiliUI running as of Spring 94.x.

- Create an empty file called lockluaui.txt in the gamedata folder of your game
- Copy luaui.lua from the spring root folder to your games root folder
- Copy main.lua and widgets.lua from the spring /luaUi folder to your games /luaUi folder

This helped me getting started again with a vanilla spring and chiliui install !

== Chili Component Hiearchy ==

object
|_font
|_screen
|_control
|_button
|_image
|_checkbox
|_colorbars
|_label
|_layoutpanel
|_imagelistview
|_grid
|_stackpanel
|_treeview
|_panel
|_progressbar
|_scrollpanel
|_textbox
|_trackbar
|_treeview
|_treeviewnode
|_window

== Tutorials ==
[[Lesson 1 : Hello World]]

[[Lesson 2 : Dynamicly change label content]]

[[Lesson 3 : Command and Build commands in a chili window]]

[[Category:Libraries]]

Chili:Tutorial Command and Build Commands

2013-07-14T16:01:50Z

Sunspot: /* initializing the widget */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail. Notice as well that this widgets GetInfo has an extra option (handler = true). This is needed so Spring.SendCommands can execute. It's a common mistake to omit that option with all consequences and frustrations that follow.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>

local function CleanStockUi()
widgetHandler:ConfigLayoutHandler(DummyHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})
spSendCommands("resbar 0")
spSendCommands({"console 0"})
spSendCommands({"clock 0"})
spSendCommands({"fps 0"})
spSendCommands({"info 0"})
spSendCommands({"speed 0"})
end

function widget:Initialize()
CleanStockUi()

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
spSendCommands("resbar 1")
spSendCommands({"console 1"})
spSendCommands({"clock 1"})
spSendCommands({"fps 1"})
spSendCommands({"info 1"})
spSendCommands({"speed 1"})
end
</pre></code>

You'll find on top here the CleanStockUi() local function. This is a helper function I made to clean up nearly all of the stock ui delivered with spring. The DummyLayout is a handler that can be found in layouts.lua delivered with spring. You'll notice in a lot of mods that people write their own LayoutHandler, I did so to at first. But after some discover work I found the DummyLayout written by the spring devs and it's clearly better to use theirs. I got rid of most stock stuff, except the minimap, that seems to serve a special function or the command is unknown to me to get rid of.

Now with the stock ui gone we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

[[Category:Libraries]]

Chili:Tutorial Command and Build Commands

2013-07-14T15:59:26Z

Sunspot: /* initializing the widget */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail. Notice as well that this widgets GetInfo has an extra option (handler = true). This is needed so Spring.SendCommands can execute. It's a common mistake to omit that option with all consequences and frustrations that follow.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>

local function CleanStockUi()
widgetHandler:ConfigLayoutHandler(DummyHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})
spSendCommands("resbar 0")
spSendCommands({"console 0"})
spSendCommands({"clock 0"})
spSendCommands({"fps 0"})
spSendCommands({"info 0"})
spSendCommands({"speed 0"})
end

function widget:Initialize()
CleanStockUi()

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

You'll find on top here the CleanStockUi() local function. This is a helper function I made to clean up nearly all of the stock ui delivered with spring. The DummyLayout is a handler that can be found in layouts.lua delivered with spring. You'll notice in a lot of mods that people write their own LayoutHandler, I did so to at first. But after some discover work I found the DummyLayout written by the spring devs and it's clearly better to use theirs. I got rid of most stock stuff, except the minimap, that seems to serve a special function or the command is unknown to me to get rid of.

Now with the stock ui gone we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

[[Category:Libraries]]

Chili:Tutorial Command and Build Commands

2013-07-14T15:59:11Z

Sunspot: /* initializing the widget */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail. Notice as well that this widgets GetInfo has an extra option (handler = true). This is needed so Spring.SendCommands can execute. It's a common mistake to omit that option with all consequences and frustrations that follow.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>

local function CleanStockUi()
widgetHandler:ConfigLayoutHandler(DummyHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})
spSendCommands("resbar 0")
spSendCommands({"console 0"})
spSendCommands({"clock 0"})
spSendCommands({"fps 0"})
spSendCommands({"info 0"})
spSendCommands({"speed 0"})
end
function widget:Initialize()
CleanStockUi()

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

You'll find on top here the CleanStockUi() local function. This is a helper function I made to clean up nearly all of the stock ui delivered with spring. The DummyLayout is a handler that can be found in layouts.lua delivered with spring. You'll notice in a lot of mods that people write their own LayoutHandler, I did so to at first. But after some discover work I found the DummyLayout written by the spring devs and it's clearly better to use theirs. I got rid of most stock stuff, except the minimap, that seems to serve a special function or the command is unknown to me to get rid of.

Now with the stock ui gone we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

[[Category:Libraries]]

Chili:Tutorial Command and Build Commands

2013-07-14T15:55:17Z

Sunspot: /* File header */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail. Notice as well that this widgets GetInfo has an extra option (handler = true). This is needed so Spring.SendCommands can execute. It's a common mistake to omit that option with all consequences and frustrations that follow.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(chiliButton, x, y, button, mods)
local index = Spring.GetCmdDescIndex(chiliButton.cmdid)
if (index) then
local left, right = (button == 1), (button == 3)
local alt, ctrl, meta, shift = mods.alt, mods.ctrl, mods.meta, mods.shift

if DEBUG then Spring.Echo("active command set to ", chiliButton.cmdid) end
Spring.SetActiveCommand(index, button, left, right, alt, ctrl, meta, shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

[[Category:Libraries]]

Chili:Tutorial Command and Build Commands

2011-06-27T05:59:45Z

Sunspot: /* Final script */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T05:58:49Z

Sunspot: /* Final script */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 3
local COMMANDSTOEXCLUDE = {"timewait","deathwait","squadwait","gatherwait","loadonto","nextmenu","prevmenu"}
local Chili

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

-- WIDGET CODE
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end

function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T05:58:24Z

Sunspot: /* Forging the buttons */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
if(type(cmd) == 'table')then
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Chili.Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Chili.Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now for some reason the last command isn't an array but just a number so we'll have to write a check for that, not to crash our script. next we will need information from the given command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
loadPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T05:55:09Z

Sunspot: /* On unit selection ... load the commands */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Once you select one or more units the commands in the controls need to be refreshed, following code will do this for you.
<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
loadPanel()
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 controls in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function loadPanel()
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
local commands = Spring.GetActiveCmdDescs()
commands = filterUnwanted(commands)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function filterUnwanted(commands)
local uniqueList = {}
if DEBUG then Spring.Echo("Total commands ", #commands) end
if not(#commands == 0)then
j = 1
for _, cmd in ipairs(commands) do
if DEBUG then Spring.Echo("Adding command ", cmd.action) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.action) then
uniqueList[j] = cmd
j = j + 1
end
end
end
return uniqueList
end
</pre></code>

We start of by resetting the old contents of the controls. Each control has also an x and y variable to keep track where the next object will come, since we removed everything well we reset these as well.

you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. We use this to remove commands , that are not appropriate for the mod you are making. You will also see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetActiveCmdDescs()
we grab all the commands that are currently active in the selection. Then we filter the unwanted commands out of that list and we sort them by actionname. This to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
loadPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T05:46:00Z

Sunspot: /* initializing the widget */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 simple Chili Controls to seperate the command, status command and build commands in. To keep those controls nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

commandWindow = Chili.Control:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

stateCommandWindow = Chili.Control:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

buildCommandWindow = Chili.Control:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
children = {},
}

window0 = Chili.Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we create 3 chili controls and group them in one seperate window. We also make sure the 3 controls resize together with the group window by using relative Y coordinates. Put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
loadPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T05:42:58Z

Sunspot: /* File header */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 windows to seperate the command, status command and build commands in. To keep those windows nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}
end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we instantiate all our chili controls and objects, we create 3 windows and group them in one seperate window. We also make sure the 3 windows resize together with the group window by anchoring them in the right positions and put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
loadPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T04:39:21Z

Sunspot: /* Final script */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 windows to seperate the command, status command and build commands in. To keep those windows nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}
end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we instantiate all our chili controls and objects, we create 3 windows and group them in one seperate window. We also make sure the 3 windows resize together with the group window by anchoring them in the right positions and put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function loadPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
loadPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T04:36:16Z

Sunspot: /* Final script */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 windows to seperate the command, status command and build commands in. To keep those windows nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}
end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we instantiate all our chili controls and objects, we create 3 windows and group them in one seperate window. We also make sure the 3 windows resize together with the group window by anchoring them in the right positions and put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
container:ClearChildren()
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-27T04:31:22Z

Sunspot: /* Final script */

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 windows to seperate the command, status command and build commands in. To keep those windows nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}
end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we instantiate all our chili controls and objects, we create 3 windows and group them in one seperate window. We also make sure the 3 windows resize together with the group window by anchoring them in the right positions and put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-26T19:24:14Z

Sunspot:

== Commands and Build bar ==
=== Preparation ===
We are stepping it up a notch. We can all agree that the stock GUI for commands and building isn't really all that great. Good thing is we can improve on this. Following is not a perfect sollution since it doesn't handle pagination, but it will get you a long way getting you started for advanced stuff. For this tutorial you will only need one lua script but it will have quite a bit of content.

<pre>
- LuaUI\widgets\gui_chili_commandwindow.lua
</pre>

=== File header ===
You open up with the regular info and imports that you are going to use thru the script.

<code><pre>
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands
</pre></code>

You'll notice a lot of variables and controls. They will all get a place during the further script design and explained in detail.

=== initializing the widget ===
What we are going to do, is remove the stock command bar and build bar ui together with the left bottom tooltip. Next we are going to define 3 windows to seperate the command, status command and build commands in. To keep those windows nicely together we merge them in one window. Following code will do this. I'll explain it more in detail since it has a few important parts.

<code><pre>
function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}
end

function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

The first 3 lines remove the stock command stuff, by ways of creating a custom LayoutHandler. There isn't much to say about that method other then it's best to copy paste the one you see here. I've went thru a couple of scripts who use custom chili command windows and most of them have the same method. The spSendCommands({"tooltip 0"}) line removes the bottom left tooltip

Next we instantiate all our chili controls and objects, we create 3 windows and group them in one seperate window. We also make sure the 3 windows resize together with the group window by anchoring them in the right positions and put resize on false except the group window. Last we put the shutdown method to clean up everything we have done incase something goes wrong.

=== On unit selection ... load the commands ===
Each unit in the game can have different commands. It even gets more complicated when you select more then one unit. Some commands are double, some new etc... It all gets a bit messy. So we have to take all those things in consideration. Due to the complexity I'm goint to cut things in several parts.

<code><pre>
function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end
</pre></code>

These widget commands serve to detect if commands are changed and if they are they will flag that on the next redraw the panel (being the 3 windows in our case) needs to be redrawn. I'm told this is the standard way of doing things and quite frankly it works , so this is once again just copy paste code you'll find in most chili scripts.

<code><pre>
function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end
</pre></code>

We start of by resetting the old contents of the windows. Each window has also an x and y variable to keep track where the next object in the window will come, since we removed everything well we reset these as well.

As I said earlier in the tutorial , when selecting multiple units it can get a bit of a mess with the amount of commands. Therefore we make a method to filter out all doubles. There is even an option to exclude certain commands you don't want from the final list. you'll notice an array COMMANDSTOEXCLUDE that we initialised at the start of the script. Also you'll see a method table.contains, this is a method I created myself and is contained in utilities.lua. It has following code, I'm not sure if it's really performant or if there is a better way but it works.

<code><pre>
function table.contains(table, element)
for i=1, #table do
if table[i] == element then
return true
end
end
return false
end
</pre></code>

With Spring.GetUnitCmdDescs(unit) we grab all the commands a unit has then we see if their commands are allready in the returning array, and we check if the command isn't one of the excluded commands. If not we put it in the returning array and so we loop through all selected units.

After we have all the unique commands we sort them by actionname, to keep most of the commands on the same place when we select multiple units with different commands. This not to confuse the players who are going to use your gui. It's just sane design. Following we loop over the commands and create buttons for them in all the windows. The real juicy part of the script

=== Forging the buttons ===
You could do several things with buttons, put images on them, let them cycle images for state commands or just plain old text. For this tutorial I'll show you how to put text buttons for state and regular commands. And put images on build commands. We can put most of this code in one method.

<code><pre>
function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end
</pre></code>

The button creation method , recieves a cmd from the cmd array we filtered earlier. Now we first need information from this command. We have to determine if it's a regular command, state command or build command. It is also important to know what the content of the button will be, for state commands we want to know the text of the state we are in, for build icons we want buildpics. The buildpic to use is basicly the name of the unit file with a #- in front. You can see in the findButtonData we concatanate this and put it in the texture var. We return all that info back to the createbutton method.

After we have all the info we use a bit of XY math to determine where the button will be put. I'm not going to deep into this cause I suck at math explainations. But you'll figure it out do take notice of the constant MAXBUTTONSONROW, we intitialised this at the start of the script. The following part is where we create the button. The captiontext is the text you will see on the button. There is also one more important part. OnMouseDown = {ClickFunc} , this tells what method has to be performed once you go onMouseDown on the button. Think of it as a onActionPerformed of a JAVA button. Here is the code that gets executed once you press it

<code><pre>
function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end
</pre></code>

Basicly we get the current mouseState and then decide if an alt, shift or ctrl button is pressed as well, then we decide if the left or right button is pressed and set the next active command that should occure. The command to be exectued is set on the button when we created it in cmdid. Carrying on from the createbutton method, you'll see that we check if a texture was returned from the cmd info method earlier. This would mean we have a build command, and if so you'll see we attach an image to the button. The last line is still a bit of XY math to determine if next time we'll have to switch to another row by increasing the Y on the current container, who was given to the createbutton method when we called it.

=== Final script ===
<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")

-- CONSTANTS
local MAXBUTTONSONROW = 4
local COMMANDSTOEXCLUDE = {"TimeWait","DeathWait","SquadWait","GatherWait","Load units"}
local Chili
local Button
local Window
local Image
local Control

-- MEMBERS
local x
local y
local imageDir = 'LuaUI/Images/commands/'
local commandWindow
local stateCommandWindow
local buildCommandWindow
local updateRequired = true

-- CONTROLS
local spGetActiveCommand = Spring.GetActiveCommand
local spGetActiveCmdDesc = Spring.GetActiveCmdDesc
local spGetSelectedUnits = Spring.GetSelectedUnits
local spSendCommands = Spring.SendCommands

-- SCRIPT FUNCTIONS
function LayoutHandler(xIcons, yIcons, cmdCount, commands)
widgetHandler.commands = commands
widgetHandler.commands.n = cmdCount
widgetHandler:CommandsChanged()
local reParamsCmds = {}
local customCmds = {}

return "", xIcons, yIcons, {}, customCmds, {}, {}, {}, {}, reParamsCmds, {[1337]=9001}
end

function RemoveChildren(container)
for i = 1, #container.children do
container:RemoveChild(container.children[1])
end
end

function ClickFunc(button)
local _,_,left,_,right = Spring.GetMouseState()
local alt,ctrl,meta,shift = Spring.GetModKeyState()
local index = Spring.GetCmdDescIndex(button.cmdid)
if (left) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,1,left,right,alt,ctrl,meta,shift)
end
if (right) then
if DEBUG then Spring.Echo("active command set to ", button.cmdid) end
Spring.SetActiveCommand(index,3,left,right,alt,ctrl,meta,shift)
end
end

-- Returns the caption, parent container and commandtype of the button
function findButtonData(cmd)
local isState = (cmd.type == CMDTYPE.ICON_MODE and #cmd.params > 1)
local isBuild = (cmd.id < 0)
local buttontext = ""
local container
local texture = nil
if not isState and not isBuild then
buttontext = cmd.name
container = commandWindow
elseif isState then
local indexChoice = cmd.params[1] + 2
buttontext = cmd.params[indexChoice]
container = stateCommandWindow
else
container = buildCommandWindow
texture = '#'..-cmd.id
end
return buttontext, container, isState, isBuild, texture
end

function createMyButton(cmd)
buttontext, container, isState, isBuild, texture = findButtonData(cmd)

local result = container.xstep % MAXBUTTONSONROW
container.xstep = container.xstep + 1
local increaseRow = false
if(result==0)then
result = MAXBUTTONSONROW
increaseRow = true
end

local color = {0,0,0,1}
local button = Button:New {
parent = container,
x = 80 * (result-1),
y = 38 * (container.ystep-1),
padding = {5, 5, 5, 5},
margin = {0, 0, 0, 0},
minWidth = 40,
minHeight = 40,
caption = buttontext,
isDisabled = false,
cmdid = cmd.id,
OnMouseDown = {ClickFunc},
}

if texture then
if DEBUG then Spring.Echo("texture",texture) end
button:Resize(80,80)
image= Image:New {
width="100%";
height="90%";
y="6%";
keepAspect = true, --isState;
file = texture;
parent = button;
}
end

if(increaseRow)then
container.ystep = container.ystep+1
end
end

function findUniqueCommandsFromSelection(unitSelection)
local uniqueList = {}
if DEBUG then Spring.Echo("Unit selection ", #unitSelection) end
if not(#unitSelection == 0)then
local j = 1
for i, unit in ipairs(unitSelection) do
local unitcommands = Spring.GetUnitCmdDescs(unit)
for _, cmd in ipairs(unitcommands) do
local contained = false
for k=1, #uniqueList do
if(uniqueList[k].id == cmd.id)then
contained = true
end
end
if not contained then
if DEBUG then Spring.Echo("Adding command ", cmd.name) end
if not table.contains(COMMANDSTOEXCLUDE,cmd.name) then
uniqueList[j] = cmd
j = j + 1
end
end
end
end
end
return uniqueList
end

function resetWindow(container)
RemoveChildren(container)
container.xstep = 1
container.ystep = 1
end

function drawPanel(unitSelection)
resetWindow(commandWindow)
resetWindow(stateCommandWindow)
resetWindow(buildCommandWindow)
if (#unitSelection ~= 0)then
local commands = findUniqueCommandsFromSelection(unitSelection)
table.sort(commands,function(x,y) return x.action < y.action end)
for cmdid, cmd in pairs(commands) do
rowcount = createMyButton(commands[cmdid])
end
end
end

-- WIDGET CODE
function widget:GetInfo()
return {
name = "command list window",
desc = "ChiliUi window that contains all the commands a unit has",
author = "Sunspot",
date = "2011-06-15",
license = "GNU GPL v2",
layer = math.huge,
enabled = true,
handler = true,
}
end

function widget:Initialize()
widgetHandler:ConfigLayoutHandler(LayoutHandler)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 0"})

if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
Button = Chili.Button
Window = Chili.Window
Image = Chili.Image
local screen0 = Chili.Screen0

commandWindow = Window:New{
x = 0,
y = 0,
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=true},
children = {},
}

stateCommandWindow = Window:New{
x = 0,
y = "40%",
width = "100%",
height = "20%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=false,right=true,top=false},
children = {},
}

buildCommandWindow = Window:New{
x = 0,
y = "60%",
width = "100%",
height = "40%",
xstep = 1,
ystep = 1,
draggable = false,
resizable = false,
dragUseGrip = false,
anchors = {left=true,bottom=true,right=true,top=false},
children = {},
}

window0 = Window:New{
x = '50%',
y = '15%',
dockable = true,
parent = screen0,
caption = "",
draggable = true,
resizable = true,
dragUseGrip = true,
clientWidth = 400,
clientHeight = 200,
backgroundColor = {0,0,0,1},
skinName = "DarkGlass",
children = {commandWindow,stateCommandWindow,buildCommandWindow},
}

end

function widget:CommandsChanged()
if DEBUG then Spring.Echo("commandChanged called") end
updateRequired = true
end

function widget:DrawScreen()
if updateRequired then
updateRequired = false
local selection = spGetSelectedUnits()
drawPanel(selection)
end
end

function widget:Shutdown()
widgetHandler:ConfigLayoutHandler(nil)
Spring.ForceLayoutUpdate()
spSendCommands({"tooltip 1"})
end
</pre></code>

There we have it, maybe a bit complicated but it's completly possible to remove the nasty stock ui and build your own fancy chili UI. I hope these last 3 tutorials where usefull and you will build some very fine chili gui's

Chili:Tutorial Command and Build Commands

2011-06-26T19:21:54Z

Sunspot: /* On unit selection ... load the commands */

Chili:Tutorial Command and Build Commands

2011-06-26T19:18:58Z

Sunspot: /* Forging the buttons */

Chili:Tutorial Command and Build Commands

2011-06-26T19:16:00Z

Sunspot: /* Forging the buttons */

Chili:Tutorial Command and Build Commands

2011-06-26T19:09:44Z

Sunspot: /* Forging the buttons */

Chili:Tutorial Command and Build Commands

2011-06-26T18:57:10Z

Sunspot: /* On unit selection ... load the commands */

Chili:Tutorial Command and Build Commands

2011-06-26T18:56:55Z

Sunspot: /* initializing the widget */

Chili:Tutorial Command and Build Commands

2011-06-26T18:55:38Z

Sunspot: /* On unit selection ... load the commands */

Chili:Tutorial Command and Build Commands

2011-06-26T18:55:07Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T18:44:31Z

Sunspot: /* On unit selection ... load the commands */

Chili:Tutorial Command and Build Commands

2011-06-26T18:41:05Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T18:34:30Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T18:26:32Z

Sunspot: /* On unit selection ... load the commands */

Chili:Tutorial Command and Build Commands

2011-06-26T18:10:22Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T18:08:55Z

Sunspot: /* initializing the widget */

Chili:Tutorial Command and Build Commands

2011-06-26T18:00:28Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T17:51:48Z

Sunspot: /* File header */

Chili:Tutorial Command and Build Commands

2011-06-26T17:50:57Z

Sunspot:

Chili:Tutorial Command and Build Commands

2011-06-26T17:44:06Z

Sunspot: /* Preparation */

Chili:Tutorial Command and Build Commands

2011-06-26T17:37:24Z

Sunspot: Created page with "== Commands and Build bar == === Preparation ==="

== Commands and Build bar ==
=== Preparation ===

Chili

2011-06-26T17:36:18Z

Sunspot: /* Tutorials */

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

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 !

== Chili Component Hiearchy ==

object
|_font
|_screen
|_control
|_button
|_image
|_checkbox
|_colorbars
|_label
|_layoutpanel
|_imagelistview
|_grid
|_stackpanel
|_treeview
|_panel
|_progressbar
|_scrollpanel
|_textbox
|_trackbar
|_treeview
|_treeviewnode
|_window

== Tutorials ==
[[Lesson 1 : Hello World]]

[[Lesson 2 : Dynamicly change label content]]

[[Lesson 3 : Command and Build commands in a chili window]]

Chili:Tutorial Dynamic Label Content

2011-06-20T06:01:06Z

Sunspot:

== Dynamic label updating ==
=== Preparation ===
Having windows with labels on screen is a fun thing. Although you probably want to change the contents of those labels if some event happens ingame. For this tutorial we are going to change a label everytime a unit gets destroyed.

as before we are going to establish a basic structure for our code. However we are going to need 4 scripts now.
<pre>
- LuaRules\Gadgets\Includes\messages.lua
- LuaRules\Gadgets\Includes\utilities.lua
- LuaRules\Gadgets\units_destroyed_counter.lua
- LuaUI\widgets\gui_chili_unitdestroyedwindow.lua
</pre>

In the messages.lua we are going to put global constants that will prefix interface messages between the engine rules code and the widget ui code. Utilities.lua will contain handy utitliy functions like tokenizing strings or array debug code. Units_destroyed_counter.lua will be used as engine rule code to keep track of the amount of units destroyed. Gui_chili_unitdestroyedwindow.lua will contain the code to display the amount of units destroyed.

=== Units_destroyed_counter.lua ===
We will start this page the same way as we did with hello world.

<code><pre>
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end

-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SPEEDUPS
local Echo = Spring.Echo
</pre></code>

As you see 2 of the scripts mentioned earlier will be included in this script in the Includes section. I'll elaborate on them later but for now just put them there. In the Constants section I created a DEBUG constant, this constant will be your friend in later development. Especially if you have to give support to users (ofcourse it's the users fault !) if the code doesn't work anymore. In the Members section we have unitDestroyedCounter this counter will keep track of the destroyed units thru the entire lifetime of the script. Synced control section speaks for itselfs we cache the Spring.Echo function because we probably gonna use it a lot and we need to think about performance.

Next up we will have to init the gadget and create the method to increase the counter everytime a unit gets destroyed. Not really all that difficult but then raises the question how are we going to notify the widget this counter increased ... cause thats an entire other script. Well the sollution is to let the engine send a message. Here is how.

<code><pre>
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end

-- SYNCED ONLY
if (not gadgetHandler:IsSyncedCode()) then
return
end

-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SPEEDUPS
local Echo = Spring.Echo

function gadget:GameStart()
unitDestroyedCounter = 0
end

function gadget:UnitDestroyed(unitID, unitDefID, teamID, attackerID)
unitDestroyedCounter = unitDestroyedCounter + 1
if DEBUG then Echo("Sending message type " .. UNITDESTROYEDUPDATE .. "
params ", unitDestroyedCounter) end
MessageDispatcher(UNITDESTROYEDUPDATE .. "-" .. unitDestroyedCounter)
end
</pre></code>

Few things to notice here I've added a new constant that we will use to send messages out the MessageDispatcher. Also since we are sending data that each client needs to recieve we have to do everything synced. We make sure of that by making the gadget work with synced code. Next we call the GameStart method to initialise the unitDestroyedCounter. It's not really needed because we allready initalised it to 0 at variable creation, but it's never a bad habit to do so. The UnitDestroyed method gives you some variables to work with like the unit that got destroyed , what team he belonged to and the unit who killed it. All nice params to work with but not needed in this tutorial, we will just increase the unitDestroyedCounter with one and send a message out. Notice the format of the message, it start with the prefix of the type of message thats a constant in the messages.lua include followed by the parameters separated by "-". What sign you use to seperate isn't important as long as it does not appear in your regular text and parameters. In fact there is nothing wrong in making it a constant in messages.lua either. For readability of the tutorial however I didn't.

===messages.lua===
A simple and easy file where we keep our message constants in this case the UNITDESTROYEDUPDATE one.
<code><pre>
UNITDESTROYEDUPDATE = "UNITDESTROYEDUPDATE " --format: UNITDESTROYEDUPDATE-(unitDestroyedCounter)
</pre></code>

===utilities.lua===
Make this file your standard file for all little utilities that you will probably use often in your developing adventures in Spring. Let me start you off, with the following two methods that will be very handy, and one of them even needed in the tutorial

<code><pre>
function to_string(data, indent)
local str = ""
if(indent == nil) then
indent = 0
end
local indenter = " "
-- Check the type
if(type(data) == "string") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "number") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "boolean") then
if(data == true) then
str = str .. "true"
else
str = str .. "false"
end
elseif(type(data) == "table") then
local i, v
for i, v in pairs(data) do
-- Check for a table in a table
if(type(v) == "table") then
str = str .. (indenter):rep(indent) .. i .. ":\n"
str = str .. to_string(v, indent + 2)
else
str = str .. (indenter):rep(indent) .. i .. ": " .. to_string(v, 0)
end
end
elseif(type(data) == "function") then
str = str .. (indenter):rep(indent) .. 'function' .. "\n"
else
echo(1, "Error: unknown data type: %s", type(data))
end
return str
end

function split(pString, pPattern)
local tableIndex = 1
local Table = {} -- NOTE: use {n = 0} in Lua-5.0
local fpat = "(.-)" .. pPattern
local last_end = 1
local s, e, cap = pString:find(fpat, 1)
while s do
if s ~= 1 or cap ~= "" then
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
last_end = e+1
s, e, cap = pString:find(fpat, last_end)
end
if last_end <= #pString then
cap = pString:sub(last_end)
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
return Table
end
</pre></code>

the to_string method, will be very helpfull once you start debugging arrays. with it you can get a text representation of your array vars. The split method is what I think is a decent regular language split method. Unfourtunatly I didn't find any stringtokenizer method as java has. So it will have to do

===gui_chili_unitdestroyedwindow.lua===
This is our gui script that puts the destroyedcounter on the screen and updates it. It will need a way to recieve the messages send by the rules script, interpret them and then update the screen. Don't worry it's not as hard as it sounds. Look here.

<code><pre>
function widget:GetInfo()
return {
name = "unit destroyed window",
desc = "window to keep the unitdestroyed counter",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = 2,
enabled = true -- loaded by default?
}
end

-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true
local LOCALPLAYER = Spring.GetMyPlayerID()

-- MEMBERS
local Chili
local unitsDestroyedLabel
local unitsDestroyedWindow

-- SCRIPT FUNCTIONS
function doUnitDestroyedUpdate(value)
if DEBUG then Spring.Echo("changing unitsdestroyed to " .. value) end
unitsDestroyedLabel:SetCaption(value)
end

function widget:Initialize()
if (not WG.Chili) then
widgetHandler:RemoveWidget()
return
end

Chili = WG.Chili
local screen0 = Chili.Screen0

unitsDestroyedWindow = Chili.Window:New{
x = '50%',
y = '50%',
dockable = true,
parent = screen0,
caption = "units destroyed",
draggable = true,
resizable = false,
dragUseGrip = true,
clientWidth = 100,
clientHeight = 20,
backgroundColor = {0.8,0.8,0.8,0.9},
}

unitsDestroyedLabel = Chili.Label:New{
x = "50%",
y = '50%',
parent = unitsDestroyedWindow,
caption = 0,
fontsize = 13,
autosize = false,
textColor = {1,1,1,1},
}
end

function widget:RecvLuaMsg(msg, playerID)
if (playerID ~= LOCALPLAYER) then return end

local tokens = split(msg,"-");
if(tokens[1] == UNITDESTROYEDUPDATE)then
if DEBUG then Spring.Echo("unitdestroyed msg recieved : " .. msg) end
doUnitDestroyedUpdate(tokens[2])
end
end
</pre></code>

Let me walk you thru this. First of all a new constant, you need to know who you are ... strange I know ... but if you don't you will have problems in the RecvLuaMsg method. Everytime some script throws the SendLuaMsg method, you'll trigger this method. This will happen for every player since, every player threw the msg due to the sync code. You are only interested in your own messages so you put in the check "if (playerID ~= LOCALPLAYER) then return end". Once you have determined the msg is for you, you need to learn how read it. As we discussed earlier , there isn't a tokenizer method, but we can use the split method we put in our utilities script. The first token will be the messagetype, while every following token are the paramters. In case of different type of messages being send, you first check what message type and next you do the action for the message. In our case we make an update to the label unit destroyed.

The label update is nothing special but due take note about this. The Chili framework will provide you with methods to update stuff. You could have done in this case for example
<code><pre>
--Disclaimer don't use this
unitsDestroyedLabel.value = "new value"
unitsDestroyedWindow:RemoveChild(unitsDestroyedLabel)
unitsDestroyedWindow:AddChild(unitsDestroyedLabel)
</pre></code>
This would refresh the window with a changed label but why go the long way around. The Label class has a handy method SetCaption(x) that will , update your label and refresh it, from within the framework

And there we have it , you have learned how to send messages from engine rule code to widget ui code and learned how to update Chili objects !

Chili:Tutorial Hello World

2011-06-19T17:17:24Z

Sunspot: /* Hello World */

== Hello World ==

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.

Create a file gui_chili_helloworld.lua and copy following basic structure.
<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- CHILI CONTROLS
-- MEMBERS
-- SCRIPT FUNCTIONS
-- WIDGET CODE</pre></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.

<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- CHILI CONTROLS
local Chili
local Window
local Label

-- MEMBERS
-- 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
end</pre></code>

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.

<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- 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</pre></code>

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, followed by creating the label. We nest the label on the window and the window on the screen. I've only included a few basic parameters but they fit in the scope of this tutorial.

'''<code>x</code>, <code>y</code>''' : 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. You can also use negeative integers, which means you will align from the right instead of the left.

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

'''<code>caption</code>''' : Windows can have a title, you put this title here as a string

'''<code>backgroundColor</code>''' : R, G, B, A values for the background of your window

'''<code>clientWidth</code>''' : <not sure yet what this does, but it seems to have to be there>

'''<code>clientHeight</code>''' : <not sure yet what this does, but it seems to have to be there>

'''<code>width</code>''' : width of your object, kinda obvious, although if the width is smaller then the text of your label your label will be abbrivated with ... . take note that you can also use percentage values here as a string to define the width fe "20%"

'''<code>fontsize</code>''' : size of your label font

'''<code>textColor</code>''' : R, G, B, A values for your font

'''<code>anchors</code>''' : 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. Using these kinda implies that x and y are invalidated. But I didn't see much change with or without x and y.

Chili:Tutorial Hello World

2011-06-19T17:05:03Z

Sunspot: /* Hello World */

== Hello World ==

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.

Create a file gui_chili_helloworld.lua and copy following basic structure.
<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- CHILI CONTROLS
-- MEMBERS
-- SCRIPT FUNCTIONS
-- WIDGET CODE</pre></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.

<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- CHILI CONTROLS
local Chili
local Window
local Label

-- MEMBERS
-- 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
end</pre></code>

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.

<code><pre> -- INCLUDES
-- CONSTANTS
-- SYNCED CONTROLS
-- 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</pre></code>

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, followed by creating the label. We nest the label on the window and the window on the screen. I've only included a few basic parameters but they fit in the scope of this tutorial.

'''<code>x</code>, <code>y</code>''' : 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. You can also use negeative integers, which means you will align from the right instead of the left.

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

'''<code>caption</code>''' : Windows can have a title, you put this title here as a string

'''<code>backgroundColor</code>''' : R, G, B, A values for the background of your window

'''<code>clientWidth</code>''' : <not sure yet what this does, but it seems to have to be there>

'''<code>clientHeight</code>''' : <not sure yet what this does, but it seems to have to be there>

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

'''<code>fontsize</code>''' : size of your label font

'''<code>textColor</code>''' : R, G, B, A values for your font

'''<code>anchors</code>''' : 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.

Chili:Tutorial Dynamic Label Content

2011-06-19T16:36:46Z

Sunspot:

== Dynamic label updating ==
=== Preparation ===
Having windows with labels on screen is a fun thing. Although you probably want to change the contents of those labels if some event happens ingame. For this tutorial we are going to change a label everytime a unit gets destroyed.

as before we are going to establish a basic structure for our code. However we are going to need 4 scripts now.
<pre>
- LuaRules\Gadgets\Includes\messages.lua
- LuaRules\Gadgets\Includes\utilities.lua
- LuaRules\Gadgets\units_destroyed_counter.lua
- LuaUI\widgets\gui_chili_unitdestroyedwindow.lua
</pre>

In the messages.lua we are going to put global constants that will prefix interface messages between the engine rules code and the widget ui code. Utilities.lua will contain handy utitliy functions like tokenizing strings or array debug code. Units_destroyed_counter.lua will be used as engine rule code to keep track of the amount of units destroyed. Gui_chili_unitdestroyedwindow.lua will contain the code to display the amount of units destroyed.

=== Units_destroyed_counter.lua ===
We will start this page the same way as we did with hello world.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end
</pre></code>

As you see 2 of the scripts mentioned earlier will be included in this script in the Includes section. I'll elaborate on them later but for now just put them there. In the Constants section I created a DEBUG constant, this constant will be your friend in later development. Especially if you have to give support to users (ofcourse it's the users fault !) if the code doesn't work anymore. In the Members section we have unitDestroyedCounter this counter will keep track of the destroyed units thru the entire lifetime of the script. Synced control section speaks for itselfs we cache the Spring.Echo function because we probably gonna use it a lot and we need to think about performance.

Next up we will have to init the gadget and create the method to increase the counter everytime a unit gets destroyed. Not really all that difficult but then raises the question how are we going to notify the widget this counter increased ... cause thats an entire other script. Well the sollution is to let the engine send a message. Here is how.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo
local MessageDispatcher = Spring.SendLuaUIMsg

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end

if (gadgetHandler:IsSyncedCode()) then
function gadget:GameStart()
unitDestroyedCounter = 0
end

function gadget:UnitDestroyed(unitID, unitDefID, teamID, attackerID)
unitDestroyedCounter = unitDestroyedCounter + 1
if DEBUG then Echo("Sending message type " .. UNITDESTROYEDUPDATE .. "
params ", unitDestroyedCounter) end
MessageDispatcher(UNITDESTROYEDUPDATE .. "-" .. unitDestroyedCounter)
end
end
</pre></code>

Few things to notice here I've added a new constant that we will use to send messages out the MessageDispatcher. Also since we are sending data that each client needs to recieve we have to do everything synced. We make sure of that by making the gadget work with synced code. Next we call the GameStart method to initialise the unitDestroyedCounter. It's not really needed because we allready initalised it to 0 at variable creation, but it's never a bad habit to do so. The UnitDestroyed method gives you some variables to work with like the unit that got destroyed , what team he belonged to and the unit who killed it. All nice params to work with but not needed in this tutorial, we will just increase the unitDestroyedCounter with one and send a message out. Notice the format of the message, it start with the prefix of the type of message thats a constant in the messages.lua include followed by the parameters separated by "-". What sign you use to seperate isn't important as long as it does not appear in your regular text and parameters. In fact there is nothing wrong in making it a constant in messages.lua either. For readability of the tutorial however I didn't.

===messages.lua===
A simple and easy file where we keep our message constants in this case the UNITDESTROYEDUPDATE one.
<code><pre>
UNITDESTROYEDUPDATE = "UNITDESTROYEDUPDATE " --format: UNITDESTROYEDUPDATE-(unitDestroyedCounter)
</pre></code>

===utilities.lua===
Make this file your standard file for all little utilities that you will probably use often in your developing adventures in Spring. Let me start you off, with the following two methods that will be very handy, and one of them even needed in the tutorial

<code><pre>
function to_string(data, indent)
local str = ""
if(indent == nil) then
indent = 0
end
local indenter = " "
-- Check the type
if(type(data) == "string") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "number") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "boolean") then
if(data == true) then
str = str .. "true"
else
str = str .. "false"
end
elseif(type(data) == "table") then
local i, v
for i, v in pairs(data) do
-- Check for a table in a table
if(type(v) == "table") then
str = str .. (indenter):rep(indent) .. i .. ":\n"
str = str .. to_string(v, indent + 2)
else
str = str .. (indenter):rep(indent) .. i .. ": " .. to_string(v, 0)
end
end
elseif(type(data) == "function") then
str = str .. (indenter):rep(indent) .. 'function' .. "\n"
else
echo(1, "Error: unknown data type: %s", type(data))
end
return str
end

function split(pString, pPattern)
local tableIndex = 1
local Table = {} -- NOTE: use {n = 0} in Lua-5.0
local fpat = "(.-)" .. pPattern
local last_end = 1
local s, e, cap = pString:find(fpat, 1)
while s do
if s ~= 1 or cap ~= "" then
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
last_end = e+1
s, e, cap = pString:find(fpat, last_end)
end
if last_end <= #pString then
cap = pString:sub(last_end)
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
return Table
end
</pre></code>

the to_string method, will be very helpfull once you start debugging arrays. with it you can get a text representation of your array vars. The split method is what I think is a decent regular language split method. Unfourtunatly I didn't find any stringtokenizer method as java has. So it will have to do

===gui_chili_unitdestroyedwindow.lua===
This is our gui script that puts the destroyedcounter on the screen and updates it. It will need a way to recieve the messages send by the rules script, interpret them and then update the screen. Don't worry it's not as hard as it sounds. Look here.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true
local LOCALPLAYER = Spring.GetMyPlayerID()

-- MEMBERS
local Chili
local Window
local Label
local unitsDestroyedLabel
local unitsDestroyedWindow

-- SCRIPT FUNCTIONS
function doUnitDestroyedUpdate(value)
if DEBUG then Spring.Echo("changing unitsdestroyed to " .. value) end
unitsDestroyedLabel:SetCaption(value)
end

-- WIDGET CODE
function widget:GetInfo()
return {
name = "unit destroyed window",
desc = "window to keep the unitdestroyed counter",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = 2,
enabled = true -- loaded by default?
}
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

unitsDestroyedWindow = Window:New{
x = '50%',
y = '50%',
dockable = true,
parent = screen0,
caption = "units destroyed",
draggable = true,
resizable = false,
dragUseGrip = true,
clientWidth = 100,
clientHeight = 20,
backgroundColor = {0.8,0.8,0.8,0.9},
}

unitsDestroyedLabel = Label:New{
x = "50%",
y = '50%',
parent = unitsDestroyedWindow,
caption = 0,
fontsize = 13,
autosize = false,
textColor = {1,1,1,1},
anchors = {left=true,bottom=false,right=false,top=false},
}
end

function widget:RecvLuaMsg(msg, playerID)
if (playerID ~= LOCALPLAYER) then return end

local tokens = split(msg,"-");
if(tokens[1] == UNITDESTROYEDUPDATE)then
if DEBUG then Spring.Echo("unitdestroyed msg recieved : " .. msg) end
doUnitDestroyedUpdate(tokens[2])
end
end
</pre></code>

Let me walk you thru this. First of all a new constant, you need to know who you are ... strange I know ... but if you don't you will have problems in the RecvLuaMsg method. Everytime some script throws the SendLuaMsg method, you'll trigger this method. This will happen for every player since, every player threw the msg due to the sync code. You are only interested in your own messages so you put in the check "if (playerID ~= LOCALPLAYER) then return end". Once you have determined the msg is for you, you need to learn how read it. As we discussed earlier , there isn't a tokenizer method, but we can use the split method we put in our utilities script. The first token will be the messagetype, while every following token are the paramters. In case of different type of messages being send, you first check what message type and next you do the action for the message. In our case we make an update to the label unit destroyed.

The label update is nothing special but due take note about this. The Chili framework will provide you with methods to update stuff. You could have done in this case for example
<code><pre>
--Disclaimer don't use this
unitsDestroyedLabel.value
unitsDestroyedWindow:RemoveChild(unitsDestroyedLabel)
unitsDestroyedWindow:AddChild(unitsDestroyedLabel)
</pre></code>
This would refresh the window with a changed label but why go the long way around. The Label class has a handy method SetCaption(x) that will , update your label and refresh it, from within the framework

And there we have it , you have learned how to send messages from engine rule code to widget ui code and learned how to update Chili objects !

Chili:Tutorial Dynamic Label Content

2011-06-19T16:35:52Z

Sunspot: /* gui_chili_unitdestroyedwindow.lua */

== Dynamic label updating ==
=== Preparation ===
Having windows with labels on screen is a fun thing. Although you probably want to change the contents of those labels if some event happens ingame. For this tutorial we are going to change a label everytime a unit gets destroyed.

as before we are going to establish a basic structure for our code. However we are going to need 4 scripts now.
<pre>
- LuaRules\Gadgets\Includes\messages.lua
- LuaRules\Gadgets\Includes\utilities.lua
- LuaRules\Gadgets\units_destroyed_counter.lua
- LuaUI\widgets\gui_chili_unitdestroyedwindow.lua
</pre>

In the messages.lua we are going to put global constants that will prefix interface messages between the engine rules code and the widget ui code. Utilities.lua will contain handy utitliy functions like tokenizing strings or array debug code. Units_destroyed_counter.lua will be used as engine rule code to keep track of the amount of units destroyed. Gui_chili_unitdestroyedwindow.lua will contain the code to display the amount of units destroyed.

=== Units_destroyed_counter.lua ===
We will start this page the same way as we did with hello world.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end
</pre></code>

As you see 2 of the scripts mentioned earlier will be included in this script in the Includes section. I'll elaborate on them later but for now just put them there. In the Constants section I created a DEBUG constant, this constant will be your friend in later development. Especially if you have to give support to users (ofcourse it's the users fault !) if the code doesn't work anymore. In the Members section we have unitDestroyedCounter this counter will keep track of the destroyed units thru the entire lifetime of the script. Synced control section speaks for itselfs we cache the Spring.Echo function because we probably gonna use it a lot and we need to think about performance.

Next up we will have to init the gadget and create the method to increase the counter everytime a unit gets destroyed. Not really all that difficult but then raises the question how are we going to notify the widget this counter increased ... cause thats an entire other script. Well the sollution is to let the engine send a message. Here is how.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo
local MessageDispatcher = Spring.SendLuaUIMsg

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end

if (gadgetHandler:IsSyncedCode()) then
function gadget:GameStart()
unitDestroyedCounter = 0
end

function gadget:UnitDestroyed(unitID, unitDefID, teamID, attackerID)
unitDestroyedCounter = unitDestroyedCounter + 1
if DEBUG then Echo("Sending message type " .. UNITDESTROYEDUPDATE .. "
params ", unitDestroyedCounter) end
MessageDispatcher(UNITDESTROYEDUPDATE .. "-" .. unitDestroyedCounter)
end
end
</pre></code>

Few things to notice here I've added a new constant that we will use to send messages out the MessageDispatcher. Also since we are sending data that each client needs to recieve we have to do everything synced. We make sure of that by making the gadget work with synced code. Next we call the GameStart method to initialise the unitDestroyedCounter. It's not really needed because we allready initalised it to 0 at variable creation, but it's never a bad habit to do so. The UnitDestroyed method gives you some variables to work with like the unit that got destroyed , what team he belonged to and the unit who killed it. All nice params to work with but not needed in this tutorial, we will just increase the unitDestroyedCounter with one and send a message out. Notice the format of the message, it start with the prefix of the type of message thats a constant in the messages.lua include followed by the parameters separated by "-". What sign you use to seperate isn't important as long as it does not appear in your regular text and parameters. In fact there is nothing wrong in making it a constant in messages.lua either. For readability of the tutorial however I didn't.

===messages.lua===
A simple and easy file where we keep our message constants in this case the UNITDESTROYEDUPDATE one.
<code><pre>
UNITDESTROYEDUPDATE = "UNITDESTROYEDUPDATE " --format: UNITDESTROYEDUPDATE-(unitDestroyedCounter)
</pre></code>

===utilities.lua===
Make this file your standard file for all little utilities that you will probably use often in your developing adventures in Spring. Let me start you off, with the following two methods that will be very handy, and one of them even needed in the tutorial

<code><pre>
function to_string(data, indent)
local str = ""
if(indent == nil) then
indent = 0
end
local indenter = " "
-- Check the type
if(type(data) == "string") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "number") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "boolean") then
if(data == true) then
str = str .. "true"
else
str = str .. "false"
end
elseif(type(data) == "table") then
local i, v
for i, v in pairs(data) do
-- Check for a table in a table
if(type(v) == "table") then
str = str .. (indenter):rep(indent) .. i .. ":\n"
str = str .. to_string(v, indent + 2)
else
str = str .. (indenter):rep(indent) .. i .. ": " .. to_string(v, 0)
end
end
elseif(type(data) == "function") then
str = str .. (indenter):rep(indent) .. 'function' .. "\n"
else
echo(1, "Error: unknown data type: %s", type(data))
end
return str
end

function split(pString, pPattern)
local tableIndex = 1
local Table = {} -- NOTE: use {n = 0} in Lua-5.0
local fpat = "(.-)" .. pPattern
local last_end = 1
local s, e, cap = pString:find(fpat, 1)
while s do
if s ~= 1 or cap ~= "" then
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
last_end = e+1
s, e, cap = pString:find(fpat, last_end)
end
if last_end <= #pString then
cap = pString:sub(last_end)
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
return Table
end
</pre></code>

the to_string method, will be very helpfull once you start debugging arrays. with it you can get a text representation of your array vars. The split method is what I think is a decent regular language split method. Unfourtunatly I didn't find any stringtokenizer method as java has. So it will have to do

===gui_chili_unitdestroyedwindow.lua===
This is our gui script that puts the destroyedcounter on the screen and updates it. It will need a way to recieve the messages send by the rules script, interpret them and then update the screen. Don't worry it's not as hard as it sounds. Look here.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true
local LOCALPLAYER = Spring.GetMyPlayerID()

-- MEMBERS
local Chili
local Window
local Label
local unitsDestroyedLabel
local unitsDestroyedWindow

-- SCRIPT FUNCTIONS
function doUnitDestroyedUpdate(value)
if DEBUG then Spring.Echo("changing unitsdestroyed to " .. value) end
unitsDestroyedLabel:SetCaption(value)
end

-- WIDGET CODE
function widget:GetInfo()
return {
name = "unit destroyed window",
desc = "window to keep the unitdestroyed counter",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = 2,
enabled = true -- loaded by default?
}
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

unitsDestroyedWindow = Window:New{
x = '50%',
y = '50%',
dockable = true,
parent = screen0,
caption = "units destroyed",
draggable = true,
resizable = false,
dragUseGrip = true,
clientWidth = 100,
clientHeight = 20,
backgroundColor = {0.8,0.8,0.8,0.9},
}

unitsDestroyedLabel = Label:New{
x = "50%",
y = '50%',
parent = unitsDestroyedWindow,
caption = 0,
fontsize = 13,
autosize = false,
textColor = {1,1,1,1},
anchors = {left=true,bottom=false,right=false,top=false},
}
end

function widget:RecvLuaMsg(msg, playerID)
if (playerID ~= LOCALPLAYER) then return end

local tokens = split(msg,"-");
if(tokens[1] == UNITDESTROYEDUPDATE)then
if DEBUG then Spring.Echo("unitdestroyed msg recieved : " .. msg) end
doUnitDestroyedUpdate(tokens[2])
end
end
</pre></code>

Let me walk you thru this. First of all a new constant, you need to know who you are ... strange I know ... but if you don't you will have problems in the RecvLuaMsg method. Everytime some script throws the SendLuaMsg method, you'll trigger this method. This will happen for every player since, every player threw the msg due to the sync code. You are only interested in your own messages so you put in the check "if (playerID ~= LOCALPLAYER) then return end". Once you have determined the msg is for you, you need to learn how read it. As we discussed earlier , there isn't a tokenizer method, but we can use the split method we put in our utilities script. The first token will be the messagetype, while every following token are the paramters. In case of different type of messages being send, you first check what message type and next you do the action for the message. In our case we make an update to the label unit destroyed.

The label update is nothing special but due take note about this. The Chili framework will provide you with methods to update stuff. You could have done in this case for example
<code><pre>
--Disclaimer don't use this
unitsDestroyedLabel.value
unitsDestroyedWindow:RemoveChild(unitsDestroyedLabel)
unitsDestroyedWindow:AddChild(unitsDestroyedLabel)
</pre></code>
This would refresh the window with a changed label but why go the long way around. The Label class has a handy method SetCaption(x) that will , update your label and refresh it, from within the framework

Chili:Tutorial Dynamic Label Content

2011-06-19T16:23:04Z

Sunspot: /* gui_chili_unitdestroyedwindow.lua */

== Dynamic label updating ==
=== Preparation ===
Having windows with labels on screen is a fun thing. Although you probably want to change the contents of those labels if some event happens ingame. For this tutorial we are going to change a label everytime a unit gets destroyed.

as before we are going to establish a basic structure for our code. However we are going to need 4 scripts now.
<pre>
- LuaRules\Gadgets\Includes\messages.lua
- LuaRules\Gadgets\Includes\utilities.lua
- LuaRules\Gadgets\units_destroyed_counter.lua
- LuaUI\widgets\gui_chili_unitdestroyedwindow.lua
</pre>

In the messages.lua we are going to put global constants that will prefix interface messages between the engine rules code and the widget ui code. Utilities.lua will contain handy utitliy functions like tokenizing strings or array debug code. Units_destroyed_counter.lua will be used as engine rule code to keep track of the amount of units destroyed. Gui_chili_unitdestroyedwindow.lua will contain the code to display the amount of units destroyed.

=== Units_destroyed_counter.lua ===
We will start this page the same way as we did with hello world.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end
</pre></code>

As you see 2 of the scripts mentioned earlier will be included in this script in the Includes section. I'll elaborate on them later but for now just put them there. In the Constants section I created a DEBUG constant, this constant will be your friend in later development. Especially if you have to give support to users (ofcourse it's the users fault !) if the code doesn't work anymore. In the Members section we have unitDestroyedCounter this counter will keep track of the destroyed units thru the entire lifetime of the script. Synced control section speaks for itselfs we cache the Spring.Echo function because we probably gonna use it a lot and we need to think about performance.

Next up we will have to init the gadget and create the method to increase the counter everytime a unit gets destroyed. Not really all that difficult but then raises the question how are we going to notify the widget this counter increased ... cause thats an entire other script. Well the sollution is to let the engine send a message. Here is how.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true

-- MEMBERS
local unitDestroyedCounter = 0

-- SYNCED CONTROLS
local Echo = Spring.Echo
local MessageDispatcher = Spring.SendLuaUIMsg

-- SCRIPT FUNCTIONS
-- GADGET CODE
function gadget:GetInfo()
return {
name = "units destroyed counter",
desc = "Keeps track of the destroyed units in game (including unfinished units,
that timeout)",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = -50,
enabled = true
}
end

if (gadgetHandler:IsSyncedCode()) then
function gadget:GameStart()
unitDestroyedCounter = 0
end

function gadget:UnitDestroyed(unitID, unitDefID, teamID, attackerID)
unitDestroyedCounter = unitDestroyedCounter + 1
if DEBUG then Echo("Sending message type " .. UNITDESTROYEDUPDATE .. "
params ", unitDestroyedCounter) end
MessageDispatcher(UNITDESTROYEDUPDATE .. "-" .. unitDestroyedCounter)
end
end
</pre></code>

Few things to notice here I've added a new constant that we will use to send messages out the MessageDispatcher. Also since we are sending data that each client needs to recieve we have to do everything synced. We make sure of that by making the gadget work with synced code. Next we call the GameStart method to initialise the unitDestroyedCounter. It's not really needed because we allready initalised it to 0 at variable creation, but it's never a bad habit to do so. The UnitDestroyed method gives you some variables to work with like the unit that got destroyed , what team he belonged to and the unit who killed it. All nice params to work with but not needed in this tutorial, we will just increase the unitDestroyedCounter with one and send a message out. Notice the format of the message, it start with the prefix of the type of message thats a constant in the messages.lua include followed by the parameters separated by "-". What sign you use to seperate isn't important as long as it does not appear in your regular text and parameters. In fact there is nothing wrong in making it a constant in messages.lua either. For readability of the tutorial however I didn't.

===messages.lua===
A simple and easy file where we keep our message constants in this case the UNITDESTROYEDUPDATE one.
<code><pre>
UNITDESTROYEDUPDATE = "UNITDESTROYEDUPDATE " --format: UNITDESTROYEDUPDATE-(unitDestroyedCounter)
</pre></code>

===utilities.lua===
Make this file your standard file for all little utilities that you will probably use often in your developing adventures in Spring. Let me start you off, with the following two methods that will be very handy, and one of them even needed in the tutorial

<code><pre>
function to_string(data, indent)
local str = ""
if(indent == nil) then
indent = 0
end
local indenter = " "
-- Check the type
if(type(data) == "string") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "number") then
str = str .. (indenter):rep(indent) .. data .. "\n"
elseif(type(data) == "boolean") then
if(data == true) then
str = str .. "true"
else
str = str .. "false"
end
elseif(type(data) == "table") then
local i, v
for i, v in pairs(data) do
-- Check for a table in a table
if(type(v) == "table") then
str = str .. (indenter):rep(indent) .. i .. ":\n"
str = str .. to_string(v, indent + 2)
else
str = str .. (indenter):rep(indent) .. i .. ": " .. to_string(v, 0)
end
end
elseif(type(data) == "function") then
str = str .. (indenter):rep(indent) .. 'function' .. "\n"
else
echo(1, "Error: unknown data type: %s", type(data))
end
return str
end

function split(pString, pPattern)
local tableIndex = 1
local Table = {} -- NOTE: use {n = 0} in Lua-5.0
local fpat = "(.-)" .. pPattern
local last_end = 1
local s, e, cap = pString:find(fpat, 1)
while s do
if s ~= 1 or cap ~= "" then
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
last_end = e+1
s, e, cap = pString:find(fpat, last_end)
end
if last_end <= #pString then
cap = pString:sub(last_end)
Table[tableIndex] = cap
tableIndex = tableIndex + 1
end
return Table
end
</pre></code>

the to_string method, will be very helpfull once you start debugging arrays. with it you can get a text representation of your array vars. The split method is what I think is a decent regular language split method. Unfourtunatly I didn't find any stringtokenizer method as java has. So it will have to do

===gui_chili_unitdestroyedwindow.lua===
This is our gui script that puts the destroyedcounter on the screen and updates it. It will need a way to recieve the messages send by the rules script, interpret them and then update the screen. Don't worry it's not as hard as it sounds. Look here.

<code><pre>
-- INCLUDES
VFS.Include("LuaRules/Gadgets/Includes/utilities.lua")
VFS.Include("LuaRules/Gadgets/Includes/messagetypes.lua")

-- CONSTANTS
local DEBUG = true
local LOCALPLAYER = Spring.GetMyPlayerID()

-- MEMBERS
local Chili
local Window
local Label
local unitsDestroyedLabel
local unitsDestroyedWindow

-- SCRIPT FUNCTIONS
function doUnitDestroyedUpdate(value)
if DEBUG then Spring.Echo("changing unitsdestroyed to " .. value) end
unitsDestroyedLabel:SetCaption(value)
end

-- WIDGET CODE
function widget:GetInfo()
return {
name = "unit destroyed window",
desc = "window to keep the unitdestroyed counter",
author = "Sunspot",
date = "2011-06-19",
license = "GNU GPL v2",
layer = 2,
enabled = true -- loaded by default?
}
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

unitsDestroyedWindow = Window:New{
x = '50%',
y = '50%',
dockable = true,
parent = screen0,
caption = "units destroyed",
draggable = true,
resizable = false,
dragUseGrip = true,
clientWidth = 100,
clientHeight = 20,
backgroundColor = {0.8,0.8,0.8,0.9},
}

unitsDestroyedLabel = Label:New{
x = "50%",
y = '50%',
parent = unitsDestroyedWindow,
caption = 0,
fontsize = 13,
autosize = false,
textColor = {1,1,1,1},
anchors = {left=true,bottom=false,right=false,top=false},
}
end

function widget:RecvLuaMsg(msg, playerID)
if (playerID ~= LOCALPLAYER) then return end

local tokens = split(msg,"-");
if(tokens[1] == UNITDESTROYEDUPDATE)then
if DEBUG then Spring.Echo("unitdestroyed msg recieved : " .. msg) end
doUnitDestroyedUpdate(tokens[2])
end
end
</pre></code>

Chili:Tutorial Dynamic Label Content

2011-06-19T16:13:10Z

Sunspot: /* Units_destroyed_counter.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T16:12:40Z

Sunspot: /* Units_destroyed_counter.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T15:39:50Z

Sunspot: /* gui_chili_unitdestroyedwindow.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T15:32:29Z

Sunspot:

Chili:Tutorial Dynamic Label Content

2011-06-19T15:27:54Z

Sunspot: /* utilities.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T15:27:09Z

Sunspot: /* Units_destroyed_counter.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T15:26:02Z

Sunspot: /* Units_destroyed_counter.lua */

Chili:Tutorial Dynamic Label Content

2011-06-19T15:25:01Z

Sunspot: /* Units_destroyed_counter.lua */