implement a transparent-inverted button ?

General
1

Hi folks,

I would like to implement a transparent button, something you put above a picture (or a map) , and when you clic on it it fires an action event.
that is quite easy based on a canvas object.
but
I would like to have some feedback, that is invert the background of the button when the user clics on it, and remove it when the user releases the mouse.

How can I get access to the picture that would be under that button, let’s say I use a canvas as the superclass for this button.
then is there any simple method to invert that picture that would already exists ?

thank for any hints on this.

2

No simple method that I am aware of, but it’s not difficult. Create two pictures one normal and one inverted. Call the inverted one on mouse down and call the normal one on mouse up. Actually, you want to do this all in the paint event of the campus. Have the mouse down set a Boolean = true and the mouseup back to false. Then in the paint event
If myBool Then
Draw the inverted pic
Else
Draw the normal pic
End if

Trigger this with
MyBtnCanvas.invalidate in both mouse events

3

[quote=337213:@Jean-Yves Pochez]Hi folks,

I would like to implement a transparent button, something you put above a picture (or a map) , and when you clic on it it fires an action event.
that is quite easy based on a canvas object.
but
I would like to have some feedback, that is invert the background of the button when the user clics on it, and remove it when the user releases the mouse.

How can I get access to the picture that would be under that button, let’s say I use a canvas as the superclass for this button.
then is there any simple method to invert that picture that would already exists ?

thank for any hints on this.[/quote]

Have you looked at drawinto ?
Basically draw the entire window + all controls into a picture then clip out the piece you need
Invert that and use it as the canvas’ picture

4

thanks to both of you.
Norman, the clip method returns a graphics, how do I send it to a picture then ?

5

found it - had to use g.drawpicture instead of g.clip
as I want to crop the picture and not clip it.

6

small gift to the community :

#tag Class
Protected Class VNSTransparentButton
Inherits Canvas
	#tag Event
		Function MouseDown(X As Integer, Y As Integer) As Boolean
		  'invert background
		  
		  Dim rc As RectControl = Me.Parent
		  If rc<>Nil Then
		    ' gets the whole picture of the parent
		    Dim p As New Picture( rc.Width, rc.Height, 32)
		    rc.DrawInto( p.Graphics, 0, 0)
		    
		    ' clip the picture to the button
		    backPicture = New Picture( Me.Width, Me.Height, 32)
		    backPicture.Graphics.DrawPicture( p, -me.Left, -me.Top, Me.Width+me.Left, Me.Height+me.Top)
		    
		    ' invert the picture of the button
		    Const MaxMapOffset = 255
		    Dim map(MaxMapOffset) As Integer
		    For i As Integer = 0 To MaxMapOffset
		      map(i) = MaxMapOffset - i
		    Next
		    backPicture.RGBSurface.Transform(map)
		    
		    Me.Refresh
		    WaitTicks(10)
		    
		  End If
		  
		  Return True
		  
		End Function
	#tag EndEvent

	#tag Event
		Sub MouseEnter()
		  Me.MouseCursor = System.Cursors.FingerPointer
		  
		End Sub
	#tag EndEvent

	#tag Event
		Sub MouseExit()
		  Me.MouseCursor = System.Cursors.StandardPointer
		  
		End Sub
	#tag EndEvent

	#tag Event
		Sub MouseUp(X As Integer, Y As Integer)
		  ' fire action
		  backPicture = Nil
		  Me.Refresh
		  
		  RaiseEvent Action
		  
		End Sub
	#tag EndEvent

	#tag Event
		Sub Paint(g As Graphics, areas() As REALbasic.Rect)
		  if backPicture<>nil then
		    Me.Backdrop = backPicture
		  Else
		    me.Backdrop = Nil
		  End If
		  
		End Sub
	#tag EndEvent


	#tag Hook, Flags = &h0, Description = 627574746F6E20686173206265656E20636C69636B65642C20616E64206D6F7573652072656C656173656420696E736964652074686520627574746F6E
		Event Action()
	#tag EndHook


	#tag Property, Flags = &h0
		backPicture As Picture
	#tag EndProperty

	
End Class
#tag EndClass

EDIT : NJP - removed long list of view behaviour info that’s really not required in the post