Scrollbars/Code Snippet (SoCoder)

Created 04 March 2007 | Last Edited 04 March 2007)

Scrollbars by mike_g | No Votes

For general use

Heres a pair of functions I posted on dev-crunch. But since its gone i figured i may as well put em here. Once function does a vertical scrollbar, the other a horizontal one. They work pretty much perfectly as long as you dont use more than one of each type at a time. Oh and they are not exactly very nice to look at either.

;-------------------------------------------------------------------------------------------------------
Graphics 1024, 768
SetBuffer BackBuffer()
Global scroll_h#, scroll_v#, grab_bar
ClsColor 30,20, 10
;-----------------------------------------------------------------------------------------------------
While quit = 0
	Cls 	
	BACKGROUND()	
	Color 160, 160, 110
	SCROLLBAR_V(200,0, 16, 200, 1200)
	SCROLLBAR_H(0, 200, 200, 16, 800)
	CURSOR()
	Flip
	If KeyHit(1) Then quit = 1
Wend 
End 
;-----------------------------------------------------------------------------------------------------
Function CURSOR()
	Color 255, 255, 255
	Rect MouseX(), MouseY(), 3, 3
End Function 
;-----------------------------------------------------------------------------------------------------
Function BACKGROUND()
	Viewport 0, 0, 200, 200
	For i = 0 To 800
		Color R, G, B
		Line 0+i-scroll_h#, 0-scroll_v#, 0+i-scroll_h# , 1200-scroll_v#
		If G < 200 And set1 = 0
			If R > 0 Then R = R - 1	
			G = G + 1				 
		Else If B < 200 And set2 = 0
			If G > 1 Then G = G - 1
			B = B + 1
			set1 = 1
		Else If R < 200 			
			If B > 1 Then B = B - 1
			R = R + 1
			set2 = 1
		Else 
			set1 = 0
			set2 = 0
		EndIf  
	Next 
		Color 0, 0, 0
	For i = 0 To 1600 Step 10
		Color D, D, D
		Text 2-scroll_h, i-scroll_v,"SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING SCROLLING"
		D = D + 10
	Next 
	Viewport 0, 0, 1024, 768
