Mouse Over - Icon Hovering Example

[kevin]

 Mouse Over Icon Hovering example

      This is an except from the BlitzBASIC to PlayBASIC conversion  application.    This code draw the graphic icon that is highlighted when the mouse goes over them.   

     To do this; we load ICON and make a copy of it.   On the copy we apply an alpha addition to the R,G,B channels  but not the Alpha channel.   Since we're adding a blue colour the icons  will get a blue highlight when the mouse is hovering over them,

      To draw the icons we call the DrawCenteredIcon function which  centered and does the mouse hovering.  if the mouse is over the icon we  draw the high lighted version, if not;  we draw the normal copy.

PlayBASIC Code: [Select]

; PROJECT : Mouse Over Icon Hovering example
; AUTHOR  : Kevin Picone - PlayBASIC Tutor - Http://playbasic.com
; CREATED : 5/06/2022
; EDITED  : 5/06/2022
; ---------------------------------------------------------------------


      Type tMouse
               X,Y
               Button
      EndType

      Type tAppIcon
            Frame(2)         
      EndType
   
   
      Type  tApp
            Screen
            Mouse as tMouse
            HomeIcon as tAppIcon
            CloseIcon as tAppIcon
            ArrowLeftIcon as tAppIcon
            ArrowRightIcon as tAppIcon
            
            CheckMarkIcon as tAppIcon
      EndType

      dim App as tApp

      App = new tAPP
      
      App.Screen=NewFXImage(GetSurfaceWidth(),GetSurfaceHeight())
      
      LoadIcons(App.CloseIcon.Frame         ,"gfx/icon_-close-2-1-64.png" )
      LoadIcons(App.ArrowLeftIcon.Frame   ,"gfx/Arrow-Left.png" )
      LoadIcons(App.ArrowRightIcon.Frame   ,"gfx/Arrow-Right.png" )
      LoadIcons(App.CheckMarkIcon.Frame   ,"gfx/Check-Mark-icon.png")
      LoadIcons(App.HomeIcon.Frame         ,"gfx/Home-Icon-64by64.png")
      
      
      
      
      Do
         rendertoimage App.screen
         cls $203040
      
         App.Mouse.x         =Mousex()
         App.Mouse.y         =Mousey()
         App.Mouse.Button   =MouseButton()
         
         
         Xpos=100
         Ypos = 100
         Pad=80
         Clicked= DrawCenteredIcon(App.HomeIcon         ,Xpos,Ypos,True)  :   Xpos+=pad
         Clicked= DrawCenteredIcon(App.ArrowLeftIcon   ,Xpos,Ypos,True)  :   Xpos+=pad
         Clicked= DrawCenteredIcon(App.ArrowRightIcon   ,Xpos,Ypos,True)  :   Xpos+=pad
         Clicked= DrawCenteredIcon(App.CheckMarkIcon         ,Xpos,Ypos,True)  :   Xpos+=pad
         Clicked= DrawCenteredIcon(App.CloseIcon         ,Xpos,Ypos,True)  :   Xpos+=pad



         rendertoscreen
         drawimage App.Screen,0,0,false
         Sync   
      loop spacekey()





Function DrawCenteredIcon(Icon as tAppIcon Pointer,X,Y,Flag)
         ThisImage = Icon.Frame(0)
         iw=getimagewidth(ThisImage)
         ih=getimageheight(ThisImage)
         X=X -(iw*0.5)
         Y=Y -(IH*0.5)
         
         
         // 
         mx=App.Mouse.x
         my=App.Mouse.y
   
                  
         Frame = PointInBox(mx,my,x,y,x+iw,y+ih)
         Drawimage Icon.Frame(Frame),X  , y, flag

         if Frame>0
               Clicked=(App.Mouse.Button and 1)
         endif         

EndFunction Clicked





Function LoadIcons(me as tAppIcon pointer , FileName$)
   
         SrcIMAGE =LoadNewAFXImage(Filename$)
         
         w=  getImageWidth( SrcIMAGE)
         h= getImageHeight( SrcIMAGE)
            
         ThisImage   = NewFXImage(w,h,true)
         me.Frame(0)   = SrcIMAGE
         me.Frame(1) = ThisIMAGE
         CopyIMage SrcIMAGE,ThisIMAGE
         
         OldImage=GetSurface()
         rendertoimage ThisIMAGE
         inkmode 1+64
         Boxc 0,0,w,h,true, $003070b0
         inkmode 1         
         
         rendertoimage OldIMAGE
         
         
EndFunction

 

Download

     Download Full Source Code + media  from the link bellow.