Arma: GUI Configuration: Difference between revisions

From Bohemia Interactive Community
Jump to navigation Jump to search
(Updated warning about syntactic errors in description.ext)
m (page overhaul)
Line 1: Line 1:
{{SideTOC}}
{{SideTOC}}
== Introduction ==
== Introduction ==
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]]).
<gallery>
A3_GUI_Example_1.jpg|Custom Briefing Editor
A3_GUI_Example_2.jpg|Teamswitch GUI
A3_GUI_Example_3.jpg|Dynamic Groups GUI
</gallery>


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|description.ext]], [[campaignConfigFile]] or [[configFile]].
== Terminology ==


'''Notice:''' If you change your description.ext file while the mission is still open in the editor, you will have to reload or resave the mission before the changes will take effect. This behaviour is due to the fact the mission editor only reads the description.ext file during save/load. '''Eden editor will automatically update the description.ext on mission preview.'''
'''GUI'''<br>
'''G'''raphical '''U'''ser '''I'''nterface which let's the user interact with the software through graphical controls like buttons, lists and so on.


'''Warning:''' Prior to Arma 3 syntactic errors in your description.ext file (e.g. incorrect spelling of keywords) will crash the game while processing the file, stating the nature and location of the error that caused it.
'''UI'''<br>
{{Feature arma3 | Only missing <tt>#include</tt> statements will cause a crash in {{arma3}}, other syntactic errors will simply display an error message.}}
'''U'''ser '''I'''nterface which let's the user interact with the software through a console application


Most of these definitions work with numeric constants, which are presented in [[#Constants|the following section]]. For readability purposes you should consider favoring them instead of the actual integers.
'''IGUI'''<br>
'''I'''ntegrated '''G'''raphical '''U'''ser '''I'''nterface, usually used when talking about vanilla menus in {{arma3}}.  


* Positions and dimensions (x, y, w, h) aswell as font sizes are '''relative''' to the viewport ('''not''' pixel values). Vieweport is a 4:3 area which covers the whole screen with ''Very Large'' interface size, but gets smaller with small interface sizes (and user interface gets smaller as well). See [[GUI Coordinates]] for more information
* Colors are usually defined in the following convention: <tt>{ Red, Green, Blue, Alpha }</tt>, each ranging from 0.0 to 1.0 as well. To easily convert from the more standard 0-255 range, simply divide the 255 based number by 255.
* Sounds are usually defined in the following convention: <tt>{ "file.ogg", volume, pitch }</tt>, Volume ranges from 0.0 to 1.0. Pitch is a floating point number ranging from 0.0 to 4.0. 2.0 doubles the pitch (makes it higher), 0.5 halfs the pitch (makes it deeper) and 1.0 is normal.


<!-- I have no idea. Someone please correct the sound convention. -->
=== User Interface Types ===
'''Dialog'''
*Can be created upon an existing display. Parent display will be hidden.


You can find a complete list of scripting related GUI functions in [[:Category:Command Group: GUI Control]].
**Player movement is blocked by dialog
**'''Commands:''' [[createDialog]], [[closeDialog]], [[allControls]], [[dialog]] [[User:7erra|7erra]] ([[User talk:7erra|talk]])


=== Difference between dialogs and HUDs ===
'''Display'''
*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.
**'''Commands:''' [[createDisplay]], [[closeDisplay]], [[allControls]], [[allDisplays]]


There is two kind of displays :
{{Informative|Generally speaking, dialogs and displays are identical. They are only differentiated by the way they are created ([[createDisplay]], [[createDialog]]).}}


*Dialogs: Displays that interact with the player through controls. While dialogs are opened player can not move.
[[User:7erra|7erra]] ([[User talk:7erra|talk]]): [[displayParent]] is only available for createDisplay displays, createDisplay will return the display while createDialog will only return success flag. [[dialog]] will return false for displays created with createDisplay.
**'''Commands:''' [[createDialog]], [[closeDialog]]
*HUDs: Displays that print information about the game (amount of ammo, stance,...). HUDs do not interfere with the player's movement.
**'''Commands:''' [[cutRsc]]


=== Global considerations ===
'''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.
**'''Commands:''' [[allCutLayers]], [[titleRsc]], [[cutText]], [[cutObj]], [[cutFadeOut]], [[setTitleEffect]], [[allActiveTitleEffects]]


This document attempts to cover the genre of controls (idc's), display (idd's). It attempts to apply the same consistency as one (currently) finds in mission description.ext's, as well as configs. Specifically, config.cpp's relating to the so-called 'user ui'.
{{Informative|Some of the commands have different effects. Please check the command's biki page for detailed information.}}


This document must be inaccurate because *everything* config-dialogs/displays/controls is at the whim of engine revisions and which flavor pizza was eaten on Friday night.
== 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.
The token names used for color (purely as an example) are currently not only inconsistent across controls, they are subject to whim. Any addition to the engine's capabilities (with new control types) will (if history is the judge) produce new token names, that do exactly same as different names in other controls. color[]=, colorText[]= ActiveColor[]=ShadowColo[]= (an engine typo) =ColorActive[]=FrenchFries[]=….. all meaning the same thing (and NOT meaning the same thing, depending on the control's type)
=== Properties ===
 
{| class="wikitable sortable" Style = "Width: 100%"
Unfortunately, the current state of play with Arrowhead engine (and all engines prior) is that the entire caboodle is arbitrary. In terms of ui.config.cpp, most controls and most displays are hard-wired to the engine.
 
For config.cpp's, one of the hardest animals to deal with is the fixed-in-concrete classname definitions, aligned with matching fixed-in-concrete idd's.
 
Purely as an example
 
RscDisplaySelectIsland uses an idd of 51. Both are currently nuclear fallout shelters (hardened concrete). you can't change the name, you can't change the idd.
 
The engine is hard wired (with the equivalent of) createDisplay "RscDisplaySelectIsland" via various fixed-in-conrete idc's of other displays. There is no action, no eventhandler, no over-ride, which you can apply to this 'behavior'. Similarly, the engine reacts to that displays controls with hard-wired _display ctrlParent 'control' expecting the _display idd to be 51 to proceed any further. (in this case, open the editor and show the selected island's map)
 
There is nothing wrong with this approach. It has been the same since CWC. But, with the increasing abundance of official bis sqf scripts which specifically deal with and react to ui controls and displays (see \ca\ui\scripts). The burden of the engine dealing with this is becoming anachronistic and contrary to the flexibility that those scripts provide.
 
In short:
* The token names described here as general, have to be taken in context to the control/display they are used in. There can be no guarantee that they are the same for all controls, and no guarantee that they wont change. the bin\config.bin of the engine, is the ultimate umpire. It declares what this engine, expects.
* Any reference to eventHandlers and 'actions' are subject to the whim of the engine. It may, or may not, force-over-ride any action depending on display(idd) and it's control (idc)
* Any class definition may or may not be fixed in concrete. Some classnames are, some classnames are not. Which ones, depend on whether it's Monday afternoon.
 
== Dialogs ==
 
Dialogs are parent containers for the actual controls it contains. Their definition contains several properties on the controls it contains, how the dialog can be addressed, and whether or not the player is able to continue regular movement while the dialog is shown.
 
They can be defined in the [[Description.ext|description.ext]] file or externalized to separate hpp-files, which are included in the description.ext file using the [[PreProcessor_Commands#.23include|#include]] preprocessor directive. The latter method is generally a good idea to split a large description.ext file into several small chunks in order to keep track of what's where.
 
Most often, controls of a dialog are defined within the definition of the dialog itself, though it's a good practice to generalize common controls in a base definition in the global scope. See [[#Best practice|best practice]] for details. For simplicity we won't apply this practice in the following code examples.
 
 
{| border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
! bgcolor="#ddddff" | Name
! Name !! Type!! Remark
! bgcolor="#ddddff" | Type
! bgcolor="#ddddff" | Remark
|-
|-
| '''idd'''
| '''idd'''
| integer
| [[Integer]]
| The unique ID number of this dialog. can be -1 if you don't require access to the dialog itself 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'''
| [[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'''
| '''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 Arma 3
|-
|-
| '''enableSimulation'''
| '''enableSimulation'''
| boolean
| [[Boolean]]
| Specifies whether the game continues while the dialog is shown or not.
| Specifies whether the game continues while the dialog is shown or not.
|-
| '''onLoad'''
| [[String]]
| Expression executed when the dialog is opened. See [https://community.bistudio.com/wiki/User_Interface_Event_Handlers#onLoad User Interface Event Handlers]
|-
| '''onUnload'''
| [[String]]
| Expression executed when the dialog is closed. See [https://community.bistudio.com/wiki/User_Interface_Event_Handlers#onUnload User Interface Event Handlers]
|-
|-
| '''controlsBackground'''
| '''controlsBackground'''
| array or class (see the note at the bottom of this section)
| [[Array]]
| 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 or class (see the note at the bottom of this section)
| [[Array]]
| 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 or class (see the note at the bottom of this section)
| [[Array]]
|
|
|-
|}
|}<br clear="all">


*'''Example Config:'''
<syntaxhighlight lang="cpp">class DefaultDialog
{
  idd = -1;
  access = 0;
  movingEnable = true;
  onLoad  = "hint str _this";
  onUnload  = "hint str _this";
  enableSimulation = false;
  controlsBackground[] =
  {
    //Background controls;
  };
  controls[] =
  {
  //Controls;
  };
  objects[] =
  {
    //Objects
  };
};</syntaxhighlight>


Setting the ''idd'' property to a non-negative (i.e. "useful") number is only required if you want to access the dialog itself via the [[findDisplay]] function. Accessing the dialog itself via the ''idd'' property though does not mean that you can implicitly access the controls within the dialog. For that you will have to rely on the control's ''idc'' properties. Hence, in most basic cases you won't need it and -1 should be sufficient.
=== Opening a display or dialog ===
There are two ways of creating a display or dialog. One can either use [[createDialog]] or [[createDisplay]] command.


It's also noteworthy for more advanced developers that there is a numeric property named '''''access''''' with the following possible values (and their named constants):
=== Closing a display or dialog===
* '''0''' - ''ReadAndWrite'' - this is the default case where properties can still be added or overridden.
There are several ways how a dialog can be closed.
* '''1''' - ''ReadAndCreate'' - this only allows creating new properties.
* by pressing the '''Escape-key'''
* '''2''' - ''ReadOnly'' - this does not allow to do anything in deriving classes.
* by using [[closeDialog]]
* '''3''' - ''ReadOnlyVerified'' - this does not allow to do anything either in deriving classes, and a CRC check will be performed.
* by using [[closeDisplay]]
This does not have any impact other than limiting what deriving classes are allowed to (re-)specify. Generally this is not required for dialogs or dialog controls and can be safely ignored.
* when the user presses a button with IDC 0, 1 or 2


Here's an example of a dialog that will only display ''Hello world'' in the top right corner of the screen. If you get confused by the ''MyHelloText'' class, just ignore it for the moment until you have read details on the definition of controls in the following chapter, [[#Controls|Controls]].
== 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.
=== Properties ===
{| class="wikitable sortable" Style="Width: 100%"
|-
! 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 [https://community.bistudio.com/wiki/User_Interface_Event_Handlers#onLoad User Interface Event Handlers]
|-
| '''onUnload'''
| [[String]]
| Expression executed when the dialog is closed. See [https://community.bistudio.com/wiki/User_Interface_Event_Handlers#onUnload User Interface Event Handlers]
|-
| '''controls'''
| [[Array]]
| Contains class names of all foreground controls associated to this dialog.
|}


* '''Example 1:'''
*'''Example Config:'''
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
 
#include "\a3\ui_f\hpp\definecommongrids.inc"
class MyHelloWorldDialog {
class RscTitles
idd = -1; // set to -1, because we don't require a unique ID
{
movingEnable = 1; // the dialog can be moved with the mouse (see "moving" below)
  class RscInfoText
enableSimulation = 0; // freeze the game
  {
controlsBackground[] = { }; // no background controls needed
      idd = 3100;
objects[] = { }; // no objects needed
      fadein = 0;
controls[] = { "MyHelloText" }; // our "Hello world" text as seen below:
      fadeout = 0;
 
      duration = 1e+011;
class MyHelloText {
      onLoad = "uinamespace setvariable ['BIS_InfoText',_this select 0]";
idc = -1; // set to -1, unneeded
      onUnLoad = "uinamespace setvariable ['BIS_InfoText',nil]";
moving = 1; // left click (and hold) this control to move the dialog
      class Controls
// (requires "movingEnabled" to be 1, see above)
      {
type = CT_STATIC; // constant
          class InfoText
style = ST_LEFT; // constant
          {
text = "Hello world";
              idc = 3101;
font = FontM;
              style = "0x01 + 0x10 + 0x200 + 0x100";
sizeEx = 0.023;
              font = "RobotoCondensedBold";
 
              x = "(profilenamespace getvariable [""IGUI_GRID_MISSION_X"",(safezoneX + safezoneW - 21 * (GUI_GRID_WAbs / 40))])";
colorBackground[] = { 1, 1, 1, 0.3 };
              y = "(profilenamespace getvariable [""IGUI_GRID_MISSION_Y"",(safezoneY + safezoneH - 10.5 * (GUI_GRID_HAbs / 25))])";
colorText[] = { 0, 0, 0, 1 };
              w = "20 * (GUI_GRID_WAbs / 40)";
 
              h = "5 * ((GUI_GRID_WAbs / 1.2) / 25)";
x = 0.8;
              colorText[] = {1,1,1,1};
y = 0.1;
              colorBackground[] = {0,0,0,0};
w = 0.2;
              text = "";
h = 0.05;
              lineSpacing = 1;
};
              sizeEx = 0.045;
};
              fixedWidth = 1;
</syntaxhighlight>
              deletable = 0;
 
              fade = 0;
* '''Example 2:'''
              access = 0;
The benefit of the following syntax is that you do not need to double list all of the control class names.
              type = 0;
<syntaxhighlight lang="cpp">
              shadow = 1;
class RscText; // assume external declaration
              colorShadow[] = {0,0,0,0.5};
 
              tooltipColorText[] = {1,1,1,1};
class MyHelloWorldDialog {
              tooltipColorBox[] = {1,1,1,1};
idd = -1;
              tooltipColorShade[] = {0,0,0,0.65};
movingEnable = 0;
          };
class ControlsBackground {
      };
// define controls here
  };
};
};</syntaxhighlight>
class Objects {
// define controls here
};
class Controls {
// define controls here
 
class MyHelloText: RscText {
idc = -1;
text = "Hello world";
x = 0.80;
y = 0.10;
w = 0.20;
h = 0.05;
};
};
};
</syntaxhighlight>
 
Once you have defined (or prototyped) dialogs you want to use, be sure to reload the mission in the editor if it is already running.
In the Eden editor it's enough to save the mission via CTRL + S (Default). This will precompile the description.ext.<br><br>
 
{{Informative | '''controls[]''' only matters if there is no '''class Controls''', then the order of controls is taken from this array, if there is '''class Controls''' then '''controls[]''' is ignored and the order is the same as the order in which controls appear inside '''class Controls'''. The same is true for '''objects[]''' vs. '''class Objects''' and '''controlsBackground[]''' vs. '''class ControlsBackground'''}}
 
=== Creating dialogs ===
Dialogs can then be created and shown using the [[createDialog]] function. If you do so by script and await a responsive action from the user, you might also want to wait until the user has closed the dialog by using a wait statement (e.g. [[waitUntil]]) in conjunction with the [[dialog]] function, if you intend to handle the dialog result within the same script.
 
* '''Example:'''
<code>
_ok = [[createDialog]] "MyHelloWorldDialog";
[[waitUntil]] { !dialog }; {{codecomment|// hit ESC to close it}}
[[hint]] "Dialog closed.";
</code>
 
=== Closing dialogs ===
In most use cases a dialog "closes itself", ie. by invoking the [[closeDialog]] function in an ''action'' field. However dialogs don't necessarily have to close themselves, but can also be closed from the "outside" (ie. by scripts or triggers). Once closed, the [[dialog]] function returns <tt>false</tt> and wait statements with a <tt>!dialog</tt> condition will end.
 
* '''Example''' - close by action
<syntaxhighlight lang="cpp">
class CloseButton : RscButton {
/* … */
type = CT_BUTTON;
text = "Close";
action = "closeDialog 0";
}
</syntaxhighlight>
 
* '''Example''' - close by external request
<code>[[closeDialog]] 0;</code>


== Controls ==
== 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.


Controls are the actual content of dialogs and can be anything, ranging from simple solid rectangles to a complex 3d object within a dialog. Like dialogs, controls can have a unique ID saved in the ''idc'' property to access them from within scripts using [[:Category:Command_Group:_GUI_Control|GUI functions]].
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.


The type of the control is usually set in the ''type'' property. Different types allow or require a different set of properties. However most controls share a set of properties in addition to the properties described in the following sections:
=== Common Properties ===


{| border="1" align="left" cellpadding="3" cellspacing="0" |
{| class="wikitable" Width="100%" |
! colspan="3" bgcolor="#bbbbff" | Common properties
|-
|-
! bgcolor="#ddddff" | Name
! bgcolor="#ddddff" | Name
Line 214: Line 218:
|-
|-
| '''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
|-
|-
| '''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 type CT_STATIC and style ST_TITLE_BAR. If <tt>moving</tt> is defined, it takes priority over style.
| 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'''
| '''type'''
| integer [[#CONTROL TYPES|CT_TYPES]]
| [[Integer]]
|
| See [[#Control Types|Control Types]]
|-
|-
| '''style'''
| '''style'''
| integer [[#CONTROL STYLES|CT_STYLES]]
| [[Integer]]
| can be combinatorial: style = "0x400+0x02+0x10";
| See [[#Control Styles|Control Styles]]. {{Inline code|style <nowiki>=</nowiki> "0x400+0x02+0x10";}}
|-
|-
| '''x/y/w/h'''
| '''x/y/w/h'''
| float
| [[Number]]
| the position and size of the control in fractions of screen size.
| The position and size of the control in fractions of screen size.
|-
|-
| '''sizeEx'''
| '''sizeEx'''
| float
| [[Number]]
| the font size of text (0..1)
| The font size of text in fractions of screen size. Behaves similar to '''h''' property. For some controls it's named '''size'''.
|-
|-
| '''font'''
| '''font'''
| string
| [[String]]
| the font to use. See the list of [[Fonts#Available_Fonts|available fonts]] for possible values
| The font to use. See the list of [[Fonts#Available_Fonts|available fonts]] for possible values.
|-
|-
| '''colorText'''
| '''colorText'''
| color array
| [[Array]]
| text color
| Text color
|-
|-
| '''colorBackground'''
| '''colorBackground'''
| color array
| [[Array]]
| background color
| Background color
|-
|-
| '''text'''
| '''text'''
| string or texture
| [[String]]
| the text '''or picture''' to display
| The text '''or picture''' to display.
|-
|-
| '''shadow'''
| '''shadow'''
| 0,1 or 2
| [[Integer]]
| can be applied to most controls (0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke). Additional params for shadow: <tt>shadowPictureLeft</tt>, <tt>shadowPictureRight</tt>, <tt>shadowTextLeft</tt>, <tt>shadowTextRight</tt>
| Can be applied to most controls (0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke).
|-
| '''show'''
| boolean
| Initial visibility of the control
|-
|-
| '''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 Arma 3 v1.48 (approx), most controls now support tooltips.
| 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'''.
|-
|-
| '''tooltipColorShade'''
| '''tooltipColorShade'''
| color array
| [[Array]]
| Tooltip background color
| Tooltip background color
|-
|-
| '''tooltipColorText'''
| '''tooltipColorText'''
| color array
| [[Array]]
| Tooltip text color
| Tooltip text color
|-
|-
| '''tooltipColorBox'''
| '''tooltipColorBox'''
| color 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".
| Option for entry fields (e.g. RscEdit) to activate autocompletion. For known script commands and functions use autocomplete = "scripting".
|-
| '''deletable'''
| boolean
| Whether or not control can be deleted by scripts with [[ctrlDelete]] command
|-
| '''fade'''
| float
| Initial fade of the control
|-
|-
| '''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.
| 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.
|}<br clear="all">
--->
|}


=== Attributes class ===
=== Attributes Class ===
{| border="1" align="left" cellpadding="3" cellspacing="0" |
{| class="wikitable" width="25%" |
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
! bgcolor="#ddddff" | Name
! bgcolor="#ddddff" | Name
Line 303: Line 296:
|-
|-
| '''font'''
| '''font'''
| string
| [[String]]
|
| [[FXY_File_Format#Available_Fonts|Available Fonts]]
|-
|-
| '''color'''
| '''color'''
| HTML color
| HTML color
|
| [https://html-color-codes.info/ HTML Color Codes]
|-
|-
| '''align'''
| '''align'''
| string
| [[String]]
| center, left, etc
| "center", "left", "right"
|-
|-
| '''shadow'''
| '''shadow'''
| integer
| [[Integer]]
| not image class
| 0 = no shadow, 1 = drop shadow with soft edges, 2 = stroke
|}
|}
<br clear="all">


=== AttributesImage class ===
=== AttributesImage Class ===
{| border="1" align="left" cellpadding="3" cellspacing="0" |
{| class="wikitable" width="25%" |
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
! bgcolor="#ddddff" | Name
! bgcolor="#ddddff" | Name
Line 329: Line 320:
|-
|-
| '''font'''
| '''font'''
| string
| [[String]]
| optional
| [[FXY_File_Format#Available_Fonts|Available Fonts]] (Optional)
|-
|-
| '''color'''
| '''color'''
| HTML color
| HTML color
|
| [https://html-color-codes.info/ HTML Color Codes]
|-
|-
| '''align'''
| '''align'''
| string
| [[String]]
| center, left, etc optional
| "center", "left", "Right" (optional)
|-
|-
|}<br clear="all">
|}<br clear="all">


To save space and effort, it is generally a good idea to make use of class polymorphism, i.e. deriving from very basic classes that already have some specific properties set. See the [[#Best_practice|Best practice]] for details.
*'''Example Config:'''
<syntaxhighlight lang="cpp">
#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;
};</syntaxhighlight>


== 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.
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>
<code>[[createDialog]] "RscTestControlTypes";</code>


{| class="wikitable sortable"
{| class="wikitable sortable" Style ="Width: 100%"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal !! Remark !! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
| [[CT_STATIC]] || 0 || 0x00 ||
| [[CT_STATIC]] || 0 || 0x00 || || [[CT_XLISTBOX]] || 42 || 0x2A ||
|-
|-
| [[CT_BUTTON]] || 1 || 0x01 ||
| [[CT_BUTTON]] || 1 || 0x01 || || [[CT_XSLIDER]] || 43 || 0x2B ||
|-
|-
| [[CT_EDIT]] || 2 || 0x02 ||
| [[CT_EDIT]] || 2 || 0x02 || || [[CT_XCOMBO]] || 44 || 0x2C ||
|-
|-
| [[CT_SLIDER]] || 3 || 0x03 ||
| [[CT_SLIDER]] || 3 || 0x03 || || [[CT_ANIMATED_TEXTURE]] || 45 || 0x2D ||
|-
|-
| [[CT_COMBO]] || 4 || 0x04 ||
| [[CT_COMBO]] || 4 || 0x04 || || [[CT_MENU]] || 46 || 0x2E || Arma 3 (EDEN)
|-
|-
| [[CT_LISTBOX]] || 5 || 0x05 ||
| [[CT_LISTBOX]] || 5 || 0x05 || || [[CT_MENU_STRIP]] || 47 || 0x2F || Arma 3 (EDEN)
|-
|-
| [[CT_TOOLBOX]] || 6 || 0x06 ||
| [[CT_TOOLBOX]] || 6 || 0x06 || || CT_CHECKBOX || 77 || 0x4D || Arma 3
|-
|-
| [[CT_CHECKBOXES]] || 7 || 0x07 ||
| [[CT_CHECKBOXES]] || 7 || 0x07 || || [[CT_OBJECT]] || 80 || 0x50 ||
|-
|-
| [[CT_PROGRESS]] || 8 || 0x08 ||
| [[CT_PROGRESS]] || 8 || 0x08 || || [[CT_OBJECT_ZOOM]] || 81 || 0x51 ||
|-
|-
| [[CT_HTML]] || 9 || 0x09 ||
| [[CT_HTML]] || 9 || 0x09 || || [[CT_OBJECT_CONTAINER]] || 82 || 0x52 ||
|-
|-
| CT_STATIC_SKEW || 10 || 0x0A ||
| CT_STATIC_SKEW || 10 || 0x0A || || CT_OBJECT_CONT_ANIM || 83 || 0x53 ||
|-
|-
| [[CT_ACTIVETEXT#CT_ACTIVETEXT=11|CT_ACTIVETEXT]] || 11 || 0x0B ||
| [[CT_ACTIVETEXT#CT_ACTIVETEXT=11|CT_ACTIVETEXT]] || 11|| 0x0B|| || [[CT_LINEBREAK]] || 98 || 0x62 ||
|-
|-
| [[CT_TREE]] || 12 || 0x0C ||
| [[CT_TREE]] || 12 || 0x0C || || [[CT_USER]] || 99 || 0x63 ||
|-
|-
| [[CT_STRUCTURED_TEXT]] || 13 || 0x0D ||
| [[CT_STRUCTURED_TEXT]] || 13 || 0x0D || || [[CT_MAP]] || 100 || 0x64 ||
|-
|-
| [[CT_CONTEXT_MENU]] || 14 || 0x0E ||
| [[CT_CONTEXT_MENU]] || 14 || 0x0E || || [[CT_MAP_MAIN]] || 101 || 0x65 ||
|-
|-
| [[CT_CONTROLS_GROUP]] || 15 || 0x0F ||
| [[CT_CONTROLS_GROUP]] || 15 || 0x0F || || [[CT_LISTNBOX]] || 102 || 0x66 ||
|-
|-
| [[CT_SHORTCUTBUTTON]] || 16 || 0x10 ||
| [[CT_SHORTCUTBUTTON]] || 16 || 0x10 || || CT_ITEMSLOT || 103 || 0x67 ||
|-
|-
| CT_HITZONES || 17 || 0x11 ||
| CT_HITZONES || 17 || 0x11 || || CT_LISTNBOX_CHECKABLE || 104 || 0x68 ||
|-
|-
| CT_VEHICLETOGGLES || 18 || 0x12 ||
| CT_VEHICLETOGGLES || 18 || 0x12 || || CT_VEHICLE_DIRECTION || 105 || 0x69 ||
|-
|-
| [[CT_CONTROLS_TABLE]] || 19 || 0x13 ||
| [[CT_CONTROLS_TABLE]] || 19 || 0x13 ||
|-
|-
| [[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 || Arma 3 (EDEN)
|-
| [[CT_MENU_STRIP]] || 47 || 0x2F || Arma 3 (EDEN)
|-
| CT_CHECKBOX || 77 || 0x4D || Arma 3
|-
| [[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 Types Defines:'''
<spoiler>
''All defines can be retrieved by executing''
''All defines can be retrieved by executing''
<code> "Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<code>"Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define CT_STATIC   0
#define CT_STATIC   0
Line 481: Line 471:
#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 get an idea of how the styles look like you can create the following dialog:
<code>[[createDialog]] "RscTestControlStyles";</code>


=== Common Controls Styles ===
{{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}}
{{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}}
To get an idea of how the styles look like you can create the following dialog:
 
<code>createDialog "RscTestControlStyles";</code>
{| class="wikitable" Style="Width: 100%"
{| class="bikitable"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
Line 543: Line 534:
|}
|}


=== [[CT_SLIDER]] Specific Styles ===
==== Control Specific Styles ====
{| class="bikitable"
 
'''[[CT_LISTBOX]] Specific Styles'''
{| class="wikitable"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal !! Remark
|-
|-
| SL_VERT || 0 || 0x00 ||
| LB_TEXTURES || 16 || 0x10 ||
|-
|-
| SL_HORZ || 1024 || 0x0400 ||
| LB_MULTI || 32 || 0x20 || Makes [[CT_LISTBOX]] multi-selectable
|-
| SL_TEXTURES || 16 || 0x10 ||
|}
|}


=== [[CT_PROGRESS]] Specific Styles ===
'''[[CT_PROGRESS]] Specific Styles'''
{| class="bikitable"
{| class="wikitable" width="20%"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal
|-
|-
| ST_VERTICAL || 1 || 0x01 ||
| ST_VERTICAL || 1 || 0x01
|-
|-
| ST_HORIZONTAL || 0 || 0x00 ||
| ST_HORIZONTAL || 0 || 0x00
|}
|}


=== [[CT_LISTBOX]] Specific Styles ===
'''[[CT_SLIDER]] Specific Styles'''
{| class="bikitable"
{| class="wikitable" width="20%"
! Define !! Decimal !! Hexadecimal !! Remark
|-
! Define !! Decimal !! Hexadecimal
|-
| SL_VERT || 0 || 0x00
|-
|-
| LB_TEXTURES || 16 || 0x10 ||
| SL_HORZ || 1024 || 0x0400
|-
|-
| LB_MULTI || 32 || 0x20 || Makes [[CT_LISTBOX]] multi-selectable (see also [[lbSetCurSel]], [[lbCurSel]], [[lbSetSelected]], [[lbSelection]])
| SL_TEXTURES || 16 || 0x10
|}
|}


=== [[CT_TREE]] Specific Styles ===
'''[[CT_TREE]] Specific Styles'''
{| class="bikitable"
{| class="wikitable" width="20%"
! Define !! Decimal !! Hexadecimal !! Remark
! Define !! Decimal !! Hexadecimal
|-
|-
| TR_SHOWROOT || 1 || 0x01 ||
| TR_SHOWROOT || 1 || 0x01
|-
|-
| TR_AUTOCOLLAPSE || 2 || 0x02 ||
| TR_AUTOCOLLAPSE || 2 || 0x02
|}
|}


=== Control Styles Defines ===
*'''Control Styles Definitions:'''
<spoiler>
''All defines can be retrieved by executing''
''All defines can be retrieved by executing''
<code> "Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<code>"Default" [[call]] [[BIS_fnc_exportGUIBaseClasses]];</code>
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define ST_LEFT 0x00
#define ST_LEFT 0x00
Line 621: Line 614:
#define TR_AUTOCOLLAPSE 2
#define TR_AUTOCOLLAPSE 2
</syntaxhighlight>
</syntaxhighlight>
</spoiler>
== UI Eventhandlers ==
A reference list of [[User Interface Event Handlers]].


=== Positioning ===
The position has to fulfill the following goals:
* Scale properly with interface size set by the user
* Work on all common aspect rations and resolution (Mainly 1920p by 1080p and 16:9 aspect ratio according to valve's statistic from 2020)
{{wip}}
//Some description, common issues/problems, best practices
* [[Arma_3_GUI_Coordinates]]
* [[Arma 3 Pixel Grid System]]
* [[SafeZone]]


== Best practice ==
[[User:7erra|7erra]] ([[User talk:7erra|talk]]): Remind user that not everyone has the same settings as him. Best practice is to create the UI with the following settings (even if they look like s*it): UI size: Very Large, Ratio: 4:3 (actually 5:4 but no one uses that one). Here is a graph I created which shows the resolutions used by Steam users: https://imgur.com/a/WrFXZaN


=== Inheritance ===
== Inheritance ==
<!-- added by Dr_Eyeball. Example not tested. 11 May 2007. Modify it as you see fit, but don't forget this important topic. -->
<!-- added by Dr_Eyeball. Example not tested. 11 May 2007. Modify it as you see fit, but don't forget this important topic. -->
<!-- Nasty person and Java developer that I am, I dared to move all opening braces at the end of the previous line to make it look more compact. Furthermore I removed some placeholders, because they didn't seem to be needed that much. I hope you don't mind. Also, I love to meddle… :) ~~~~ -->
<!-- Nasty person and Java developer that I am, I dared to move all opening braces at the end of the previous line to make it look more compact. Furthermore I removed some placeholders, because they didn't seem to be needed that much. I hope you don't mind. Also, I love to meddle… :) ~~~~ -->
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 redeclare all attributes for each class definition.


* '''Example:'''
[[User:7erra|7erra]] ([[User talk:7erra|talk]]): As well as keeping a uniform style.
<syntaxhighlight lang="cpp">
 
class RscText // Base definition used for inheritance
*'''Example Config:'''
<syntaxhighlight lang="cpp">class RscText // Base definition used for inheritance
{
{
type = CT_STATIC;
type = CT_STATIC;
Line 680: Line 678:
</syntaxhighlight>
</syntaxhighlight>


=== 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 isn't applicable). Also it can make your code look more readable sometimes.


* '''Example:'''
*'''Example Config:'''
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
#define COLOR_LIGHTBROWN { 0.776, 0.749, 0.658, 1 }
#define COLOR_LIGHTBROWN { 0.776, 0.749, 0.658, 1 }
Line 689: Line 687:
#define COLOR_TRANSPARENT { 0, 0, 0, 0 }
#define COLOR_TRANSPARENT { 0, 0, 0, 0 }


// …
class MyDialog  
 
{
class MyDialog {
idd = -1;
idd = -1;
movingEnable = 1;
movingEnable = 1;
Line 698: Line 695:
controls[] = { MyDialogText };
controls[] = { MyDialogText };


class MyDialogBackground : RscText {
class MyDialogBackground : RscText  
    {
colorBackground[] = COLOR_HALF_BLACK;
colorBackground[] = COLOR_HALF_BLACK;
x = 0.7;  y = 0.1;
x = 0.7;  y = 0.1;
Line 704: Line 702:
};
};


class MyDialogText : RscText {
class MyDialogText : RscText  
    {
style = ST_MULTI;
style = ST_MULTI;
colorBackground[] = COLOR_TRANSPARENT;
colorBackground[] = COLOR_TRANSPARENT;
Line 715: Line 714:
};</syntaxhighlight>
};</syntaxhighlight>


[[Category: Dialogs]]
=== Useful includes ===
{{arma3}} offers a wide range of useful files which can be included to get access to some  helpful macros.
{| class="wikitable"
|-
! 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\macroexecs.inc"</syntaxhighlight> || Defines for [[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\definecommoncolors.inc"</syntaxhighlight> || Colors used in {{arma3}}, like background color set by the user.
|-
| <syntaxhighlight lang="cpp">#include "\a3\ui_f\hpp\definecommongrids.inc"</syntaxhighlight> || UI grids such as GUI_GRID and all its variants.
|-
| <syntaxhighlight lang="cpp">#include "\a3\ui_f\hpp\defineresincl.inc"</syntaxhighlight> || IDCs and IDDs of many {{arma3}} UIs.
|}
 
 
= Eventhandlers =
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 =
There are several commands to influence your dialog after its initial creation. These command are listed on the following pages:
* [[:Category:Command Group: GUI Control|GUI Commands]]
* [[:Category:Function_Group:_GUI|GUI Functions]]
 
= Native {{arma3}} GUIs =
{{arma3}} comes with a wide varity of various displays and dialogs. They can be found in:
*[[configFile]] usually with names like '''Rsc'''SomeDisplayName or '''Display'''SomeDisplayName
 
Additonally, {{arma3}} offers some customizeable GUIs which can be accessed by scripts.
* [[BIS_fnc_3DENShowMessage]]
* [[BIS_fnc_guiMessage]]
* [[BIS_fnc_GUIhint]]
* [[hint]], [[hintSilent]], [[hintC]]
 
= GUI References =
Sometimes it's a good idea so see how others created their GUIs. Here's a list of a few resources:
* [https://github.com/7erra/-Terra-s-Editing-Extensions/tree/master/TER_editing/gui Terra's Editing Extentions]
* [https://github.com/ConnorAU/A3ExtendedFunctionViewer A3ExtendedFunctionViewer]
* [https://github.com/ConnorAU/A3UserInputMenus A3UserInputMenus]
* [https://github.com/ConnorAU/A3ColorPicker A3ColorPicker]
* [https://github.com/R3voA3/3den-Enhanced/tree/master/3denEnhanced/GUI 3den Enhanced]
 
= Tips for creating GUIs =
* Functionality
* Layout
* Style
* Behaviour
* Customizability
* ...
{{wip}}
 
= Tutorials =
{{wip}}
 
= Misc =
* [[Arma_3_IDD_List]]
* [[Arma 3 User Interface Editor]]

Revision as of 10:55, 10 March 2020

Template:SideTOC

Introduction

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. They are defined as classes in the missionConfigFile (description.ext), campaignConfigFile (Campaign Description.ext) or configFile (config.cpp).

Terminology

GUI
Graphical User Interface which let's the user interact with the software through graphical controls like buttons, lists and so on.

UI
User Interface which let's the user interact with the software through a console application

IGUI
Integrated Graphical User Interface, usually used 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 hasn't 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).

7erra (talk): displayParent is only available for createDisplay displays, createDisplay will return the display while createDialog will only return success flag. dialog will return false for displays created with createDisplay.

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 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 Contains class names of all foreground controls associated to this dialog.
objects Array
  • Example Config:
class DefaultDialog 
{
  idd = -1;
  access = 0;
  movingEnable = true;		
  onLoad  = "hint str _this";
  onUnload  = "hint str _this";	
  enableSimulation = false;		
  controlsBackground[] = 
  { 
    //Background controls;
  };
  controls[] = 
  { 
   //Controls;
  };
  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 how a dialog can be closed.

  • by pressing the Escape-key
  • by using closeDialog
  • by using closeDisplay
  • when the user presses a button with IDC 0, 1 or 2

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.

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};
          };
      };
  };
};

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
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's 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 -wrong parameter ("a3") defined!-[[:Category:Introduced with a3 version 1.48|1.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

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;
};

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";

Define Decimal Hexadecimal Remark Define Decimal Hexadecimal Remark
CT_STATIC 0 0x00 CT_XLISTBOX 42 0x2A
CT_BUTTON 1 0x01 CT_XSLIDER 43 0x2B
CT_EDIT 2 0x02 CT_XCOMBO 44 0x2C
CT_SLIDER 3 0x03 CT_ANIMATED_TEXTURE 45 0x2D
CT_COMBO 4 0x04 CT_MENU 46 0x2E Arma 3 (EDEN)
CT_LISTBOX 5 0x05 CT_MENU_STRIP 47 0x2F Arma 3 (EDEN)
CT_TOOLBOX 6 0x06 CT_CHECKBOX 77 0x4D Arma 3
CT_CHECKBOXES 7 0x07 CT_OBJECT 80 0x50
CT_PROGRESS 8 0x08 CT_OBJECT_ZOOM 81 0x51
CT_HTML 9 0x09 CT_OBJECT_CONTAINER 82 0x52
CT_STATIC_SKEW 10 0x0A CT_OBJECT_CONT_ANIM 83 0x53
CT_ACTIVETEXT 11 0x0B CT_LINEBREAK 98 0x62
CT_TREE 12 0x0C CT_USER 99 0x63
CT_STRUCTURED_TEXT 13 0x0D CT_MAP 100 0x64
CT_CONTEXT_MENU 14 0x0E CT_MAP_MAIN 101 0x65
CT_CONTROLS_GROUP 15 0x0F CT_LISTNBOX 102 0x66
CT_SHORTCUTBUTTON 16 0x10 CT_ITEMSLOT 103 0x67
CT_HITZONES 17 0x11 CT_LISTNBOX_CHECKABLE 104 0x68
CT_VEHICLETOGGLES 18 0x12 CT_VEHICLE_DIRECTION 105 0x69
CT_CONTROLS_TABLE 19 0x13
CT_XKEYDESC 40 0x28
CT_XBUTTON 41 0x29
  • Control Types Defines:

All defines can be retrieved by executing "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

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
TR_SHOWROOT 1 0x01
TR_AUTOCOLLAPSE 2 0x02
  • Control Styles Definitions:

All defines can be retrieved by executing "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

Positioning

The position has to fulfill the following goals:

  • Scale properly with interface size set by the user
  • Work on all common aspect rations and resolution (Mainly 1920p by 1080p and 16:9 aspect ratio according to valve's statistic from 2020)

Template:wip //Some description, common issues/problems, best practices

7erra (talk): Remind user that not everyone has the same settings as him. Best practice is to create the UI with the following settings (even if they look like s*it): UI size: Very Large, Ratio: 4:3 (actually 5:4 but no one uses that one). Here is a graph I created which shows the resolutions used by Steam users: https://imgur.com/a/WrFXZaN

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.

7erra (talk): As well as keeping a uniform style.

  • Example Config:
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;
	};
};

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 isn't applicable). Also it can make your code look more readable sometimes.

  • Example Config:
#define COLOR_LIGHTBROWN { 0.776, 0.749, 0.658, 1 }
#define COLOR_HALF_BLACK { 0, 0, 0, 0.5 }
#define COLOR_TRANSPARENT { 0, 0, 0, 0 }

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

	class MyDialogBackground : RscText 
    {
		colorBackground[] = COLOR_HALF_BLACK;
		x = 0.7;  y = 0.1;
		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;
	};
};

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.


Eventhandlers

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.

Scripting

There are several commands to influence your dialog after its initial creation. These command are listed on the following pages:

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

Sometimes it's a good idea so see how others created their GUIs. Here's a list of a few resources:

Tips for creating GUIs

  • Functionality
  • Layout
  • Style
  • Behaviour
  • Customizability
  • ...

Template:wip

Tutorials

Template:wip

Misc