Dialog Tutorial For Noobs [By A Noob]

iceman77 · July 13, 2007

DIALOG TUTORIAL FOR NOOBS

I've taken a while to create a dialog tutorial for those who don't know how or where to start making dialogs. It isn't intended for advanced users, or dialog wizards. If any dialog guru, or anyone else for that matter, that has experience with dialogs would like to contribute, please feel free to contact me for the word document, to edit or modify any way that's reasonable and / or appropriate to the guides style & intentions. Constructive criticism is always welcomed. Just refrain from the nit picking unless you intend to do something about it. IE; Editing the tutorial to make it what you think is appropriate. In any case, I hope some will find it useful. Please post any constructive or otherwise positive feed back here. Thanks.

How to start:

Download the PDF, the example mission & the GUI Editor Addon + Preview Mission. Open the tutorial pdf and go from there.

TUTORIAL PDF: [ >>Download<< ]

FOR ARMA2 ONLY (A3 Has this feature built in):

GUI EDITOR & PREVIEW MISSION: [ >> DOWNLOAD << ]

Resources. Use these instead of copy & pasting from my example mission.

Description.ext

#include "defines.hpp"
#include "dialogs.hpp"

Defines.hpp

// Control types
#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_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_GROUP_BOX       96
#define ST_GROUP_BOX2      112
#define ST_ROUNDED_CORNER  ST_GROUP_BOX + ST_CENTER
#define ST_ROUNDED_CORNER2 ST_GROUP_BOX2 + ST_CENTER

#define ST_TYPE           0xF0
#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_SHADOW         0x100
#define ST_NO_RECT        0x200
#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

// progress bar 
#define ST_VERTICAL       0x01
#define ST_HORIZONTAL     0

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

// Tree styles
#define TR_SHOWROOT       1
#define TR_AUTOCOLLAPSE   2

// MessageBox styles
#define MB_BUTTON_OK      1
#define MB_BUTTON_CANCEL  2
#define MB_BUTTON_USER    4


////////////////
//Base Classes//
////////////////

class RscText
{
   access = 0;
   idc = -1;
   type = CT_STATIC;
   style = ST_MULTI;
   linespacing = 1;
   colorBackground[] = {0,0,0,0};
   colorText[] = {1,1,1,.5};
   text = "";
   shadow = 2;
   font = "Bitstream";
   SizeEx = 0.02300;
   fixedWidth = 0;
   x = 0;
   y = 0;
   h = 0;
   w = 0;

};

class RscPicture
{
   access = 0;
   idc = -1;
   type = CT_STATIC;
   style = ST_PICTURE;
   colorBackground[] = {0,0,0,0};
   colorText[] = {1,1,1,1};
   font = "Bitstream";
   sizeEx = 0;
   lineSpacing = 0;
   text = "";
   fixedWidth = 0;
   shadow = 0;
   x = 0;
   y = 0;
   w = 0.2;
   h = 0.15;
};

class RscButton
{

  access = 0;
   type = CT_BUTTON;
   text = "";
   colorText[] = {1,1,1,.9};
   colorDisabled[] = {0.4,0.4,0.4,0};
   colorBackground[] = {0.75,0.75,0.75,0.8};
   colorBackgroundDisabled[] = {0,0.0,0};
   colorBackgroundActive[] = {0.75,0.75,0.75,1};
   colorFocused[] = {0.75,0.75,0.75,.5};
   colorShadow[] = {0.023529,0,0.0313725,1};
   colorBorder[] = {0.023529,0,0.0313725,1};
   soundEnter[] = {"\ca\ui\data\sound\onover",0.09,1};
   soundPush[] = {"\ca\ui\data\sound\new1",0,0};
   soundClick[] = {"\ca\ui\data\sound\onclick",0.07,1};
   soundEscape[] = {"\ca\ui\data\sound\onescape",0.09,1};
   style = 2;
   x = 0;
   y = 0;
   w = 0.055589;
   h = 0.039216;
   shadow = 2;
   font = "Bitstream";
   sizeEx = 0.03921;
   offsetX = 0.003;
   offsetY = 0.003;
   offsetPressedX = 0.002;
   offsetPressedY = 0.002;
   borderSize = 0;
};

class RscFrame
{
   type = CT_STATIC;
   idc = -1;
   style = ST_FRAME;
   shadow = 2;
   colorBackground[] = {1,1,1,1};
   colorText[] = {1,1,1,0.9};
   font = "Bitstream";
   sizeEx = 0.03;
   text = "";
};

class BOX
{ 
  type = CT_STATIC;
   idc = -1;
   style = ST_CENTER;
   shadow = 2;
   colorText[] = {1,1,1,1};
   font = "Bitstream";
   sizeEx = 0.02;
   colorBackground[] = { 0.2,0.2,0.2, 0.9 }; 
   text = ""; 

};

dialogs.hpp

class ICE_DIALOG
{
   idd = -1;
   movingenable = true;


   class Controls
   {

