Arma: GUI Configuration: Difference between revisions

From Bohemia Interactive Community
Jump to navigation Jump to search
m (Some wiki formatting)
m (Some wiki formatting)
 
(47 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{SideTOC}}
{{TOC|side}}
Dialogs are one way to provide custom graphical user interface in your missions and allow interaction with the player aswell as they are able to run [[Code|code]]. They are defined as classes in the [[Description.ext|missionConfigFile]] ([[description.ext]]), [[campaignConfigFile]] ([[Campaign Description.ext]]) or [[configFile]] ([[config.cpp]]).
Dialogs are one way to provide custom graphical user interface in your missions and allow interaction with the player as well as they are able to run [[Code|code]]. They are defined as classes in the [[Description.ext|missionConfigFile]] ([[Description.ext|description.ext]]), [[campaignConfigFile]] ([[Campaign Description.ext]]) or [[configFile]] ([[config.cpp]]).
<gallery>
<gallery mode="nolines" class="center" widths=150px>
A3_GUI_Example_1.jpg|Custom Briefing Editor
A3_GUI_Example_1.jpg|Custom Briefing Editor
A3_GUI_Example_2.jpg|Teamswitch GUI
A3_GUI_Example_2.jpg|Teamswitch GUI
Line 8: Line 8:




== Terminology ==
=== Terminology ===


; GUI
; GUI
: '''G'''raphical '''U'''ser '''I'''nterface which lets the user interact with the software through graphical controls like buttons, lists and so on.
: Graphical User Interface - Allows user interaction with the software through graphical controls like buttons, lists and so on.


; UI
; UI
: '''U'''ser '''I'''nterface which lets the user interact with the software through a console application
: User Interface - Allows the user to interact with the software through a console application.


; IGUI
; IGUI
: '''I'''ntegrated '''G'''raphical '''U'''ser '''I'''nterface, usually used when talking about vanilla menus in {{arma3}}.
: Integrated Graphical User Interface - A term usually encountered when talking about vanilla menus in {{arma3}}.


=== User Interface Types ===


'''Dialog'''
== User Interface Types ==
 
=== Dialog ===
 
* Can be created upon an existing display. Parent display will be hidden.
* Can be created upon an existing display. Parent display will be hidden.


** Player movement is blocked by dialog
** Player movement is blocked by dialog
** '''Commands:''' [[createDialog]], [[closeDialog]], [[allControls]], [[dialog]] [[User:7erra|7erra]] ([[User talk:7erra|talk]])
** '''Commands:''' [[createDialog]], [[closeDialog]], [[allControls]], [[dialog]]
 
=== Display ===


'''Display'''
* Can be created upon an existing display. Parent display will be hidden.
* Can be created upon an existing display. Parent display will be hidden.
* Player movement is not blocked by display, if it hasn't been blocked by its parent display already.
* Player movement is not blocked by display, if it has not been blocked by its parent display already.
** '''Commands:''' [[createDisplay]], [[closeDisplay]], [[allControls]], [[allDisplays]]
** '''Commands:''' [[createDisplay]], [[closeDisplay]], [[allControls]], [[allDisplays]]


{{Informative|Generally speaking, dialogs and displays are identical. They are only differentiated by the way they are created ([[createDisplay]], [[createDialog]]).}}
{{Feature|informative|Generally speaking, dialogs and displays are identical. They are only differentiated by the way they are created ([[createDisplay]], [[createDialog]]).}}
 
=== HUD ===


'''HUD'''
* Is created in a new, or already existing layer. The user can not interact with it. Usually used to show information, like stamina, ammunition and so on.
* Is created in a new, or already existing layer. The user can not interact with it. Usually used to show information, like stamina, ammunition and so on.
** '''Commands:''' [[allCutLayers]], [[titleRsc]], [[cutText]], [[cutObj]], [[cutFadeOut]], [[setTitleEffect]], [[allActiveTitleEffects]]
** '''Commands:''' [[allCutLayers]], [[titleRsc]], [[cutText]], [[cutObj]], [[cutFadeOut]], [[setTitleEffect]], [[allActiveTitleEffects]]


