Finally tackling my own dialog! Could use a little help though.

[SilentSpike 84]

Well I spent this evening reading about and fiddling with some dialog stuff and I'm at the point where I understand enough that I can confidently slowly figure more things out with trial and error.

Before I was going to head off for the night I wanted to try and put a little cross in the upper right of my dialog to use as a button to close it (much like the one in the editor). However, I can't seem to figure out how to achieve that. My first thought was that using text would be a pain as I'd have to play around with font size and find the right font to make it look like a symbol rather than a letter - though that approach would have the benefit of scaling nicely. So I figured it'd be easiest to use the existing cross symbol that BIS used in the editor. Failing to find that, I whipped up my own cross for the purpose of getting it working.

So now I have an image file (.paa) and I can display my image with the right dimensions and in the right location. However, I can't suss out how to also make it a button without sacrificing the ability to use an image.

My workflow is as follows: defines.hpp contains the parent classes exported from the GUI editor and I'm simply referencing those when making entries into dialogs.hpp, the GUI editor is nice but I find it less clumsy to work directly with the config file (it's the same thing anyway, just minus the direct feedback).

Anyway, I'm tired and off to sleep. Appreciate any help and advice, still very much learning to dialog so I'm sure there's a lot I haven't grasped yet.

dialogs.hpp:

class SPIKE_PMC
{
   idd=-1;
   movingEnable=false;
   class controls
   {
       class SPIKE_RscTitle: RscText
       {
           text = "Sandline International PMC - Access Point";
           x = safezoneX + safeZoneW*0.375;
           y = safeZoneY + safeZoneH*0.2;
           w = 0.25 * safezoneW;
           h = 0.02 * safezoneH;
           colorBackground[] = {1,0.55,0.2,0.85};
       };
       class SPIKE_RscButtonExit: RscPicture
       {
           style = 0x30+1;


           action = "closeDialog 0;";
           colorFocused[] = {1,1,1,1};




           text = "Dialog\Rsc\Cross.paa";
           x = safezoneX + safeZoneW*0.61;
           y = safeZoneY + safeZoneH*0.2;
           w = 0.015 * safezoneW;
           h = 0.02 * safezoneH;
       };
       class SPIKE_RscMainBackground: RscText
       {
           x = safezoneX + safeZoneW*0.375;
           y = safeZoneY + safeZoneH*0.22;
           w = 0.25 * safezoneW;
           h = 0.25 * safezoneH;
           colorBackground[] = {1,1,1,0.85};
       };
   };
};

Very basic at the moment, SPIKE_RscButtonExit is the one I was playing around with to try and suss out.

[Von Quest 1163]

What is suss out?

Just make another Button Class with unique class name, then make all the alpha channels 0.

Have your graphic under the "invisible" button. You can setup that class in your defines.hpp

file. Just copy & paste a new Button section, rename, and set all alphas to 0 (r,g,b,a).

Also, just pressing ESC should close the dialog as well.

[SilentSpike 84]

Suss out = figure out.

Didn't even think of layering a transparent button on top, thanks :) Ideally I'd have the cross turn white on mouse over, but it's not a big deal. I can always come back to it when I understand more

---------- Post added at 10:34 ---------- Previous post was at 09:56 ----------

Well, I can't even figure out how to define a button. The predefined RscButton seemingly has no on screen effect, so you can't click it because you have no idea where it is. The rest of the buttons are animated and I don't want that at all - they work though.

I vaguely understand the "type" and "style" options, but no matter what combination I use I just can't get a working button.

Edit: Also for some reason my image doesn't appear white as it should, but seems to be grey and very transparent.

Edited August 5, 2014 by SilentSpike

[SilentSpike 84]

Well I've figured out that RscButtonMenu is pretty much perfect for what I want. However it gives me an error every time I open the dialog: "No entry <path to the button class>".

[SilentSpike 84]

Well I took some time out and then went ahead and just figured out how to define my own resources properly (with lots of reference to this page). I now have functioning buttons!

It's not detailed on the wiki, so I'm wondering if anyone knows whether it's possible to edit the amount of pixels a button moves when clicked?

[Von Quest 1163]

Looks like you're making good progress, mate.

I believe you can do an offset.

offsetX=0;

offsetY=0;

offsetPressedX=0;

offsetPressedY=0;

[SilentSpike 84]

Ah, thank you. They are on the wiki then, but the description of the values threw me off:

"the relative X offset between the button and its shadow, when it's pressed".

Might have to edit that if I think of a better way of explaining it.

