GetScreenStartPositionFromBox - Revision history

IIYAMA at 16:23, 9 March 2025

2025-03-09T16:23:52Z

← Older revision		Revision as of 16:23, 9 March 2025
Line 2:		Line 2:
	{{Useful Function}}		{{Useful Function}}

	This function provides a way to calculate screen positions for UI elements in MTA:SA, particularly useful for positioning dx-effects and creating ~~responsive~~ user interfaces. It uses a box-based positioning system that allows precise control over element placement relative to screen boundaries or center points.		This function provides a way to calculate screen positions for UI elements in MTA:SA, particularly useful for positioning dx-effects and creating user interfaces. It uses a box-based positioning system that allows precise control over element placement relative to screen boundaries or center points.

	The function calculates the starting position (X,Y coordinates) for drawing elements on the screen based on:		The function calculates the starting position (X,Y coordinates) for drawing elements on the screen based on:

IIYAMA at 11:55, 9 March 2025

2025-03-09T11:55:39Z

← Older revision		Revision as of 11:55, 9 March 2025
Line 131:		Line 131:
	function ()		function ()
	local rectangleWidth, rectangleHeight = 400 * scaleValue, 200 * scaleValue		local rectangleWidth, rectangleHeight = 400 * scaleValue, 200 * scaleValue
			local offsetX = 100 * scaleValue
			local offsetY = 100 * scaleValue

	local startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, ~~100 * scaleValue~~, ~~100 * scaleValue~~, "right", "bottom")		local startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offsetX, offsetY, "right", "bottom")

	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

IIYAMA at 11:54, 9 March 2025

2025-03-09T11:54:01Z

← Older revision		Revision as of 11:54, 9 March 2025
Line 106:		Line 106:
	</syntaxhighlight>		</syntaxhighlight>
	</section>		</section>



	<section name="Client" class="client" show="true">		<section name="Client" class="client" show="true">
	<syntaxhighlight lang="lua">		<syntaxhighlight lang="lua">

	--[[		--[[
	~~- Scaled version~~ for all ~~screen resolutions~~		Scale for all screens
	~~- Multiple rectangles~~
	]]		]]
			-- Your resolution as developer.
			local devScreenX = 1920
			local devScreenY = 1080

			-- The current resolution of the client
			local screenX, screenY = guiGetScreenSize()

			-- Get the scale value
			local scaleValue = screenY / devScreenY

			-- Set an upper limit, so that it isn't scaled too small.
			scaleValue = math.max(scaleValue, 0.65)



			addEventHandler("onClientRender",root,
			function ()
			local rectangleWidth, rectangleHeight = 400 * scaleValue, 200 * scaleValue

			local startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 100 * scaleValue, 100 * scaleValue, "right", "bottom")

			dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

			end)
			</syntaxhighlight>
			</section>

			<section name="Client" class="client" show="true">
			<syntaxhighlight lang="lua">

	--[[		--[[
	~~Prepare the scale multiplier:~~		Scale for all screens
	]]		]]
	-- Your resolution as developer.		-- Your resolution as developer.

IIYAMA: Remove extra validation

2025-03-09T11:47:50Z

Remove extra validation

@@ Line 65: / Line 65: @@
 	function getScreenStartPositionFromBox (width, height, offsetX, offsetY, startIndicationX, startIndicationY)
 		local startX = offsetX
 		local startY = offsetY

IIYAMA at 11:45, 9 March 2025

2025-03-09T11:45:19Z

← Older revision		Revision as of 11:45, 9 March 2025
Line 2:		Line 2:
	{{Useful Function}}		{{Useful Function}}

	This function ~~can be used~~ to ~~position~~ dx-effects ~~on your~~ screen. The function ~~requires you to create a box. This box exist out of~~ the ~~dimensions width/height and a~~ X/Y ~~position. The~~ box ~~is used to help~~ with ~~positioning dx-effects that do have a~~ width/height~~. The box can have 0 width and 0 height~~, ~~but it is recommended to fill those in with~~ the ~~dimensions of the dx-effect you want to draw.~~		This function provides a way to calculate screen positions for UI elements in MTA:SA, particularly useful for positioning dx-effects and creating responsive user interfaces. It uses a box-based positioning system that allows precise control over element placement relative to screen boundaries or center points.

			The function calculates the starting position (X,Y coordinates) for drawing elements on the screen based on:
			* A virtual box with defined dimensions (width/height)
			* Desired positioning (left/right/center horizontally, top/bottom/center vertically)
			* Offset values for fine-tuning the position