{{Informative|Some of the commands have different effects. Please check the command's biki page for detailed information.}}
{{Feature|informative|Some of the commands have different effects. Please check the command's biki page for detailed information.}}




Line 52: Line 56:
|-
|-
| '''idd'''
| '''idd'''
| [[Integer]]
| Integer
| The unique ID number of this dialog. Used with [[findDisplay]] to find the display. Can be -1 if no access is required from within a script.
| The unique ID number of this dialog. Used with [[findDisplay]] to find the display. Can be -1 if no access is required from within a script.
|-
|-
| '''access'''
| '''access'''
| [[Integer]]
| Integer
|
|
* 0 - ReadAndWrite - this is the default case where properties can still be added or overridden.
* 0 - ReadAndWrite - this is the default case where properties can still be added or overridden.
Line 65: Line 69:
| '''movingEnable'''
| '''movingEnable'''
| [[Boolean]]
| [[Boolean]]
| Specifies whether the dialog can be moved or not (if enabled one of the dialogs controls should have the ''moving'' property set to 1 so it becomes the "handle" the dialog can be moved with). Doesn't seem to matter in Arma 3
| Specifies whether the dialog can be moved or not (if enabled one of the dialogs controls should have the ''moving'' property set to 1 so it becomes the "handle" the dialog can be moved with). Doesn't seem to matter in {{arma3}}
|-
|-
| '''enableSimulation'''
| '''enableSimulation'''
Line 80: Line 84:
|-
|-
| '''controlsBackground'''
| '''controlsBackground'''
| [[Array]]
| [[Array]] or class
| Contains class names of all background controls associated to this dialog.<br>
| Contains class names of all background controls associated to this dialog.<br>
The sequence in which the controls are listed will decide their z-index (i.e. the last ones will on top of the first ones).
The sequence in which the controls are listed will decide their z-index (i.e. the last ones will on top of the first ones).
|-
|-
| '''controls'''
| '''controls'''
| [[Array]]
| [[Array]] or class
| Contains class names of all foreground controls associated to this dialog.
| Contains class names of all foreground controls associated to this dialog.
|-
|-
| '''objects'''
| '''objects'''
| [[Array]]
| [[Array]] or class
|
| List of all [[DialogControls-Objects]] type controls
|}
|}


* '''Example Config:'''
=== Example Config ===
 
<spoiler text="Show Example Config">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
class DefaultDialog
class DefaultDialog
Line 103: Line 109:
onUnload  = "hint str _this";
onUnload  = "hint str _this";
enableSimulation = false;
enableSimulation = false;
controlsBackground[] =
class ControlsBackground
{
{
//Background controls;
//Background controls
};
};
controls[] =
class Controls
{
{
//Controls;
//Controls
};
};
objects[] =
class Objects
{
{
//Objects
//Objects
Line 117: Line 123:
};
};
</syntaxhighlight>
</syntaxhighlight>
</spoiler>


=== Opening a display or dialog ===
=== Opening a display or dialog ===
Line 122: Line 129:
There are two ways of creating a display or dialog. One can either use [[createDialog]] or [[createDisplay]] command.
There are two ways of creating a display or dialog. One can either use [[createDialog]] or [[createDisplay]] command.


=== Closing a display or dialog===
=== Closing a display or dialog ===


There are several ways how a dialog can be closed.
There are several ways to close a dialog:
* by pressing the '''Escape-key'''
* Pressing {{Controls|Esc}}
* by using [[closeDialog]]
* Clicking a button with IDC 0, 1 or 2
* by using [[closeDisplay]]
* [[closeDialog]]
* when the user presses a button with IDC 0, 1 or 2
* [[closeDisplay]]


==== Exit Codes ====
Exit codes are a way to determine in what way a display was closed. The [[User_Interface_Event_Handlers#onUnload|onUnload UIEH]] has the exit code as one of its parameters. This way you can handle different user decisions, eg. save a value if the user confirms it or discard changes when the user pressed a cancel button. Macros for the different exit codes can be found in {{hl|\a3\ui_f\hpp\defineResincl.inc}}:
<syntaxhighlight lang="cpp">
// Predefined controls
#define IDC_OK 1
#define IDC_CANCEL 2
#define IDC_AUTOCANCEL 3
#define IDC_ABORT 4
#define IDC_RESTART 5
#define IDC_USER_BUTTON 6
#define IDC_EXIT_TO_MAIN 7
</syntaxhighlight>
{| class="wikitable"
|-
! Exit Code !! Macro !! Comment
|-
| 1 || IDC_OK || Dialog was closed with a positive outcome
|-
| 2 || IDC_CANCEL || Dialog was closed with a negative outcome
|-
| 3 || IDC_AUTOCANCEL || ?
|-
| 4 || IDC_ABORT || When used on the mission display (Display #46) it simulates "Save and Exit" button from escape menu
|-
| 5 || IDC_RESTART || ?
|-
| 6 || IDC_USER_BUTTON || ?
|-
| 7 || IDC_EXIT_TO_MAIN || ?
|}


== HUDs ==
== HUDs ==


HUDs are define in the class RscTitles, unlike displays or dialogs which are root classes in the config file. Additionally, their properties are different.
HUDs are defined in the class RscTitles, unlike displays or dialogs which are root classes in the config file. Additionally, their properties are different.


=== Properties ===
=== Properties ===
Line 142: Line 179:
|-
|-
| '''idd'''
| '''idd'''
| [[Integer]]
| Integer
| The unique ID number of this HUD. Used with [[findDisplay]] to find the display. Can be -1 if no access is required from within a script.
| The unique ID number of this HUD. Used with [[findDisplay]] to find the display. Can be -1 if no access is required from within a script.
|-
|-
| '''fadeIn'''
| '''fadeIn'''
| [[Integer]]
| Integer
|  Duration of fade in effect when opening in seconds.
|  Duration of fade in effect when opening in seconds.
|-
|-
| '''fadeOut'''
| '''fadeOut'''
| [[Integer]]
| Integer
| Duration of fade out effect when closing in seconds.
| Duration of fade out effect when closing in seconds.
|-
|-
| '''duration'''
| '''duration'''
| [[Integer]]
| Integer
| Duration the HUD is displayed after opening in seconds. Use a very large number to have it always open.
| Duration the HUD is displayed after opening in seconds. Use a very large number to have it always open.
|-
|-
Line 170: Line 207:
|}
|}


* '''Example Config:'''
=== Example Config ===
 
<spoiler text="Show Example Config">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#include "\a3\ui_f\hpp\definecommongrids.inc"
#include "\a3\ui_f\hpp\definecommongrids.inc"
class RscTitles
class RscTitles
{
{
Line 214: Line 254:
};
};
</syntaxhighlight>
</syntaxhighlight>
</spoiler>




Line 233: Line 274:
|-
|-
| '''idc'''
| '''idc'''
| [[Integer]]
| Integer
| The unique ID number of this control. Can be -1 if you don't require access to the control itself from within a script
| The unique ID number of this control. Can be -1 if you don't require access to the control itself from within a script.<br>
Special (button) IDCs (according to \a3\ui_f\hpp\defineResincl.inc):
* 1: OK (closes display when clicked upon, raises exit code 1 in the [[User_Interface_Event_Handlers#onUnload|onUnload UIEH]])
* 2: Cancel (closes display when clicked upon, raises exit code 2 in the [[User_Interface_Event_Handlers#onUnload|onUnload UIEH]])
* 3: Auto cancel
* 4: Abort
* 5: Restart
* 6: User button
* 7: Exit to main
While the purposes of idcs 3 to 7 remain unknown, it is advisable to give all of your controls larger numbers, eg. 100.
|-
|-
| '''moving'''
| '''moving'''
| [[Boolean]]
| [[Boolean]]
| Whether the dialog will be moved if this control is dragged (may require "movingEnable" to be 1 in the dialog. In Arma 3 works regardless). Another way of allowing moving of the dialog is to have control of style ST_TITLE_BAR
| Whether the dialog will be moved if this control is dragged (may require "movingEnable" to be 1 in the dialog. In {{arma3}} works regardless). Another way of allowing moving of the dialog is to have control of style ST_TITLE_BAR
|-
|-
| '''type'''
| '''type'''
| [[Integer]]
| Integer
| See [[#Control Types|Control Types]]
| See [[#Control Types|Control Types]]
|-
|-
| '''style'''
| '''style'''
| [[Integer]]
| Integer
| See [[#Control Styles|Control Styles]]. {{Inline code|style <nowiki>=</nowiki> "0x400+0x02+0x10";}}
| See [[#Control Styles|Control Styles]]. <syntaxhighlight lang="cpp" inline>style = "0x400+0x02+0x10";</syntaxhighlight>
|-
|-
| '''x/y/w/h'''
| '''x/y/w/h'''
Line 254: Line 304:
| '''sizeEx'''
| '''sizeEx'''
| [[Number]]
| [[Number]]
| The font size of text in fractions of screen size. Behaves similar to '''h''' property. For some controls it's named '''size'''.
| The font size of text in fractions of screen size. Behaves similar to '''h''' property. For some controls it is named '''size'''.
|-
|-
| '''font'''
| '''font'''
Line 273: Line 323:
|-
|-
| '''shadow'''
| '''shadow'''
| [[Integer]]
| Integer
| Can be applied to most controls (0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke).
| Can be applied to most controls (0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke).
|-
|-
| '''tooltip'''
| '''tooltip'''
| [[String]]
| [[String]]
| Text to display in a tooltip when control is moused over. A tooltip can be added to any control type except CT_STATIC and CT_STRUCTURED_TEXT. Note: As of {{GVI|a3|1.48}}, most controls now support tooltips. A linebreak can be created by adding '''\n'''.
| Text to display in a tooltip when control is moused over. A tooltip can be added to any control type except CT_STATIC and CT_STRUCTURED_TEXT. Note: As of {{GVI| arma3|1.48}}, most controls now support tooltips. A linebreak can be created by adding '''\n'''.
|-
|-
| '''tooltipColorShade'''
| '''tooltipColorShade'''
Line 291: Line 341:
| [[Array]]
| [[Array]]
| Tooltip border color
| Tooltip border color
<!--
|-
|-
| '''autocomplete'''
| '''autocomplete'''
| [[String]]
| [[String]]
| Option for entry fields (e.g. RscEdit) to activate autocompletion. For known script commands and functions use autocomplete = "scripting".
| (where applicable) Option for entry fields (e.g. RscEdit) to activate autocompletion. For known script commands and functions use autocomplete = "scripting".
|-
|-
| '''url'''
| '''url'''
| [[String]]
| [[String]]
| URL which will be opened when clicking on the control. Used on e.g. a button control. Does not utilize the Steam Overlay browser if enabled, opens the link in the default browser set by the OS.
| (where applicable) URL which will be opened when clicking on the control. Used on e.g. a button control. Does not utilize the Steam Overlay browser if enabled by default, opens the link in the default browser set by the OS.
-->
|-
| '''overlayMode'''
| [[Number]]
| {{GVI|arma3|2.10}} (where applicable) 0 - opens URL in default browser; 1 - opens URL in Steam overlay id enabled, otherwise in default browser; 2 - opens URL in Steam overlay, shows error message box (with button to use default browser) if Steam overlay is disabled.
|}
|}
A property to enable or disable a control does not exist (because of implementation issues). However, there is a simple workaround based on the [[User_Interface_Event_Handlers#onLoad|onLoad]] UI Event Handler that can be used to disable a control in the config:
<syntaxhighlight lang="cpp">onLoad = "(_this # 0) ctrlEnable false;";</syntaxhighlight>


=== Attributes Class ===
=== Attributes Class ===


{| class="wikitable" width="25%"
{| class="wikitable" width="70%"
|-
|-
! Name
! Name
Line 317: Line 372:
| '''color'''
| '''color'''
| HTML color
| HTML color
| [https://html-color-codes.info/ HTML Color Codes]
| {{Link|https://html-color-codes.info/|HTML Color Codes}}
|-
|-
| '''align'''
| '''align'''
Line 324: Line 379:
|-
|-
| '''shadow'''
| '''shadow'''
| [[Integer]]
| Integer
| 0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke
| 0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke
|}
|}
Line 330: Line 385:
=== AttributesImage Class ===
=== AttributesImage Class ===


{| class="wikitable" width="25%"
{| class="wikitable" width="70%"
|-
|-
! Name
! Name
Line 342: Line 397:
| '''color'''
| '''color'''
| HTML color
| HTML color
| [https://html-color-codes.info/ HTML Color Codes]
| {{Link|https://html-color-codes.info/|HTML Color Codes}}
|-
|-
| '''align'''
| '''align'''
Line 350: Line 405:
|}<br clear="all">
|}<br clear="all">


*'''Example Config:'''
=== Example Config ===
 
<spoiler text="Show Example Config">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#include "\a3\ui_f\hpp\definecommongrids.inc"
#include "\a3\ui_f\hpp\definecommongrids.inc"
class RscButton
class RscButton
{
{
    deletable = 0;
deletable = 0;
    fade = 0;
fade = 0;
    access = 0;
access = 0;
    type = 1;
type = 1;
    text = "";
text = "";
    colorText[] = {1,1,1,1};
colorText[] = {1,1,1,1};
    colorDisabled[] = {1,1,1,0.25};
colorDisabled[] = {1,1,1,0.25};
    colorBackground[] = {0,0,0,0.5};
colorBackground[] = {0,0,0,0.5};
    colorBackgroundDisabled[] = {0,0,0,0.5};
colorBackgroundDisabled[] = {0,0,0,0.5};
    colorBackgroundActive[] = {0,0,0,1};
colorBackgroundActive[] = {0,0,0,1};
    colorFocused[] = {0,0,0,1};
colorFocused[] = {0,0,0,1};
    colorShadow[] = {0,0,0,0};
colorShadow[] = {0,0,0,0};
    colorBorder[] = {0,0,0,1};
colorBorder[] = {0,0,0,1};
    soundEnter[] = {"\A3\ui_f\data\sound\RscButton\soundEnter",0.09,1};
soundEnter[] = {"\A3\ui_f\data\sound\RscButton\soundEnter",0.09,1};
    soundPush[] = {"\A3\ui_f\data\sound\RscButton\soundPush",0.09,1};
soundPush[] = {"\A3\ui_f\data\sound\RscButton\soundPush",0.09,1};
    soundClick[] = {"\A3\ui_f\data\sound\RscButton\soundClick",0.09,1};
soundClick[] = {"\A3\ui_f\data\sound\RscButton\soundClick",0.09,1};
    soundEscape[] = {"\A3\ui_f\data\sound\RscButton\soundEscape",0.09,1};
soundEscape[] = {"\A3\ui_f\data\sound\RscButton\soundEscape",0.09,1};
    idc = -1;
idc = -1;
    style = 2;
style = 2;
    x = 0;
x = 0;
    y = 0;
y = 0;
    w = 0.095589;
w = 0.095589;
    h = 0.039216;
h = 0.039216;
    shadow = 2;
shadow = 2;
    font = "RobotoCondensed";
font = "RobotoCondensed";
    sizeEx = "GUI_GRID_HAbs / 25";
sizeEx = "GUI_GRID_HAbs / 25";
    url = "";
url = "";
    offsetX = 0;
offsetX = 0;
    offsetY = 0;
offsetY = 0;
    offsetPressedX = 0;
offsetPressedX = 0;
    offsetPressedY = 0;
offsetPressedY = 0;
    borderSize = 0;
borderSize = 0;
};
};
</syntaxhighlight>
</syntaxhighlight>
</spoiler>


=== Control Types ===
 
== Control Types ==


The type property of controls defines what type of control they are. For example an edit box has the type 2.
The type property of controls defines what type of control they are. For example an edit box has the type 2.
There is an ingame dialog with examples of how the control types look and act like:
There is an ingame dialog with examples of how the control types look and act like:
<code>[[createDialog]] "RscTestControlTypes";</code>
<sqf>createDialog "RscTestControlTypes";</sqf>
 
{{Navbox/CT}}
<!---
{| class="wikitable sortable" Style ="Width: 100%"
{| class="wikitable sortable" Style ="Width: 100%"
! Define !! Decimal !! Hexadecimal !! Remark !! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
| [[CT_STATIC]] || 0 || 0x00 || || [[CT_XLISTBOX]] || 42 || 0x2A ||
| [[CT_STATIC]] || 0 || 0x00 ||  
|-
|-
| [[CT_BUTTON]] || 1 || 0x01 || || [[CT_XSLIDER]] || 43 || 0x2B ||
| [[CT_BUTTON]] || 1 || 0x01 ||
|-
|-
| [[CT_EDIT]] || 2 || 0x02 || || [[CT_XCOMBO]] || 44 || 0x2C ||
| [[CT_EDIT]] || 2 || 0x02 ||
|-
|-
| [[CT_SLIDER]] || 3 || 0x03 || || [[CT_ANIMATED_TEXTURE]] || 45 || 0x2D ||
| [[CT_SLIDER]] || 3 || 0x03 ||
|-
|-
| [[CT_COMBO]] || 4 || 0x04 || || [[CT_MENU]] || 46 || 0x2E || Arma 3 (EDEN)
| [[CT_COMBO]] || 4 || 0x04 ||
|-
|-
| [[CT_LISTBOX]] || 5 || 0x05 || || [[CT_MENU_STRIP]] || 47 || 0x2F || Arma 3 (EDEN)
| [[CT_LISTBOX]] || 5 || 0x05 ||
|-
|-
| [[CT_TOOLBOX]] || 6 || 0x06 || || CT_CHECKBOX || 77 || 0x4D || Arma 3
| [[CT_TOOLBOX]] || 6 || 0x06 ||
|-
|-
| [[CT_CHECKBOXES]] || 7 || 0x07 || || [[CT_OBJECT]] || 80 || 0x50 ||
| [[CT_CHECKBOXES]] || 7 || 0x07 ||
|-
|-
| [[CT_PROGRESS]] || 8 || 0x08 || || [[CT_OBJECT_ZOOM]] || 81 || 0x51 ||
| [[CT_PROGRESS]] || 8 || 0x08 ||  
|-
|-
| [[CT_HTML]] || 9 || 0x09 || || [[CT_OBJECT_CONTAINER]] || 82 || 0x52 ||
| [[CT_HTML]] || 9 || 0x09 ||
|-
|-
| CT_STATIC_SKEW || 10 || 0x0A || || CT_OBJECT_CONT_ANIM || 83 || 0x53 ||
| [[CT_STATIC_SKEW]] || 10 || 0x0A ||
|-
|-
| [[CT_ACTIVETEXT#CT_ACTIVETEXT=11|CT_ACTIVETEXT]] || 11|| 0x0B|| || [[CT_LINEBREAK]] || 98 || 0x62 ||
| [[CT_ACTIVETEXT]] || 11|| 0x0B||
|-
|-
| [[CT_TREE]] || 12 || 0x0C || || [[CT_USER]] || 99 || 0x63 ||
| [[CT_TREE]] || 12 || 0x0C ||
|-
|-
| [[CT_STRUCTURED_TEXT]] || 13 || 0x0D || || [[CT_MAP]] || 100 || 0x64 ||
| [[CT_STRUCTURED_TEXT]] || 13 || 0x0D ||
|-
|-
| [[CT_CONTEXT_MENU]] || 14 || 0x0E || || [[CT_MAP_MAIN]] || 101 || 0x65 ||
| [[CT_CONTEXT_MENU]] || 14 || 0x0E ||
|-
|-
| [[CT_CONTROLS_GROUP]] || 15 || 0x0F || || [[CT_LISTNBOX]] || 102 || 0x66 ||
| [[CT_CONTROLS_GROUP]] || 15 || 0x0F ||
|-
|-
| [[CT_SHORTCUTBUTTON]] || 16 || 0x10 || || CT_ITEMSLOT || 103 || 0x67 ||
| [[CT_SHORTCUTBUTTON]] || 16 || 0x10 ||
|-
|-
| CT_HITZONES || 17 || 0x11 || || CT_LISTNBOX_CHECKABLE || 104 || 0x68 ||
| [[CT_HITZONES]] || 17 || 0x11 ||
|-
|-
| CT_VEHICLETOGGLES || 18 || 0x12 || || CT_VEHICLE_DIRECTION || 105 || 0x69 ||
| [[CT_VEHICLETOGGLES]] || 18 || 0x12 ||  
|-
|-
| [[CT_CONTROLS_TABLE]] || 19 || 0x13 ||
| [[CT_CONTROLS_TABLE]] || 19 || 0x13 ||
Line 441: Line 502:
| [[CT_XKEYDESC]] || 40 || 0x28 ||
| [[CT_XKEYDESC]] || 40 || 0x28 ||
|-
|-
| CT_XBUTTON || 41 || 0x29 ||
| [[CT_XBUTTON]] || 41 || 0x29 ||
|-
| [[CT_XLISTBOX]] || 42 || 0x2A ||
|-
| [[CT_XSLIDER]] || 43 || 0x2B ||
|-
| [[CT_XCOMBO]] || 44 || 0x2C ||
|-
| [[CT_ANIMATED_TEXTURE]] || 45 || 0x2D ||
|-
| [[CT_MENU]] || 46 || 0x2E || {{arma3}} (EDEN)
|-
| [[CT_MENU_STRIP]] || 47 || 0x2F || {{arma3}} (EDEN)
|-
| [[CT_CHECKBOX]] || 77 || 0x4D || {{arma3}}
|-
| [[CT_OBJECT]] || 80 || 0x50 ||
|-
| [[CT_OBJECT_ZOOM]] || 81 || 0x51 ||
|-
| [[CT_OBJECT_CONTAINER]] || 82 || 0x52 ||
|-
| [[CT_OBJECT_CONT_ANIM]] || 83 || 0x53 ||
|-
| [[CT_LINEBREAK]] || 98 || 0x62 ||
|-
| [[CT_USER]] || 99 || 0x63 ||
|-
| [[CT_MAP]] || 100 || 0x64 ||
|-
| [[CT_MAP_MAIN]] || 101 || 0x65 ||
|-
| [[CT_LISTNBOX]] || 102 || 0x66 ||
|-
| [[CT_ITEMSLOT]] || 103 || 0x67 ||
|-
| [[CT_LISTNBOX_CHECKABLE]] || 104 || 0x68 ||
|-
| [[CT_VEHICLE_DIRECTION]] || 105 || 0x69 ||
|}
|}
--->


* '''Control Types Defines:'''
=== Control Type Definitions ===
''All defines can be retrieved by executing''
All definitions can be retrieved with <sqf inline>"Default" call BIS_fnc_exportGUIBaseClasses;</sqf>.<br>
<code>"Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<spoiler text="Show Control Type Definitions">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define CT_STATIC   0
#define CT_STATIC   0
Line 490: Line 590:
#define CT_VEHICLE_DIRECTION 105
#define CT_VEHICLE_DIRECTION 105
</syntaxhighlight>
</syntaxhighlight>
</spoiler>


=== Control Styles ===
== Control Styles ==


To further customize controls there are several different styles for each control type available.<br>
To further customize controls there are several different styles for each control type available.<br>


To get an idea of how the styles look like you can create the following dialog:
To get an idea of how the styles look like you can create the following dialog:
<code>[[createDialog]] "RscTestControlStyles";</code>
<sqf>createDialog "RscTestControlStyles";</sqf>


{{Important | Note that drawing of vertical text is not supported and any attempt to use <tt>ST_UP</tt>, <tt>ST_DOWN</tt>, <tt>ST_VCENTER</tt> is likely to result in the following ''.rpt'' spam:<br><tt>Obsolete, sizeH and sizeW calculation missing</tt><br>In addition, <tt>ST_UP</tt>, <tt>ST_DOWN</tt>, <tt>ST_VCENTER</tt> are stand alone styles and should not be mixed with any other styles}}
{{Feature | important | Note that drawing of vertical text is not supported and any attempt to use {{hl|ST_UP}}, {{hl|ST_DOWN}}, {{hl|ST_VCENTER}} is likely to result in the following ''.rpt'' spam:<br>{{hl|Obsolete, sizeH and sizeW calculation missing}}<br>In addition, {{hl|ST_UP}}, {{hl|ST_DOWN}}, {{hl|ST_VCENTER}} are stand alone styles and should not be mixed with any other styles}}


{| class="wikitable" Style="Width: 100%"
{| class="wikitable" Style="Width: 100%"
Line 531: Line 632:
| ST_GROUP_BOX2 || 112 || 0x70 || Plain single line box, same as ST_SINGLE, only with a slight border similar to ST_MULTI box border
| ST_GROUP_BOX2 || 112 || 0x70 || Plain single line box, same as ST_SINGLE, only with a slight border similar to ST_MULTI box border
|-
|-
| ST_HUD_BACKGROUND || 128 || 0x80 || Sets special texture for corners. It was used for rounded corners in OFP, Arma and Arma 2. In Arma 3, square corners are used everywhere, so the texture is adapted to the unified style, but the technology is not removed. In Arma 3 it looks the same as normal ST_SINGLE. Corner textures are defined in <tt>[[configFile]] >> "CfgInGameUI" >> "imageCornerElement"</tt> (can be set only globally for the whole game, not per control)
| ST_HUD_BACKGROUND || 128 || 0x80 || Sets special texture for corners. It was used for rounded corners in {{Name|ofp|short}}, {{Name|arma1|short}} and {{arma2}}. In {{arma3}}, square corners are used everywhere, so the texture is adapted to the unified style, but the technology is not removed. In {{arma3}} it looks the same as normal ST_SINGLE. Corner textures are defined in <sqf inline>configFile >> "CfgInGameUI" >> "imageCornerElement"</sqf> (can be set only globally for the whole game, not per control)
|-
|-
| ST_TILE_PICTURE || 144 || 0x90 || The picture is tiled according to ''tileH'' and ''tileW'' values. To force tiled picture to keep aspect ratio of original image, add 2048 (+ ST_KEEP_ASPECT_RATIO) to the style.
| ST_TILE_PICTURE || 144 || 0x90 || The picture is tiled according to ''tileH'' and ''tileW'' values. To force tiled picture to keep aspect ratio of original image, add 2048 (+ ST_KEEP_ASPECT_RATIO) to the style.
Line 554: Line 655:
|}
|}


==== Control Specific Styles ====
=== Control Specific Styles ===
'''[[CT_LISTBOX]] Specific Styles'''
==== [[CT_LISTBOX]] Specific Styles ====
{| class="wikitable"
{| class="wikitable" width="70%"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
Line 564: Line 665:
|}
|}


'''[[CT_PROGRESS]] Specific Styles'''
==== [[CT_PROGRESS]] Specific Styles ====
{| class="wikitable" width="20%"
{| class="wikitable" width="70%"
! Define !! Decimal !! Hexadecimal
! Define !! Decimal !! Hexadecimal
|-
|-
Line 573: Line 674:
|}
|}


'''[[CT_SLIDER]] Specific Styles'''
==== [[CT_SLIDER]] Specific Styles ====
{| class="wikitable" width="20%"
{| class="wikitable" width="70%"
|-
|-
! Define !! Decimal !! Hexadecimal
! Define !! Decimal !! Hexadecimal
Line 585: Line 686:
|}
|}


'''[[CT_TREE]] Specific Styles'''
==== [[CT_TREE]] Specific Styles ====
{| class="wikitable" width="20%"
{| class="wikitable" width="70%"
! Define !! Decimal !! Hexadecimal
! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
| TR_SHOWROOT || 1 || 0x01
| TR_SHOWROOT || 1 || 0x01 || When this style is applied, all entries even with path [] can be collapsed. Use unkown.
|-
|-
| TR_AUTOCOLLAPSE || 2 || 0x02
| TR_AUTOCOLLAPSE || 2 || 0x02 || Use unknown
|}
|}


* '''Control Styles Definitions:'''
=== Control Style Definitions ===
''All defines can be retrieved by executing''
All definitions can be retrieved with <sqf inline>"Default" call BIS_fnc_exportGUIBaseClasses;</sqf>.<br>
<code>"Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<spoiler text="Show Control Style Definitions">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define ST_LEFT 0x00
#define ST_LEFT 0x00
Line 633: Line 734:
#define TR_AUTOCOLLAPSE 2
#define TR_AUTOCOLLAPSE 2
</syntaxhighlight>
</syntaxhighlight>
</spoiler>


=== Positioning ===
== Positioning ==
 
A detailed description of how you can achieve proper GUI placement can be found on the '''[[Arma 3 GUI Coordinates]]''' page.


A detailed description of how you can achieve proper GUI placement can be found on the [[Arma 3: GUI Coordinates]] page.


== Inheritance ==
== Inheritance ==


Using inheritance can reduce your dialog class definitions significantly by standardising common attributes in base classes and just changing unique attributes in derived classes. There is no need to redeclare all attributes for each class definition.
Using inheritance can reduce your dialog class definitions significantly by standardising common attributes in base classes and just changing unique attributes in derived classes. There is no need to re-declare all attributes for every class definition.


{{Informative|Using inheritance can also make your GUI config hard to read for others.}}
{{Feature|informative|Using inheritance can make your GUI config hard to read for others.}}
 
* '''Example Config:'''
<syntaxhighlight lang="cpp">
class RscText // Base definition used for inheritance
{
type = CT_STATIC;
idc = -1;
style = ST_LEFT;
colorBackground[] = {0, 0, 0, 1};
colorText[] = {1, 1, 1, 1};
font = FontM;
sizeEx = 0.04;
h = 0.04;
text = "";
};
 
class My_BlueText : RscText // My_BlueText inherits all attributes from RscText defined above, thus only x,w & colorText need to be changed
{
colorText[] = {0, 0, 1, 1};
x = 0.1;
w = 0.4;
};
 
class My_Dialog
{
//…
 
controls[] = {
My_Text_1,
My_Text_2
};
 
class My_Text_1 : My_BlueText // My_Text_1 inherits all attribute from My_BlueText, therefore only text & y attributes have to be changed
{
text = "Line 1";
y = 0.2;
};
 
class My_Text_2 : My_BlueText
{
text = "Line 2";
y = 0.25;
};
};
</syntaxhighlight>


View the [[Class Inheritance|dedicated inheritance page]] for more information.


== Preprocessor instructions ==
== Preprocessor instructions ==


Note that you can also add your own [[PreProcessor_Commands|preprocessor instructions]] for commonly used data, eg. for colors, to save yourself the hassle of writing it in several different places and then adapt each of them if you want to change them afterwards (especially if class inheritance isn't applicable). Also it can make your code look more readable sometimes.
Note that you can also add your own [[PreProcessor_Commands|preprocessor instructions]] for commonly used data, eg. for colors, to save yourself the hassle of writing it in several different places and then adapt each of them if you want to change them afterwards (especially if class inheritance is not applicable). It can also make your code more readable sometimes.


* '''Example Config:'''
=== Example Config ===
<spoiler text="Show Example Config">
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define COLOR_LIGHTBROWN { 0.776, 0.749, 0.658, 1 }
#define COLOR_HALF_BLACK { 0, 0, 0, 0.5 }
#define COLOR_HALF_BLACK { 0, 0, 0, 0.5 }
#define COLOR_TRANSPARENT { 0, 0, 0, 0 }


class MyDialog
class MyDialog
Line 707: Line 763:
objects[] = {};
objects[] = {};
controlsBackground[] = { MyDialogBackground };
controlsBackground[] = { MyDialogBackground };
controls[] = { MyDialogText };


class MyDialogBackground : RscText
class MyDialogBackground : RscText
Line 714: Line 769:
x = 0.7;  y = 0.1;
x = 0.7;  y = 0.1;
w = 0.25; h = 0.15;
w = 0.25; h = 0.15;
};
class MyDialogText : RscText
{
style = ST_MULTI;
colorBackground[] = COLOR_TRANSPARENT;
colorText[] = COLOR_LIGHTBROWN;
text = "No power in the 'Verse can stop me.";
lineSpacing = 1;
x = 0.71; y = 0.11;
w = 0.23; h = 0.13;
};
};
};
};
</syntaxhighlight>
</syntaxhighlight>
</spoiler>


=== Useful includes ===
=== Useful includes ===
Line 736: Line 781:
! Include Code !! Description / Content
! Include Code !! Description / Content
|-
|-
| <syntaxhighlight lang="cpp">#include "\a3\3DEN\UI\macros.inc"</syntaxhighlight> || Defines for [[Eden Editor]] like colors, text sizes custom pixel grid macros.
| <syntaxhighlight lang="cpp">#include "\a3\3DEN\UI\macros.inc"</syntaxhighlight> || Defines for [[:Category:Eden Editor|Eden Editor]] like colors, text sizes custom pixel grid macros.
|-
|-
| <syntaxhighlight lang="cpp">#include "\a3\3DEN\UI\macroexecs.inc"</syntaxhighlight> || Defines for [[Eden Editor]] to calculate text sizes etc.
| <syntaxhighlight lang="cpp">#include "\a3\3DEN\UI\macroexecs.inc"</syntaxhighlight> || Defines for [[:Category:Eden Editor|Eden Editor]] to calculate text sizes etc.
|-
|-
| <syntaxhighlight lang="cpp">#include "\a3\ui_f\hpp\definedikcodes.inc"</syntaxhighlight> || Useful when working with custom shortcuts. Contains defines for key codes.
| <syntaxhighlight lang="cpp">#include "\a3\ui_f\hpp\definedikcodes.inc"</syntaxhighlight> || Useful when working with custom shortcuts. Contains defines for key codes.
Line 749: Line 794:
|}
|}


== User Interface Event Handlers ==


== Eventhandlers ==
User Interface Event Handlers are a key component of any {{arma3}} GUI. See [[User Interface Event Handlers]].
 
To give the dialog its functionality, one will have to use user interface eventhandlers (UIEH). This way you can assign actions to buttons, listboxes, etc.
* [[User Interface Event Handlers]]




== Scripting ==
== Scripting ==


There are several commands to influence your dialog after its initial creation. These command are listed on the following pages:
There are several functions and commands to edit your dialog after its creation. These functions and commands can be found here:
* [[:Category:Function_Group:_GUI|GUI Functions]]
* [[:Category:Command Group: GUI Control|GUI Commands]]
* [[:Category:Command Group: GUI Control|GUI Commands]]
* [[:Category:Function_Group:_GUI|GUI Functions]]




Line 778: Line 821:


It is sometimes a good idea so see how others created their GUIs. Here is a list of a few resources:
It is sometimes a good idea so see how others created their GUIs. Here is a list of a few resources:
* [https://github.com/7erra/-Terra-s-Editing-Extensions/tree/master/TER_editing/gui Terra's Editing Extentions]
* {{Link|https://github.com/7erra/-Terra-s-Editing-Extensions/tree/master/TER_editing/gui|Terra's Editing Extensions}}
* [https://github.com/ConnorAU/A3ExtendedFunctionViewer A3ExtendedFunctionViewer]
* {{Link|https://github.com/ConnorAU/A3ExtendedFunctionViewer|A3ExtendedFunctionViewer}}
* [https://github.com/ConnorAU/A3UserInputMenus A3UserInputMenus]
* {{Link|https://github.com/ConnorAU/A3UserInputMenus|A3UserInputMenus}}
* [https://github.com/ConnorAU/A3ColorPicker A3ColorPicker]
* {{Link|https://github.com/ConnorAU/A3ColorPicker|A3ColorPicker}}
* [https://github.com/R3voA3/3den-Enhanced/tree/master/3denEnhanced/GUI 3den Enhanced]
* {{Link|https://github.com/R3voA3/3den-Enhanced/tree/master/3denEnhanced/GUI|3den Enhanced}}
 


== Tips for creating GUIs ==
== Tips for creating GUIs ==
 
<!-- What is this? -->
* Functionality
* Functionality
* Layout
* Layout
Line 793: Line 835:
* Customizability
* Customizability


{{Stub}}
{{Wiki|stub}}




== Tutorials ==
== Tutorials ==


{{Stub}}
* [[GUI Tutorial]]
{{Wiki|stub}}




== See Also ==
== See Also ==


* [[Arma 3 IDD List]]
* [[Arma 3: IDD List]]
* [[Arma 3 User Interface Editor]]
* [[Arma 3: User Interface Editor]]
* [[Arma 3: GUI Coordinates]]
* [[:Category:Function Group:_GUI|GUI Functions]]
* [[:Category:Command Group: GUI Control|GUI Commands]]
* [[User Interface Event Handlers]]
* [[Class Inheritance]]
* [[PreProcessor Commands]]




[[Category: Dialogs|GUI Configuration]]
[[Category:GUI Topics|GUI Configuration]]

Latest revision as of 10:31, 19 April 2024

Dialogs are one way to provide custom graphical user interface in your missions and allow interaction with the player as well as they are able to run code. They are defined as classes in the missionConfigFile (description.ext), campaignConfigFile (Campaign Description.ext) or configFile (config.cpp).


Terminology

GUI
Graphical User Interface - Allows user interaction with the software through graphical controls like buttons, lists and so on.
UI
User Interface - Allows the user to interact with the software through a console application.
IGUI
Integrated Graphical User Interface - A term usually encountered when talking about vanilla menus in Arma 3.


User Interface Types

Dialog

  • Can be created upon an existing display. Parent display will be hidden.

Display

  • Can be created upon an existing display. Parent display will be hidden.
  • Player movement is not blocked by display, if it has not been blocked by its parent display already.
Generally speaking, dialogs and displays are identical. They are only differentiated by the way they are created (createDisplay, createDialog).

HUD

Some of the commands have different effects. Please check the command's biki page for detailed information.


Display and Dialog

Displays and dialogs are defined in the config file. They are usually used to simplify user interactions, through controls like buttons, list boxes and so on.

Properties

Name Type Remark
idd Integer The unique ID number of this dialog. Used with findDisplay to find the display. Can be -1 if no access is required from within a script.
access Integer
  • 0 - ReadAndWrite - this is the default case where properties can still be added or overridden.
  • 1 - ReadAndCreate - this only allows creating new properties.
  • 2 - ReadOnly - this does not allow to do anything in deriving classes.
  • 3 - ReadOnlyVerified - this does not allow to do anything either in deriving classes, and a CRC check will be performed.
movingEnable Boolean Specifies whether the dialog can be moved or not (if enabled one of the dialogs controls should have the moving property set to 1 so it becomes the "handle" the dialog can be moved with). Doesn't seem to matter in Arma 3
enableSimulation Boolean Specifies whether the game continues while the dialog is shown or not.
onLoad String Expression executed when the dialog is opened. See User Interface Event Handlers
onUnload String Expression executed when the dialog is closed. See User Interface Event Handlers
controlsBackground Array or class Contains class names of all background controls associated to this dialog.

The sequence in which the controls are listed will decide their z-index (i.e. the last ones will on top of the first ones).

controls Array or class Contains class names of all foreground controls associated to this dialog.
objects Array or class List of all DialogControls-Objects type controls

Example Config

class DefaultDialog
{
	idd = -1;
	access = 0;
	movingEnable = true;
	onLoad = "hint str _this";
	onUnload  = "hint str _this";
	enableSimulation = false;
	class ControlsBackground
	{
		//Background controls
	};
	class Controls
	{
		//Controls
	};
	class Objects
	{
		//Objects
	};
};

Opening a display or dialog

There are two ways of creating a display or dialog. One can either use createDialog or createDisplay command.

Closing a display or dialog

There are several ways to close a dialog:

Exit Codes

Exit codes are a way to determine in what way a display was closed. The onUnload UIEH has the exit code as one of its parameters. This way you can handle different user decisions, eg. save a value if the user confirms it or discard changes when the user pressed a cancel button. Macros for the different exit codes can be found in \a3\ui_f\hpp\defineResincl.inc:

// Predefined controls
#define IDC_OK				1
#define IDC_CANCEL			2
#define IDC_AUTOCANCEL		3
#define IDC_ABORT			4
#define IDC_RESTART			5
#define IDC_USER_BUTTON		6
#define IDC_EXIT_TO_MAIN	7
Exit Code Macro Comment
1 IDC_OK Dialog was closed with a positive outcome
2 IDC_CANCEL Dialog was closed with a negative outcome
3 IDC_AUTOCANCEL ?
4 IDC_ABORT When used on the mission display (Display #46) it simulates "Save and Exit" button from escape menu
5 IDC_RESTART ?
6 IDC_USER_BUTTON ?
7 IDC_EXIT_TO_MAIN ?

HUDs

HUDs are defined in the class RscTitles, unlike displays or dialogs which are root classes in the config file. Additionally, their properties are different.

Properties

Name Type Remark
idd Integer The unique ID number of this HUD. Used with findDisplay to find the display. Can be -1 if no access is required from within a script.
fadeIn Integer Duration of fade in effect when opening in seconds.
fadeOut Integer Duration of fade out effect when closing in seconds.
duration Integer Duration the HUD is displayed after opening in seconds. Use a very large number to have it always open.
onLoad String Expression executed when the dialog is opened. See User Interface Event Handlers
onUnload String Expression executed when the dialog is closed. See User Interface Event Handlers
controls Array Contains class names of all foreground controls associated to this dialog.

Example Config

#include "\a3\ui_f\hpp\definecommongrids.inc"

class RscTitles
{
	class RscInfoText
	{
		idd = 3100;
		fadein = 0;
		fadeout = 0;
		duration = 1e+011;
		onLoad = "uinamespace setVariable ['BIS_InfoText',_this select 0]";
		onUnLoad = "uinamespace setVariable ['BIS_InfoText', nil]";
		class Controls
		{
			class InfoText
			{
				idc = 3101;
				style = "0x01 + 0x10 + 0x200 + 0x100";
				font = "RobotoCondensedBold";
				x = "(profileNamespace getVariable [""IGUI_GRID_MISSION_X"", (safezoneX + safezoneW - 21 * (GUI_GRID_WAbs / 40))])";
				y = "(profileNamespace getVariable [""IGUI_GRID_MISSION_Y"", (safezoneY + safezoneH - 10.5 * (GUI_GRID_HAbs / 25))])";
				w = "20 * (GUI_GRID_WAbs / 40)";
				h = "5 * ((GUI_GRID_WAbs / 1.2) / 25)";
				colorText[] = {1,1,1,1};
				colorBackground[] = {0,0,0,0};
				text = "";
				lineSpacing = 1;
				sizeEx = 0.045;
				fixedWidth = 1;
				deletable = 0;
				fade = 0;
				access = 0;
				type = 0;
				shadow = 1;
				colorShadow[] = {0,0,0,0.5};
				tooltipColorText[] = {1,1,1,1};
				tooltipColorBox[] = {1,1,1,1};
				tooltipColorShade[] = {0,0,0,0.65};
			};
		};
	};
};
↑ Back to spoiler's top


Controls

Controls are used to allow the player to interact with the GUI. Controls range from simple rectangles to 3D objects. Like dialogs, displays and HUDs, controls can have a unique ID to access them from within scripts. The classname of controls have to be unique.

What properties a control needs is defined by its type property. However most controls share a set of properties described in the following sections. For control specific properties visit the corresponding pages.

Common Properties

Name Type Remark
idc Integer The unique ID number of this control. Can be -1 if you don't require access to the control itself from within a script.

Special (button) IDCs (according to \a3\ui_f\hpp\defineResincl.inc):

  • 1: OK (closes display when clicked upon, raises exit code 1 in the onUnload UIEH)
  • 2: Cancel (closes display when clicked upon, raises exit code 2 in the onUnload UIEH)
  • 3: Auto cancel
  • 4: Abort
  • 5: Restart
  • 6: User button
  • 7: Exit to main

While the purposes of idcs 3 to 7 remain unknown, it is advisable to give all of your controls larger numbers, eg. 100.

moving Boolean Whether the dialog will be moved if this control is dragged (may require "movingEnable" to be 1 in the dialog. In Arma 3 works regardless). Another way of allowing moving of the dialog is to have control of style ST_TITLE_BAR
type Integer See Control Types
style Integer See Control Styles. style = "0x400+0x02+0x10";
x/y/w/h Number The position and size of the control in fractions of screen size.
sizeEx Number The font size of text in fractions of screen size. Behaves similar to h property. For some controls it is named size.
font String The font to use. See the list of available fonts for possible values.
colorText Array Text color
colorBackground Array Background color
text String The text or picture to display.
shadow Integer Can be applied to most controls (0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke).
tooltip String Text to display in a tooltip when control is moused over. A tooltip can be added to any control type except CT_STATIC and CT_STRUCTURED_TEXT. Note: As of Arma 3 logo black.png1.48, most controls now support tooltips. A linebreak can be created by adding \n.
tooltipColorShade Array Tooltip background color
tooltipColorText Array Tooltip text color
tooltipColorBox Array Tooltip border color
autocomplete String (where applicable) Option for entry fields (e.g. RscEdit) to activate autocompletion. For known script commands and functions use autocomplete = "scripting".
url String (where applicable) URL which will be opened when clicking on the control. Used on e.g. a button control. Does not utilize the Steam Overlay browser if enabled by default, opens the link in the default browser set by the OS.
overlayMode Number Arma 3 logo black.png2.10 (where applicable) 0 - opens URL in default browser; 1 - opens URL in Steam overlay id enabled, otherwise in default browser; 2 - opens URL in Steam overlay, shows error message box (with button to use default browser) if Steam overlay is disabled.

A property to enable or disable a control does not exist (because of implementation issues). However, there is a simple workaround based on the onLoad UI Event Handler that can be used to disable a control in the config:

onLoad = "(_this # 0) ctrlEnable false;";

Attributes Class

Name Type Remark
font String Available Fonts
color HTML color HTML Color Codes
align String "center", "left", "right"
shadow Integer 0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke

AttributesImage Class

Name Type Remark
font String Available Fonts (Optional)
color HTML color HTML Color Codes
align String "center", "left", "Right" (optional)


Example Config

#include "\a3\ui_f\hpp\definecommongrids.inc"

class RscButton
{
	deletable = 0;
	fade = 0;
	access = 0;
	type = 1;
	text = "";
	colorText[] = {1,1,1,1};
	colorDisabled[] = {1,1,1,0.25};
	colorBackground[] = {0,0,0,0.5};
	colorBackgroundDisabled[] = {0,0,0,0.5};
	colorBackgroundActive[] = {0,0,0,1};
	colorFocused[] = {0,0,0,1};
	colorShadow[] = {0,0,0,0};
	colorBorder[] = {0,0,0,1};
	soundEnter[] = {"\A3\ui_f\data\sound\RscButton\soundEnter",0.09,1};
	soundPush[] = {"\A3\ui_f\data\sound\RscButton\soundPush",0.09,1};
	soundClick[] = {"\A3\ui_f\data\sound\RscButton\soundClick",0.09,1};
	soundEscape[] = {"\A3\ui_f\data\sound\RscButton\soundEscape",0.09,1};
	idc = -1;
	style = 2;
	x = 0;
	y = 0;
	w = 0.095589;
	h = 0.039216;
	shadow = 2;
	font = "RobotoCondensed";
	sizeEx = "GUI_GRID_HAbs / 25";
	url = "";
	offsetX = 0;
	offsetY = 0;
	offsetPressedX = 0;
	offsetPressedY = 0;
	borderSize = 0;
};
↑ Back to spoiler's top


Control Types

The type property of controls defines what type of control they are. For example an edit box has the type 2. There is an ingame dialog with examples of how the control types look and act like:

createDialog "RscTestControlTypes";


Control Type Definitions

All definitions can be retrieved with "Default" call BIS_fnc_exportGUIBaseClasses;.

#define CT_STATIC				  0
#define CT_BUTTON				  1
#define CT_EDIT					  2
#define CT_SLIDER				  3
#define CT_COMBO				  4
#define CT_LISTBOX				  5
#define CT_TOOLBOX				  6
#define CT_CHECKBOXES			  7
#define CT_PROGRESS				  8
#define CT_HTML					  9
#define CT_STATIC_SKEW			 10
#define CT_ACTIVETEXT			 11
#define CT_TREE					 12
#define CT_STRUCTURED_TEXT		 13
#define CT_CONTEXT_MENU			 14
#define CT_CONTROLS_GROUP		 15
#define CT_SHORTCUTBUTTON		 16
#define CT_HITZONES				 17
#define CT_VEHICLETOGGLES		 18
#define CT_CONTROLS_TABLE		 19
#define CT_XKEYDESC				 40
#define CT_XBUTTON				 41
#define CT_XLISTBOX				 42
#define CT_XSLIDER				 43
#define CT_XCOMBO				 44
#define CT_ANIMATED_TEXTURE		 45
#define CT_MENU					 46
#define CT_MENU_STRIP			 47
#define CT_CHECKBOX				 77
#define CT_OBJECT				 80
#define CT_OBJECT_ZOOM			 81
#define CT_OBJECT_CONTAINER		 82
#define CT_OBJECT_CONT_ANIM		 83
#define CT_LINEBREAK			 98
#define CT_USER					 99
#define CT_MAP					100
#define CT_MAP_MAIN				101
#define CT_LISTNBOX				102
#define CT_ITEMSLOT				103
#define CT_LISTNBOX_CHECKABLE	104
#define CT_VEHICLE_DIRECTION	105
↑ Back to spoiler's top

Control Styles

To further customize controls there are several different styles for each control type available.

To get an idea of how the styles look like you can create the following dialog:

createDialog "RscTestControlStyles";

Note that drawing of vertical text is not supported and any attempt to use ST_UP, ST_DOWN, ST_VCENTER is likely to result in the following .rpt spam:
Obsolete, sizeH and sizeW calculation missing
In addition, ST_UP, ST_DOWN, ST_VCENTER are stand alone styles and should not be mixed with any other styles
Define Decimal Hexadecimal Remark
ST_LEFT 0 0x00 Default, text left aligned
ST_RIGHT 1 0x01 Modifier, adding this to another style will force text to be aligned to the right
ST_CENTER 2 0x02 Modifier, adding this to another style will force text to be centered
ST_DOWN 4 0x04 Vertical text alignment (See the note above)
ST_UP 8 0x08 Vertical text alignment (See the note above)
ST_VCENTER 12 0x0C Vertical text alignment, same as ST_DOWN + ST_UP (See the note above)
ST_SINGLE 0 0x00 Plain single line box without a border
ST_MULTI 16 0x10 Plain multiple line box with a slight border. To remove border add 512 (+ ST_NO_RECT) to the style (style 528, 529 and 530 are therefore border-less). Additional parameter lineSpacing is required for this style. lineSpacing = 1; is normal line spacing. Any \n character in the text string will be interpreted as new line.
ST_TITLE_BAR 32 0x20 Plain single line box with semi-transparent background and somewhat embossed border. When this style is used, the dialog containing control becomes draggable by this control
ST_PICTURE 48 0x30 Border-less picture box. Text string is treated as a path to a texture. Alignment has no effect. The texture is stretched to fit the box by default. To force original aspect ratio add 2048 (+ ST_KEEP_ASPECT_RATIO) to the style. Background is ignored, colorText controls texture colour and opacity
ST_FRAME 64 0x40 Legend like frame without background with text showing over the frame edge. Alignment has no effect. colorText defines both text and frame colour
ST_BACKGROUND 80 0x50 Single line box with always black opaque background and thick raised beveled border
ST_GROUP_BOX 96 0x60 Single line box with delicate semi-transparent background and slight border. Only text colour can be controlled
ST_GROUP_BOX2 112 0x70 Plain single line box, same as ST_SINGLE, only with a slight border similar to ST_MULTI box border
ST_HUD_BACKGROUND 128 0x80 Sets special texture for corners. It was used for rounded corners in OFP, ArmA and Arma 2. In Arma 3, square corners are used everywhere, so the texture is adapted to the unified style, but the technology is not removed. In Arma 3 it looks the same as normal ST_SINGLE. Corner textures are defined in configFile >> "CfgInGameUI" >> "imageCornerElement" (can be set only globally for the whole game, not per control)
ST_TILE_PICTURE 144 0x90 The picture is tiled according to tileH and tileW values. To force tiled picture to keep aspect ratio of original image, add 2048 (+ ST_KEEP_ASPECT_RATIO) to the style.
ST_WITH_RECT 160 0xA0 Single line box frame, similar to ST_FRAME box. The text however is displayed inside the frame. Frame and text colour are set with colorText
ST_LINE 176 0xB0 Diagonal line going from left top corner to bottom right corner. To control line direction, width w and height h parameters of the box could be negative. Line and text colour are set with colorText
ST_UPPERCASE 192 0xC0 Forces control text to upper case
ST_LOWERCASE 208 0xD0 Forces control text to lower case
ST_ADDITIONAL_INFO 3840 0x0F00 ST_SHADOW + ST_NO_RECT + SL_HORZ + ST_KEEP_ASPECT_RATIO
ST_SHADOW 256 0x0100
ST_NO_RECT 512 0x0200 This style works for CT_STATIC in conjunction with ST_MULTI
ST_KEEP_ASPECT_RATIO 2048 0x0800 When used with image or texture, stops it from stretching to fit the control
ST_TITLE 34 0x22 ST_TITLE_BAR + ST_CENTER

Control Specific Styles

CT_LISTBOX Specific Styles

Define Decimal Hexadecimal Remark
LB_TEXTURES 16 0x10
LB_MULTI 32 0x20 Makes CT_LISTBOX multi-selectable

CT_PROGRESS Specific Styles

Define Decimal Hexadecimal
ST_VERTICAL 1 0x01
ST_HORIZONTAL 0 0x00

CT_SLIDER Specific Styles

Define Decimal Hexadecimal
SL_VERT 0 0x00
SL_HORZ 1024 0x0400
SL_TEXTURES 16 0x10

CT_TREE Specific Styles

Define Decimal Hexadecimal Remark
TR_SHOWROOT 1 0x01 When this style is applied, all entries even with path [] can be collapsed. Use unkown.
TR_AUTOCOLLAPSE 2 0x02 Use unknown

Control Style Definitions

All definitions can be retrieved with "Default" call BIS_fnc_exportGUIBaseClasses;.

#define ST_LEFT					0x00
#define ST_RIGHT				0x01
#define ST_CENTER				0x02
#define ST_DOWN					0x04
#define ST_UP					0x08
#define ST_VCENTER				0x0C
#define ST_SINGLE				0x00
#define ST_MULTI				0x10
#define ST_TITLE_BAR			0x20
#define ST_PICTURE				0x30
#define ST_FRAME				0x40
#define ST_BACKGROUND			0x50
#define ST_GROUP_BOX			0x60
#define ST_GROUP_BOX2			0x70
#define ST_HUD_BACKGROUND		0x80
#define ST_TILE_PICTURE			0x90
#define ST_WITH_RECT			0xA0
#define ST_LINE					0xB0
#define ST_UPPERCASE			0xC0
#define ST_LOWERCASE			0xD0
#define ST_ADDITIONAL_INFO		0x0F00
#define ST_SHADOW				0x0100
#define ST_NO_RECT				0x0200
#define ST_KEEP_ASPECT_RATIO	0x0800
#define ST_TITLE				ST_TITLE_BAR + ST_CENTER
#define SL_VERT					0
#define SL_HORZ					0x400
#define SL_TEXTURES				0x10
#define ST_VERTICAL				0x01
#define ST_HORIZONTAL			0
#define LB_TEXTURES				0x10
#define LB_MULTI				0x20
#define TR_SHOWROOT				1
#define TR_AUTOCOLLAPSE			2
↑ Back to spoiler's top

Positioning

A detailed description of how you can achieve proper GUI placement can be found on the Arma 3: GUI Coordinates page.

Inheritance

Using inheritance can reduce your dialog class definitions significantly by standardising common attributes in base classes and just changing unique attributes in derived classes. There is no need to re-declare all attributes for every class definition.

Using inheritance can make your GUI config hard to read for others.

View the dedicated inheritance page for more information.

Preprocessor instructions

Note that you can also add your own preprocessor instructions for commonly used data, eg. for colors, to save yourself the hassle of writing it in several different places and then adapt each of them if you want to change them afterwards (especially if class inheritance is not applicable). It can also make your code more readable sometimes.

Example Config

#define COLOR_HALF_BLACK { 0, 0, 0, 0.5 }

class MyDialog
{
	idd = -1;
	movingEnable = 1;
	objects[] = {};
	controlsBackground[] = { MyDialogBackground };

	class MyDialogBackground : RscText
	{
		colorBackground[] = COLOR_HALF_BLACK;
		x = 0.7;  y = 0.1;
		w = 0.25; h = 0.15;
	};
};

Useful includes

Arma 3 offers a wide range of useful files which can be included to get access to some helpful macros.

Include Code Description / Content
#include "\a3\3DEN\UI\macros.inc"
Defines for Eden Editor like colors, text sizes custom pixel grid macros.
#include "\a3\3DEN\UI\macroexecs.inc"
Defines for Eden Editor to calculate text sizes etc.
#include "\a3\ui_f\hpp\definedikcodes.inc"
Useful when working with custom shortcuts. Contains defines for key codes.
#include "\a3\ui_f\hpp\definecommoncolors.inc"
Colors used in Arma 3, like background color set by the user.
#include "\a3\ui_f\hpp\definecommongrids.inc"
UI grids such as GUI_GRID and all its variants.
#include "\a3\ui_f\hpp\defineresincl.inc"
IDCs and IDDs of many Arma 3 UIs.

User Interface Event Handlers

User Interface Event Handlers are a key component of any Arma 3 GUI. See User Interface Event Handlers.


Scripting

There are several functions and commands to edit your dialog after its creation. These functions and commands can be found here:


Native Arma 3 GUIs

Arma 3 comes with a wide varity of various displays and dialogs. They can be found in:

  • configFile usually with names like RscSomeDisplayName or DisplaySomeDisplayName

Additonally, Arma 3 offers some customizeable GUIs which can be accessed by scripts.


GUI References

It is sometimes a good idea so see how others created their GUIs. Here is a list of a few resources:

Tips for creating GUIs

  • Functionality
  • Layout
  • Style
  • Behaviour
  • Customizability


Tutorials


See Also