Edit for any future googlers: To make a button stay put when pressed change the offsetPressed values to 0. Just think of it like the distance moved when pressed rather than the relative to the shadow malarkey (because it's the same distance whether relative to the shadow or the screen or the safezone).

I've since updated the button control page to be way more useful

---------- Post added at 02:13 ---------- Previous post was at 00:43 ----------

And onto the next hurdle I arrive. Can't figure out how to get a picture to display in colour.

TextColor has no effect, BackgroundColor has no effect. The .paa looks fine in TexView 2. Got me stumped.

Edited August 6, 2014 by SilentSpike

[nimrod_z 8]

use - ctrlSetText [display number,"path to pic"];

ctrlSetText [1203,"pics\fuel_jerrycan.paa"];

[SilentSpike 84]

According to the VBS wiki

colorText[] = {};

should do the trick, but that also has no effect for me personally. Will try using ctrlSetText next

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

use - ctrlSetText [display number,"path to pic"];

ctrlSetText [1203,"pics\fuel_jerrycan.paa"];

Still showing up in greyscale unfortunately :(

---------- Post added at 20:25 ---------- Previous post was at 20:17 ----------

So, apparently the alpha value of colorText has a visible effect, but the RGB values do nothing, it's just desaturated every time.

Sounds like I have the .paa file set up wrong, right? Wrong. :p Every time I re-check it things look fine - using RGBA and DXT5.

Edited August 6, 2014 by SilentSpike

[das attorney 858]

Make sure your images are powers of two.

Ok =

64*64

128*64

32*128

1024*512

Not Ok =

100 *100

100*256

512*300

700*456

[SilentSpike 84]

Yeah, I thought of that too. Im using 256 x 512.

Thanks though!

---------- Post added at 23:12 ---------- Previous post was at 22:36 ----------

Interestingly enough as soon as I added an element to the "controls" class of my dialog the problem went away and I really have no idea why... :confused: (My image is in backgroundControls)

So, if anyone can't get an image to display in colour, try adding another element to your dialog.

[Jakecfc1992 10]

Hello, I was having the same problem and switched to using RscButtonMenu. I set up the defines however I am still missing something as I get a "No Entry <path>.colorBackgroundFocused" message. I have hunted everywhere for anything on colorBackgroundFocused and haven't found any mention of it.

Would it be possible to get a copy of your list of defines for this resource?

[SilentSpike 84]

I actually recently updated the button wiki page to go into more detail regarding all the possible config options, here's a link. If you haven't already check out this page on dialog controls in general - it's where I started when I decided to just figure out how to define my own basic control resources.

Here is my current defines.hpp. It has a button class, a picture class and a basic text class (which I also use for boxes by leaving the text field as an empty string).

///////////////////////////////////////////////////////////////////////////
/// Constants
///////////////////////////////////////////////////////////////////////////


// 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
#define CT_CHECKBOX         77


// 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         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


// Custom
#define COLOR_PMC_BACK {1,0.55,0.2,0.85}
#define COLOR_PMC {1,0.55,0.2,1}
#define COLOR_BACK {1,1,1,0.85}
#define COLOR_BACK_DISABLED {0.333,0.333,0.333,0.85}
#define COLOR_TEXT_DISABLED {0,0,0,0.85}
#define COLOR_TEXT {1,1,1,1}
#define COLOR_ACTIVE {1,0.6,0.25,0.85}
#define COLOR_TRANSPARENT {0,0,0,0}
#define COLOR_SHADOW {0,0,0,0.5}
#define FONT_P "PuristaMedium"
#define SIZE_TEXT "(((((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1)"


///////////////////////////////////////////////////////////////////////////
/// Base Classes
///////////////////////////////////////////////////////////////////////////
class RscText
{
   type = CT_STATIC;
   idc = -1;
   colorBackground[] = COLOR_BACK;
   colorText[] = COLOR_TEXT;
   text = "";
   fixedWidth = 0;
   x = 0;
   y = 0;
   h = 0.037;
   w = 0.3;
   style = ST_LEFT;
   shadow = 1;
   colorShadow[] = COLOR_SHADOW;
   font = FONT_P;
   SizeEx = SIZE_TEXT;
   linespacing = 1;
   tooltipColorText[] = COLOR_TEXT;
   tooltipColorBox[] = COLOR_TEXT;
   tooltipColorShade[] = {0,0,0,0.65};
};
class RscPicture
{
   type = CT_STATIC;
   text = "";
   idc = -1;
   style = ST_PICTURE;
   colorBackground[] = {};
   colorText[] = {};
   font = FONT_P;
   SizeEx = 0;
};
class RscButton {
   idc = -1;
   type = CT_BUTTON;
   style = ST_CENTER;
   default = false;
   shadow = 0;
   font = FONT_P;
   SizeEx = SIZE_TEXT;
   colorText[] = COLOR_TEXT;
   colorFocused[] = COLOR_PMC;   // background color for focused state (tabbed/script - flashes)
   colorDisabled[] = COLOR_TEXT_DISABLED;   // text color for disabled state (via command ctrlEnable)
   colorBackground[] = COLOR_PMC;
   colorBackgroundDisabled[] = COLOR_BACK_DISABLED;   // background color for disabled state (via command ctrlEnable)
   colorBackgroundActive[] = COLOR_ACTIVE;   // background color for active state (mouse-over)
   offsetX = 0.003;
   offsetY = 0.003;
   offsetPressedX = 0.001;
   offsetPressedY = 0.001;
   colorShadow[] = COLOR_SHADOW;
   colorBorder[] = { 0, 0, 0, 1 };
   borderSize = 0;
   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};
   x = 0.4; y = 0.475;
   w = 0.2; h = 0.05;
   text = "";
   action = "";
};

Edited August 8, 2014 by SilentSpike