Beginner Object Selection Problem

Hi,

i try to figure out how to make a correct Button Selection. If you hold down the Mousekey outside the Range of the Button and move the Mouse over the button it still get´s selected ( it shouldn´t ) . I can´t figure out yet how to set up a condition that says " If you click outside of a Range from a Object , it can´t be selected or the highlight Method gets not executed " . Wrong Direction ?

Thx,

D

Rem

	OOP Test Rectangle Select

End Rem

SuperStrict

Graphics 800,600
 
Global x:Int
Global y:Int

Type button
	Field x_pos : Int
	Field y_pos : Int
	Field width :Int,height :Int
	Field color_r :Int,color_g :Int ,color_b :Int
	Field name : Int
	
	Method drawbutton()
		SetColor (color_r,color_g,color_b)
		DrawRect (x_pos,y_pos,width,height)
	End Method

	Method highlight()
		SetColor (255,255,255)
		DrawRect (x_pos-5,y_pos-5,110,110)
		DrawText "Button : " + name ,x_pos,y_pos+120	
	End Method
	
	Method MouseCollision()
		If x>= X_pos And y>= Y_pos And x <= X_pos + width And y <= Y_pos + height And MouseDown(1)
			highlight()
		End If		
	End Method

End Type	
' create instances of the Class " button "

Local one:button = New button
Local two:button = New button
Local three:button = New button

one.x_pos = 20
one.y_pos = 20
one.width = 100
one.height = 100
one.color_r = 255
one.color_g = 0
one.color_b = 255
one.name = 1

two.x_pos = 200
two.y_pos = 20
two.width = 100
two.height = 100
two.color_r = 0
two.color_g = 0
two.color_b = 255
two.name = 2

three.x_pos = 400
three.y_pos = 20
three.width = 100
three.height = 100
three.color_r = 0
three.color_g = 255
three.color_b = 0
three.name = 3

While Not KeyHit(KEY_ESCAPE)
Cls
	x=MouseX()
 	y=MouseY()
	
	one.mouseCollision()
	one.drawbutton()
	two.mouseCollision()
	two.drawbutton()
	three.mouseCollision()
	three.drawbutton()
	
Flip
Wend

I am doing something like that in a file requester I am working on. And it's not as easy as it seems. first create a mouse handling function/type. You need to keep track of the mouse button previous status. Create an inuse/free state based on that. When in use you are not allowed to select. and it locks what ever object/button selected in a selected state.
I don't have time to make an example for you right now. I will post a usable code example with in the next 24hrs if you need it. Not shure how soon I will have time though.

With the least modification of your code you could do something like this:

Rem

	OOP Test Rectangle Select

End Rem

SuperStrict

Graphics 800,600
 
Global x:Int
Global y:Int

Type button
	Field x_pos : Int
	Field y_pos : Int
	Field width :Int,height :Int
	Field color_r :Int,color_g :Int ,color_b :Int
	Field name : Int
	Field pbMouseDown:Int = False
	Field pbMouseDownOutside:Int = False
	
	Method drawbutton()
		SetColor (color_r,color_g,color_b)
		DrawRect (x_pos,y_pos,width,height)
	End Method

	Method highlight()
		SetColor (255,255,255)
		DrawRect (x_pos-5,y_pos-5,110,110)
		DrawText "Button : " + name ,x_pos,y_pos+120	
	End Method
	
	Method MouseCollision()
		If x>= X_pos And y>= Y_pos And x <= X_pos + width And y <= Y_pos + height Then		'mouse rollover
			If Not pbMouseDownOutside & Not pbMouseDown & MouseDown(1) Then 		'mouseDown() event
				pbMouseDown = True
			ElseIf pbMouseDown & MouseDown(1) Then		'mouseStillDown()
				highlight()
			ElseIf pbMouseDown & Not MouseDown(1) Then 	'mouseUp() event
				pbMouseDown = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
			End If
		Else
			If MouseDown(1) & Not pbMouseDownOutside Then	'mouseDownOutside()
				pbMouseDownOutside = True
			ElseIf pbMouseDown & Not MouseDown(1) Then '	mouseUpOutside()
				pbMouseDown = False
				pbMouseDownOutside = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
			End If
		End If	
	End Method