        class ICE_BOX: BOX
        {
         idc = -1;
         text = "";
         x = 0.390476 * safezoneW + safezoneX;
         y = 0.290476 * safezoneH + safezoneY;
         w = 0.236905 * safezoneW;
         h = 0.385238 * safezoneH;
        };
        class ICE_FRAME: RscFrame
        {
         idc = -1;
         text = "My Frame Title";
         x = 0.390476 * safezoneW + safezoneX;
         y = 0.290476 * safezoneH + safezoneY;
         w = 0.236905 * safezoneW;
         h = 0.385238 * safezoneH;
        };
        class ICE_BUTTONYES: RscButton
        {
         idc = -1;
         text = "YES";
         x = 0.445239 * safezoneW + safezoneX;
         y = 0.625713 * safezoneH + safezoneY;
         w = 0.0398809 * safezoneW;
         h = 0.0404761 * safezoneH;
             action = "closeDialog 0;_nil=[]ExecVM ""hello1.sqf""";
       };
       class ICE_BUTTONNO: RscButton
       {
         idc = -1;
         text = "NO";
         x = 0.533334 * safezoneW + safezoneX;
         y = 0.625715 * safezoneH + safezoneY;
         w = 0.0398809 * safezoneW;
         h = 0.0404761 * safezoneH;
             action = "closeDialog 0;_nil=[]ExecVM ""hello2.sqf""";
       };
       class ICE_PICTURE: RscPicture
       {
         idc = -1;
         text = "shilka.paa";
         x = 0.428572 * safezoneW + safezoneX;
         y = 0.32381 * safezoneH + safezoneY;
         w = 0.161905 * safezoneW;
         h = 0.189048 * safezoneH;
       };
       class ICE_TEXT: RscText
       {
        idc = -1;
        text = "Do you like this picture?";
        x = 0.422618 * safezoneW + safezoneX;
        y = 0.540953 * safezoneH + safezoneY;
        w = 0.171429 * safezoneW;
        h = 0.0404761 * safezoneH;
       };



   };



};

Note: It's really good to go through the process with the GUI editor. You can really gain a better understanding of how to put together a dialog, after the fact. You'll be able to create a dialog without the gui editor very easily :cool:

Wiki Quote regarding the gui editor:

Disclaimer

This is not an offical addon released or approved by Bohemia Interactive or any of ARMA 2 publishers. Use at your own risk.

As long as it stays free, you can redistribute it or modify it as you wish.

Credits:

Karel Moricky - GUI Editor

Das Attourney - sharing things about dialogs in general.

Mikie Boy - Showing how external hpps work

Regards,

David

Edited November 9, 2013 by Iceman77

f2k sel · June 2, 2009

That looks really help full, last time I tried I found it so hard trying to find simple examples and scripting that wasn't full of errors.

I just need to summon up courage to take another look.

Thanks.

kilrbe3 · July 7, 2007

Thanks again iceman! Gonna try and implement something with your GUI Dialog soon!

iceman77 · July 13, 2007

Your welcome. Hopefully, if you go through the tutorial, you can even come up with your own style and maybe take it a step further once you got the hang of it. :)

lifted86 · October 6, 2011

Just had a quick look through, and it looks really good. Nice work.

MrSanchez · August 2, 2012

I was looking forward to something like this. Thanks alot.

blackmamb · March 24, 2012

Thanks buddy! I guess I'll have yet another go at creating dialogs.

iceman77 · July 13, 2007

Hey guys. I hope the tutorial gets you on your way to making some nice dialogs. Just be warned, making dialogs is like a whole new hobby & is very addicting :cool:

---------- Post added at 10:20 ---------- Previous post was at 10:07 ----------

Okay I added a poll as well. So I can see if the guide may need some improvement or not.

---------- Post added at 11:57 ---------- Previous post was at 10:20 ----------

Small Update: Fixed a few small typos, reworded a couple of instructions. Fixed font type of a small portion of the document. If you already have dialog tutorial for noobs, it isn't totally necessary to update to this version if you don't like.

odyseus · June 10, 2011

Owww great stuff Iceman77 it is nice to see that you toke the time to make this tutorial. Keep it up!

Mattar_Tharkari · November 20, 2012

Nice work! Thank you!

1para{god-father} · July 30, 2010

Great work Many thanks for your time and effort to share with others !

Ub3rObama · December 26, 2012

Wow nice timing, I just decided I wanted to create dialogs.

I was looking the Warfare mission, and wanted to see how they got the pictures of units to show. The path they used is this :

\CA\warfare2\Images\con_barracks.paa

Wheres this CA folder? Its certainly not in the mission.

Edited January 18, 2013 by Ub3rObama

raptor 6 actual · March 20, 2005

Wheres this CA folder? Its certainly not in the mission.

I believe that is a folder located in the CA.pbo file which is in your addons folder for ArmA2. That "warfare2" part is a folder located within that .pbo and you can assume that the "Images" is found within that, so on and so on.

Basically, the pics needed are in that .pbo, and the path you listed (\CA\warfare2\Images\con_barracks.paa) is just the path to that specific file.

Now, without getting you in trouble, you SHOULD be able to dePBO that specific CA.pbo file and view the contents so that you can figure out what images you are wanting to choose.

@Iceman77- Thank you so much for the time to detail the step by step process. It helps out immensily.

Ub3rObama · December 26, 2012

Hmm I found the CA pbo but it didn't have much in it, but I noticed other pbos with similar names (e.g. warfare.pbo) so I de pbo'd them and found quite a few things. I also de pbo'd warfare and looked for any reference to the paa files for the unit icons that come up when you buy units, absolutely nothing. Found some stuff for the warfare side of things, but not unit building, which is really strange.

