Jump to content
7erra

7erra's Editing Extensions

Recommended Posts

21 hours ago, gc8 said:

["BuyVehs",[[0,0,1,1],0.025,0.04,"GUI_GRID"],0,0,0],

Yeah that line dictates the GUI Editor which grid to use. The problem is that the GUI Editor uses three grids: absolute, safezone and a custom one. The custom one is modifyable and is overwritten by the mod. At the same time you can't switch between GUI_GRID and UI_GRID as they both take up the custom slot.

 

But what you can do is the following:

  1. Save the dialog as a config (#include in description.ext)
  2. Open the GUI Editor
  3. Hit CTRL+I (import)
  4. Enter this in the edit box: "missionConfigfile >> "yourDialogName"
  5. Press OK

The dialog should now use the grid which was set in the GUI Editor beforehand.

 

Edited by 7erra
The day that I write description.ext correct on my first try is the day that hell freezes

Share this post


Link to post
Share on other sites

@7erra Very nice tools. Especially the UI Editor fix for pixel grid. I prefer a visual representation when creating UIs in A3. I'm doing something wrong though... Any ideas? Thanks for sharing.

leRa0RC.jpg

 

Share this post


Link to post
Share on other sites
19 hours ago, HazJ said:

Any ideas?

Depends. How is it supposed to look like?

Share this post


Link to post
Share on other sites

Like that but not as small and also in the center. For some reason it has scaled down and moved far left. Not on my PC atm but will show you later a screenshot in UI editor preview.

 

EDIT: @7erra

GlfXkuX.jpg

Share this post


Link to post
Share on other sites

Yeah thats a difference 😄

Some more information needed:

  1. The grid you are using: Default, GUI_GRID, UI_GRID or sth else
  2. The dialog class
  3. The defines
  4. Screen resolution
  5. UI size (from the game options)

Share this post


Link to post
Share on other sites

UI_GRID - Based on Pixel Grid

class dlg_spawnSelectionUI
{
	idd = 12345;
	movingEnable = 1;
	onLoad = "uiNamespace setVariable ['disp_spawnSelection', param [0]];";
	onUnload = "uiNamespace setVariable ['disp_spawnSelection', nil];";
	class controls
	{
		class title : RscTitle
		{
			idc = 100;
			x = 8 * UI_GRID_W + UI_GRID_X;
			y = 5 * UI_GRID_H + UI_GRID_Y;
			w = 24 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Spawn Selection";
			colorBackground[] = {"(profileNamespace getVariable ['GUI_BCG_RGB_R', 0.13])", "(profileNamespace getVariable ['GUI_BCG_RGB_G', 0.54])", "(profileNamespace getVariable ['GUI_BCG_RGB_B', 0.21])", 1};
		};
		class background : RscPicture
		{
			idc = 200;
			x = 8 * UI_GRID_W + UI_GRID_X;
			y = 5.85 * UI_GRID_H + UI_GRID_Y;
			w = 24 * UI_GRID_W;
			h = 14 * UI_GRID_H;
			text = "#(argb,8,8,3)color(0,0,0,0.8)";
		};
		class RscButton_1600 : RscButton
		{
			idc = 300;
			x = 8 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1601 : RscButton
		{
			idc = 400;
			x = 11.5 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1602 : RscButton
		{
			idc = 500;
			x = 15 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1603 : RscButton
		{
			idc = 600;
			x = 18.5 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1604 : RscButton
		{
			idc = 700;
			x = 22 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1605 : RscButton
		{
			idc = 800;
			x = 25.5 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
		class RscButton_1606 : RscButton
		{
			idc = 900;
			x = 29 * UI_GRID_W + UI_GRID_X;
			y = 19.95 * UI_GRID_H + UI_GRID_Y;
			w = 3 * UI_GRID_W;
			h = 0.75 * UI_GRID_H;
			text = "Button";
		};
	};
};

https://www.dropbox.com/s/pgfk0n14fiq98m4/GUI_defines_1.88.hpp?dl=0

Modified the one above. Changed:

// Default text sizes
#define GUI_TEXT_SIZE_SMALL     (GUI_GRID_H * 0.8)
#define GUI_TEXT_SIZE_MEDIUM        (GUI_GRID_H * 1)
#define GUI_TEXT_SIZE_LARGE     (GUI_GRID_H * 1.2)
 
// Pixel grid
#define pixelScale  0.50
#define GRID_W (pixelW * pixelGrid * pixelScale)
#define GRID_H (pixelH * pixelGrid * pixelScale)

To:

// Pixel grid
#define pixelScale 0.50
#define GRID_W (pixelW * pixelGrid * pixelScale)
#define GRID_H (pixelH * pixelGrid * pixelScale)
#define UI_GRID_X (safezoneX)
#define UI_GRID_Y (safezoneY)
#define UI_GRID_W (5 * 0.5 * pixelW * pixelGrid)
#define UI_GRID_H (5 * 0.5 * pixelH * pixelGrid)
#define UI_GRID_WAbs (safezoneW)
#define UI_GRID_HAbs (safeZoneH)

1920x1080

Small

 

Hope this helps.

Share this post


Link to post
Share on other sites

I hate UI scaling. I spent a few hours looking through a3's GUIs but there is no "default" way to do things. The positioning was done for each control specifcally. When placing a GUI in the middle of the screen I'd recommend to do as arma does and to take the middle as the base. Otherwise the controls will shift more to the right the bigger the UI scale gets (and vice versa). It should look like this:

class display
{
  idd = 1000;
  class controls {
    class text1: RscText
    {
      x = 0.5 - CONTROL_W/2;
      y = 0.5 - CONTROL_H/2;
      w = CONTROL_W;
      h = CONTROL_H;
    };
  };
};
// And so on

The grids that I defined are the same as the ones used by the 3den Editor and are based on commands which take the current UI settings into account. Why it still changes the size between GUI Editor and actual dialog is beyond me.

Btw even BI doesn't seem to use the new pixelGrid with the exception of the 3den Editor. Checked the Orange DLC files, still GUI_GRID.

Share this post


Link to post
Share on other sites

I created the dialog in the center. So, what should I do? Just use GUI_GRID? Does it work okay for that?

 

EDIT: @7erra

Just made it again using GUI_GRID and it does the same except rather than it be at top left it is now bottom left lol... Is it because I am using decimal values?

nX091yI.jpg


	class controls
	{
		class title : RscTitle
		{
			idc = 100;
			x = 8 * GUI_GRID_W + GUI_GRID_X;
			y = 6 * GUI_GRID_H + GUI_GRID_Y;
			w = 24 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Spawn Selection";
			colorBackground[] = {"(profileNamespace getVariable ['GUI_BCG_RGB_R', 0.13])", "(profileNamespace getVariable ['GUI_BCG_RGB_G', 0.54])", "(profileNamespace getVariable ['GUI_BCG_RGB_B', 0.21])", 1};
		};
		class background : RscPicture
		{
			idc = 200;
			x = 8 * GUI_GRID_W + GUI_GRID_X;
			y = 6.85 * GUI_GRID_H + GUI_GRID_Y;
			w = 24 * GUI_GRID_W;
			h = 11 * GUI_GRID_H;
			text = "#(argb,8,8,3)color(0,0,0,0.8)";
		};
		class RscButton_1600 : RscButton
		{
			idc = 300;
			x = 8 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1601 : RscButton
		{
			idc = 400;
			x = 11.5 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1602 : RscButton
		{
			idc = 500;
			x = 15 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1603 : RscButton
		{
			idc = 600;
			x = 18.5 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1604 : RscButton
		{
			idc = 700;
			x = 22 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1605 : RscButton
		{
			idc = 800;
			x = 25.5 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
		class RscButton_1606 : RscButton
		{
			idc = 900;
			x = 29 * GUI_GRID_W + GUI_GRID_X;
			y = 17.95 * GUI_GRID_H + GUI_GRID_Y;
			w = 3 * GUI_GRID_W;
			h = 0.75 * GUI_GRID_H;
			text = "Button";
		};
	};

Just to be sure:

I press Esc, select GUI_GRID from your combo dropdown menu. Click GUI Editor. Press Shift + G twice. Press Ctrl + B to toggle background overlay. When I first open the GUI Editor, the grids are really offset?

LAL9IdE.jpg

Share this post


Link to post
Share on other sites
1 hour ago, HazJ said:

Just made it again using GUI_GRID and it does the same except rather than it be at top left it is now bottom left lol... Is it because I am using decimal values?

Nah it's not bc of decimal values. The difference is not surprising since the different grids use different zero values. GUI_GRID_Y = 0 is not the same as UI_GRID_Y = 0. Different ui scales affect the postion of the control which is intended. If they didn't move they would start overlapping when using different UI scales as the width and height would also change. In fact it can happen that increasing the UI size can lead to the control disappearing from the screen (try Very Larg setting and see my debug console going right out of the screen).

 

1 hour ago, HazJ said:

I created the dialog in the center. So, what should I do? Just use GUI_GRID? Does it work okay for that?

If you need a control in the center I'd set the center of the screen as the "base grid". This requires some simple math and a bit of imagination. The center of the screen will always be at

x = 0.5;
y = 0.5;

Therefore we can use that to our advantage. We know the size of our control, eg

w = 10 * UI_GRID_W;
h = 1 * UI_GRID_H;

Now we just need to center our control by going to the middle of the screen and then going half the width/height back:

class myControl: RscText
{
	text = "Exactly in the middle";
  	colorBackground[] = {0,0,0,0.8};
	x = 0.5 - 10/2 * UI_GRID_W;
	y = 0.5 - 1/2 * UI_GRID_H;
	w = 10 * UI_GRID_W;
	h = 1 * UI_GRID_H;
};

Here is a visual representation:

p85CCeJ.png

 

This approach is used by arma. But it can and will get more complicated the more offcenter you go. I am currently trying to decipher the macros that BI uses. Would ofc be easier and more reliable if there was a dev that knows the defines.

  • Like 1
  • Thanks 2

Share this post


Link to post
Share on other sites
2 hours ago, HazJ said:

When I first open the GUI Editor, the grids are really offset?

Yeah the GUI_GRID_Y starts in the middle of the center. Negative values are not uncommon. Also the grid only reaches out only that far for whatever reason. The GUI Editor has quite many functions but is not perfect. I already thought about making my own one but that would be a really ambigous project.

  • Like 1

Share this post


Link to post
Share on other sites

Yeah... Hmm. I feel demotivated to work on my projects atm now lol. Larrow might be able to shed some light on the matter. He has done a lot of stuff related to UIs. He was creating some UI visual representation tool or something.

ArmA UI creating process is terrible. Especially compared to other UI/UX design. I don't think there is anything as bad as A3. Even MS Paint is better! 🤣😀🤣

 

Oh, before I forget... More watchfields, code is evaluated too quickly. Not sure if you are using keyUp but either way it runs way too fast. A real pain when -showScriptErrors is on. Floods screen.

  • Haha 1
  • Sad 1

Share this post


Link to post
Share on other sites
14 hours ago, HazJ said:

Oh, before I forget... More watchfields, code is evaluated too quickly. Not sure if you are using keyUp but either way it runs way too fast. A real pain when -showScriptErrors is on. Floods screen.

Noted. I will change the way how the expressions are evaluated while control is focused.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks. Did you get my PM? @7erra

  • Like 1

Share this post


Link to post
Share on other sites

v2 - "Next Level" Update

Better late than never, eh? Skipping version v1.9 because it is in fact a major update. Maybe not so much on the content side of things but there are some important changes under the hood. Most noteably: Performance. The escape menu should now load faster because only one page gets loaded at a time. Also: New page. KK Debug is a small extension that enables logging of values to a console outside of the game which is a cleaner alternative to the rpt log. I will try to work on an extensive documentation over at GitHub to showcase all features, some are a bit hidden. Changelog for now is on Steam.

 

! IMPORTANT ! If you have security concerns regarding the debug_console_x64.dll then you are free to delete it. It will have no effect on the mod whatsoever but will make the whole KK Debug page non-functional.

 

Bugs and bad design for free,

7erra

  • Thanks 2
  • Haha 1

Share this post


Link to post
Share on other sites

hey @7erra ! Thanks for the update. I have to report that I had some issue with the live debug feature. I think it was on dedicated server when the debug area did not show up when pressing the "live debug" button. So you might want to check that 🙂

 

Edit: Well I tested on dedi and did work now. Not sure what was the problem before, maybe script error?

  • Like 1

Share this post


Link to post
Share on other sites

I'm still having issues with the live debug, sometimes when I press the button for live debug to appear nothing happens 😕

 

In fact when I first start mission and click it, it works. then I restart the mission and it doesn't work anymore

 

  • Like 1

Share this post


Link to post
Share on other sites
6 hours ago, gc8 said:

I'm still having issues with the live debug, sometimes when I press the button for live debug to appear nothing happens 😕

 

In fact when I first start mission and click it, it works. then I restart the mission and it doesn't work anymore

I have rewritten the code for the live debug console so I might have messed something up. Will try to reproduce it. Thanks for the heads-up!

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×