End Type	
' create instances of the Class " button "

Local one:button = New button
Local two:button = New button
Local three:button = New button

one.x_pos = 20
one.y_pos = 20
one.width = 100
one.height = 100
one.color_r = 255
one.color_g = 0
one.color_b = 255
one.name = 1

two.x_pos = 200
two.y_pos = 20
two.width = 100
two.height = 100
two.color_r = 0
two.color_g = 0
two.color_b = 255
two.name = 2

three.x_pos = 400
three.y_pos = 20
three.width = 100
three.height = 100
three.color_r = 0
three.color_g = 255
three.color_b = 0
three.name = 3

While Not KeyHit(KEY_ESCAPE)
Cls
	x=MouseX()
 	y=MouseY()
	
	one.mouseCollision()
	one.drawbutton()
	two.mouseCollision()
	two.drawbutton()
	three.mouseCollision()
	three.drawbutton()
	
Flip
Wend

Thx for your replies and code ! I´m analyzing it ..... The thing with the code obove is : When i tri this it works when i press the button outside of the range , great !
My second Question is when i select the button and then go outside the button should be still selected . Something like " if you have selected the button ( mousekey down) and go outside while holding the mousekey it is still selected " . I´ve tried several things......not realy happening ..

Any Idea ?

Most GUI's will let you press the mouse while over a button, which will show the button selected, and then let you drag the mouse with the button held down to outside of the button, at which point the button shows as not selected, but then allows that so long as you are still holding down the mouse when you `re-enter` the button it will show as selected again, and only if the mouse is let go while inside of the button is it considered a hit.

You can of couse make it so that the image of the button stays `down` until you let go of the mouse.

Something like this, procedurally, not tested:

ButtonLeft=50
ButtonRight=100
ButtonTop=50
ButtonBottom=100
WasDown=False
ButtonPressing=False
ButtonClicked=True
Repeat
   WasDown=Down
   Down=MouseDown(1)
   If WasDown=False
      If Down=True
         'User just pressed the mouse
         If MouseX()>=ButtonLeft And MouseY()>=ButtonTop And MouseX()<=ButtonRight And MouseX()<=ButtonBottom
            'User just pressed the mouse inside the button
            ButtonPressing=True
            'Draw the button in its pressed state
         Else
            'User pressed the mouse but outside the button
         EndIf
      Else      
         'User is still not pressing the mouse - don't do anything      
      Endif
   Else
      If Down=True
         'User is still pressing the mouse
         'This is where you deal with the mouse being held down while
         'the mouse might be moving into or out of the button area, after
         'the mouse was initially clicked and before it is released
         'If you do not want the button to return temporarily to a
         'non-pressed state when the user drags the mouse outside
         'the button while holding the mouse down, do not do anything in
         'this section, otherwise...
         If ButtonPressing=True
            If MouseX()>=ButtonLeft And MouseY()>=ButtonTop And MouseX()<=ButtonRight And MouseY()<=ButtonBottom
               'Draw the button as pressed
            Else
               'Draw the button as not pressed
            EndIf
         EndIf
      Else
         'User just let go of the mouse
         'Draw the button in its non-pressed state
         ButtonPressing=False
         If MouseX()>=ButtonLeft And MouseY()>=ButtonTop And MouseX()<=ButtonRight And MouseY()<=ButtonBottom
            ButtonClicked=True   'Success!
         EndIf
      Endif
   EndIf
Until KeyHit(KEY_ESCAPE) Or ButtonClicked=True

Wow, Thx for the Replies ! Great Forum , verry humble and instructive ! In lots of other forums there were guys arround , showing beginners her mistakes in a verry arrogant way ( nasty coments ).
This here is really cool , good kinda vibe ! Thx. :-)

