Mouse over gadget

[Stefan]

I would like to find out whether my mouse is over a gadget (without clicking).
So far I've been doing this using a timer function and querying the mouse coordinates.
However, this causes problems on some computers with particularly effective virus scanners.
Is there another option?

[plouf]

play with Javascript and span elements
here an example

Code: Select all

Procedure buttonalert(id.l)
  MessageRequester("MouseOver "+Str(id))
EndProcedure


If OpenWindow(0, 0, 0, 222, 200, "ButtonGadgets", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ButtonGadget(1, 10, 10, 200, 20, "<span onmouseover= "+Chr(34)+"f_buttonalert('1');"+Chr(34)+"> Standard Button 1</span>")
  ButtonGadget(2, 10, 40, 200, 20, "<span onmouseover= "+Chr(34)+"f_buttonalert('2');"+Chr(34)+"> Standard Button 2</span>")

EndIf

[Peter]

@plouf:

Here is mine:

Code: Select all

Procedure MouseOver(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseOver GadgetID: " + GadgetID
EndProcedure

Procedure MouseLeave(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseLeave GadgetID: " + GadgetID
EndProcedure

; some sample-code from SB-Documentation:
; Shows possible flags of ButtonGadget in action...
If OpenWindow(0, 0, 0, 222, 200, "ButtonGadgets", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ButtonGadget(0, 10, 10, 200, 20, "Standard Button")
  ButtonGadget(1, 10, 40, 200, 20, "Left Button", #PB_Button_Left)
  ButtonGadget(2, 10, 70, 200, 20, "<b>Right Button</b>", #PB_Button_Right) ; Using HTML markup
  ButtonGadget(3, 10,100, 200, 60, "Multiline Button  (longer text gets automatically wrapped)", #PB_Button_MultiLine)
  ButtonGadget(4, 10,170, 200, 20, "Toggle Button", #PB_Button_Toggle)
EndIf

! Object.keys(spider.gadget.objects.map).forEach(function(key) {
!   var element = spider.gadget.objects.map[key].gadget.containerNode;
!   element.GadgetID = key;
!   element.addEventListener("mouseover", f_mouseover);
!   element.addEventListener("mouseleave", f_mouseleave);
! });

[Stefan]

Code: Select all

! Object.keys(spider.gadget.objects.map).forEach(function(key) {
!   var element = spider.gadget.objects.map[key].gadget.containerNode;
!   element.GadgetID = key;
!   element.addEventListener("mouseover", f_mouseover);
!   element.addEventListener("mouseleave", f_mouseleave);
! });

Where do I have to put this?
I have several windows within a browser window and only the debug window is recognized.

[Stefan]

Code: Select all

Procedure buttonalert(id.l)
  MessageRequester("MouseOver "+Str(id))
EndProcedure


If OpenWindow(0, 0, 0, 222, 200, "ButtonGadgets", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ButtonGadget(1, 10, 10, 200, 20, "<span onmouseover= "+Chr(34)+"f_buttonalert('1');"+Chr(34)+"> Standard Button 1</span>")
  ButtonGadget(2, 10, 40, 200, 20, "<span onmouseover= "+Chr(34)+"f_buttonalert('2');"+Chr(34)+"> Standard Button 2</span>")

EndIf

Can you please give an example of image gadgets?

[Peter]

Where do I have to put this?

The forEach loop iterates over all created gadgets that SpiderBasic stores in an internal list.

You can run it whenever you have opened a window and added all gadgets to it.

Code: Select all

Enumeration Windows
  #Window1
  #Window2
EndEnumeration

Enumeration Gadgets
  #Window1_Button1
  #Window1_Button2
  #Window2_Button1
  #Window2_Button2
EndEnumeration

Procedure MouseOver(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseOver GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseOver")
EndProcedure

Procedure MouseLeave(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseLeave GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseLeave")
EndProcedure

Procedure AddMouseOverAndMouseLeaveToAllGadgets()
  
  ! Object.keys(spider.gadget.objects.map).forEach(function(key) {
  !   var element = spider.gadget.objects.map[key].gadget.containerNode;
  !   element.GadgetID = key;
  !   element.addEventListener("mouseover", f_mouseover);
  !   element.addEventListener("mouseleave", f_mouseleave);
  ! });
  
EndProcedure

If OpenWindow(#Window1, 100, 100, 300, 90, "Window 1")
  ButtonGadget(#Window1_Button1, 10, 10, 280, 30, "Button 1")
  ButtonGadget(#Window1_Button2, 10, 50, 280, 30, "Button 2")
EndIf

AddMouseOverAndMouseLeaveToAllGadgets()

If OpenWindow(#Window2, 500, 200, 300, 90, "Window 2")
  ButtonGadget(#Window2_Button1, 10, 10, 280, 30, "Button 1")
  ButtonGadget(#Window2_Button2, 10, 50, 280, 30, "Button 2")
EndIf

AddMouseOverAndMouseLeaveToAllGadgets()

[Stefan]

Unfortunately my program hangs when I paste your code into my program.
Maybe my program is too dynamic, maybe I call procedures too often. Finding the cause seems impossible to me.
That's why it would be nicer if I could query each individual image gadget, as is possible for button gadgets in the example above.

[Peter]

For individual gadgets:

Code: Select all

Enumeration Windows
  #Window1
  #Window2
EndEnumeration

Enumeration Gadgets
  #Window1_Button1
  #Window1_Button2
  #Window2_Button1
  #Window2_Button2
EndEnumeration

Procedure MouseOver(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseOver GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseOver")
EndProcedure

Procedure MouseLeave(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseLeave GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseLeave")
EndProcedure

Procedure AddMouseOverAndMouseLeaveToGadget(GadgetID)
  
  ! var element = spider.gadget.objects.map[v_gadgetid].gadget.containerNode;
  ! element.GadgetID = v_gadgetid;
  ! element.addEventListener("mouseover", f_mouseover);
  ! element.addEventListener("mouseleave", f_mouseleave);
  
EndProcedure

If OpenWindow(#Window1, 100, 100, 300, 90, "Window 1")
  ButtonGadget(#Window1_Button1, 10, 10, 280, 30, "Button 1")
  AddMouseOverAndMouseLeaveToGadget(#Window1_Button1)
  ButtonGadget(#Window1_Button2, 10, 50, 280, 30, "No MouseOver and no MouseLeave")
EndIf


If OpenWindow(#Window2, 500, 200, 300, 90, "Window 2")
  ButtonGadget(#Window2_Button1, 10, 10, 280, 30, "No MouseOver and no MouseLeave")
  ButtonGadget(#Window2_Button2, 10, 50, 280, 30, "Button 2")
  AddMouseOverAndMouseLeaveToGadget(#Window2_Button2)
EndIf

[Stefan]

First of all, thank you very much for your efforts, Peter!
This code also doesn't work when I incorporate it into my program.
I have since discovered that it is due to the command: "usegadgetlist(#window)" and "closegadgetlist()" that I use.
As soon as you use these commands, it simply stops working.
I'll have to see if I can change my code, but I don't think so. My program is simply dynamic.

[Stefan]

Code: Select all

Enumeration Windows
  #Window1
  #Window2
EndEnumeration

Enumeration Gadgets
  #Window1_Button1
  #Window1_Button2
  #Window1_Button3
  #Window2_Button1
  #Window2_Button2
  
  #image
  #imagegadget
  
EndEnumeration

Procedure MouseOver(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseOver GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseOver")
EndProcedure

Procedure MouseLeave(Element)
  Protected GadgetID
  ! v_gadgetid = v_element.target.GadgetID
  Debug "MouseLeave GadgetID: " + GadgetID
  SetGadgetText(GadgetID, "MouseLeave")
EndProcedure

Procedure AddMouseOverAndMouseLeaveToGadget(GadgetID)
  
  ! var element = spider.gadget.objects.map[v_gadgetid].gadget.containerNode;
  ! element.GadgetID = v_gadgetid;
  ! element.addEventListener("mouseover", f_mouseover);
  ! element.addEventListener("mouseleave", f_mouseleave);
  
EndProcedure

If OpenWindow(#Window1, 100, 100, 300, 190, "Window 1")
  ButtonGadget(#Window1_Button1, 10, 10, 280, 30, "Button 1")
  AddMouseOverAndMouseLeaveToGadget(#Window1_Button1)
  ButtonGadget(#Window1_Button2, 10, 50, 280, 30, "No MouseOver and no MouseLeave")
  
   CreateImage(#image,100,80,32,RGB(128,0,0))
   ImageGadget(#imagegadget,10,100,ImageWidth(#image),ImageHeight(#image),ImageID(#image))
   AddMouseOverAndMouseLeaveToGadget(#imagegadget)
   
EndIf


If OpenWindow(#Window2, 500, 200, 300, 190, "Window 2")
  ButtonGadget(#Window2_Button1, 10, 10, 280, 30, "No MouseOver and no MouseLeave")
  ButtonGadget(#Window2_Button2, 10, 50, 280, 30, "Button 2")
  AddMouseOverAndMouseLeaveToGadget(#Window2_Button2)
EndIf

Your code doesn't work with ImageGadgets