DialogControls-Buttons: Difference between revisions

From Bohemia Interactive Community
Jump to navigation Jump to search
m (Created page with "'''TokenNames common to most controls, such as x,y,w,h,text,idc... are not listed here. ''' Buttons are one way to add interactivity to your dialogs. Their corresponding ''type'...")
 
m (Text replacement - "Color" to "Color (RGBA)")
(22 intermediate revisions by 7 users not shown)
Line 1: Line 1:
'''TokenNames common to most controls, such as x,y,w,h,text,idc... are not listed here. '''
== General ==
{{Informative|TokenNames common to most controls, such as x, y, w, h, text, idc... can be found [[Arma:_GUI_Configuration#Common_Properties|'''here''']].}}


Buttons are one way to add interactivity to your dialogs. Their corresponding ''type'' property is <tt>CT_BUTTON</tt>.
Buttons are one way to add interactivity to your dialogs.
=== Button States ===
[[Image:Dialog controls button.jpg|thumb|110px|The same button four times in different states]]
 
{| class="wikitable"
|-
! State !! Description
|-
| '''Enabled''' || The button has not been [[ctrlEnable|disabled]], it currently doesn't have any mouse or keyboard related focus.
|-
| '''Disabled'''|| The button has been explicitly disabled. It will not be clickable.
|-
| '''Enabled''' + '''Focused'''|| As enabled; additionally it will have a small border of the color defined in the ''colorFocused'' property. This occurs when the button currently has focus (ie. is the default button or has been selected via the ''Tab'' key).
|-
| '''Enabled''' + '''Active'''|| As enabled; additionally it will have a different background as specified in the ''colorBackgroundActive'' background. This occurs when the mouse is currently hovering over an unfocused button.
|-
| '''Enabled''' + '''Active''' + '''Focused'''|| The combined result of the above two states. The mouse is currently hovering over the button in question and it has input focus.
|}


Buttons can have different states (see screenshot) and will render slightly different to give the user a visual feedback on the button's state:
=== Reserved IDCs ===
* '''Enabled''': the button has not been [[ctrlEnable|disabled]], it currently doesn't have any mouse or keyboard related focus
* IDC = 1 for (contextually) OK or CONTINUE
* '''Disabled''': the button has been explicitly disabled. It will not be clickable.
* IDC = 2 for (contextually) CANCEL, ESCAPE or ABORT
* '''Enabled''' + '''Focused''': As enabled; additionally it will have a small border of the color defined in the ''colorFocused'' property. This occurs when the button currently has focus (ie. is the default button or has been selected via the ''Tab'' key).
* '''Enabled''' + '''Active''': As enabled; additionally it will have a different background as specified in the ''colorBackgroundActive'' background. This occurs when the mouse is currently hovering over an unfocused button.
* '''Enabled''' + '''Active''' + '''Focused''': The combined result of the above two states. The mouse is currently hovering over the button in question and it has input focus.


Button can also have code attached to it in the ''action'' property. This code will be run when the button is clicked. Most often, you will have at least one button that closes the dialog via [[closeDialog]]. In this case you can provide ''0'' as the right-side parameter to close the currently open dialog.
{{Important|If you use these idc values, no action, script or event handler will operate on them.}}
====CT_BUTTON=1====
 
{| border="1" align="left" cellpadding="3" cellspacing="0" |
== CT_BUTTON=1 ==
! colspan="3" bgcolor="#bbbbff" | Properties
{| class="wikitable" width="100%" border="1" cellpadding="3" cellspacing="0" |
! bgcolor="#DDF" | Name
! bgcolor="#DDF" | Type
! bgcolor="#DDF" | Required
! bgcolor="#DDF" | Remark
! bgcolor="#DDF" | Script
|-
| '''type'''
| [[Integer]]
| Yes
| Control type: 1 (or CT_BUTTON, if using constants)
| {{n/a}}
|-
|-
! bgcolor="#ddddff" | Name
| '''style'''
! bgcolor="#ddddff" | Type
| [[Integer]]
! bgcolor="#ddddff" | Remark
| Yes
| Display options:
* 0 (ST_LEFT): Text is left-aligned.
* 1 (ST_RIGHT) : Text is right-aligned.
* 2 (ST_CENTER): Text is centered.
| {{n/a}}
|-
|-
| '''action'''
| '''action'''
| string
| [[String]]
| a statement that is executed when the button is not disabled and clicked
| No
| SQS Script statement to execute when button is pressed. Script is compiled and added to the scheduler but cannot be suspended. </tt>_this</tt> is available inside the script but it contains an empty [[String]]. The script is executed when button is released.
| [[buttonSetAction]]
|-
|-
| '''attributes'''
|'''borderSize'''
| class
| [[Number#Float|Float]]
| Possibly an irrelevant xbox class
| Yes
| If > 0 then a background (in the color defined in 'colorBorder') is drawn behind the button.
It extends to the left by the distance defined here, its height is slightly less than that of the button, and it is vertically centered.
The width extends to the right, to where the drop shadow starts. Stays static when button is pressed.
| {{n/a}}
|-
|-
| '''BorderSize'''
|'''colorBackground'''
| float
| [[Color|Color (RGBA)]]
| thickness of border
| Yes
| Button's background color if not "active" (i.e. the mouse pointer is not over it).
| [[ctrlSetBackgroundColor]]
|-
|-
| '''default'''
|'''colorBackgroundActive'''
| boolean
| [[Color|Color (RGBA)]]
| Whether or not this button is the dialog's initially selected button
| Yes
| Background color if "active" (i.e. mouse pointer is over it).
| [[ctrlSetActiveColor]]
|-
|-
| '''colorDisabled'''
|'''colorBackgroundDisabled'''||[[Color|Color (RGBA)]]||Yes||Background color if control is disabled || {{n/a}}
| color array
| text color, if the control has been disabled via [[ctrlEnable]]
|-
|-
| '''colorFocused'''
|'''colorBorder'''||[[Color|Color (RGBA)]]||Yes||Color of left border, defined in 'borderSize' || {{n/a}}
| color array
| color when control has received focus via tabbing or scripted methods
|-
|-
| '''colorShadow'''
|'''colorDisabled'''||[[Color|Color (RGBA)]]||Yes||Text color if control is disabled (via [[ctrlEnable]]) || {{n/a}}
| color array
| the color of the shadow
|-
|-
| '''colorBorder'''
|'''colorFocused'''||[[Color|Color (RGBA)]]||Yes||Alternating background color.
| color array
While the control has focus (but ''without'' the mouse pointer being over it) the background will cycle between 'colorFocused' and 'colorBackground'.
| the color of the border, if any
If both are the same, then the color will be steady.
| {{n/a}}
|-
|-
| '''borderSize'''
|'''colorShadow'''||[[Color|Color (RGBA)]]||Yes||Color of drop shadow behind button (not visible if button disabled) || {{n/a}}
| float
| the width of the border
|-
|-
| '''colorBackgroundActive'''
|'''colorText'''||[[Color|Color (RGBA)]]||Yes||Color of text.||[[ctrlSetTextColor]]
| color array
| color when control has received focus via mouse-over
|-
|-
| '''colorBackgroundDisabled'''
|'''default'''||[[Boolean]]||No||Whether the button will have focus upon loading the dialog.||[[ctrlSetFocus]]
| color array
| background color, if the control has disabled via [[ctrlEnable]]
|-
|-
| '''offsetX'''
|'''offsetPressedX<br>offsetPressedY'''||[[Number#Float|Float]]||Yes||The button's text & background will move by this distance when pressed.
| float
(If a shadow is defined, it will stay in place.)
| the relative X offset between the button and its shadow
| {{n/a}}
|-
|-
| '''offsetY'''
|'''offsetX<br>offsetY'''||[[Number#Float|Float]]||Yes||Horizontal and vertical offset of drop shadow.
| float
If 0, then shadow will be placed directly behind button
| the relative Y offset between the button and its shadow
| {{n/a}}
|-
|-
| '''offsetPressedX'''
|'''url'''||[[String]]||No||URL which will be opened with default web browser. If tooltip is empty, URL will also be set as that. || {{n/a}}
| float
| the relative X offset between the button and its shadow, when it's pressed
|-
|-
| '''offsetPressedY'''
|'''soundClick'''||[[Array Sound|Sound]]||No||Sound to play when button is released after a click. || {{n/a}}
| float
| the relative Y offset between the button and its shadow, when it's pressed
|-
|-
| '''soundEnter'''
|'''soundEnter'''||[[Array Sound|Sound]]||No||Sound to play when the mouse cursor is moved over the button. || {{n/a}}
| sound array
| the sound to play, when the cursor enters the button's bounds
|-
|-
| '''soundPush'''
|'''soundEscape'''||[[Array Sound|Sound]]||No||Sound to play when the button was clicked via the mouse, and then released ''outside'' the button area. || {{n/a}}
| sound array
| the sound to play, when the button has been pushed
|-
|-
| '''soundClick'''
|'''soundPush'''||[[Array Sound|Sound]]||No||Sound to play when button is clicked. || {{n/a}}
| sound array
| the sound to play, when the button is being released
|-
|-
| '''soundEscape'''
| '''text'''||[[String]]||No||Text to display. Will be vertically centered.||[[ctrlSetText]]
| sound array
| the sound to play, when the button has been pushed and the mouse button is released when not over the control
|-
|-
| '''size'''
| '''toolTip'''||[[String]]||No||Text that is shown in a little popup box when the mouse pointer is hovering over the button.||[[ctrlSetTooltip]]
| float
| possibly an irrelevant xbox dialog
|-
|-
| '''tooltip'''
|}
| string
 
| some help phrase when you hover over button
=== Attributes class ===
|-
|}<br clear="all">


=====Attributes class=====
{| class="wikitable" width="30%" border="1" cellpadding="3" cellspacing="0" |
{| border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
! bgcolor="#ddddff" | Name
! bgcolor="#DDF" | Name
! bgcolor="#ddddff" | Type
! bgcolor="#DDF" | Type
! bgcolor="#ddddff" | Remark
! bgcolor="#DDF" | Remark
|-
|-
| '''font'''
| '''font'''
Line 118: Line 131:
|-
|-
| '''shadow'''
| '''shadow'''
| integer
| Integer
|
|
|-
|-
| '''align'''
| '''align'''
| string
| String
| "center"
| "center"
|-
|-
| '''color'''
| '''color'''
| color array
| Color Array
| "#000000"
| "#000000"
|-
|-
|-
|-
|}<br clear="all">
|}<br clear="all">
* '''Example:'''
 
<code><nowiki>
* '''Example Config:'''
class RscButton
<syntaxhighlight lang="cpp">class RscButton
{
{
access = 0;
access = 0;
type = CT_BUTTON;
type = CT_BUTTON;
style = ST_LEFT;
style = ST_LEFT;
x = 0; y = 0; w = 0.3; h = 0.1;
x = 0; y = 0; w = 0.3; h = 0.1;
text = "";
text = "";
font = "TahomaB";
font = "TahomaB";
sizeEx = 0.04;
sizeEx = 0.04;
colorText[] = {0,0,0,1};
colorText[] = {0,0,0,1};
colorDisabled[] = {0.3,0.3,0.3,1};
colorDisabled[] = {0.3,0.3,0.3,1};
colorBackground[] = {0.6,0.6,0.6,1};
colorBackground[] = {0.6,0.6,0.6,1};
colorBackgroundDisabled[] = {0.6,0.6,0.6,1};
colorBackgroundDisabled[] = {0.6,0.6,0.6,1};
colorBackgroundActive[] = {1,0.5,0,1};
colorBackgroundActive[] = {1,0.5,0,1};
offsetX = 0.004;
offsetX = 0.004;
offsetY = 0.004;
offsetY = 0.004;
offsetPressedX = 0.002;
offsetPressedX = 0.002;
offsetPressedY = 0.002;
offsetPressedY = 0.002;
colorFocused[] = {0,0,0,1};
colorFocused[] = {0,0,0,1};
colorShadow[] = {0,0,0,1};
colorShadow[] = {0,0,0,1};
shadow = 0;
shadow = 0;
colorBorder[] = {0,0,0,1};
colorBorder[] = {0,0,0,1};
borderSize = 0.008;
borderSize = 0.008;
soundEnter[] = {"",0.1,1};
soundEnter[] = {"",0.1,1};
soundPush[] = {"",0.1,1};
soundPush[] = {"",0.1,1};
soundClick[] = {"",0.1,1};
soundClick[] = {"",0.1,1};
soundEscape[] = {"",0.1,1};
soundEscape[] = {"",0.1,1};
};
};
class dialog
class Dialog
{
{
class controls
class Controls
{
{
  class OK:rscButton
class OK: RscButton
  {
{
    idc=1;// fixed engine constant
idc=1;// fixed engine constant
    x=y=w=y=whatever;
x=y=w=y=whatever;
    text="OK"
text="OK"
    default=true;
default=true;
  };
};
  class Cancel
class Cancel
  {
{
    idc=2; // fixed engine constant
idc=2; // fixed engine constant
    x=y=somewhere else
x=y=somewhere else
    default=false;
default=false;
  };
};
  };
};
};
};</syntaxhighlight>
 
</nowiki></code>
 


The following example uses almost the same code as the buttons shown in the example screenshot.
The following example uses almost the same code as the buttons shown in the example screenshot.
[[Image:Dialog controls button.jpg|thumb|110px|The same button four times in different states]]
* '''Example Config:'''
<syntaxhighlight lang="cpp">class MyButton
{
  idc = -1;
  type = CT_BUTTON;
  style = ST_LEFT;
  default = false;
  font = FontM;
  sizeEx = 0.03;
  colorText[] = { 0, 0, 0, 1 };
  colorFocused[] = { 1, 0, 0, 1 }; // border color for focused state
  colorDisabled[] = { 0, 0, 1, 0.7 }; // text color for disabled state
  colorBackground[] = { 1, 1, 1, 0.8 };
  colorBackgroundDisabled[] = { 1, 1, 1, 0.5 }; // background color for disabled state
  colorBackgroundActive[] = { 1, 1, 1, 1 }; // background color for active state
  offsetX = 0.003;
  offsetY = 0.003;
  offsetPressedX = 0.002;
  offsetPressedY = 0.002;
  colorShadow[] = { 0, 0, 0, 0.5 };
  colorBorder[] = { 0, 0, 0, 1 };
  borderSize = 0;
  soundEnter[] = { "", 0, 1 }; // no sound
  soundPush[] = { "buttonpushed.ogg", 0.1, 1 };
  soundClick[] = { "", 0, 1 }; // no sound
  soundEscape[] = { "", 0, 1 }; // no sound
  x = 0.4; y = 0.475;
  w = 0.2; h = 0.05;
  text = "Close";
  action = "closeDialog 0; hint ""Dialog closed. You are good to go now!""";
};</syntaxhighlight>


* '''Example:'''
== CT_SHORTCUTBUTTON=16 ==
<code><nowiki>class MyButton {
idc = -1;
type = CT_BUTTON;
style = ST_LEFT;
default = false;
font = FontM;
sizeEx = 0.03;
colorText[] = { 0, 0, 0, 1 };
colorFocused[] = { 1, 0, 0, 1 };  // border color for focused state
colorDisabled[] = { 0, 0, 1, 0.7 };  // text color for disabled state
colorBackground[] = { 1, 1, 1, 0.8 };
colorBackgroundDisabled[] = { 1, 1, 1, 0.5 };  // background color for disabled state
colorBackgroundActive[] = { 1, 1, 1, 1 };  // background color for active state
offsetX = 0.003;
offsetY = 0.003;
offsetPressedX = 0.002;
offsetPressedY = 0.002;
colorShadow[] = { 0, 0, 0, 0.5 };
colorBorder[] = { 0, 0, 0, 1 };
borderSize = 0;
soundEnter[] = { "", 0, 1 };  // no sound
soundPush[] = { "buttonpushed.ogg", 0.1, 1 };
soundClick[] = { "", 0, 1 };  // no sound
soundEscape[] = { "", 0, 1 };  // no sound
x = 0.4; y = 0.475;
w = 0.2; h = 0.05;
text = "Close";
action = "closeDialog 0; hint ""Dialog closed. You are good to go now!""";
};</nowiki></code>


====CT_SHORTCUTBUTTON=16====
{|class="wikitable" width="100%" border="1" align="left" cellpadding="3" cellspacing="0" |
{| border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
Line 227: Line 237:
|-
|-
| '''action'''
| '''action'''
| string
| String
|
| Code executed when button is clicked.
|-
|-
| '''Attributes'''
| '''Attributes'''
| class
| Class
|  
| see [[Arma: GUI Configuration]] General
|-
|-
| '''AttributesImage'''
| '''AttributesImage'''
| class
| Class
|  
| see [[Arma: GUI Configuration]] General
|-
|-
| '''animTextureNormal'''
| '''animTextureNormal'''
| argb color array
| Texture
|  
|  
|-
|-
| '''animTextureDisabled'''
| '''animTextureDisabled'''
| argb color array
| Texture
|  
|  
|-
|-
| '''animTextureOver'''
| '''animTextureOver'''
| argb color array
| Texture
|  
|  
|-
|-
| '''animTextureFocused'''
| '''animTextureFocused'''
| class
| Texture
|  
|  
|-
|-
| '''animTexturePressed'''
| '''animTexturePressed'''
| argb color array
| Texture
|  
|  
|-
|-
| '''animTextureDefault'''
| '''animTextureDefault'''
| argb color array
| Texture
|  
|  
|-
|-
| '''textureNoShortcut'''
| '''textureNoShortcut'''
| argb color array
| Texture
|  
| A custom Texture to be displayed alongside text. Position can be set in the ShortcutPos (Texture) and TextPos (text) class.
|-
|-
| '''color'''
| '''color'''
| color array
| Color Array
|  
|  
|-
|-
| '''color2'''
| '''color2'''
| color array
| Color Array
|  
|  
|-
|-
| '''colorActiveBackground'''
| '''colorActiveBackground'''
| color array
| Color Array
|  
|  
|-
|-
| '''colorBackground'''
| '''colorBackground'''
| color array
| Color Array
|  
|  
|-
|-
| '''colorBackground2'''
| '''colorBackground2'''
| color array
| Color Array
|
|
|-
|-
| '''colorDisabled'''
| '''colorDisabled'''
| color array
| Color Array
|  
|  
|-
|-
| '''default'''
| '''default'''
| boolean
| Boolean
|  
| If set to [[true]], this control is focused when the GUI is opened
|-
|-
| '''HitZone'''
| '''HitZone'''
| class
| Class
|  
|  
|-
|-
| '''period'''
| '''period'''
| float
| Float
|  
| Blinking period
|-
|-
| '''periodFocus'''
| '''periodFocus'''
| float
| Float
|  
| Blinking period when focused
|-
|-
| '''periodOver'''
| '''periodOver'''
| float
| Float
|  
| Blinking period when mouse is hovering over the button
|-
|-
| '''ShortcutPos'''
| '''ShortcutPos'''
| class
| Class
|  
|  
|-
| '''Shadow'''
| Integer
| 0,1 or 2
|-
|-
| '''shortcuts'''
| '''shortcuts'''
Line 319: Line 333:
|-
|-
| '''Size'''
| '''Size'''
| float
| Float
| possibly a typo, used in conjunction with sizeEx
| possibly a typo, used in conjunction with sizeEx
|-
|-
| '''soundEnter'''
| '''soundEnter'''
| sound array
| Sound Array
|  
|  
|-
|-
| '''soundPush'''
| '''soundPush'''
| sound array
| Sound Array
|  
|  
|-
|-
| '''soundClick'''
| '''soundClick'''
| sound array
| Sound Array
|  
|  
|-
|-
| '''soundEscape'''
| '''soundEscape'''
| sound array
| Sound Array
|  
|  
|-
|-
| '''TextPos'''
| '''TextPos'''
| class
| Class
|  
|  
|-
|-
|}<br clear="all">
|}<br clear="all">


* '''Example:'''
=== TextPos/HitZone ===
<code><nowiki>class RscShortcutButton
 
{| class="wikitable" width="30%" border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
|-
! bgcolor="#ddddff" | Name
! bgcolor="#ddddff" | Type
! bgcolor="#ddddff" | Remark
|-
| '''Left'''
| Float
|
|-
| '''Top'''
| Float
|
|-
| '''Right'''
| Float
|
|-
| '''Bottom'''
| Float
|
|-
|}<br clear="all">
 
=== ShortcutPos ===
 
{| class="wikitable" width="30%" border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
|-
! bgcolor="#ddddff" | Name
! bgcolor="#ddddff" | Type
! bgcolor="#ddddff" | Remark
|-
| '''Left'''
| Float
|
|-
| '''Top'''
| Float
|
|-
| '''w'''
| Float
| clearly an inconsistency with 'right'
|-
| '''h'''
| Float
| clearly an inconsistency with 'bottom'
|-
|}<br clear="all">
 
 
*'''Example Config:'''
<syntaxhighlight lang="cpp">class RscShortcutButton
{
{
type = 16;
  type = 16;


class HitZone
  class HitZone
{
  {
  left = 0.0;
    left = 0.0;
  top = 0.0;
    top = 0.0;
  right = 1.0;
    right = 1.0;
  bottom = 1.0;
    bottom = 1.0;
};
  };
class ShortcutPos
  class ShortcutPos
{
  {
  left = 0.005;
    left = 0.005;
  top = 0.005;
    top = 0.005;
  w = 0.0225;
    w = 0.0225;
  h = 0.03;
    h = 0.03;
};
  };
class TextPos
  class TextPos
{
  {
  left = 0.02;
    left = 0.02;
  top = 0.005;
    top = 0.005;
  right = 0.005;
    right = 0.005;
  bottom = 0.005;
    bottom = 0.005;
};
  };
animTextureNormal = "#(argb,8,8,3)color(1,1,1,1)";
  animTextureNormal = "#(argb,8,8,3)color(1,1,1,1)";
animTextureDisabled = "#(argb,8,8,3)color(0.3,0.3,0.3,1)";
  animTextureDisabled = "#(argb,8,8,3)color(0.3,0.3,0.3,1)";
animTextureOver = "#(argb,8,8,3)color(0.8,0.3,0,1)";
  animTextureOver = "#(argb,8,8,3)color(0.8,0.3,0,1)";
animTextureFocused = "#(argb,8,8,3)color(1,0.5,0,1)";
  animTextureFocused = "#(argb,8,8,3)color(1,0.5,0,1)";
animTexturePressed = "#(argb,8,8,3)color(1,0,0,1)";
  animTexturePressed = "#(argb,8,8,3)color(1,0,0,1)";
animTextureDefault = "#(argb,8,8,3)color(0,1,0,1)";
  animTextureDefault = "#(argb,8,8,3)color(0,1,0,1)";
period = 0.1;
  period = 0.1;
periodFocus = 0.4;
  periodFocus = 0.4;
periodOver = 0.4;
  periodOver = 0.4;
shortcuts[] = {};
  shortcuts[] = {};
textureNoShortcut = "#(argb,8,8,3)color(0,0,0,0)";
  textureNoShortcut = "#(argb,8,8,3)color(0,0,0,0)";
color[] = {0,0,0,0.6};
  color[] = {0,0,0,0.6};
color2[] = {0,0,0,1};
  color2[] = {0,0,0,1};
colorDisabled[] = {0,0,0,0.3};
  colorDisabled[] = {0,0,0,0.3};
colorBackground[] = {1,1,1,1};
  colorBackground[] = {1,1,1,1};
colorBackground2[] = {1,1,1,0.5};
  colorBackground2[] = {1,1,1,0.5};
text = "";
  text = "";
size = 0.04;
  size = 0.04;
class Attributes
  class Attributes
{
  {
  font = "TahomaB";
    font = "TahomaB";
  color = "#000000";
    color = "#000000";
  align = "left";
    align = "left";
  shadow = 0;
    shadow = 0;
};
  };
};
};</syntaxhighlight>
</nowiki></code>


====CT_ACTIVETEXT=11====
== CT_ACTIVETEXT=11 ==


The Active Text control behaves very similar to buttons. It shows up as regular text with the additional functionality that you can click and select it. The dialog's currently selected Active Text control will be underlined to indicate it's status. By default, the first Active Text control is selected. When the mouse cursor hovers over an instance of this control, it will show up in the color defined in the ''colorActive'' property.
The active text control behaves very similar to buttons. It shows up as regular text with the additional functionality that you can click and select it. The dialog's currently selected Active Text control will be underlined to indicate it is status. By default, the first Active Text control is selected. When the mouse cursor hovers over an instance of this control, it will show up in the color defined in the ''colorActive'' property.


'''Notice:''' This control doesn't render the usually common ''colorBackground'' property and ''colorText'' is replaced with ''color''.
'''Notice:''' This control doesn't render the usually common ''colorBackground'' property and ''colorText'' is replaced with ''color''.
 
*For Arrowhead, this is not true. The properties are there, and it might be an attempt to standardise, or to account for pictures
{| border="1" align="left" cellpadding="3" cellspacing="0" |
{| class="wikitable" width="100%" border="1" align="left" cellpadding="3" cellspacing="0" |
! colspan="3" bgcolor="#bbbbff" | Properties
! colspan="3" bgcolor="#bbbbff" | Properties
|-
|-
Line 412: Line 480:
|-
|-
| '''action'''
| '''action'''
| string
| String
| a statement that is executed when the control has been clicked
| a statement that is executed when the control has been clicked
|-
| '''candrag'''
| Boolean
|
|-
|-
| '''blinkingPeriod'''
| '''blinkingPeriod'''
| float (Seconds)
| Float (Seconds)
| Makes the text start transparent, go to full opacity and back to full transparent in the amount of time specified.
| Makes the text start transparent, go to full opacity and back to full transparent in the amount of time specified.
|-
|-
| '''color'''
| '''color'''
| color array
| Color Array
| '''replaces ''colorText''''', standard text and underline color
| '''replaces ''colorText''''', standard text and underline color
|-
|-
| '''colorActive'''
| '''colorActive'''
| color array
| Color Array
| text and underline color whenever the mouse hovers over the control
| text and underline color whenever the mouse hovers over the control
|-
|-
| '''colorShade'''
| '''colorShade'''
| color array
| Color Array
|
|-
| '''colorFocused'''
| Color Array
|  
|  
|-
|-
| '''colorDisabled'''
| '''colorDisabled'''
| color array
| Color Array
|
|-
| '''colorShade'''
| Color Array
|
|-
| '''colorText'''
| Color Array
|  
|  
|-
|-
| <strike>'''colorBackground'''</strike>
| <strike>'''colorBackground'''</strike>
| <strike>color array</strike>
| <strike>Color Array</strike>
| '''not applicable'''
| '''not applicable'''
|-
| '''colorBackground2'''
| Color Array
|
|-
|-
| '''default'''
| '''default'''
| boolean
| Boolean
| Whether or not this control is the dialog's initially selected active text
| Whether or not this control is the dialog's initially selected active text
|-
|-
| '''pictureWidth/Height'''
| '''pictureWidth/Height'''
| floats
| Float
|  
|  
|-
|-
Line 450: Line 538:
| argb
| argb
|  
|  
|-
| '''picture'''
| Texture
|
|-
|-
| '''sideToggle'''
| '''sideToggle'''
Line 456: Line 548:
|-
|-
| '''textHeight'''
| '''textHeight'''
| float
| Float
|  
|  
|-
|-
| '''soundEnter'''
| '''soundEnter'''
| sound array
| Sound Array
| the sound to play, when the cursor enters the button's bounds
|-
| '''soundDoubleClick'''
| Sound Array
| the sound to play, when the cursor enters the button's bounds
| the sound to play, when the cursor enters the button's bounds
|-
|-
| '''soundPush'''
| '''soundPush'''
| sound array
| Sound Array
| the sound to play, when the button has been pushed
| the sound to play, when the button has been pushed
|-
|-
| '''soundClick'''
| '''soundClick'''
| sound array
| Sound Array
| the sound to play, when the button is being released
| the sound to play, when the button is being released
|-
|-
| '''soundEscape'''
| '''soundEscape'''
| sound array
| Sound Array
| the sound to play, when the button has been pushed and the mouse button is released when not over the control.
| the sound to play, when the button has been pushed and the mouse button is released when not over the control.
|-
|-
Line 479: Line 575:
The following example uses almost the same code as the controls shown in the example screenshot.
The following example uses almost the same code as the controls shown in the example screenshot.
[[Image:Dialog controls activetext.jpg|thumb|110px|Simple dialog with three Active Text controls]]
[[Image:Dialog controls activetext.jpg|thumb|110px|Simple dialog with three Active Text controls]]
* '''Example:'''
 
<code><nowiki>class MyActiveText {
* '''Example Config:'''
idc = -1;
<syntaxhighlight lang="cpp">class MyActiveText
type = CT_ACTIVETEXT;
{
style = ST_LEFT;
  idc = -1;
x = 0.75; y = 0.5;
  type = CT_ACTIVETEXT;
w = 0.2; h = 0.035;
  style = ST_LEFT;
font = FontM;
  x = 0.75; y = 0.5;
sizeEx = 0.024;
  w = 0.2; h = 0.035;
color[] = { 1, 1, 1, 1 };
  font = FontM;
colorActive[] = { 1, 0.2, 0.2, 1 };
  sizeEx = 0.024;
soundEnter[] = { "", 0, 1 };   // no sound
  color[] = { 1, 1, 1, 1 };
soundPush[] = { "", 0, 1 };
  colorActive[] = { 1, 0.2, 0.2, 1 };
soundClick[] = { "", 0, 1 };
  soundEnter[] = { "", 0, 1 }; // no sound
soundEscape[] = { "", 0, 1 };
  soundPush[] = { "", 0, 1 };
action = "hint ""Good choice!""";
  soundClick[] = { "", 0, 1 };
text = "Text";
  soundEscape[] = { "", 0, 1 };
default = true;
  action = "hint ""Good choice!""";
};</nowiki></code>
  text = "Text";
[[Category: Dialogs]]
  default = true;
};</syntaxhighlight>
 
[[Category: Dialogs|Buttons]]

Revision as of 15:48, 16 October 2020

General

TokenNames common to most controls, such as x, y, w, h, text, idc... can be found here.

Buttons are one way to add interactivity to your dialogs.

Button States

The same button four times in different states
State Description
Enabled The button has not been disabled, it currently doesn't have any mouse or keyboard related focus.
Disabled The button has been explicitly disabled. It will not be clickable.
Enabled + Focused As enabled; additionally it will have a small border of the color defined in the colorFocused property. This occurs when the button currently has focus (ie. is the default button or has been selected via the Tab key).
Enabled + Active As enabled; additionally it will have a different background as specified in the colorBackgroundActive background. This occurs when the mouse is currently hovering over an unfocused button.
Enabled + Active + Focused The combined result of the above two states. The mouse is currently hovering over the button in question and it has input focus.

Reserved IDCs

  • IDC = 1 for (contextually) OK or CONTINUE
  • IDC = 2 for (contextually) CANCEL, ESCAPE or ABORT
If you use these idc values, no action, script or event handler will operate on them.

CT_BUTTON=1

Name Type Required Remark Script
type Integer Yes Control type: 1 (or CT_BUTTON, if using constants) N/A
style Integer Yes Display options:
  • 0 (ST_LEFT): Text is left-aligned.
  • 1 (ST_RIGHT) : Text is right-aligned.
  • 2 (ST_CENTER): Text is centered.
N/A
action String No SQS Script statement to execute when button is pressed. Script is compiled and added to the scheduler but cannot be suspended. _this is available inside the script but it contains an empty String. The script is executed when button is released. buttonSetAction
borderSize Float Yes If > 0 then a background (in the color defined in 'colorBorder') is drawn behind the button.

It extends to the left by the distance defined here, its height is slightly less than that of the button, and it is vertically centered. The width extends to the right, to where the drop shadow starts. Stays static when button is pressed.

N/A
colorBackground Color (RGBA) Yes Button's background color if not "active" (i.e. the mouse pointer is not over it). ctrlSetBackgroundColor
colorBackgroundActive Color (RGBA) Yes Background color if "active" (i.e. mouse pointer is over it). ctrlSetActiveColor
colorBackgroundDisabled Color (RGBA) Yes Background color if control is disabled N/A
colorBorder Color (RGBA) Yes Color of left border, defined in 'borderSize' N/A
colorDisabled Color (RGBA) Yes Text color if control is disabled (via ctrlEnable) N/A
colorFocused Color (RGBA) Yes Alternating background color.

While the control has focus (but without the mouse pointer being over it) the background will cycle between 'colorFocused' and 'colorBackground'. If both are the same, then the color will be steady.

N/A
colorShadow Color (RGBA) Yes Color of drop shadow behind button (not visible if button disabled) N/A
colorText Color (RGBA) Yes Color of text. ctrlSetTextColor
default Boolean No Whether the button will have focus upon loading the dialog. ctrlSetFocus
offsetPressedX
offsetPressedY
Float Yes The button's text & background will move by this distance when pressed.

(If a shadow is defined, it will stay in place.)

N/A
offsetX
offsetY
Float Yes Horizontal and vertical offset of drop shadow.

If 0, then shadow will be placed directly behind button

N/A
url String No URL which will be opened with default web browser. If tooltip is empty, URL will also be set as that. N/A
soundClick Sound No Sound to play when button is released after a click. N/A
soundEnter Sound No Sound to play when the mouse cursor is moved over the button. N/A
soundEscape Sound No Sound to play when the button was clicked via the mouse, and then released outside the button area. N/A
soundPush Sound No Sound to play when button is clicked. N/A
text String No Text to display. Will be vertically centered. ctrlSetText
toolTip String No Text that is shown in a little popup box when the mouse pointer is hovering over the button. ctrlSetTooltip

Attributes class

Properties
Name Type Remark
font string
shadow Integer
align String "center"
color Color Array "#000000"


  • Example Config:
class RscButton
{
	access = 0;
	type = CT_BUTTON;
	style = ST_LEFT;
	x = 0; y = 0; w = 0.3; h = 0.1;
	text = "";
	font = "TahomaB";
	sizeEx = 0.04;
	colorText[] = {0,0,0,1};
	colorDisabled[] = {0.3,0.3,0.3,1};
	colorBackground[] = {0.6,0.6,0.6,1};
	colorBackgroundDisabled[] = {0.6,0.6,0.6,1};
	colorBackgroundActive[] = {1,0.5,0,1};
	offsetX = 0.004;
	offsetY = 0.004;
	offsetPressedX = 0.002;
	offsetPressedY = 0.002;
	colorFocused[] = {0,0,0,1};
	colorShadow[] = {0,0,0,1};
	shadow = 0;
	colorBorder[] = {0,0,0,1};
	borderSize = 0.008;
	soundEnter[] = {"",0.1,1};
	soundPush[] = {"",0.1,1};
	soundClick[] = {"",0.1,1};
	soundEscape[] = {"",0.1,1};
};
class Dialog
{
	class Controls
	{
		class OK: RscButton
		{
			idc=1;// fixed engine constant
			x=y=w=y=whatever;
			text="OK"
			default=true;
		};
		class Cancel
		{
			idc=2; // fixed engine constant
			x=y=somewhere else
			default=false;
		};
	};
};

The following example uses almost the same code as the buttons shown in the example screenshot.

  • Example Config:
class MyButton 
{
  idc = -1;
  type = CT_BUTTON;
  style = ST_LEFT;
  default = false;
  font = FontM;
  sizeEx = 0.03;
  colorText[] = { 0, 0, 0, 1 };
  colorFocused[] = { 1, 0, 0, 1 };		// border color for focused state
  colorDisabled[] = { 0, 0, 1, 0.7 };		// text color for disabled state
  colorBackground[] = { 1, 1, 1, 0.8 };
  colorBackgroundDisabled[] = { 1, 1, 1, 0.5 };	// background color for disabled state
  colorBackgroundActive[] = { 1, 1, 1, 1 };		// background color for active state
  offsetX = 0.003;
  offsetY = 0.003;
  offsetPressedX = 0.002;
  offsetPressedY = 0.002;
  colorShadow[] = { 0, 0, 0, 0.5 };
  colorBorder[] = { 0, 0, 0, 1 };
  borderSize = 0;
  soundEnter[] = { "", 0, 1 };	// no sound
  soundPush[] = { "buttonpushed.ogg", 0.1, 1 };
  soundClick[] = { "", 0, 1 };	// no sound
  soundEscape[] = { "", 0, 1 };	// no sound
  x = 0.4; y = 0.475;
  w = 0.2; h = 0.05;
  text = "Close";
  action = "closeDialog 0; hint ""Dialog closed. You are good to go now!""";
};

CT_SHORTCUTBUTTON=16

Properties
Name Type Remark
action String Code executed when button is clicked.
Attributes Class see Arma: GUI Configuration General
AttributesImage Class see Arma: GUI Configuration General
animTextureNormal Texture
animTextureDisabled Texture
animTextureOver Texture
animTextureFocused Texture
animTexturePressed Texture
animTextureDefault Texture
textureNoShortcut Texture A custom Texture to be displayed alongside text. Position can be set in the ShortcutPos (Texture) and TextPos (text) class.
color Color Array
color2 Color Array
colorActiveBackground Color Array
colorBackground Color Array
colorBackground2 Color Array
colorDisabled Color Array
default Boolean If set to true, this control is focused when the GUI is opened
HitZone Class
period Float Blinking period
periodFocus Float Blinking period when focused
periodOver Float Blinking period when mouse is hovering over the button
ShortcutPos Class
Shadow Integer 0,1 or 2
shortcuts array key short cuts. often over-ridden/ignored by engine
Size Float possibly a typo, used in conjunction with sizeEx
soundEnter Sound Array
soundPush Sound Array
soundClick Sound Array
soundEscape Sound Array
TextPos Class


TextPos/HitZone

Properties
Name Type Remark
Left Float
Top Float
Right Float
Bottom Float


ShortcutPos

Properties
Name Type Remark
Left Float
Top Float
w Float clearly an inconsistency with 'right'
h Float clearly an inconsistency with 'bottom'



  • Example Config:
class RscShortcutButton
{
  type = 16;

  class HitZone
  {
    left = 0.0;
    top = 0.0;
    right = 1.0;
    bottom = 1.0;
  };
  class ShortcutPos
  {
    left = 0.005;
    top = 0.005;
    w = 0.0225;
    h = 0.03;
  };
  class TextPos
  {
    left = 0.02;
    top = 0.005;
    right = 0.005;
    bottom = 0.005;
  };
  animTextureNormal = "#(argb,8,8,3)color(1,1,1,1)";
  animTextureDisabled = "#(argb,8,8,3)color(0.3,0.3,0.3,1)";
  animTextureOver = "#(argb,8,8,3)color(0.8,0.3,0,1)";
  animTextureFocused = "#(argb,8,8,3)color(1,0.5,0,1)";
  animTexturePressed = "#(argb,8,8,3)color(1,0,0,1)";
  animTextureDefault = "#(argb,8,8,3)color(0,1,0,1)";
  period = 0.1;
  periodFocus = 0.4;
  periodOver = 0.4;
  shortcuts[] = {};
  textureNoShortcut = "#(argb,8,8,3)color(0,0,0,0)";
  color[] = {0,0,0,0.6};
  color2[] = {0,0,0,1};
  colorDisabled[] = {0,0,0,0.3};
  colorBackground[] = {1,1,1,1};
  colorBackground2[] = {1,1,1,0.5};
  text = "";
  size = 0.04;
  class Attributes
  {
    font = "TahomaB";
    color = "#000000";
    align = "left";
    shadow = 0;
  };
};

CT_ACTIVETEXT=11

The active text control behaves very similar to buttons. It shows up as regular text with the additional functionality that you can click and select it. The dialog's currently selected Active Text control will be underlined to indicate it is status. By default, the first Active Text control is selected. When the mouse cursor hovers over an instance of this control, it will show up in the color defined in the colorActive property.

Notice: This control doesn't render the usually common colorBackground property and colorText is replaced with color.

  • For Arrowhead, this is not true. The properties are there, and it might be an attempt to standardise, or to account for pictures
Properties
Name Type Remark
action String a statement that is executed when the control has been clicked
candrag Boolean
blinkingPeriod Float (Seconds) Makes the text start transparent, go to full opacity and back to full transparent in the amount of time specified.
color Color Array replaces colorText, standard text and underline color
colorActive Color Array text and underline color whenever the mouse hovers over the control
colorShade Color Array
colorFocused Color Array
colorDisabled Color Array
colorShade Color Array
colorText Color Array
colorBackground Color Array not applicable
colorBackground2 Color Array
default Boolean Whether or not this control is the dialog's initially selected active text
pictureWidth/Height Float
sideDisabled argb
picture Texture
sideToggle argb
textHeight Float
soundEnter Sound Array the sound to play, when the cursor enters the button's bounds
soundDoubleClick Sound Array the sound to play, when the cursor enters the button's bounds
soundPush Sound Array the sound to play, when the button has been pushed
soundClick Sound Array the sound to play, when the button is being released
soundEscape Sound Array the sound to play, when the button has been pushed and the mouse button is released when not over the control.


The following example uses almost the same code as the controls shown in the example screenshot.

Simple dialog with three Active Text controls
  • Example Config:
class MyActiveText
{
  idc = -1;
  type = CT_ACTIVETEXT;
  style = ST_LEFT;
  x = 0.75; y = 0.5;
  w = 0.2; h = 0.035;
  font = FontM;
  sizeEx = 0.024;
  color[] = { 1, 1, 1, 1 };
  colorActive[] = { 1, 0.2, 0.2, 1 };
  soundEnter[] = { "", 0, 1 };	// no sound
  soundPush[] = { "", 0, 1 };
  soundClick[] = { "", 0, 1 };
  soundEscape[] = { "", 0, 1 };
  action = "hint ""Good choice!""";
  text = "Text";
  default = true;
};