For the Programm , i just extend the Code , added a Type ( state ) and another Condition to the Mouse Collision Method . It works ! Some mistakes ?
I will try Imaginarys Code example too.

Rem

	OOP Test Rectangle Select

End Rem

SuperStrict

Graphics 800,600
 
Global x:Int
Global y:Int

Type button
	Field x_pos : Int
	Field y_pos : Int
	Field width :Int,height :Int
	Field color_r :Int,color_g :Int ,color_b :Int
	Field name : Int
	Field pbMouseDown:Int = False
	Field pbMouseDownOutside:Int = False
	Field pbMouseDownInside :Int = False	' Mouse Pressed Inside
	
	Method drawbutton()
		SetColor (color_r,color_g,color_b)
		DrawRect (x_pos,y_pos,width,height)
	End Method

	Method highlight()
		SetColor (255,255,255)
		DrawRect (x_pos-5,y_pos-5,110,110)
		DrawText "Button : " + name ,x_pos,y_pos+120	
	End Method
	
	Method MouseCollision()
		If x>= X_pos And y>= Y_pos And x <= X_pos + width And y <= Y_pos + height Then		'mouse rollover
			If Not pbMouseDownOutside & Not pbMouseDown & MouseDown(1) Then 		'mouseDown() event
				pbMouseDown = True
			ElseIf pbMouseDown & MouseDown(1) Then		'mouseStillDown()
				pbMouseDownInside = True
			ElseIf pbMouseDown & Not MouseDown(1) Then 	'mouseUp() event
				pbMouseDown = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
			End If
		Else
			If MouseDown(1) & Not pbMouseDownOutside Then	'mouseDownOutside()
				pbMouseDownOutside = True
			ElseIf pbMouseDown & Not MouseDown(1) Then '	mouseUpOutside()
				pbMouseDown = False
				pbMouseDownOutside = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
                                pbMouseDownInside = False
			End If
		End If	
                        ' This is the Extension for keepin it pressed outside of the Range
			If pbMouseDownInside = True And pbMouseDown = True
				highlight()
			End If	
	End Method

End Type	
' create instances of the Class " button "

Local one:button = New button
Local two:button = New button
Local three:button = New button

one.x_pos = 20
one.y_pos = 20
one.width = 100
one.height = 100
one.color_r = 255
one.color_g = 0
one.color_b = 255
one.name = 1

two.x_pos = 200
two.y_pos = 20
two.width = 100
two.height = 100
two.color_r = 0
two.color_g = 0
two.color_b = 255
two.name = 2

three.x_pos = 400
three.y_pos = 20
three.width = 100
three.height = 100
three.color_r = 0
three.color_g = 255
three.color_b = 0
three.name = 3

While Not KeyHit(KEY_ESCAPE)
Cls
	x=MouseX()
 	y=MouseY()
	
	one.mouseCollision()
	one.drawbutton()
	two.mouseCollision()
	two.drawbutton()
	three.mouseCollision()
	three.drawbutton()
	
Flip
Wend

There is one Question left . If you can see , the mainloop is quit big . If i want to draw more Objects or " Instances " like in a bigger Interface with over 20 buttons i have to add more lines to the loop and instance Variables. Every Button has some Parameter in common except the Color and the Position.

Is there a more handy way to have less lines of code ?
Here the Example :

Rem

	OOP Test Rectangle Select

End Rem

SuperStrict

Graphics 800,600
 
Global x:Int
Global y:Int

	
	