End Function	
;-----------------------------------------------------------------------------------------------------
Function SCROLLBAR_V(x_pos, y_pos, bar_w, bar_h, list_l#)

slider_l# = bar_h - (2 * bar_w)
bar_percent# = 100 / (list_l# / slider_l#)
slider_div# =  slider_l# / 100
bar_height# = bar_percent# * slider_div# 
slide_spd# = (scroll_v# * ((slider_l# - bar_height#)/(list_l# -bar_h))) 

If MouseDown(1) And grab_bar = 0	 		
	If MouseX() > x_pos  And MouseX() < x_pos + bar_w
		If MouseY() > y_pos And MouseY() < y_pos + bar_w
			If scroll_v# > 0 Then scroll_v# = scroll_v# - 2
 		Else If MouseY() > y_pos +(bar_h - bar_w) And MouseY() < y_pos + bar_h
			If scroll_v# < list_l# - bar_h Then scroll_v# = scroll_v# + 2
		Else If MouseY() > y_pos + slide_spd# +bar_w And MouseY() < y_pos+slide_spd#+bar_w+bar_height# 
			 grab_bar = 1
		EndIf 
	EndIf 	 
EndIf 

If grab_bar = 1	
	old_y = MouseY()	
	Delay 20
	diff# = MouseY() - old_y  
	drag_slider# = diff# * (list_l# / slider_l#) 
	If scroll_v# >= 0 And scroll_v# < list_l#
		If scroll_v# + drag_slider# < 0
			scroll_v# = 0
		Else If scroll_v# + drag_slider# > list_l# -bar_h
			scroll_v# = list_l# - bar_h
		Else	
		 	scroll_v# = scroll_v# + drag_slider# 	
		EndIf 
	EndIf
EndIf 

If Not MouseDown(1) Then grab_bar = 0

	Color 0, 0, 0
	Rect x_pos, y_pos, bar_w, bar_h
	For i = 0 To 1		
		Color 20, 20, 20
		Rect x_pos, y_pos+(i * (slider_l# +bar_w)), bar_w, bar_w		
		Color 80, 80, 80
		Rect x_pos+1, y_pos+(i * (slider_l# +bar_w)), bar_w-1, bar_w-1
		Color 50, 50, 50
		Rect x_pos+1, y_pos+1+(i * (slider_l# +bar_w)), bar_w-2, bar_w-2		
	Next 

	For z = 0 To (bar_w / 2) - (bar_w / 4)
		Color 140, 40, 40
		Rect x_pos+(bar_w/2) - 1 -z, y_pos +(bar_w / 4)-1 +(z*2) , 2 +(z*2), 2	 	
		Rect x_pos+(bar_w/2) - 1 -z, y_pos +bar_h -(bar_w / 4)-1 -(z*2), 2 +(z*2), 2
	Next 

	Color 50, 50, 50
	Rect x_pos+1, y_pos + bar_w +slide_spd#+1, bar_w-2, bar_height#-2
	Color 120, 120, 120
	Rect x_pos+2, y_pos + bar_w +slide_spd#+1, bar_w-3, bar_height#-3 
	Color 80, 80, 80
	Rect x_pos+2, y_pos+2 + bar_w +slide_spd#, bar_w-4, bar_height#-4 
	Color 140, 40, 40
	Rect x_pos+5, y_pos+5 + bar_w +slide_spd#, bar_w-10, bar_height#-10

End Function 
;-----------------------------------------------------------------------------------------------------
Function SCROLLBAR_H(x_pos, y_pos, bar_w, bar_h, list_l#)

slider_l# = bar_w - (2 * bar_h)
bar_percent# = 100 / (list_l# / slider_l#)
slider_div# =  slider_l# / 100
bar_height# = bar_percent# * slider_div# 
slide_spd# = (scroll_h# * ((slider_l# - bar_height#)/(list_l# -bar_w)))


If MouseDown(1) And grab_bar = 0
		If MouseY() > y_pos  And MouseY() < y_pos + bar_h
			If MouseX() > x_pos And MouseX() < x_pos + bar_h
				If scroll_h# > 0 Then scroll_h# = scroll_h# - 2
 			Else If MouseX() > x_pos +(bar_w - bar_h) And MouseX() < x_pos + bar_w
				If scroll_h# < list_l# - bar_w Then scroll_h# = scroll_h# + 2
			Else If MouseX() > x_pos + slide_spd# +bar_h And MouseX() < x_pos+slide_spd#+bar_h+bar_height# 
			 	grab_bar = 2
			EndIf 
		EndIf 
EndIf 		

If grab_bar = 2
	old_x = MouseX()	
	Delay 20
	diff# = MouseX() - old_x  
	drag_slider# = diff# * (list_l# / slider_l#) 
	If scroll_h# >= 0 And scroll_h# < list_l# 
		If scroll_h# + drag_slider#  < 0
			scroll_h# = 0
		Else If scroll_h# + drag_slider#  > list_l# -bar_w 
			scroll_h# = list_l# - bar_w
		Else	
		 	scroll_h# = scroll_h# + drag_slider#   	
		EndIf 
	EndIf 
EndIf 	

If Not MouseDown(1) Then grab_bar = 0
				
Color 60, 60, 50
Rect x_pos, y_pos, bar_w, bar_h
Color 160, 160, 110
Rect x_pos, y_pos, bar_h, bar_h
Rect x_pos +(slider_l# +bar_h), y_pos , bar_h, bar_h
Color 110, 160, 160
Rect x_pos + bar_h +slide_spd#, y_pos , bar_height#, bar_h 	

End Function

-->

Latest Comments

Posted : Sunday, 04 March 2007, 13:08

shroom_monk

Pretty good, except that when you try to drag one of the bars, it doesn't move at the same speed as the mouse.

Posted : Sunday, 04 March 2007, 13:30

garand

yes

Posted : Sunday, 04 March 2007, 16:24

steve_ancell

I've been playing around with this sort of stuff for a few days. You will need to provide your own image for the mouse pointer.

The get_slider_value(id$) function returns a number between 0 & 100, which represent a percentage of the slider. To get the names of the bars, look at the function create_slider_bars().

Global graphics_w=640,graphics_h=480
Graphics graphics_w,graphics_h

Type slider_bar
	Field x#,y#
	Field w#,h#
	Field window_id
	Field id$
	Field bar_type
	Field potential#
	Field slider_x#
	Field slider_y#
End Type

Type button
	Field x,y
	Field w,h
	Field func$
	Field frame
End Type

Type cell
	Field x,y
	Field w,h
	Field frame
	Field frames
	Field frame_sequence
	Field frame_time_begin
	Field frame_time_end
	Field frame_hold
	Field solid
End Type

Type brush
	Field x,y
	Field w,h
	Field frame
	Field frames
	Field frame_sequence
	Field frame_time_begin
	Field frame_time_end
	Field frame_hold
	Field solid
End Type

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
Global pointer=LoadImage("pointer.bmp")
MaskImage pointer,255,0,255
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
Dim map.cell(0,0)
Global map_w=0,map_h=0
Global map_win_x=0,map_win_y=0
Global map_win_w=0,map_win_h=0
Global map_cam_x=0,map_cam_y=0

Dim tile(0,0)
Global tile_win_x=0,tile_win_y=0
Global tile_win_w=0,tile_win_h=0
Global tile_cam_x=0,tile_cam_y=0
Global tile_w=32,tile_h=32
Global tile_graphics=CreateImage(tile_w,tile_h,1)

Global window=1

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
SetBuffer BackBuffer()
editor_settings()
default_tile_settings()
default_map_settings()
create_slider_bars()
Repeat
	Cls
	If window=1 Then map_mode()
	Color 255,0,0
	draw_pointer()
	Flip
Until KeyHit(1)
End
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;



Function editor_settings()
	ClsColor 255,255,255
End Function

Function map_mode()
	draw_map()
	draw_slider_bars()
End Function

Function draw_pointer()
	DrawImage pointer,MouseX(),MouseY()
End Function


Function default_tile_settings()
	tile_w=32
	tile_h=32
	tile_win_x=0
	tile_win_y=0
	tile_win_w=tile_w
	tile_win_h=tile_h
	tile_cam_x=0
	tile_cam_y=0
	tile_graphics=CreateImage(tile_w,tile_h,1)
End Function

Function default_map_settings()
	map_w=graphics_w/tile_w
	map_h=graphics_h/tile_h
	map_win_x=0
	map_win_y=0
	map_win_w=graphics_w-tile_w
	map_win_h=graphics_h-tile_h
	map_cam_x=0
	map_cam_y=0
	Dim map.cell(map_w,map_h)
	count=0
	For y=0 To map_h-1
		For x=0 To map_w-1
			map.cell(x,y)=New cell
			map(x,y)\frame=count
			count=count+1
		Next
	Next
End Function

Function draw_map()
	xstart=map_win_x
	ystart=map_win_y
	y=ystart
	For row=map_cam_y To map_h-1
		x=xstart
		For column=map_cam_x To map_w-1
			Color 0,0,0
			Rect(x,y,tile_w,tile_h,0)
			Text(x,y,map(column,row)\frame)
			x=x+tile_w
			If x=>map_win_x+map_win_w Then Exit
		Next
		y=y+tile_h
		If y=>map_win_y+map_win_h Then Exit
	Next
	Color 255,0,0
	Rect map_win_x,map_win_y,map_win_w,map_win_h,0
End Function

Function create_slider_bars()
	s.slider_bar=New slider_bar
	s\id$="map_horizontal"
	s\bar_type=1
	s\window_id=1
	s\w=map_win_w
	s\h=16
	s\x=map_win_x
	s\y=(map_win_y+map_win_h)
	s\slider_x=s\x
	s\slider_y=s\y
	;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
	s.slider_bar=New slider_bar
	s\id$="map_vertical"
	s\bar_type=2
	s\window_id=1
	s\w=16
	s\h=map_win_h
	s\x=(map_win_x+map_win_w)
	s\y=map_win_y
	s\slider_x=s\x
	s\slider_y=s\y
	;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
End Function

Function draw_slider_bars()
	For s.slider_bar=Each slider_bar
		If s\window_id=window
			Color(0,0,255)
			Rect(s\x,s\y,s\w,s\h,1)
			If s\bar_type=1
				Color 0,255,0
				Rect(s\slider_x,s\slider_y,4,s\h,1)
			EndIf
			If s\bar_type=2
				Color 0,255,0
				Rect(s\slider_x,s\slider_y,s\w,4,1)
			EndIf
		EndIf
	Next
	move_sliders()
End Function

Function move_sliders()
	For s.slider_bar=Each slider_bar
		If s\bar_type=1
			If MouseDown(1)
				If MouseX()=>s\x And MouseX()=<s\x+s\w
					If MouseY()=>s\y And MouseY()=<s\y+s\h
						s\slider_x=MouseX()
						s\potential#=(s\x+s\slider_x)/(s\x+s\w)*100
					EndIf
				EndIf
			EndIf
		EndIf
		If s\bar_type=2
			If MouseDown(1)
				If MouseX()=>s\x And MouseX()=<s\x+s\w
					If MouseY()=>s\y And MouseY()=<s\y+s\h
						s\slider_y=MouseY()
						s\potential#=(s\y+s\slider_y)/(s\y+s\h)*100
					EndIf
				EndIf
			EndIf
		EndIf
	Next
End Function

Function get_slider_value(id$)
	For s.slider_bar=Each slider_bar
		If s\id$=id$
			Return s\potential#
		EndIf
	Next
End Function

Posted : Sunday, 04 March 2007, 16:48

mike_g

Hmm... When I move the sliders nothing seems to scroll.

Posted : Sunday, 04 March 2007, 17:07

steve_ancell

That's because it's not been done yet. I will keep you posted.

If you include the line

text 8,8,get_slider_value("map_horizontal")+" : "+get_slider_value("map_vertical")

--> after the color statement in the main loop, it will show the percentages the sliders have moved across the bars.

Posted : Sunday, 04 March 2007, 17:08

mike_g

Cool, well what you got so far looks promising

Posted : Sunday, 04 March 2007, 17:12

steve_ancell

Cheerz Bro... just incase you were wondering, it's going to be a tilemap editor that can manage animated backgrounds. And yes, I will post it on here as FreeWare.

Posted : Monday, 05 March 2007, 19:46

power mousey

ahhhhh steve

that looks and sounds really good.

As the power mouse, I can't wait to try it out.

And hey, animated backgrounds. Sounds really cool and from a sixties throwback..really groovy man

now, I gotta go back to work.
So, hey.....

Now its time to say goodbye
to all my socoder friends and others too..

So--> so what
co--> rather be a Ceo instead

der..and thats alllllllll.

cheers,