What I am looking for is, icon's of buildings like bunkers and machine gun nests. I de pbo'd A LOT of the arma ones and couldn't find what I wanted, anyone know if they even exist?

iceman77 · July 13, 2007

UPDATED: PDF, warning users not to use my example mission to copy code, but rather from the resource spoilers found here in the original post.

What I am looking for is, icon's of buildings like bunkers...

Here you go.


 [color=#ff0000]  class Bunker { 
       icon = "\ca\ui\data\map_bunker_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 14; 
       importance = "1.5 * 14 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class Bush { 
       icon = "\ca\ui\data\map_bush_ca.paa"; 
       color[] = {0.55, 0.64, 0.43, 1.00}; 
       size = 14; 
       importance = "0.2 * 14 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class BusStop { 
       icon = "\ca\ui\data\map_busstop_ca.paa"; 
       color[] = {0.00, 0.00, 1.00, 1.00}; 
       size = 10; 
       importance = "1 * 10 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class Command { 
       icon = "#(argb,8,8,3)color(1,1,1,1)"; 
       color[] = {0.00, 0.00, 0.00, 1.00}; 
       size = 18; 
       importance = 1.00; 
       coefMin = 1.00; 
       coefMax = 1.00; 
   }; 
   class Cross { 
       icon = "\ca\ui\data\map_cross_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "0.7 * 16 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   };    
   class Chapel { 
       icon = "\ca\ui\data\map_chapel_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "1 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00; 
   }; 
   class Church { 
       icon = "\ca\ui\data\map_church_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00; 
   };
   class CustomMark {
       icon = "\ca\ui\data\map_cross_ca.paa";
       color[] = {0.55, 0.64, 0.43, 1};
       size = 16;
       importance = 0.7 * 16 * 0.05;
       coefMin = 0.25;
       coefMax = 4;
   };
   class Fortress { 
       icon = "\ca\ui\data\map_bunker_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class Fuelstation { 
       icon = "\ca\ui\data\map_fuelstation_ca.paa"; 
       color[] = {1.00, 0.35, 0.35, 1.00}; 
       size = 16; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.75; 
       coefMax = 4.00; 
   }; 
   class Fountain { 
       icon = "\ca\ui\data\map_fountain_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 12; 
       importance = "1 * 12 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   };     
   class Hospital { 
       icon = "\ca\ui\data\map_hospital_ca.paa"; 
       color[] = {0.78, 0.00, 0.05, 1.00}; 
       size = 16; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.50; 
       coefMax = 4; 
   }; 
   class Lighthouse { 
       icon = "\ca\ui\data\map_lighthouse_ca.paa"; 
       color[] = {0.78, 0.00, 0.05, 1.00}; 
       size = 20; 
       importance = "3 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00; 
   }; 
   class Quay { 
       icon = "\ca\ui\data\map_quay_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.50; 
       coefMax = 4.00; 
   };
   class Rock {
       icon = "\ca\ui\data\map_rock_ca.paa";
       color[] = {0.55, 0.64, 0.43, 1};
       size = 12;
       importance = 0.5 * 12 * 0.05;
       coefMin = 0.25;
       coefMax = 4;
   };
   class Ruin {
       icon = "\ca\ui\data\map_ruin_ca.paa";
       color[] = {0.78, 0, 0.05, 1};
       size = 16;
       importance = 1.2 * 16 * 0.05;
       coefMin = 1;
       coefMax = 4;
   };
   class Stack { 
       icon = "\ca\ui\data\map_stack_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 20; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00; 
   }; 
   class Tree { 
       icon = "\ca\ui\data\map_tree_ca.paa"; 
       color[] = {0.55, 0.64, 0.43, 1.00}; 
       size = 12; 
       importance = "0.9 * 16 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class SmallTree { 
       icon = "\ca\ui\data\map_smalltree_ca.paa"; 
       color[] = {0.55, 0.64, 0.43, 1.00}; 
       size = 12; 
       importance = "0.6 * 12 * 0.05"; 
       coefMin = 0.25; 
       coefMax = 4.00; 
   }; 
   class Task {
       icon = "\ca\ui\data\map_cross_ca.paa";
       color[] = {0.55, 0.64, 0.43, 1};
       size = 16;
       importance = 0.7 * 16 * 0.05;
       coefMin = 0.25;
       coefMax = 4;
       iconCreated = "#(argb,8,8,3)color(1,1,1,1)";
       iconCanceled = "#(argb,8,8,3)color(0,0,1,1)";
       iconDone = "#(argb,8,8,3)color(0,0,0,1)";
       iconFailed = "#(argb,8,8,3)color(1,0,0,1)";
       colorCreated[] = {1,1,1,1};
       colorCanceled[] = {1,1,1,1};
       colorDone[] = {1,1,1,1};
       colorFailed[] = {1,1,1,1};
   };    
   class Tourism { 
       icon = "\ca\ui\data\map_tourism_ca.paa"; 
       color[] = {0.78, 0.00, 0.05, 1.00}; 
       size = 16; importance = "1 * 16 * 0.05"; 
       coefMin = 0.70; 
       coefMax = 4.00; 
   }; 
   class Transmitter { 
       icon = "\ca\ui\data\map_transmitter_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 20; 
       importance = "2 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00; 
   }; 
   class ViewTower { 
       icon = "\ca\ui\data\map_viewtower_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 16; 
       importance = "2.5 * 16 * 0.05"; 
       coefMin = 0.50; 
       coefMax = 4.00; 
   }; 
   class Watertower { 
       icon = "\ca\ui\data\map_watertower_ca.paa"; 
       color[] = {0.00, 0.35, 0.70, 1.00}; 
       size = 32; 
       importance = "1.2 * 16 * 0.05"; 
       coefMin = 0.90; 
       coefMax = 4.00;
   }; 
   class Waypoint { 
       icon = "\ca\ui\data\map_waypoint_ca.paa"; 
       color[] = {0.00, 0.00, 0.00, 1.00}; 
       size = 24; 
       importance = 1.00; 
       coefMin = 1.00; 
       coefMax = 1.00; 
   }; 
   class WaypointCompleted { 
       icon = "\ca\ui\data\map_waypoint_completed_ca.paa"; 
       color[] = {0.00, 0.00, 0.00, 1.00}; 
       size = 24; 
       importance = 1.00; 
       coefMin = 1.00; 
       coefMax = 1.00; 
   }; [/color]
};

