Making my own GUI and need me some help!

Author

Message

Yodaman Jer

User Banned

Posted: 31st Jan 2016 15:47

I have been wracking my brain for a couple of days with this now, and I have done tons of Googling but nothing I find has helped me

I am trying to make a slider or scrollbar GUI element. I want it so that when you drag the slider to the right, it increases a value, say for volume. When you drag it to the left I want it to decrease.

I want it to stay in proportion to the size of the slider, as well. Say the slider is 300px wide but the maximum value is only 100. I want it so that the value only gets updated to 100 when the slider is all the way to the right. This should also work if the slider is only 50px wide and the value is still 100 .

So what's the best way of doing this? I have it so that the scrollbar updates its position based on the x position of the mouse, but I have no idea what math to use to figure out how to update the value of the scrollbar/slider. Any ideas?

This is the code I have for updating the position of the scrollbar:

+ Code Snippet

			if GetRawMouseLeftState()
				// set the sprite position of the slider bit
				SetSpritePosition(s.scrollbarID, GetPointerX(), s.bounds.yPos)
				if s.scrollbar.xPos >= s.scrollbar.width then s.scrollbar.xPos = s.scrollbar.width
				
				// clamp the values
				if s.curValue >= s.maxValue then s.curValue = s.maxValue
				if s.curValue <= s.minValue then s.curValue = s.minValue
			endif

Slowly compiling code, one byte at a time.
Follow meh blague for more zany thoughts and possibly offensive programming!

Back to top

Profile

Hockeykid

DBPro Tool Maker

17

Years of Service

User Offline

Joined: 26th Sep 2007

Location:

Posted: 31st Jan 2016 16:35

Link

The amount of pixels that the scrollbar slides along is s.scrollbar.width, if you find the current slider position relative to the width then you can calculate a percentage. Therefore s.curValue = (sliderPositionX - scrollBarPositionX) / (s.scrollbar.width * 1.0) (using *1.0 to force float division).

For example if the scrollbar position is x = 300 and the scrollbar width is = 100. If the slider is at 350 you would get s.curValue = (350 - 300) / 100.0 which is 0.5.

Sean

Back to top

Profile PM Email

BatVink

Moderator

21

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 31st Jan 2016 17:00

Link

This code makes horizontal and vertical sliders, with any range of values you specify. You have to InitSliders() to get it going. Then you SliderCreate() and SliderShow(). You can also set the slider background image.There are a host of other supporting functions. If you want to use it, I would suggest reading it, then asking any questions you may have.

#CONSTANT cSLIDER_HORIZONTAL = 0
#CONSTANT cSLIDER_VERTICAL = 1
#CONSTANT cSLIDER_ALIGN_LEFT = 2
#CONSTANT cSLIDER_ALIGN_TOP = 3
#CONSTANT cSLIDER_ALIGN_RIGHT = 4
#CONSTANT cSLIDER_ALIGN_BOTTOM = 5
#CONSTANT cSLIDER_ALIGN_CENTRE_H = 6
#CONSTANT cSLIDER_ALIGN_CENTRE_V = 7

type tSliderSystem
	nextId as integer
	isPressed as integer
endtype

type tSlider
	active
	size as tVector2
	orientation
	spriteBar
	spriteSlider
	spriteBack
	colourSlider as tColour
	slideRange as float
	alignment
	minVal as float
	maxVal as float
endtype

// *******************************************************
function initSliders()
	
	global gSliderSystem as tSliderSystem
	gSliderSystem.nextId = 1
	dim arrSlider[0] as tSlider
	
endfunction

// *******************************************************
//	X defines the length of the bar
//	Y defines the height of the slider (needs to be touchable)
// *******************************************************
function SliderCreate(width, height, orientation)
// *******************************************************
	
	id = gSliderSystem.nextId
	arrSlider.length = id
	inc gSliderSystem.nextId, 1
	
	arrSlider[id].size.x = width
	arrSlider[id].size.y = height
	arrSlider[id].orientation = orientation
	
	arrSlider[id].active = 0
	
	arrSlider[id].minVal = 0
	arrSlider[id].maxVal = 100

