RollOverGadget

Guimauve · Post by **Guimauve** » Sat Feb 04, 2012 4:01 pm

Hello everyone,

This is a reworked gadget created by falsam on the French forum.

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; CODE GÉNÉRÉ AUTOMATIQUEMENT, NE PAS MODIFIER À
; MOINS D'AVOIR UNE RAISON TRÈS TRÈS VALABLE !!!
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Code généré par : Dev-Type V3.126.612
; Nom du projet : RollOverButtonGadget
; Nom du fichier : RollOverButtonGadget.pb
; Version du fichier : 1.0.0
; Programmation : OK
; Programmé par : Falsam
; Modifié par : Guimauve
; Date : 13-03-2011
; Mise à jour : 04-02-2012
; Codé pour PureBasic V4.61
; Plateforme : Windows, Linux, MacOS X
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Notes 
;
; Drawback, this gadget don't have a GadgetData
; anymore because the it's used to store 
; information related to the Gadget.
;
; A little Hint, Image fot button can be create
; freely on http://cooltext.com/
;
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Cet instruction est nécessaire pour éviter une fuite mémoire. 
; Dans le cas d'une utilisation dans une fenètre de requète par 
; exemple. Pour la fenêtre principale c'est facultatif ou encore 
; pour les puristes.
; 
; This instruction is necessary to avoid a memory leak. In the 
; case of use in a query window for example. For the main window 
; is optional, or for the purists.
; 
; FreeRollOverButtonGadget(#Gadget)
;
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Enumeration 
  
  #ROLL_OVER_STATE_HOVER
  #ROLL_OVER_STATE_NORMAL
  #ROLL_OVER_STATE_MAX
  
EndEnumeration 

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< Déclaration de la Structure <<<<<

Structure RollOverButton
  
  GadgetID.l
  GadgetHandle.l
  StateImage.l[#ROLL_OVER_STATE_MAX]
  
EndStructure

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< Les observateurs <<<<<

Macro GetRollOverButtonGadgetID(RollOverButtonA)
  
  RollOverButtonA\GadgetID
  
EndMacro

Macro GetRollOverButtonGadgetHandle(RollOverButtonA)
  
  RollOverButtonA\GadgetHandle
  
EndMacro

Macro GetRollOverButtonStateImage(RollOverButtonA, Index)
  
  RollOverButtonA\StateImage[Index]
  
EndMacro

; <<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< Les mutateurs <<<<<

Macro SetRollOverButtonGadgetID(RollOverButtonA, P_GadgetID)
  
  GetRollOverButtonGadgetID(RollOverButtonA) = P_GadgetID
  
EndMacro

Macro SetRollOverButtonGadgetHandle(RollOverButtonA, P_GadgetHandle)
  
  GetRollOverButtonGadgetHandle(RollOverButtonA) = P_GadgetHandle
  
EndMacro

Macro SetRollOverButtonStateImage(RollOverButtonA, Index, P_StateImage)
  
  GetRollOverButtonStateImage(RollOverButtonA, Index) = P_StateImage
  
EndMacro

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< L'opérateur Reset <<<<<

Macro ResetRollOverButton(RollOverButtonA)
  
  SetRollOverButtonGadgetID(RollOverButtonA, 0)
  SetRollOverButtonGadgetHandle(RollOverButtonA, 0)
  
  For Index = 0 To #ROLL_OVER_STATE_MAX - 1
    
    If IsImage(GetRollOverButtonStateImage(RollOverButtonA, Index))
      FreeImage(GetRollOverButtonStateImage(RollOverButtonA, Index))
      SetRollOverButtonStateImage(RollOverButtonA, Index, 0)
    EndIf 
    
  Next

EndMacro

; <<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< Le Constructeur <<<<<

Procedure.i CreateNewRollOverButton()

  *RollOverButtonA.RollOverButton = AllocateMemory(SizeOf(RollOverButton))

  If *RollOverButtonA = #Null
    MessageRequester("Fatal Error", "CreateNewRollOverButton() - Impossible to Allocate Memory !")
    End
  EndIf

  ProcedureReturn *RollOverButtonA
EndProcedure

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< Code généré en : 00.002 secondes (45500.00 lignes/seconde) <<<<<
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Macro HoverGadgetCheck(x, y, Gadget)
  
  (((Not x < GadgetX(Gadget)) & (Not y < GadgetY(Gadget))) & (Not x >= (GadgetX(Gadget) + GadgetWidth(Gadget))) & (Not y >= (GadgetY(Gadget) + GadgetHeight(gadget))))
  
EndMacro

Procedure RollOverButtonGadget(GadgetID.l, x.l, y.l, FileName00.s, FileName01.s = "")
  
  *RollOverButtonA.RollOverButton = CreateNewRollOverButton()
  
  If *RollOverButtonA <> #Null
    
    If FileName01 = ""
      
      ImageHandle = LoadImage(#PB_Any, FileName00)
      
      Width = ImageWidth(ImageHandle) >> 1
      Height = ImageHeight(ImageHandle)
      
      SetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER, GrabImage(ImageHandle, #PB_Any, 0,0,Width,24))
      SetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_NORMAL, GrabImage(ImageHandle, #PB_Any, Width,0,Width, Height))
      FreeImage(ImageHandle)
      
    Else 
      
      SetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER, LoadImage(#PB_Any, FileName01))
      SetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_NORMAL, LoadImage(#PB_Any, FileName00))
      
      Width = ImageWidth(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER))
      Height = ImageHeight(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER))
      
    EndIf 
    
    SetRollOverButtonGadgetID(*RollOverButtonA, GadgetID)
    SetRollOverButtonGadgetHandle(*RollOverButtonA, ImageGadget(GadgetID, x, y, Width, Height, ImageID(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_NORMAL))))
    
    If GadgetID <> #PB_Any
      SetGadgetData(GadgetID, *RollOverButtonA)
    Else
      SetGadgetData(GetRollOverButtonGadgetHandle(*RollOverButtonA), *RollOverButtonA)
    EndIf
   
  EndIf
  
  ProcedureReturn GetRollOverButtonGadgetHandle(*RollOverButtonA)
EndProcedure 

Procedure RollOverButtonImageSwitch(GadgetID, WinID)
  
  WinMouseX = WindowMouseX(WinID)
  WinMouseY = WindowMouseY(WinID)
  
  *RollOverButtonA.RollOverButton = GetGadgetData(GadgetID)
  
  If GetRollOverButtonGadgetID(*RollOverButtonA) <> #PB_Any

    If HoverGadgetCheck(WinMouseX, WinMouseY, GetRollOverButtonGadgetID(*RollOverButtonA))
      SetGadgetState(GetRollOverButtonGadgetID(*RollOverButtonA), ImageID(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER)))
    Else 
      SetGadgetState(GetRollOverButtonGadgetID(*RollOverButtonA), ImageID(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_NORMAL)))
    EndIf
    
  Else
  
    If HoverGadgetCheck(WinMouseX, WinMouseY, GetRollOverButtonGadgetHandle(*RollOverButtonA))
      SetGadgetState(GetRollOverButtonGadgetHandle(*RollOverButtonA), ImageID(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_HOVER)))
    Else 
      SetGadgetState(GetRollOverButtonGadgetHandle(*RollOverButtonA), ImageID(GetRollOverButtonStateImage(*RollOverButtonA, #ROLL_OVER_STATE_NORMAL)))
    EndIf
    
  EndIf 
  
EndProcedure 

Procedure FreeRollOverButtonGadget(GadgetID)
  
  *RollOverButtonA.RollOverButton = GetGadgetData(GadgetID)
  
  If *RollOverButtonA <> #Null
    
    ResetRollOverButton(*RollOverButtonA)
    FreeGadget(GadgetID)
    FreeMemory(*RollOverButtonA)
    
  EndIf
  
EndProcedure

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< !!! ATTENTION - CODE D'ESSAI !!! <<<<<
; <<<<< !!!  WARNING  - TESTING CODE !!! <<<<<
; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Enumeration
  
  #MainForm
  
  #ButtonImage1 ;Bouton Image 1
  #ButtonImage2 ;Bouton Image 2
  #ButtonImage3 ;Bouton Image 2
  
EndEnumeration

UsePNGImageDecoder()

Macro GadgetDown(GadgetID, Gap = 0)
  
  GadgetY(GadgetID) + GadgetHeight(GadgetID) + Gap
  
EndMacro

If OpenWindow(#MainForm,0,0,500,300,"Bouton Image Rollover", #PB_Window_ScreenCentered |#PB_Window_SizeGadget | #PB_Window_SystemMenu)
  
  RollOverButtonGadget(#ButtonImage1, 5, 5, "Screen Resolution - Normal.png", "Screen Resolution - MouseOver.png")
  RollOverButtonGadget(#ButtonImage2, 5, GadgetDown(#ButtonImage1), "Launch Demo - Normal.png", "Launch Demo - MouseOver.png")
  RollOverButtonGadget(#ButtonImage3, 5, GadgetDown(#ButtonImage2), "Quit - Normal.png", "Quit - MouseOver.png")
  
EndIf 

Repeat
  
  RollOverButtonImageSwitch(#ButtonImage1, #MainForm)
  RollOverButtonImageSwitch(#ButtonImage2, #MainForm)
  RollOverButtonImageSwitch(#ButtonImage3, #MainForm)
  
  EventID = WaitWindowEvent()
  
  Select EventID
      
    Case #PB_Event_Menu
      
      Select EventMenu()
          
      EndSelect
      
    Case #PB_Event_Gadget
      
      Select EventGadget()
          
        Case #ButtonImage1
          Debug "Screen Resolution"
          
        Case #ButtonImage2
          Debug "Launch Demo"
          
        Case #ButtonImage3
          Debug "Quit"
          EventID = #PB_Event_CloseWindow
          
      EndSelect
      
  EndSelect
  
Until EventID = #PB_Event_CloseWindow

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
; Ces instructions sont nécessaire pour éviter une fuite mémoire. 
; Dans le cas d'une utilisation dans une fenètre de requète par 
; exemple. Pour la fenêtre principale c'est facultatif ou encore 
; pour les puristes.
; 
; These instructions are necessary to avoid a memory leak. In the 
; case of use in a query window for example. For the main window 
; is optional, or for the purists.

FreeRollOverButtonGadget(#ButtonImage1)
FreeRollOverButtonGadget(#ButtonImage2)
FreeRollOverButtonGadget(#ButtonImage3)

; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

; <<<<<<<<<<<<<<<<<<<<<<<<<<
; <<<<< FIN DU FICHIER <<<<<
; <<<<<<<<<<<<<<<<<<<<<<<<<<

This example (code and Images) can be downloaded here : http://pages.videotron.com/gsaumure/fil ... Gadget.zip

A little Hint, the Image for buttons can be created freely on http://cooltext.com/

Have fun !

Best regards.
Guimauve

STARGÅTE · Post by **STARGÅTE** » Sat Feb 04, 2012 4:38 pm

The images flicker and the window freezes and I can not do anything.

The problem is, RollOverButtonImageSwitch generates an event and you are not handle it.

Guimauve · Post by **Guimauve** » Sat Feb 04, 2012 4:56 pm

Strange because here on Linux Mint 12 + Gnome-Shell, everything goes smoothly. No Flicker or windows Freezes.

I will take a look.

Edit : I have try to use the CanvasGadget() instead of the ImageGadget() but so far it's not working correctly.

1st : SetGadgetAttribute(#CanvasGadget, #PB_Canvas_Image, ImageID()) is not working if the Image has an Alpha layer.
2nd : as soon as the mouse enter a gadget an event is fired, not a mouse click.

Maybe a good addition to PureBasic CanvasGadget is "Event Injection" so we can create a command to control the Gadget Flying over behaviors and shooting event on mouse Button Up event. If anyone has à solution, go for it.

Best regards.
Guimauve

Guimauve · Post by **Guimauve** » Sat Feb 04, 2012 6:22 pm

Ok I have uploaded a New archive containing the falsam original code and 2 different versions of my implementation, one use a single image and the other use the 3 sets of two images.

http://pages.videotron.com/gsaumure/fil ... Gadget.zip

Feel free to test and report which one generate bug. By the way, the Original falsam code should work fine on any windows version.

Best regards.
Guimauve

Post by **Andre** » Sat Feb 04, 2012 9:40 pm

Well done!
All codes run smoothly here on MacOS (10.5.

.

Guimauve · Post by **Guimauve** » Sun Feb 05, 2012 1:11 am

Hello everyone,

Le Soldat Inconnu on the french forum has made some correction to the code and I have made some simplification as well. The zip file is updated to version 3, you can download it here : http://pages.videotron.com/gsaumure/fil ... Gadget.zip

The flickering and freezing window problem should be a bad souvenir.

Best regards.
Guimauve

Guimauve · Post by **Guimauve** » Thu Mar 29, 2012 7:26 pm

Hello everyone,

I have updated the RollOverGadget() to have 3 states instead of 2. But to achieve this, I have to use the CanvasGadget() instead of the ImageGadget().

The source code and images can be downloaded here : http://pages.videotron.com/gsaumure/fil ... get_V4.zip

Notes the Zip file contain the Version 3.0.0 of the RollOverGadget()

Best regards.
Guimauve

Kwai chang caine · Post by **Kwai chang caine** » Thu Mar 29, 2012 9:16 pm

Great job !!!
Works fine here with 4.51 with the 3.0 and 4.60 with the 4.0
Thanks for sharing

Alexa · Post by **Alexa** » Fri Jan 25, 2013 4:57 pm

very nice code indeed ... I have a question , how can I modify the code to support fade feature ..

On Mouse over ( hover ) normal state changes to Hover state with FADE effect

Alexa · Post by **Alexa** » Fri Feb 01, 2013 11:55 pm

I am totally confused how to add Fade between two Image buttons ? original author could you please help me ?

Guimauve · Post by **Guimauve** » Sat Feb 02, 2013 2:25 pm

Alexa wrote:I am totally confused how to add Fade between two Image buttons ? original author could you please help me ?

Personally, I really don't know how to do it but as far as I know, one possible option is to redraw the image by blending colors from both button image. But doing this will make RollOverGadget() to react very slowly and I don't talk about the CPU workload to redraw the image according to current fade animation frame.

If you still want to do it go over Le Soldat Inconnu's website and download the Effect library http://www.lsi-dev.com/index.php?mod=articles&ref=20
Use the BlendColor() function to calculate the blend color value according to fade animation frame redraw the image point by point then refresh the button image by using SetGadgetState().

Best regards.
Guimauve

Guimauve · Post by **Guimauve** » Sat Feb 16, 2013 8:04 pm

@Alexa

Any news ?

Best regards.
Guimauve

Alexa · Post by **Alexa** » Tue Mar 12, 2013 1:05 pm

I was unable to fix the code to fade images

..
I am using your code without fade transition .. by the way this is the best Rollover Image button available for PureBasic

Thank you

Guimauve · Post by **Guimauve** » Thu Mar 14, 2013 1:52 am

Alexa wrote:I was unable to fix the code to fade images ..
I am using your code without fade transition .. by the way this is the best Rollover Image button available for PureBasic

Thank you

OK, In the little amount of free time I have, I will try to create a fade in / fade out button gadget. But I warn everyone, this can take few weeks to complete since almost the time during the week I'm so tired when I came back from my job, I really need to get some rest. And during the week-end it's not better, I work to renovate an old house and gradually as I advance in the amount of work to be done greatly increases. I plan to move into this house in 6 weeks so I have not much time for anything else.

So if you are patient, maybe you will be able to replace the RollOverGadget() by FadingOverGadget().

Best regards
Guimauve

Alexa · Post by **Alexa** » Sun Mar 17, 2013 1:47 pm

Guimauve wrote:
Alexa wrote:I was unable to fix the code to fade images ..
I am using your code without fade transition .. by the way this is the best Rollover Image button available for PureBasic

Thank you
OK, In the little amount of free time I have, I will try to create a fade in / fade out button gadget. But I warn everyone, this can take few weeks to complete since almost the time during the week I'm so tired when I came back from my job, I really need to get some rest. And during the week-end it's not better, I work to renovate an old house and gradually as I advance in the amount of work to be done greatly increases. I plan to move into this house in 6 weeks so I have not much time for anything else.

So if you are patient, maybe you will be able to replace the RollOverGadget() by FadingOverGadget().

Best regards
Guimauve

Thank you very much my friend

..

That would be great if you modify your code to do fade in to Second Image on Mouse over and Fade Out to First Image on Mouse Out for each image

PureBasic Forums - English

RollOverGadget

RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget

Re: RollOverGadget