Also, an easy way is to use configViewer function in the game. It has a list of all class names, pictures paths, all the data etc. Place a functions module.

Radio Trigger:

Condition:

This && !IsNil "Bis_Fnc_Init"

OnAct:

[] Call Bis_Fnc_ConfigViewer

Edited January 21, 2013 by Iceman77

orcinus · July 8, 2011

Thanks Iceman! I'm trying to make a mod to allow a player to rearm his squad quickly & easily without the horrible hunt-through-clotted-menu-6 for "gear" and all the bugs / location problems. I was quailing at the idea of adding in a dialogue to extend it from simply grabbing primary mags to including rockets and primary/secondary weapons. From a quick peruse your tutorials will make it much less challenging even for a scripting numpty like me :)

:cheers:

Orc

iceman77 · July 13, 2007

Thanks Iceman! I'm trying to make a mod to allow a player to rearm his squad quickly & easily without the horrible hunt-through-clotted-menu-6 for "gear" and all the bugs / location problems. I was quailing at the idea of adding in a dialogue to extend it from simply grabbing primary mags to including rockets and primary/secondary weapons. From a quick peruse your tutorials will make it much less challenging even for a scripting numpty like me :)
:cheers:

Orc

Hey. Good to see you snagged this tutorial. However, it's only a basic tutorial on how to make a yes or no dialogue with a picture, working buttons, and a few words. But I see no reason why anyone couldn't expand past the tutorial. That is what it's for after all, to get the ball rolling. I hope you enjoy the tutorial.

regards,

David

iceman77 · July 13, 2007

Here's alot of color defines you can slap into your ext/hpp. Credit goes to Dr.Eyeball for compiling the list.

//-----------------------------------------------------------------------------
// Color attributes
//-----------------------------------------------------------------------------

#define Dlg_ColorAttribute_Clear {0, 0, 0, 0}

//-----------------------------------------------------------------------------
// Main base colors
//-----------------------------------------------------------------------------

#define Dlg_Color_Black 0,0,0
#define Dlg_Color_White 1,1,1

// additive primaries
#define Dlg_Color_Red 1,0,0
#define Dlg_Color_Lime 0,1,0
#define Dlg_Color_Blue 0,0,1

// subtractive primaries
#define Dlg_Color_Yellow 1,1,0
#define Dlg_Color_Fuchsia 1,0,1 // Dlg_Color_Magenta
#define Dlg_Color_Aqua 0,1,1 // Dlg_Color_Cyan

// shades
#define Dlg_Color_Maroon 0.5,0,0
#define Dlg_Color_Green 0,0.5,0
#define Dlg_Color_Navy 0,0,0.5

#define Dlg_Color_Olive 0.5,0.5,0
#define Dlg_Color_Purple 0.5,0,0.5
#define Dlg_Color_Teal 0,0.5,0.5

// grays
#define Dlg_Color_Gray 0.5,0.5,0.5 // Dlg_Color_DkGray
#define Dlg_Color_Silver 0.75,0.75,0.75 // Dlg_Color_LtGray
#define Dlg_Color_LtGray 0.75,0.75,0.75 // Dlg_Color_Silver
#define Dlg_Color_DkGray 0.5,0.5,0.5 // Dlg_Color_Gray

// 0.1 is darkest (near black) 0.9 is lightest (near white)
#define Dlg_Color_Gray_1 0.1,0.1,0.1
#define Dlg_Color_Gray_2 0.2,0.2,0.2
#define Dlg_Color_Gray_3 0.3,0.3,0.3
#define Dlg_Color_Gray_4 0.4,0.4,0.4
#define Dlg_Color_Gray_5 0.5,0.5,0.5
#define Dlg_Color_Gray_6 0.6,0.6,0.6
#define Dlg_Color_Gray_7 0.7,0.7,0.7
#define Dlg_Color_Gray_8 0.8,0.8,0.8
#define Dlg_Color_Gray_9 0.9,0.9,0.9