Line 11:		Line 16:

	===Required Arguments===		===Required Arguments===
	* '''width:''' The width of the box.		* '''width:''' The width of the virtual box in pixels
	* '''height:''' The height of the box.		Can be 0, though using actual element dimensions is recommended
	* '''offsetX:'''~~The~~ offset from ~~it's current~~ position~~. (~~"left"/"center" ~~startIndicationX = offset added.) (~~"right" ~~startIndicationX = offset subtracted.)~~		Used for calculating center and right-aligned positions
	* '''offsetY:''' ~~The~~ offset from ~~it's current~~ position~~. (~~"top"/"center" ~~startIndicationY = offset added.) (~~"bottom" ~~startIndicationY~~ = ~~offset subtracted.)~~		* '''height:''' The height of the virtual box in pixels
	* '''startIndicationX:''' ~~The X position of the box~~: "left", "right", "center"		Can be 0, though using actual element dimensions is recommended
	* '''startIndicationY:''' ~~The Y position of the box~~: "top", "bottom", "center"		Used for calculating center and bottom-aligned positions
			* '''offsetX:''' Horizontal offset from the calculated position
			For "left"/"center": Positive values move right
			For "right": Positive values move left
			* '''offsetY:''' Vertical offset from the calculated position
			For "top"/"center": Positive values move down
			For "bottom": Positive values move up

			===Optional Arguments===
			* '''startIndicationX:''' Horizontal positioning mode
			Default: "left"
			Valid values:
			- "left": Aligns to left screen edge
			- "right": Aligns to right screen edge
			- "center": Centers horizontally on screen
			* '''startIndicationY:''' Vertical positioning mode
			Default: "top"
			Valid values:
			- "top": Aligns to top screen edge
			- "bottom": Aligns to bottom screen edge
			- "center": Centers vertically on screen

	===Returns===		===Returns===
	Returns 2 values:		Returns two values:
	* '''startX:''' ~~Start~~ X ~~position~~		* '''startX:''' The calculated X coordinate for drawing
	* '''startY:''' ~~Start~~ Y position		* '''startY:''' The calculated Y coordinate for drawing


			===Behavior position calculation===
			* Left alignment: startX = offsetX
			* Right alignment: startX = screenWidth - (width + offsetX)
			* Center X alignment: startX = (screenWidth / 2) - (width / 2) + offsetX
			* Top alignment: startY = offsetY
			* Bottom alignment: startY = screenHeight - (height + offsetY)
			* Center Y alignment: startY = (screenHeight / 2) - (height / 2) + offsetY

	==Code==		==Code==

IIYAMA at 22:44, 22 August 2024

2024-08-22T22:44:50Z

← Older revision		Revision as of 22:44, 22 August 2024
Line 2:		Line 2:
	{{Useful Function}}		{{Useful Function}}

	This function can be used to position dx-effects on your screen. The function requires you to create a box. This box exist out of the dimensions width/height and a X/Y position. The box is used to help with positioning dx-effects that do have an width/height. The box can have 0 width and 0 height, but it is recommended to fill those in with the dimensions of the dx-effect you want to draw.		This function can be used to position dx-effects on your screen. The function requires you to create a box. This box exist out of the dimensions width/height and a X/Y position. The box is used to help with positioning dx-effects that do have a width/height. The box can have 0 width and 0 height, but it is recommended to fill those in with the dimensions of the dx-effect you want to draw.

IIYAMA: /* Required Arguments */

2021-02-28T22:13:24Z

Required Arguments

← Older revision		Revision as of 22:13, 28 February 2021
Line 15:		Line 15:
	* '''offsetX:'''The offset from it's current position. ("left"/"center" startIndicationX = offset added.) ("right" startIndicationX = offset subtracted.)		* '''offsetX:'''The offset from it's current position. ("left"/"center" startIndicationX = offset added.) ("right" startIndicationX = offset subtracted.)
	* '''offsetY:''' The offset from it's current position. ("top"/"center" startIndicationY = offset added.) ("bottom" startIndicationY = offset subtracted.)		* '''offsetY:''' The offset from it's current position. ("top"/"center" startIndicationY = offset added.) ("bottom" startIndicationY = offset subtracted.)
	* '''startIndicationX:''' The X position of the box.		* '''startIndicationX:''' The X position of the box: "left", "right", "center"
	* '''startIndicationY:''' The Y position of the box.		* '''startIndicationY:''' The Y position of the box: "top", "bottom", "center"

	===Returns===		===Returns===

IIYAMA: Updated required arguments. Improving the readability.

2021-02-28T18:26:11Z

Updated required arguments. Improving the readability.

← Older revision		Revision as of 18:26, 28 February 2021
Line 13:		Line 13:
	* '''width:''' The width of the box.		* '''width:''' The width of the box.
	* '''height:''' The height of the box.		* '''height:''' The height of the box.
	* '''offsetX:''' The offset from it's current position. ~~Left~~ startIndicationX = offset added. ~~Right~~ startIndicationX = offset subtracted~~. (If center is used, the offset is applied from the left~~.)		* '''offsetX:'''The offset from it's current position. ("left"/"center" startIndicationX = offset added.) ("right" startIndicationX = offset subtracted.)
	* '''offsetY:''' The offset from it's current position. ~~Top~~ startIndicationY = offset added. ~~Bottom~~ startIndicationY = offset subtracted~~. (If center is used, the offset is applied from the top~~.)		* '''offsetY:''' The offset from it's current position. ("top"/"center" startIndicationY = offset added.) ("bottom" startIndicationY = offset subtracted.)
	* '''startIndicationX:''' The X position of the box.		* '''startIndicationX:''' The X position of the box.
	* '''startIndicationY:''' The Y position of the box.		* '''startIndicationY:''' The Y position of the box.

IIYAMA: last notes... :(

2021-02-28T18:17:28Z

last notes... :(

← Older revision		Revision as of 18:17, 28 February 2021
Line 93:		Line 93:
	<section name="Client" class="client" show="true">		<section name="Client" class="client" show="true">
	<syntaxhighlight lang="lua">		<syntaxhighlight lang="lua">

	--[[		--[[
	- Scaled version for all screen resolutions		- Scaled version for all screen resolutions
Line 128:		Line 127:

	-- Start drawing at the correct position:		-- Start drawing at the correct position:

	local startX, startY		local startX, startY

Line 134:		Line 132:
	left & top		left & top
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY , "left", "top")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY, "left", "top")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

Line 140:		Line 138:
	right & top		right & top
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY , "right", "top")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY, "right", "top")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

Line 146:		Line 144:
	right & bottom		right & bottom
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY , "right", "bottom")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY, "right", "bottom")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

Line 152:		Line 150:
	left & bottom		left & bottom
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY , "left", "bottom")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, offsetY, "left", "bottom")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

	--[[		--[[
	left & center		left & center
			Note: offsetY is 0.
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, 0 , "left", "center")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, 0, "left", "center")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

	--[[		--[[
	right & center		right & center
			Note: offsetY is 0.
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, 0 , "right", "center")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, offSetX, 0, "right", "center")
	dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )		dxDrawRectangle ( startX, startY, rectangleWidth, rectangleHeight, tocolor(0, 150, 0), false )

Line 170:		Line 170:
	--[[		--[[
	center & top		center & top
			Note: offsetX is 0.
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, offsetY, "center", "top")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, offsetY, "center", "top")
Line 176:		Line 177:
	--[[		--[[
	center & bottom		center & bottom
			Note: offsetX is 0.
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, offsetY, "center", "bottom")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, offsetY, "center", "bottom")
Line 182:		Line 184:
	--[[		--[[
	center & center		center & center
			Note: offsetX and offsetY are 0.
	]]		]]
	startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, 0, "center", "center")		startX, startY = getScreenStartPositionFromBox(rectangleWidth, rectangleHeight, 0, 0, "center", "center")

IIYAMA: Add more comments.

2021-02-28T18:14:20Z

Add more comments.

← Older revision		Revision as of 18:14, 28 February 2021
Line 123:		Line 123:
	addEventHandler("onClientRender",root,		addEventHandler("onClientRender",root,
	function ()		function ()
			-- Scale the dimensions:
	local rectangleWidth, rectangleHeight = 400 * scaleValue, 200 * scaleValue		local rectangleWidth, rectangleHeight = 400 * scaleValue, 200 * scaleValue
	local offSetX, offsetY = 50 * scaleValue, 50 * scaleValue		local offSetX, offsetY = 50 * scaleValue, 50 * scaleValue

			-- Start drawing at the correct position:

	local startX, startY		local startX, startY