endfunction id

// *******************************************************
function SliderShow(id, x, y, align)
	
	//Make the slider sprites
	arrSlider[id].spriteBar = createSprite(0)
	arrSlider[id].spriteSlider = createSprite(0)
	arrSlider[id].spriteBack = createSprite(0)
	SetSpriteColor(arrSlider[id].spriteBack,32,32,32,255)

if arrSlider[id].orientation = cSLIDER_HORIZONTAL
		setSpritesize(arrSlider[id].spriteBar, arrSlider[id].size.x, 3)
		setSpritesize(arrSlider[id].spriteSlider, arrSlider[id].size.y, arrSlider[id].size.y)
		setSpritesize(arrSlider[id].spriteBack, arrSlider[id].size.x, arrSlider[id].size.y)
	else
		setSpritesize(arrSlider[id].spriteBar, 3, arrSlider[id].size.y)
		setSpritesize(arrSlider[id].spriteSlider, arrSlider[id].size.x, arrSlider[id].size.x)
		setSpritesize(arrSlider[id].spriteBack, arrSlider[id].size.x, arrSlider[id].size.y)
	endif
	
	SetSpriteDepth(arrSlider[id].spriteBar, 8)
	SetSpriteDepth(arrSlider[id].spriteSlider, 7)
	SetSpriteDepth(arrSlider[id].spriteBack, 9)
	// Set Default positions
	select align
		
		case cSLIDER_ALIGN_CENTRE_H
			x = x - (GetSpriteWidth(arrSlider[id].spriteBar) * 0.5)
		endcase
		
		case cSLIDER_ALIGN_RIGHT
			x = x - (GetSpriteWidth(arrSlider[id].spriteBar))
		endcase
		
		case cSLIDER_ALIGN_CENTRE_V
			y = y - (GetSpriteHeight(arrSlider[id].spriteBar) * 0.5)
		endcase
		
		case cSLIDER_ALIGN_BOTTOM
			y = y - (GetSpriteHeight(arrSlider[id].spriteBar))
		endcase
		
	endselect
	
	SetSpritePosition(arrSlider[id].spriteBar,x,y)
	SetSpritePositionByOffset(arrSlider[id].spriteBack, GetSpriteXByOffset(arrSlider[id].spriteBar),GetSpriteYByOffset(arrSlider[id].spriteBar))
	
	select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, x + (getSpritewidth(arrSlider[id].spriteSlider) / 2), y)
			arrSlider[id].slideRange = (getSpritewidth(arrSlider[id].spriteBar) - getSpritewidth(arrSlider[id].spriteSlider))
		endcase
			
		case cSLIDER_VERTICAL
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, x, y + (getSpriteHeight(arrSlider[id].spriteSlider) * 0.5))
			arrSlider[id].slideRange = (GetSpriteHeight(arrSlider[id].spriteBar) - GetSpriteHeight(arrSlider[id].spriteSlider))
		endcase
			
		
	endselect
	
	arrSlider[id].active = 1
	
endfunction

function sliderHideAll()
	
	for id = 1 to arrSlider.length
		if arrSlider[id].active = 1
			SliderHide(id)
		endif
	next id
	
endfunction

function SliderHide(id)

DeleteSprite(arrSlider[id].spriteBar)
	DeleteSprite(arrSlider[id].spriteSlider)
	DeleteSprite(arrSlider[id].spriteBack)
	arrSlider[id].active = 0
	
endfunction

function SliderIsActive(id)

ret = arrSlider[id].active
	
endfunction ret

//****************************************************
function SliderSetBackImage(id, imageId)
//****************************************************
	
	SetSpriteImage(arrSlider[id].spriteBack, imageId)
	SetSpriteColor(arrSlider[id].spriteBack, 255,255,255,255)

endfunction
	