//-----------------------------------------------------------------------------
// Extended colors - based on 'html'/'web' colors
//-----------------------------------------------------------------------------
#define Dlg_Color_AliceBlue 0.937500,0.968750,1.000000
#define Dlg_Color_AntiqueWhite 0.976563,0.917969,0.839844
#define Dlg_Color_Aquamarine 0.496094,1.000000,0.828125
#define Dlg_Color_Azure 0.937500,1.000000,1.000000
#define Dlg_Color_Beige 0.957031,0.957031,0.859375
#define Dlg_Color_Bisque 1.000000,0.890625,0.765625
//#define Dlg_Color_Black 0.000000,0.000000,0.000000
#define Dlg_Color_BlanchedAlmond 1.000000,0.917969,0.800781
//#define Dlg_Color_Blue 0.000000,0.000000,1.000000
#define Dlg_Color_BlueViolet 0.539063,0.167969,0.882813
#define Dlg_Color_Brown 0.644531,0.164063,0.164063
#define Dlg_Color_Burlywood 0.867188,0.718750,0.527344
#define Dlg_Color_CadetBlue 0.371094,0.617188,0.625000
#define Dlg_Color_Chartreuse 0.496094,1.000000,0.000000
#define Dlg_Color_Chocolate 0.820313,0.410156,0.117188
#define Dlg_Color_Coral 1.000000,0.496094,0.312500
#define Dlg_Color_CornFlowerBlue 0.390625,0.582031,0.925781
#define Dlg_Color_CornSilk 1.000000,0.968750,0.859375
#define Dlg_Color_Crimson 0.859375,0.078125,0.234375
#define Dlg_Color_Cyan 0.000000,1.000000,1.000000 // Dlg_Color_Aqua
#define Dlg_Color_DarkBlue 0.000000,0.000000,0.542969
#define Dlg_Color_DarkCyan 0.000000,0.542969,0.542969
#define Dlg_Color_DarkGoldenRod 0.718750,0.523438,0.042969
#define Dlg_Color_DarkGray 0.660156,0.660156,0.660156
#define Dlg_Color_Darkgreen 0.000000,0.390625,0.000000
#define Dlg_Color_DarkKhaki 0.738281,0.714844,0.417969
#define Dlg_Color_DarkMagenta 0.542969,0.000000,0.542969
#define Dlg_Color_DarkOliveGreen 0.332031,0.417969,0.183594
#define Dlg_Color_DarkOrange 1.000000,0.546875,0.000000
#define Dlg_Color_DarkOrchid 0.597656,0.195313,0.796875
#define Dlg_Color_DarkRed 0.542969,0.000000,0.000000
#define Dlg_Color_DarkSalmon 0.910156,0.585938,0.476563
#define Dlg_Color_DarkSeaGreen 0.558594,0.734375,0.558594
#define Dlg_Color_DarkSlateBlue 0.281250,0.238281,0.542969
#define Dlg_Color_DarkSlategray 0.183594,0.308594,0.308594
#define Dlg_Color_DarkTurquoise 0.000000,0.804688,0.816406
#define Dlg_Color_DarkViolet 0.578125,0.000000,0.824219
#define Dlg_Color_DeepPink 1.000000,0.078125,0.574219
#define Dlg_Color_DeepskyBlue 0.000000,0.746094,1.000000
#define Dlg_Color_DimGray 0.410156,0.410156,0.410156
#define Dlg_Color_DodgerBlue 0.117188,0.562500,1.000000
#define Dlg_Color_Firebrick 0.695313,0.132813,0.132813
#define Dlg_Color_FloralWhite 1.000000,0.976563,0.937500
#define Dlg_Color_ForestGreen 0.132813,0.542969,0.132813
#define Dlg_Color_Gainsboro 0.859375,0.859375,0.859375
#define Dlg_Color_GhostWhite 0.968750,0.968750,1.000000
#define Dlg_Color_Gold 1.000000,0.839844,0.000000
#define Dlg_Color_GoldenRod 0.851563,0.644531,0.125000
//#define Dlg_Color_Gray 0.500000,0.500000,0.500000
//#define Dlg_Color_Green 0.000000,0.500000,0.000000
#define Dlg_Color_GreenYellow 0.675781,1.000000,0.183594
#define Dlg_Color_Honeydew 0.937500,1.000000,0.937500
#define Dlg_Color_HotPink 1.000000,0.410156,0.703125
#define Dlg_Color_IndianRed 0.800781,0.359375,0.359375
#define Dlg_Color_Indigo 0.292969,0.000000,0.507813
#define Dlg_Color_Ivory 1.000000,1.000000,0.937500
#define Dlg_Color_Khaki 0.937500,0.898438,0.546875
#define Dlg_Color_Lavender 0.898438,0.898438,0.976563
#define Dlg_Color_LavenderBlush 1.000000,0.937500,0.957031
#define Dlg_Color_LawnGreen 0.484375,0.984375,0.000000
#define Dlg_Color_LemonChiffon 1.000000,0.976563,0.800781
#define Dlg_Color_LightBlue 0.675781,0.843750,0.898438
#define Dlg_Color_LightCoral 0.937500,0.500000,0.500000
#define Dlg_Color_LightCyan 0.875000,1.000000,1.000000
#define Dlg_Color_LightGoldenrodYellow 0.976563,0.976563,0.820313
#define Dlg_Color_LightGreen 0.562500,0.929688,0.562500
#define Dlg_Color_Lightgrey 0.824219,0.824219,0.824219
#define Dlg_Color_LightPink 1.000000,0.710938,0.753906
#define Dlg_Color_LightSalmon 1.000000,0.625000,0.476563
#define Dlg_Color_LightSeaGreen 0.125000,0.695313,0.664063
#define Dlg_Color_LightSkyBlue 0.527344,0.804688,0.976563
#define Dlg_Color_LightSlateGray 0.464844,0.531250,0.597656
#define Dlg_Color_LightSteelBlue 0.687500,0.765625,0.867188
#define Dlg_Color_LightYellow 1.000000,1.000000,0.875000
//#define Dlg_Color_Lime 0.000000,1.000000,0.000000
#define Dlg_Color_LimeGreen 0.195313,0.800781,0.195313
#define Dlg_Color_Linen 0.976563,0.937500,0.898438
#define Dlg_Color_Magenta 1.000000,0.000000,1.000000
//#define Dlg_Color_Maroon 0.500000,0.000000,0.000000
#define Dlg_Color_MediumAquamarine 0.398438,0.800781,0.664063
#define Dlg_Color_MediumBlue 0.000000,0.000000,0.800781
#define Dlg_Color_MediumOrchid 0.726563,0.332031,0.824219
#define Dlg_Color_MediumPurple 0.574219,0.437500,0.855469
#define Dlg_Color_MediumSeaGreen 0.234375,0.699219,0.441406
#define Dlg_Color_MediumSlateBlue 0.480469,0.406250,0.929688
#define Dlg_Color_MediumSpringGreen 0.000000,0.976563,0.601563
#define Dlg_Color_MediumTurquoise 0.281250,0.816406,0.796875
#define Dlg_Color_MediumVioletRed 0.777344,0.082031,0.519531
#define Dlg_Color_MidnightBlue 0.097656,0.097656,0.437500
#define Dlg_Color_Mintcream 0.957031,1.000000,0.976563
#define Dlg_Color_MistyRose 1.000000,0.890625,0.878906
#define Dlg_Color_Moccasin 1.000000,0.890625,0.707031
#define Dlg_Color_NavajoWhite 1.000000,0.867188,0.675781
//#define Dlg_Color_Navy 0.000000,0.000000,0.500000
#define Dlg_Color_OldLace 0.988281,0.957031,0.898438
//#define Dlg_Color_Olive 0.500000,0.500000,0.000000
#define Dlg_Color_OliveDrab 0.417969,0.554688,0.136719
#define Dlg_Color_Orange 1.000000,0.644531,0.000000
#define Dlg_Color_OrangeRed 1.000000,0.269531,0.000000
#define Dlg_Color_Orchid 0.851563,0.437500,0.835938
#define Dlg_Color_PaleGoldenrod 0.929688,0.906250,0.664063
#define Dlg_Color_PaleGreen 0.593750,0.980469,0.593750
#define Dlg_Color_PaleTurquoise 0.683594,0.929688,0.929688
#define Dlg_Color_PaleVioletRed 0.855469,0.437500,0.574219
#define Dlg_Color_PapayaWhip 1.000000,0.933594,0.832031
#define Dlg_Color_PeachPuff 1.000000,0.851563,0.722656
#define Dlg_Color_Peru 0.800781,0.519531,0.246094
#define Dlg_Color_Pink 1.000000,0.750000,0.792969
#define Dlg_Color_Plum 0.863281,0.625000,0.863281
#define Dlg_Color_PowderBlue 0.687500,0.875000,0.898438
//#define Dlg_Color_Purple 0.500000,0.000000,0.500000
//#define Dlg_Color_Red 1.000000,0.000000,0.000000
#define Dlg_Color_RosyBrown 0.734375,0.558594,0.558594
#define Dlg_Color_RoyalBlue 0.253906,0.410156,0.878906
#define Dlg_Color_SaddleBrown 0.542969,0.269531,0.074219
#define Dlg_Color_Salmon 0.976563,0.500000,0.445313
#define Dlg_Color_SandyBrown 0.953125,0.640625,0.375000
#define Dlg_Color_SeaGreen 0.179688,0.542969,0.339844
#define Dlg_Color_Seashell 1.000000,0.957031,0.929688
#define Dlg_Color_Sienna 0.625000,0.320313,0.175781
//#define Dlg_Color_Silver 0.750000,0.750000,0.750000
#define Dlg_Color_SkyBlue 0.527344,0.804688,0.917969
#define Dlg_Color_SlateBlue 0.414063,0.351563,0.800781
#define Dlg_Color_SlateGray 0.437500,0.500000,0.562500
#define Dlg_Color_Snow 1.000000,0.976563,0.976563
#define Dlg_Color_SpringGreen 0.000000,1.000000,0.496094
#define Dlg_Color_SteelBlue 0.273438,0.507813,0.703125
#define Dlg_Color_Tan 0.820313,0.703125,0.546875
//#define Dlg_Color_Teal 0.000000,0.500000,0.500000
#define Dlg_Color_Thistle 0.843750,0.746094,0.843750
#define Dlg_Color_Tomato 1.000000,0.386719,0.277344
#define Dlg_Color_Turquoise 0.250000,0.875000,0.812500
#define Dlg_Color_Violet 0.929688,0.507813,0.929688
#define Dlg_Color_Wheat 0.957031,0.867188,0.699219
//#define Dlg_Color_White 1.000000,1.000000,1.000000
#define Dlg_Color_WhiteSmoke 0.957031,0.957031,0.957031
//#define Dlg_Color_Yellow 1.000000,1.000000,0.000000
#define Dlg_Color_YellowGreen 0.601563,0.800781,0.195313

