Adding Controls to a Dialog

By HeliJunkie

The control class

For each control we add to our dialog, we have to create a corresponding class. Control classes are used within the dialog class. Classes within another class are called "subclasses". Each subclass has a "parent class". For our controls the parent class will be the dialog class. To create a control class we only have to add our class syntax within the dialog class:

 

Class SampleDialog {
  //I won't repeat the whole code.
  //I only will write some code, so
  //You can see where to add the new code.
  //If I omit some code, I will write "// .."
  //..
  objects[] = {};
  class ButtonControl {
    // Here we will add our control properties
  };
};

There are a lot of different control types you can use in Arma. We first want to create a "Button", so I give the class the name "ButtonControl".

Adding properties to our first control

Mandatory properties, each control can have a lot of different properties, but all controls need some mandatory properties.

Name
Type
Remark
idc integer A number for our control. It must be unique within the dialog class. If you don't need script access to this control, use "-1".
type integer Control type
style integer Control style
moving boolean Whether the dialog will be moved if this control is dragged.
(should be set in a background control)
x float Offset from left, where the control starts. (0 to 1)
y float Offset from top, where the control starts. (0 to 1)
w float Width of the control. (0 to 1)
h float Height of the contol. (0 to 1)

 

Some more information's about positioning values:

The size of a screen is defined as 1x1. So if you set a value of 0.5 for the "x" property, your control will start in the middle (horizontal) of the screen. If you then define 0.5 for the width (w), the control will end at the right side of the screen (x+w=right side of control = 1 = right side of screen). I use a screen resolution of 1280x1024. One pixel will be less than one thousandth, so it's not rare to use values like "0.015".

Defining the control type and style

Each control has its own "type" value. The button control has the value "1".
The style property mostly defines the alignment of the control text. We want to set our text in the middle of the button. For center alignment we have to use "2". Let us extend our code with the mandatory properties:

 

Class SampleDialog {
  // ..
  class ButtonControl {
    idc = -1;
    type = 1;
    style = 2;
    moving = false;
    x = 0.45;
    y = 0.9;
    h = 0.05;
    w = 0.1;
  };
};

Adding font properties to the control

Every time a control uses some text to display, it needs to know which font to use, and the size.

Name
Type Remark
font string The name of the font to use.
sizeEx float The size of the font (0 to 1)


There are only a few fonts you can use in Arma. Here is a list from ArmA V1.14:

Fontname Remark
Zeppelin32 Normal (default) font
Zeppelin33 Bold font
Zeppelin33 Italic Bold, italic font
Bitstream Same as Zeppelin32
TahomaB Same as Zeppelin32
LucidiaConsoleB A monotype font


We will use the default font in our button. So let us go on with some more code:


Class SampleDialog {
  // ..
  class ButtonControl {
    // ..
    w = 0.1;
    font = "Zeppelin32";
    sizeEx = 0.025;
  };
};

 

Adding a lot more button properties

Here is a list with all the other properties we need to define for a button control:

Name
Type Remark
action string Script commands that are executed, if the button is pressed.
text string The text to display on the button
default boolean Defines if it is the default button for the dialog
colorText color Array Text color
colorDisabled color Array Text color if button is disabled
colorFocused color Array Color when the button gets the focus
colorShadow color Array Color of the shadow
colorBorder color Array Color of the border
colorBackground color Array Background color
colorBackgroundActive color Array Background color if button has focus (changes with background color)
colorBackgroundDisabled color Array Background color if button is disabled
borderSize float Size of button border (displayed only left side)
offsetX float x offset between button and shadow
offsetY float y offset between button and shadow
offsetPressedX float x offset between button and shadow when pressed
offsetPressedY float y offset between button and shadow when pressed
soundEnter soundArray Sound to play if mouse cursor moves over the button control
soundPush soundArray Sound to play when button is pushed
soundClick soundArray Sound to play when button is released
soundEscape soundArray Sound to play when button is released and mouse cursor is not over the button control

 

More data types

The color data type is defined as an array of 4 floating numbers. The first three define the color. The fourth number defines the transparency. The color is defined as RGB (Red/Green/Blue). You can define every color with the combination of these three values. The transparency is defined from 0 to 1. 0 is fully transparent (you cannot see anything) and 1 is zero transparency. For full white you need to define {1,1,1,1}, black {0,0,0,1} or red {1,0,0,1}. All these colors use zero transparency.
The sound array is defined as an array of 3 values.
{"SoundFile",volume,pitch}
SoundFile is a valid soundfile.
Volume ranges form 0 (quiet) to 1 (full).
Pitch is a value from 0 to 4. 1 is normal. If you use 2, the sound will be higher. A value of 0.5 will make it deeper.
Most of the time you won't use any sounds, so define {"",0,1}.

Lets complete our first dialog

class SampleDialog {
  idd = -1;
  movingEnable = false;
  controlsBackground[] = {};
  controls[] = {"ButtonControl"};
  objects[] = {};
  class ButtonControl {
    idc = -1;
    type = 1;
    style = 2;
    moving = false;
    x = 0.45;
    y = 0.9;
    h = 0.05;
    w = 0.1;
    font = "Zeppelin32";
    sizeEx = 0.025;
    // action uses script commands to close dialog and display a hint
    action = "closeDialog 0; hint ""Close pushed"";"
    text = "Close";
    default = false;
    colorText[] = {1,0,0,1}; // white
    colorFocused[] = {0,1,0,1}; // green
    colorShadow[] = {0.8,0.8,0.8,1}; // darkgrey
    colorBorder[] = {0.5,0.5,0.5,1}; // grey
    colorBackground[] = {0,1,1,1};
    colorBackgroundActive[] = {0,1,0,1}; // green
    colorDisabled[] = {1,0,0,1}; // red
    colorBackgroundDisabled[] = {0.5,0.5,0.5,1}; // grey
    borderSize = 0.015;
    offsetX = 0.005;
    offsetY = 0.005;
    offsetPressedX = 0.002;
    offsetPressedY = 0.002;
    soundEnter[] = {"",0,1}; // NoSound
    soundPush[] = {"",0,1}; // NoSound
    soundClick[] = {"",0,1}; // NoSound
    soundEscape[] = {"",0,1}; // NoSound
  };
};


We have now added all properties to our button control. The last thing we have to do, is to tell the dialog to use our button class. To do this, you have to add the class name of your control ("ButtonControl") to the list of controls in
the dialog class (which is the parent class of the button control). I have already added the code in the last listing.
Here is a screenshot from this button control:

My First Dialog