NewsForumsCodeLogsGallerySpecsSearch

Highlight image border, make image act like button

Blitz3D Forums/Blitz3D Programming/Highlight image border, make image act like button

Guy Fawkes(Posted 2009) [#1]
Can someone plz show an example of how to add a border to an image, highlight the border to any color as well as make the border flash rainbow, and make it act like a button when the mouse clicks on it, and doesnt click on it, and play a sound when clicked on?

this would be GREATLY appreciated =)

Thanks alot! =)

~DarkShadowWing~


GfK(Posted 2009) [#2]
You're just not trying, are you?

PlaySound is used to play a sound. I know its a deceptive function name but anyway...

For the other stuff read up on:

MouseHit()
MouseX()
MouseY()
Rect()
SetColor()


Guy Fawkes(Posted 2009) [#3]
Im trying. geez. all u people seem to think im not. i have to have a WORKING example in order to learn.. im sorry if it offends u, but its the way i learn..

~DarkShadowWing~


Ross C(Posted 2009) [#4]
I think it's just your going about this the wrong way man. You ask for help in order to accomplish a task. Someone else gives you the code, and you learn. Fair enough. But you've not really learned how to solve the problem to your situation. That's what coding is about :o) You start from the basics, and build up your knowledge so you can apply it to many different circumstances.

For your own benefit, i don't think your learning programming the right way here.

For instance:

You know how to capture a mousehit.
You know how to draw a colored rectangle.
You know how to play a sound.


So, you basically have the knowledge to accomplish the task, but not the problem solving ability to do it. Programming is about combining the knowledge you have and applying it to problems :o)


Guy Fawkes(Posted 2009) [#5]
sigh. i understand that. its just unless i have a similar example, i cant use that technology... =/ its always been this way for me..


Ross C(Posted 2009) [#6]
Just try and connect the dots. As i say, if you know how to do these things individually, then you have a real good starting point. You will no doubt have code that takes a mousehit and performs an action based whether is was hit or not.


Guy Fawkes(Posted 2009) [#7]
i know.. its just i know how to activate if it was hit, but i have no idea how to make an image act like a button.. especially w/ mouse over..


Kryzon(Posted 2009) [#8]
Or even, translate your description of what you want to achieve into code. Example:
"I want the image to highlight when the mouse is over it"
What you need to accomplish this? you need to know if the mouse is on TOP of the image. How do you get the mouse coordinates? MouseX(), Mousey(). Now you need to check if those coordinates are INSIDE the button image, so as to know when highlight it or not. Since the image can be a rectangle...
If the mouse's X is bigger than the rectangle's left side, and the mouse's X is lesser than the rectangle's right side, and the mouse's Y is bigger than the rectangles up side, and the mouse's Y is lower than the rectangle's down side, THEN you KNOW that the mouse is on top of the image, somewhere. So when those conditions are true, you put your image in highlight mode (simply exchanging the handle to a highlighted version should do it. Make sure to change back to normal when the mouse is NOT on top of the image).
Also, when the mouse is on top of the button, if the user holds the left mouse button, then change the image of the button to a pressed version.

And use that "translating ideas into code" method to accomplish the rest of your tasks ("I need to play a sound when the mouse clicks the button...well, the check if the mouse is on top of the button and if the user clicked the mouse etc. etc.").


GfK(Posted 2009) [#9]
Don't think Kryzon could have put it much better. I often read through my code (out loud, translated into plain English) as its much easier to spot problems that way. I also make drawings/diagrams on paper to figure out complex equations.

Programming is all about logic. If you don't have the 'logic gene', you're stuffed from the start.


Guy Fawkes(Posted 2009) [#10]
ok. here's what i have so far:



The button:



My only question is how do u get the rectangles left, right sides, and top & bottom?


_PJ_(Posted 2009) [#11]
You should know where you are drawing the button...

In your code, the location:
imagex, imagey


By default, images are drawn from the top-left corner, though you can change this if required with either HandleImage or MidHandle.

you know the width and height of your button:
imagew = ImageWidth(buttonimg)
imageh = ImageHeight(buttonimg)

So, all you need is to check the mouse position ( MouseX() and MouseY() ) when the left-mouse-button is clicked. ( Mousedown(True) )

	;Default: Button not highlighted
	HighlightOn=False
	;see if the cursor is within the on-screen button's area
	If	(	((MouseX()) <= (imagex + imagew))
		And	(MouseX())>=(imagex))
		And	((MouseY()) <= (imagey+imageh))
		And	(MouseY())>=(imagey))
		)	
		; MouseOver - Draw Highlight rectangle around Button (Thickness= 10 )
		HighlightOn=True
		For iterhighlight =1 To 10
			Rect imagex-iterhighlight,imagey-iterhighlight,imagew+(2*iterhighlight),imageh+(2*iterhighlight)
		Next
	Else
		;Reset the Highlight, just in case.
		HighlightOn=False
	End If
		
	;See if the mousebutton is clicked
	If (MouseDown(True)And(HighlightOn))		
		;Do WhateverHappens when Button is clicked
		DoButtonClick()
	EndIf



Guy Fawkes(Posted 2009) [#12]
thanks malice. 1 bug though. it doesnt turn off highlights if the mouse isnt on it, even though highlighton = false..

code:



~DarkShadowWing~


_PJ_(Posted 2009) [#13]
Why not use the code as I posted it?
Anyway, I optimised it a little.

This should work.
Graphics3D 800, 600, 32, 2

Global thickness# = 10.0

Global buttonimg =LoadImage("button.png")

Global imagex, imagey
Global imagew = ImageWidth(buttonimg)
Global imageh = ImageHeight(buttonimg)

imagex = GraphicsWidth()/2-imagew/2
imagey = GraphicsHeight()/2-imageh/2

While Not KeyDown(1)
	highlightimage(68, 207, 0)
	DrawImage buttonimg, imagex, imagey
	Text 10, 10, "highlight: "+HighlightOn
	
	CheckButtonClick()
	
	UpdateWorld
	RenderWorld

	Flip
Wend

Function highlightimage(r, g, b)
	;see if the cursor is within the on-screen button's area
	HighlightOn=(	((MouseX()) <= (imagex + imagew)) And (MouseX())>=(imagex)) And ((MouseY()) <= (imagey+imageh)) And (MouseY())>=(imagey)
		; MouseOver - Draw Highlight rectangle around Button (Thickness= 10 )
	If (HighlightOn)
		For iterhighlight =1 To thickness#
			Color r,g,b
			Rect imagex-iterhighlight,imagey-iterhighlight,imagew+(2*iterhighlight),imageh+(2*iterhighlight),0
		Next
	End If
End Function

Function CheckButtonClick()
	;See if the mousebutton is clicked
	If (MouseDown(True) And (HighlightOn))		
		;Do WhateverHappens when Button is clicked
		 DoButtonClick()
	EndIf
End Function

Function DoButtonClick()
	;not implemented quite yet
End Function