//-----------------------------------------------------------------------------
// Extended colors - a few odd pastel colors
//-----------------------------------------------------------------------------
#define Dlg_Color_MoneyGreen 0.75,0.859375,0.75
//#define Dlg_Color_SkyBlue 0.6484375,0.7890625,0.9375
#define Dlg_Color_Cream 1,0.98046875,0.9375
#define Dlg_Color_MedGray 0.625,0.625,0.640625
#define Dlg_Color_DeepRed 0.45,0,0

Ub3rObama · December 26, 2012

Forgot to say thanks for them classes!

iceman77 · July 13, 2007

Forgot to say thanks for them classes!

Oh hey. No worries. Just return the favor sometime by posting useful dialog snippets in here :)

alleycat · December 23, 2009

Awesome tut man!

A question, I created a HUD item that should be a single word like this

		class HUD_THIRST: RscText
	{
		text = "Thirst";
		idc = 1000;
		x = 1.25134;
		y = 0.655357;
		w = 0.1;
		h = 0.1;
	};

However 2 problems:

1. It always has a white border, which I would like to get rid of.

2. How to have the HUD item stay always on without blocking the player controls?

iceman77 · July 13, 2007

I'm not so sure if you can enable player movement while a dialog is open. Also, could you please post your defines/base classes please.