//****************************************************
function SliderSetRange(id, min#, max#)
//****************************************************
	
	arrSlider[id].minVal = min#
	arrSlider[id].maxVal = max#

endfunction
	
//****************************************************
function SliderSetPositionAbsolute(id, value#)
//****************************************************
	
	perc# = value# / (arrSlider[id].maxVal - arrSlider[id].minVal)
	if perc# < 0 then perc# = 0
	if perc# > 1 then perc# = 1
	
	select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			offset# = arrSlider[id].slideRange * perc# + (GetSpriteWidth(arrSlider[id].spriteSlider) * 0.5)
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, getSpriteX(arrSlider[id].spriteBar) + offset#, GetSpriteYByOffset(arrSlider[id].spriteSlider))
		endcase
		
		case cSLIDER_VERTICAL
			offset# = arrSlider[id].slideRange * perc# + (GetSpriteHeight(arrSlider[id].spriteSlider) * 0.5)
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, GetSpriteXByOffset(arrSlider[id].spriteSlider), getSpriteY(arrSlider[id].spriteBar) + offset#)
		endcase
		
	endselect

endfunction

//*****************************************
//	If a slider is now being clicked, this will tell you the slider ID
//	You would call this as part of your interface click checks.
//	It is assumed that you want to interact with the slider if a hit is positive
//	If the hit is on the bar it will jump to that position
//*****************************************
function SliderisFirstPress()
//*****************************************
	
	hit = GetSpriteHit(getpointerX(), getPointerY())
	if hit > 0
		for id = 1 to arrSlider.length
			if arrSlider[id].active = 1
				if hit = arrSlider[id].spriteBar or hit = arrSlider[id].spriteSlider or hit = arrSlider[id].spriteBack
					log("First Press: " + str(id))
					exitfunction id
				endif
			endif
		next id
	endif
	
endfunction 0

//*****************************************
//	If a slider is being processed, this will return > 0
//*****************************************
function SliderisPressed()
//*****************************************
	
	log("Slider is Pressed : " + str(gSliderSystem.isPressed))
	exitfunction gSliderSystem.isPressed
	
endfunction 0

//*****************************************
//	Tell the slider to stop moving
//*****************************************
function SliderStopPress()
//*****************************************
	
	log("Stop monitoring slider position")
	gSliderSystem.isPressed = 0
	
endfunction

//*****************************************
//	Internal function to reposition slider
//*****************************************
function sliderPositionSlider(id)
//*****************************************
	
	sb = arrSlider[id].spriteBar
	ss = arrSlider[id].spriteSlider

select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			x# = GetPointerX()
			if getPointerX() > GetSpriteWidth(sb) + getSpriteX(sb) - (arrSlider[id].size.y / 2) then x# = GetSpriteWidth(sb) + getSpriteX(sb) - (arrSlider[id].size.y / 2)
			if getPointerX() < getSpriteX(sb) + (arrSlider[id].size.y / 2) then x# = getSpriteX(sb) + (arrSlider[id].size.y / 2)
			SetSpritePositionByOffset(ss, x#, GetSpriteYByOffset(ss))
			pos# = (x# - (getSpriteX(sb) + (arrSlider[id].size.y / 2))) / (GetSpriteWidth(sb) - arrSlider[id].size.y)
			
		endcase

case cSLIDER_VERTICAL
			y# = GetPointerY()
			if getPointerY() > GetSpriteHeight(sb) + getSpriteY(sb) - (arrSlider[id].size.x / 2) then y# = GetSpriteHeight(sb) + getSpriteY(sb) - (arrSlider[id].size.x / 2)
			if getPointerY() < getSpriteY(sb) + (arrSlider[id].size.x / 2) then y# = getSpriteY(sb) + (arrSlider[id].size.x / 2)
			SetSpritePositionByOffset(ss, GetSpriteXByOffset(ss), y#)
			pos# = (y# - (getSpriteY(sb) + (arrSlider[id].size.x / 2))) / (GetSpriteHeight(sb) - arrSlider[id].size.x)
		endcase

endselect

ret# = arrSlider[id].minVal + (pos# * (arrSlider[id].maxVal - arrSlider[id].minVal))
	//print("pos# = " + str(pos#,2))
	//print("ret# = " + str(ret#,2))
	//print("range# = " + str((arrSlider[id].maxVal - arrSlider[id].minVal),2))

//print("Slider x: " + str(x#))
	//print("Slider y: " + str(y#))
	
endfunction ret#

+ Code Snippet

#CONSTANT cSLIDER_HORIZONTAL = 0
#CONSTANT cSLIDER_VERTICAL = 1
#CONSTANT cSLIDER_ALIGN_LEFT = 2
#CONSTANT cSLIDER_ALIGN_TOP = 3
#CONSTANT cSLIDER_ALIGN_RIGHT = 4
#CONSTANT cSLIDER_ALIGN_BOTTOM = 5
#CONSTANT cSLIDER_ALIGN_CENTRE_H = 6
#CONSTANT cSLIDER_ALIGN_CENTRE_V = 7


type tSliderSystem
	nextId as integer
	isPressed as integer
endtype

type tSlider
	active
	size as tVector2
	orientation
	spriteBar
	spriteSlider
	spriteBack
	colourSlider as tColour
	slideRange as float
	alignment
	minVal as float
	maxVal as float
endtype

// *******************************************************
function initSliders()
	
	global gSliderSystem as tSliderSystem
	gSliderSystem.nextId = 1
	dim arrSlider[0] as tSlider
	
endfunction

// *******************************************************
//	X defines the length of the bar
//	Y defines the height of the slider (needs to be touchable)
// *******************************************************
function SliderCreate(width, height, orientation)
// *******************************************************
	
	id = gSliderSystem.nextId
	arrSlider.length = id
	inc gSliderSystem.nextId, 1
	
	arrSlider[id].size.x = width
	arrSlider[id].size.y = height
	arrSlider[id].orientation = orientation
	
	arrSlider[id].active = 0
	
	arrSlider[id].minVal = 0
	arrSlider[id].maxVal = 100

endfunction id


// *******************************************************
function SliderShow(id, x, y, align)
	
	//Make the slider sprites
	arrSlider[id].spriteBar = createSprite(0)
	arrSlider[id].spriteSlider = createSprite(0)
	arrSlider[id].spriteBack = createSprite(0)
	SetSpriteColor(arrSlider[id].spriteBack,32,32,32,255)

	if arrSlider[id].orientation = cSLIDER_HORIZONTAL
		setSpritesize(arrSlider[id].spriteBar, arrSlider[id].size.x, 3)
		setSpritesize(arrSlider[id].spriteSlider, arrSlider[id].size.y, arrSlider[id].size.y)
		setSpritesize(arrSlider[id].spriteBack, arrSlider[id].size.x, arrSlider[id].size.y)
	else
		setSpritesize(arrSlider[id].spriteBar, 3, arrSlider[id].size.y)
		setSpritesize(arrSlider[id].spriteSlider, arrSlider[id].size.x, arrSlider[id].size.x)
		setSpritesize(arrSlider[id].spriteBack, arrSlider[id].size.x, arrSlider[id].size.y)
	endif
	
	SetSpriteDepth(arrSlider[id].spriteBar, 8)
	SetSpriteDepth(arrSlider[id].spriteSlider, 7)
	SetSpriteDepth(arrSlider[id].spriteBack, 9)
	// Set Default positions
	select align
		
		case cSLIDER_ALIGN_CENTRE_H
			x = x - (GetSpriteWidth(arrSlider[id].spriteBar) * 0.5)
		endcase
		
		case cSLIDER_ALIGN_RIGHT
			x = x - (GetSpriteWidth(arrSlider[id].spriteBar))
		endcase
		
		case cSLIDER_ALIGN_CENTRE_V
			y = y - (GetSpriteHeight(arrSlider[id].spriteBar) * 0.5)
		endcase
		
		case cSLIDER_ALIGN_BOTTOM
			y = y - (GetSpriteHeight(arrSlider[id].spriteBar))
		endcase
		
	endselect
	
	SetSpritePosition(arrSlider[id].spriteBar,x,y)
	SetSpritePositionByOffset(arrSlider[id].spriteBack, GetSpriteXByOffset(arrSlider[id].spriteBar),GetSpriteYByOffset(arrSlider[id].spriteBar))
	
	select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, x + (getSpritewidth(arrSlider[id].spriteSlider) / 2), y)
			arrSlider[id].slideRange = (getSpritewidth(arrSlider[id].spriteBar) - getSpritewidth(arrSlider[id].spriteSlider))
		endcase
			
		case cSLIDER_VERTICAL
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, x, y + (getSpriteHeight(arrSlider[id].spriteSlider) * 0.5))
			arrSlider[id].slideRange = (GetSpriteHeight(arrSlider[id].spriteBar) - GetSpriteHeight(arrSlider[id].spriteSlider))
		endcase
			
		
	endselect
	
	arrSlider[id].active = 1
	
endfunction

function sliderHideAll()
	
	for id = 1 to arrSlider.length
		if arrSlider[id].active = 1
			SliderHide(id)
		endif
	next id
	
endfunction

function SliderHide(id)

	DeleteSprite(arrSlider[id].spriteBar)
	DeleteSprite(arrSlider[id].spriteSlider)
	DeleteSprite(arrSlider[id].spriteBack)
	arrSlider[id].active = 0
	
endfunction

function SliderIsActive(id)

	ret = arrSlider[id].active
	
endfunction ret

//****************************************************
function SliderSetBackImage(id, imageId)
//****************************************************
	
	SetSpriteImage(arrSlider[id].spriteBack, imageId)
	SetSpriteColor(arrSlider[id].spriteBack, 255,255,255,255)

endfunction
	
//****************************************************
function SliderSetRange(id, min#, max#)
//****************************************************
	
	arrSlider[id].minVal = min#
	arrSlider[id].maxVal = max#

endfunction
	
//****************************************************
function SliderSetPositionAbsolute(id, value#)
//****************************************************
	
	perc# = value# / (arrSlider[id].maxVal - arrSlider[id].minVal)
	if perc# < 0 then perc# = 0
	if perc# > 1 then perc# = 1
	
	select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			offset# = arrSlider[id].slideRange * perc# + (GetSpriteWidth(arrSlider[id].spriteSlider) * 0.5)
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, getSpriteX(arrSlider[id].spriteBar) + offset#, GetSpriteYByOffset(arrSlider[id].spriteSlider))
		endcase
		
		case cSLIDER_VERTICAL
			offset# = arrSlider[id].slideRange * perc# + (GetSpriteHeight(arrSlider[id].spriteSlider) * 0.5)
			SetSpritePositionByOffset(arrSlider[id].spriteSlider, GetSpriteXByOffset(arrSlider[id].spriteSlider), getSpriteY(arrSlider[id].spriteBar) + offset#)
		endcase
		
	endselect

	
endfunction

//*****************************************
//	If a slider is now being clicked, this will tell you the slider ID
//	You would call this as part of your interface click checks.
//	It is assumed that you want to interact with the slider if a hit is positive
//	If the hit is on the bar it will jump to that position
//*****************************************
function SliderisFirstPress()
//*****************************************
	
	hit = GetSpriteHit(getpointerX(), getPointerY())
	if hit > 0
		for id = 1 to arrSlider.length
			if arrSlider[id].active = 1
				if hit = arrSlider[id].spriteBar or hit = arrSlider[id].spriteSlider or hit = arrSlider[id].spriteBack
					log("First Press: " + str(id))
					exitfunction id
				endif
			endif
		next id
	endif
	
endfunction 0

//*****************************************
//	If a slider is being processed, this will return > 0
//*****************************************
function SliderisPressed()
//*****************************************
	
	log("Slider is Pressed : " + str(gSliderSystem.isPressed))
	exitfunction gSliderSystem.isPressed
	
endfunction 0

//*****************************************
//	Tell the slider to stop moving
//*****************************************
function SliderStopPress()
//*****************************************
	
	log("Stop monitoring slider position")
	gSliderSystem.isPressed = 0
	
endfunction

//*****************************************
//	Internal function to reposition slider
//*****************************************
function sliderPositionSlider(id)
//*****************************************
	
	sb = arrSlider[id].spriteBar
	ss = arrSlider[id].spriteSlider

	select arrSlider[id].orientation
		
		case cSLIDER_HORIZONTAL
			x# = GetPointerX()
			if getPointerX() > GetSpriteWidth(sb) + getSpriteX(sb) - (arrSlider[id].size.y / 2) then x# = GetSpriteWidth(sb) + getSpriteX(sb) - (arrSlider[id].size.y / 2)
			if getPointerX() < getSpriteX(sb) + (arrSlider[id].size.y / 2) then x# = getSpriteX(sb) + (arrSlider[id].size.y / 2)
			SetSpritePositionByOffset(ss, x#, GetSpriteYByOffset(ss))
			pos# = (x# - (getSpriteX(sb) + (arrSlider[id].size.y / 2))) / (GetSpriteWidth(sb) - arrSlider[id].size.y)
			
		endcase

		case cSLIDER_VERTICAL
			y# = GetPointerY()
			if getPointerY() > GetSpriteHeight(sb) + getSpriteY(sb) - (arrSlider[id].size.x / 2) then y# = GetSpriteHeight(sb) + getSpriteY(sb) - (arrSlider[id].size.x / 2)
			if getPointerY() < getSpriteY(sb) + (arrSlider[id].size.x / 2) then y# = getSpriteY(sb) + (arrSlider[id].size.x / 2)
			SetSpritePositionByOffset(ss, GetSpriteXByOffset(ss), y#)
			pos# = (y# - (getSpriteY(sb) + (arrSlider[id].size.x / 2))) / (GetSpriteHeight(sb) - arrSlider[id].size.x)
		endcase

	endselect 

	ret# = arrSlider[id].minVal + (pos# * (arrSlider[id].maxVal - arrSlider[id].minVal))
	//print("pos# = " + str(pos#,2))
	//print("ret# = " + str(ret#,2))
	//print("range# = " + str((arrSlider[id].maxVal - arrSlider[id].minVal),2))

	//print("Slider x: " + str(x#))
	//print("Slider y: " + str(y#))
	
endfunction ret#

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Back to top

Profile PM Email

Yodaman Jer

User Banned

Posted: 1st Feb 2016 02:16

Link

@Hockeykid:

That seems to have done the trick!

Although, when you first drag the slider from the left to the right it will go about one tenth of the width of the background of the slider before it starts updating the number... any ideas on how to fix that?

This is what my code looks like right now...

+ Code Snippet

				if s.scrollbar.xPos <= s.bounds.xPos + s.bounds.width
					s.curValue = (s.scrollbar.xPos - s.bounds.xPos)/(s.bounds.width * 1.0) * s.maxValue
					
					// clamp values
					if s.curValue <= s.minValue then s.curValue = s.minValue
					if s.curValue >= s.maxValue then s.curValue = s.maxValue
				endif

Slowly compiling code, one byte at a time.
Follow meh blague for more zany thoughts and possibly offensive programming!

Back to top

Profile

Yodaman Jer

User Banned

Posted: 1st Feb 2016 17:14

Link

After some experimentation I managed to get it working last night!

Final code, in my UpdateScrollbar function:

function UpdateScrollbar(s ref as tScrollBar)
	// only check for updates if the scrollbar is visible
	if s.visible
		if MouseInBounds(s.bounds)
			if GetRawMouseLeftState() = 1 then s.dragging = 1

endif
		
		// if dragging is true we update the value of the scrollbar
		if s.dragging = 1
			// determine if the mouse is within bounds of the scrollbar track
			if GetPointerX() >= s.bounds.xPos and GetPointerX() <= s.bounds.xPos + s.bounds.width
				
				// update the position of the scrollbar with the mouseX position
				s.scrollbar.xPos = GetPointerX()
				
				// update the value only if the scrollbar x position is less than the width of the scrollbar track (going forward)
				if s.scrollbar.xPos <= s.bounds.xPos + s.bounds.width
					
					// update the current value based on the position of the scrollbar 				
					s.curValue = (s.scrollbar.xPos - s.bounds.xPos)/(s.bounds.width - s.scrollbar.width * 1.0) * s.maxValue
				
					// clamp the values to prevent oddities in the future and inaccurate values
					if s.curValue <= s.minValue then s.curValue = s.minValue
					if s.curValue >= s.maxValue then s.curValue = s.maxValue
					
					// stop the scrollbar from leaving the track
					if s.scrollbar.xPos >= s.bounds.xPos + s.bounds.width - s.scrollbar.width then s.scrollbar.xPos = s.bounds.xPos + s.bounds.width - s.scrollbar.width
					if s.scrollbar.xPos <= s.bounds.xPos then s.scrollbar.xPos = s.bounds.xPos
					
					// update the position
					SetSpritePosition(s.scrollbarID, s.scrollbar.xPos, s.bounds.yPos)
					
					// stop dragging if the mouse is released
					if GetRawMouseLeftState() = 0 then s.dragging = 0	
				endif
			endif
		endif
	endif
	
	result = Round(s.curValue)
endfunction result

+ Code Snippet

function UpdateScrollbar(s ref as tScrollBar)
	// only check for updates if the scrollbar is visible
	if s.visible
		if MouseInBounds(s.bounds)
			if GetRawMouseLeftState() = 1 then s.dragging = 1

		endif
		
		// if dragging is true we update the value of the scrollbar
		if s.dragging = 1
			// determine if the mouse is within bounds of the scrollbar track
			if GetPointerX() >= s.bounds.xPos and GetPointerX() <= s.bounds.xPos + s.bounds.width
				
				// update the position of the scrollbar with the mouseX position
				s.scrollbar.xPos = GetPointerX()
				
				// update the value only if the scrollbar x position is less than the width of the scrollbar track (going forward)
				if s.scrollbar.xPos <= s.bounds.xPos + s.bounds.width
					
					// update the current value based on the position of the scrollbar 				
					s.curValue = (s.scrollbar.xPos - s.bounds.xPos)/(s.bounds.width - s.scrollbar.width * 1.0) * s.maxValue
				
					// clamp the values to prevent oddities in the future and inaccurate values
					if s.curValue <= s.minValue then s.curValue = s.minValue
					if s.curValue >= s.maxValue then s.curValue = s.maxValue
					
					// stop the scrollbar from leaving the track
					if s.scrollbar.xPos >= s.bounds.xPos + s.bounds.width - s.scrollbar.width then s.scrollbar.xPos = s.bounds.xPos + s.bounds.width - s.scrollbar.width
					if s.scrollbar.xPos <= s.bounds.xPos then s.scrollbar.xPos = s.bounds.xPos
					
					// update the position
					SetSpritePosition(s.scrollbarID, s.scrollbar.xPos, s.bounds.yPos)
					
					// stop dragging if the mouse is released
					if GetRawMouseLeftState() = 0 then s.dragging = 0	
				endif
			endif
		endif
	endif
	
	result = Round(s.curValue)
endfunction result

The bit I worked out to solve my problem yesterday...

+ Code Snippet

// update the current value based on the position of the scrollbar 				
s.curValue = (s.scrollbar.xPos - s.bounds.xPos)/(s.bounds.width - s.scrollbar.width * 1.0) * s.maxValue

Thanks for the help and the guidance! BatViink thank you for that code snippet it looks very informative!

Slowly compiling code, one byte at a time.
Follow meh blague for more zany thoughts and possibly offensive programming!

Back to top

Profile

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 2nd Feb 2016 03:48

Link

I have a GUI tutorial that might help you in your project.

http://dbcc.zimnox.com/?page=tutorials

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

Sorry your browser is not supported!

AppGameKit Classic Chat / Making my own GUI and need me some help!