Type button
	Field x_pos : Int
	Field y_pos : Int
	Field width :Int,height :Int
	Field color_r :Int,color_g :Int ,color_b :Int
	Field name : Int
	Field frames :Int
	Field minVal :Int , maxVal :Int 
	Field pbMouseDown:Int = False
	Field pbMouseDownOutside:Int = False
	Field pbMouseDownInside :Int = False	' Mouse Pressed Inside
	
	
	Method drawbutton()
		SetColor (color_r,color_g,color_b)
		DrawRect (x_pos,y_pos,width,height)
	End Method

	Method highlight()
		SetColor (255,255,255)
		DrawRect (x_pos-5,y_pos-5,110,110)
		DrawText "Button+ Frames : " + name + " " + frames ,x_pos,y_pos+120	
	End Method
	
	Method MouseCollision()
		If x>= X_pos And y>= Y_pos And x <= X_pos + width And y <= Y_pos + height Then		'mouse rollover
			If Not pbMouseDownOutside & Not pbMouseDown & MouseDown(1) Then 		'mouseDown() event
				pbMouseDown = True
			ElseIf pbMouseDown & MouseDown(1) Then		'mouseStillDown()
				pbMouseDownInside = True
			ElseIf pbMouseDown & Not MouseDown(1) Then 	'mouseUp() event
				pbMouseDown = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
			End If
		Else
			If MouseDown(1) & Not pbMouseDownOutside Then	'mouseDownOutside()
				pbMouseDownOutside = True
			ElseIf pbMouseDown & Not MouseDown(1) Then '	mouseUpOutside()
				pbMouseDown = False
				pbMouseDownOutside = False
			ElseIf pbMouseDownOutside & Not MouseDown(1) Then 
				pbMouseDownOutside = False
				pbMouseDownInside = False
			End If
		End If	
			If pbMouseDownInside = True And pbMouseDown = True   ' This is the Extension for keepin it pressed outside of the Range
				highlight()
			End If	
	End Method

End Type	

' **********************************************   Subklassen   *****************************************


' create instances of the Class " button "

Local one:button = New button
Local two:button = New button
Local three:button = New button
Local four:button = New button
Local five:button = New button
Local six:button = New button

' Quit big too.............

one.x_pos = 20
one.y_pos = 20
one.width = 100
one.height = 100
one.color_r = 255
one.color_g = 0
one.color_b = 255
one.name = 1
one.frames = 3

two.x_pos = 200
two.y_pos = 20
two.width = 100
two.height = 100
two.color_r = 0
two.color_g = 0
two.color_b = 255
two.name = 2
two.frames = 3

three.x_pos = 400
three.y_pos = 20
three.width = 100
three.height = 100
three.color_r = 0
three.color_g = 255
three.color_b = 0
three.name = 3
three.frames = 3

four.x_pos = 20
four.y_pos = 200
four.width = 100
four.height = 100
four.color_r = 100
four.color_g = 100
four.color_b = 100
four.name = 4
four.frames = 1

five.x_pos = 200
five.y_pos = 200
five.width = 100
five.height = 100
five.color_r = 250
five.color_g = 80
five.color_b = 250
five.name = 5
five.frames = 1

six.x_pos = 400
six.y_pos = 200
six.width = 100
six.height = 100
six.color_r = 100
six.color_g = 250
six.color_b = 60
six.name = 6
six.frames = 1

While Not KeyHit(KEY_ESCAPE)
Cls
	x=MouseX()
 	y=MouseY()
	
	' This will be bigger if i add more Buttons .....
	one.mouseCollision()
	one.drawbutton()
	two.mouseCollision()
	two.drawbutton()
	three.mouseCollision()
	three.drawbutton()
	four.mouseCollision()
	four.drawbutton()
	five.mouseCollision()
	five.drawbutton()
	six.mouseCollision()
	six.drawbutton()

Flip
Wend

superstrict
seedrnd (millisecs())

type Ttest
    global list:Tlist = new Tlist
    
    field blub:int
    method new()
        list.addlast(self)
    end method

    method show()
        print blub
    end method
end type

for local i:int = 1 to 20
    local test:ttest = new ttest
    test.blub = rand(1,100)
next

for local s:ttest = eachin TTest.list
    s.show()
next

Adding a list will solve this, cause you don'T need the variable to adress the type instance- as long as it is stored in some place you can always adress it.