alleycat · December 23, 2009

The complete dialogs.hpp

class HUD_DIALOG
{
   idd = -1;
   movingenable = true;


   class Controls
   {

	class HUD_THIRST: RscText
	{
		text = "Thirst";
		idc = 1000;
		x = 1.25134;
		y = 0.655357;
		w = 0.1;
		h = 0.1;
	};




   };



};

Defines (copies from your resource)

// Control types
#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_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_GROUP_BOX       96
#define ST_GROUP_BOX2      112
#define ST_ROUNDED_CORNER  ST_GROUP_BOX + ST_CENTER
#define ST_ROUNDED_CORNER2 ST_GROUP_BOX2 + ST_CENTER

#define ST_TYPE           0xF0
#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_SHADOW         0x100
#define ST_NO_RECT        0x200
#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

// progress bar 
#define ST_VERTICAL       0x01
#define ST_HORIZONTAL     0

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

// Tree styles
#define TR_SHOWROOT       1
#define TR_AUTOCOLLAPSE   2

// MessageBox styles
#define MB_BUTTON_OK      1
#define MB_BUTTON_CANCEL  2
#define MB_BUTTON_USER    4


////////////////
//Base Classes//
////////////////

class RscText
{
   access = 0;
   idc = -1;
   type = CT_STATIC;
   style = ST_MULTI;
   linespacing = 1;
   colorBackground[] = {0,0,0,0};
   colorText[] = {1,1,1,.5};
   text = "";
   shadow = 2;
   font = "Bitstream";
   SizeEx = 0.02300;
   fixedWidth = 0;
   x = 0;
   y = 0;
   h = 0;
   w = 0;

};

class RscPicture
{
   access = 0;
   idc = -1;
   type = CT_STATIC;
   style = ST_PICTURE;
   colorBackground[] = {0,0,0,0};
   colorText[] = {1,1,1,1};
   font = "Bitstream";
   sizeEx = 0;
   lineSpacing = 0;
   text = "";
   fixedWidth = 0;
   shadow = 0;
   x = 0;
   y = 0;
   w = 0.2;
   h = 0.15;
};

class RscButton
{

  access = 0;
   type = CT_BUTTON;
   text = "";
   colorText[] = {1,1,1,.9};
   colorDisabled[] = {0.4,0.4,0.4,0};
   colorBackground[] = {0.75,0.75,0.75,0.8};
   colorBackgroundDisabled[] = {0,0.0,0};
   colorBackgroundActive[] = {0.75,0.75,0.75,1};
   colorFocused[] = {0.75,0.75,0.75,.5};
   colorShadow[] = {0.023529,0,0.0313725,1};
   colorBorder[] = {0.023529,0,0.0313725,1};
   soundEnter[] = {"\ca\ui\data\sound\onover",0.09,1};
   soundPush[] = {"\ca\ui\data\sound\new1",0,0};
   soundClick[] = {"\ca\ui\data\sound\onclick",0.07,1};
   soundEscape[] = {"\ca\ui\data\sound\onescape",0.09,1};
   style = 2;
   x = 0;
   y = 0;
   w = 0.055589;
   h = 0.039216;
   shadow = 2;
   font = "Bitstream";
   sizeEx = 0.03921;
   offsetX = 0.003;
   offsetY = 0.003;
   offsetPressedX = 0.002;
   offsetPressedY = 0.002;
   borderSize = 0;
};

class RscFrame
{
   type = CT_STATIC;
   idc = -1;
   style = ST_FRAME;
   shadow = 2;
   colorBackground[] = {1,1,1,1};
   colorText[] = {1,1,1,0.9};
   font = "Bitstream";
   sizeEx = 0.03;
   text = "";
};

