How to place text on a dialog button

[engima 328]

I'm having a hard time trying to understand dialog GUIs. But I finally have something working. All I'm trying to do is to create a simple dialog with text and some close buttons. But the text on the buttons is totally misaligned, and I feel stuck. So my question is: How can I center the texts on their buttons? Check the TutorialDialog and the BaseButton below.

 

I cannot find any properties regarding the text placements. The buttons seem to simply have a "text" property, and I have assumed that it will work by itself. Apparently not, because the text falls to low on the button. Can anyone see what I'm doing wrong?

 

(I'm also quite sure this has worked earlier, but an Arma update might have broken it.)

 

 Here's the code:

Spoiler

#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_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_OBJECT 80
#define CT_OBJECT_ZOOM 81
#define CT_OBJECT_CONTAINER 82
#define CT_OBJECT_CONT_ANIM 83
#define CT_LINEBREAK 98
#define CT_ANIMATED_USER 99
#define CT_MAP              100
#define CT_MAP_MAIN 101
#define CT_LISTNBOX 102

// Static styles
#define ST_POS            0x0F
#define ST_HPOS           0x03
#define ST_VPOS           0x0C
#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_TYPE           0xF0
#define ST_SINGLE         0
#define ST_MULTI          16
#define ST_TITLE_BAR      32
#define ST_PICTURE        48
#define ST_FRAME          64
#define ST_BACKGROUND     80
#define ST_GROUP_BOX      96
#define ST_GROUP_BOX2     112
#define ST_HUD_BACKGROUND 128
#define ST_TILE_PICTURE   144
#define ST_WITH_RECT      160
#define ST_LINE           176
#define ST_MULTI_NOBORDER 528

#define ST_SHADOW         0x100
#define ST_NO_RECT        0x200 // this style works for CT_STATIC in conjunction with ST_MULTI
#define ST_KEEP_ASPECT_RATIO  0x800

#define ST_TITLE          ST_TITLE_BAR + ST_CENTER

// Slider styles
#define SL_DIR            0x400
#define SL_VERT           0
#define SL_HORZ           0x400

#define SL_TEXTURES       0x10

// Listbox styles
#define LB_TEXTURES       0x10
#define LB_MULTI          0x20

#define FontM             "EtelkaNarrowMediumPro"

#define true 1
#define false 0

class BaseDialog {
    idd = -1;                      // set to -1, because we don't require a unique ID
    movingEnable = false;           // the dialog can be moved with the mouse (see "moving" below)
    enableSimulation = true;      // freeze the game
    controlsBackground[] = {  };    // no background controls needed
    objects[] = {  };               // no objects needed
    controls[] = {  };  // our "Hello world" text as seen below:
    
    class BaseBackground {
        idc = -1;              // set to -1, unneeded
        moving = 0;            // left click (and hold) this control to move the dialog
                               // (requires "movingEnabled" to be 1, see above)
        type = CT_STATIC;      // constant
        style = ST_LEFT;       // constant
        text = "";
        font = FontM;
        sizeEx = 0.05;

        colorBackground[] = { 1, 1, 1, 0.5 };
        colorText[] = { 0, 0, 0, 1 };

        x = 0.05;
        y = 0.05;
        w = 0.9;
        h = 0.9;
    };

    class BaseDialogHeader {
        idc = -1;              // set to -1, unneeded
        moving = 0;            // left click (and hold) this control to move the dialog
                               // (requires "movingEnabled" to be 1, see above)
        type = CT_STATIC;      // constant
        style = ST_LEFT;       // constant
        text = "BaseDialogHeader";
        font = FontM;
        sizeEx = 0.05;

        colorBackground[] = { 1, 1, 1, 0.2 };
        colorText[] = { 0, 0, 0, 1 };

        x = 0.05;
        y = 0.05;
        w = 0.9;
        h = 0.09;
    };
    
    class BaseMultilineText {
        idc = -1;              // set to -1, unneeded
        moving = 0;            // left click (and hold) this control to move the dialog
                               // (requires "movingEnabled" to be 1, see above)
        type = CT_STATIC;      // constant
        style = ST_MULTI_NOBORDER;       // constant
        text = "BaseText";
        font = FontM;
        sizeEx = 0.023;
        lineSpacing = 1;

        colorBackground[] = { 1, 1, 1, 0 };
        colorText[] = { 0, 0, 0, 1 };

        x = 0.05;
        y = 0.15;
        w = 0.9;
        h = 0.8;
    }
    
    class BaseButton {
        idc = -1;
        type = CT_BUTTON;
        style = ST_LEFT;
        default = false;
        font = FontM;
        sizeEx = 0.027;
        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.8; y = 0.95;
        w = 0.15; h = 0.04;
        text = "BaseButton";
        action = " hint ""Base Button Pressed!""; ";
    };
    
    class BaseCloseButton : BaseButton {
        default = true;
        x = 0.8; y = 0.95;
        w = 0.15; h = 0.04;
        text = "Close";
        action = " closeDialog 0; ";
    };
};

class TutorialDialog : BaseDialog {
    controls[] = { BaseBackground, Header, Text, TurnOffTutorialsButton, DontShowThisAgainButton, BaseCloseButton };
    
    class Header : BaseDialogHeader {
        idc = 40;
        text = "Tutorial Header";
    };
    
    class Text : BaseMultilineText {
        idc = 41;
        text = "Tutorial text.";
    };
    
    class DontShowThisAgainButton : BaseButton {
        x = 0.59; y = 0.95;
        w = 0.2; h = 0.04;
        text = "Don't show this again";
        action = " closeDialog 0; dre_loc_CC_DontShowThisAgain = true; ";
    };

    class TurnOffTutorialsButton : BaseButton {
        x = 0.38; y = 0.95;
        w = 0.2; h = 0.04;
        text = "Turn off all guides";
        action = " closeDialog 0; dre_loc_CC_TutorialsTurnedOff = true; ";
    };
};

 

[gc8 981]

I think you need to change  style = ST_LEFT; to ST_CENTER for centered text. but not sure... all my buttons have always had centered text :)

 