class BOX
{ 
  type = CT_STATIC;
   idc = -1;
   style = ST_CENTER;
   shadow = 2;
   colorText[] = {1,1,1,1};
   font = "Bitstream";
   sizeEx = 0.02;
   colorBackground[] = { 0.2,0.2,0.2, 0.9 }; 
   text = ""; 

};

I'm not so sure if you can enable player movement while a dialog is open. Also, could you please post your defines/base classes please.

Aren't the dayz hud items dialogs too?

iceman77 · July 13, 2007

They may be overlays instead. Which i'm not sure how to create as I've never needed to so far. Try ST_CENTER instead of st_multi. I think multi is used for structured text only. Also, ditch the line spacing. Or, convert ot to structured text

Deadfast · December 5, 2006

Dialogs steal focus, if you don't want that, you need to create a resource. In most aspects, they are identical to dialogs with the following differences:

They are displayed using cutRsc instead of createDialog.
You cannot control interactive controls (buttons, text fields, etc.), obviously

They are defined a bit differently. I'll use your dialog to demonstrate.

class RscTitles //All resources reside in this class
{
class TAG_RscWhatever
{
	idd = -1; //IDD is irrelevant, we can't access the resource by it anyway
	duration = 1e+1000; //Time in seconds the resource will stay visible for. 1e+1000 = 1 * 10^1000 = never disappear
	fadeIn = 0; //Length of the fade-in effect (smooth transition from transparent to opaque upon creation) in seconds. 0 = no fade-in, display immediately.
	fadeOut = 0; //Length of the fade-out effect (smooth transition from opaque to transparent once duration elapses) in seconds. 0 = no fade-out, just hide immediately.
	name = ""; //Name of the resource. This is irrelevant for resources defined in the mission.
	onLoad = "uiNamespace setVariable ['TAG_RscWhatever_display', _this select 0];"; //A command executed upon the resource's creation. In this case we store this resource's "display" in a variable for later use via a script (such as to change the text of a RscText or read the value from RscEdit, etc.), but more on that later. If you don't plan on doing that, you can leave out this line.

	//movingEnabled has been removed. Since we cannot interact with the resource it has no effect. You can define it but it will be ignored.

	class Controls //From now on everything is identical to 
	{
		class HUD_THIRST : RscText
		{
			text = "Thirst";
			idc = 1000;
			x = 1.25134;
			y = 0.655357;
			w = 0.1;
			h = 0.1;
		};
	};
};
};

They are a bit more difficult to access via scripts. Unlike with dialogs, you cannot access their controls directly via IDC. You have to access them via a Control type, unlike dialogs, which you may (but don't have to) access using this method. In the previous point I mentioned we saved the resource's display and that's exactly what we'll need. Displays are the individual resources and we can use displayCtrl to get the pesky Control. At this point I've probably succeeded in confusing everybody so allow me to rectify that using an example.

disableSerialization; //We need this to be able to store UI info in normal variables. There are implications to using this (as well as resources in general) when it comes to game saves. But I won't go into it unless specifically asked. For now, let's just say it stops an error message from appearing.

cutRsc ["TAG_RscWhatever", "PLAIN"]; //Display our resource

_display = uiNamespace getVariable "TAG_RscWhatever_display"; //Get its display
_ctrl = _display displayCtrl 1000; //Get the control of HUD_THIRST (1000 is its IDC)

while {!isNull _display} do //Loop as long as the resource is shown
{

_ctrl ctrlSetText format["Thirst: %1", TAG_thirstLevel]; //Display the thirst value

//Now for something fancy, let's change the text color based on how high our thirst is.
_color = if (TAG_thirstLevel > 90) then {
	[1,0,0,1] //Red
} else {
	[1,1,1,1] //White
}; //We got the color...

_ctrl ctrlSetForegroundColor _color; //And now we've applied it.

sleep 5; //No need to loop that often.
};

Edited January 29, 2013 by Deadfast

Dialog Tutorial For Noobs [By A Noob]

Was this guide helpful 120 members have voted

1. Was this guide helpful

Recommended Posts

iceman77 18

Share this post

Link to post

Share on other sites

f2k sel 164

Share this post

Link to post

Share on other sites

kilrbe3 37

Share this post

Link to post

Share on other sites

iceman77 18

Share this post

Link to post

Share on other sites

lifted86 10

Share this post

Link to post

Share on other sites

MrSanchez 243

Share this post

Link to post

Share on other sites

blackmamb 2

Share this post

Link to post

Share on other sites

iceman77 18

Share this post

Link to post

Share on other sites

odyseus 19

Share this post

Link to post

Share on other sites

Mattar_Tharkari 10

Share this post

Link to post

Share on other sites

1para{god-father} 105

Share this post

Link to post

Share on other sites

Ub3rObama 1

Share this post

Link to post

Share on other sites

raptor 6 actual 13

Share this post

Link to post

Share on other sites

Ub3rObama 1

Share this post

Link to post

Share on other sites

iceman77 18

Share this post

Link to post

Share on other sites

orcinus 121

Share this post

Link to post

Share on other sites

iceman77 18

Share this post

Link to post

Share on other sites

iceman77 18

Share this post

Link to post

Share on other sites

Ub3rObama 1

Share this post

Link to post

Share on other sites

Was this guide helpful
120 members have voted