[engima 328]

13 minutes ago, gc8 said:

I think you need to change  style = ST_LEFT; to ST_CENTER for centered text. but not sure... all my buttons have always had centered text :)

 

Yes, that makes the text horizontally centered, and that works. But the problem is that the text is pushed downwards on the button, and is placed too low. Only the upper half of the text is visible. Is there a "vertical centered" property to?

[gc8 981]

How about using the exported RscButton to see if it works differently and then do comparison on the code to find what's wrong

 

RscButton:
 

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 = "(((((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1)";
    url = "";
    offsetX = 0;
    offsetY = 0;
    offsetPressedX = 0;
    offsetPressedY = 0;
    borderSize = 0;
};

 

[engima 328]

Please tell me more about the "exported RscButton". What do you mean "exported"? Is the RscButton in the game somewhere?

 

I made some more searches and found the ingame dialog editor. It looked very promising, but I don't quite get how to use it. I tried to follow ICEMAN'S dialog tutorial for noobs, and at least got something working. However, he's defines.hpp only contains a few of the dialog control's that can be added in the ingame editor, and I cannot find the rest of them. The problem I ran into was that I created a "structured text", but RscStructuredText is not defined in defines.hpp.

 

Regards!

[gc8 981]

4 minutes ago, engima said:

Please tell me more about the "exported RscButton". What do you mean "exported"? Is the RscButton in the game somewhere?

 

I made some more searches and found the ingame dialog editor. It looked very promising, but I don't quite get how to use it. I tried to follow ICEMAN'S dialog tutorial for noobs, and at least got something working. However, he's defines.hpp only contains a few of the dialog control's that can be added in the ingame editor, and I cannot find the rest of them. The problem I ran into was that I created a "structured text", but RscStructuredText is not defined in defines.hpp.

 

Regards!

 

in the ingame dialog editor press ctrl + s and you get the options for saving the dialog.. among them is also option to export "parent classes". This option will copy all the arma's dialog classes to clipboard.

[engima 328]

Great! Somehow I missed that. I learned from the tutorial video so save with SHIFT+CTRL+s, but I didn't get all these new alternatives. Thanks a lot!

[Tostm8 1]

Hello, sorry to resurrect a post but I can't make a new topic yet.

 

I'd like to know how to link a RscButton to an object or unit in game. This is for a squad selection screen.

I have this so far (or some of it at least)...

 

squad_selector_gui.hpp

class select01: RscButton
{
    idc = 6;
    text = "Unit 1";
    SizeEx = 0.07;    
    x = 0.26 * safezoneW + safezoneX;
    y = 0.321 * safezoneH + safezoneY;
    w = 0.2325 * safezoneW;
    h = 0.04 * safezoneH;
    action = "";
};

squad_selector_gui.sqf

gui_UnitJoin = 
{
    _idUnit =  lbCurSel 7;
    _classUnit = lbData [7, _idUnit];
    _emptyPos = [_classUnit] join player;
};

GUI so far

Spoiler

 

I'd like to link the "Unit 1" button to a unit. Then hopefully everything will fall into place. Thanks!

[engima 328]

I'm not sure what you mean with "link", but in the action parameter you can write any code you want.

 

action="hint (""my unit is "" + str unit1)";

[opec666 22]

You are correct. I had a dialog that looked relatively good in 2016, and now all the text is pushed down and it looks terrible now.