Seite 1 von 1

[Erledigt] CanvasGadget Mouse Hover leidiges Anfängerproblem

Verfasst: 21.01.2014 16:24
von udg
EDIT
Hallo, seit geraume Zeit beschäftigt mich das CanvasGadget.
Ich möchte 2 Button darstellen welche mit dem bekannten MouseOver sich in der grafischen Anzeige ändern. So wie man es täglich von Webseiten Buttons her kennt.

Ich habe nun probiert und lade 4 Grafiken in den SC.
1. GFX die sichtbare
2. GFX welche bei einem MouseOver/ Hover angezeigt werden soll

3. GFX --> das gleiche nur anderes Bild
4. GFX --> das gleiche nur anderes Hover Bild

Meine Instanzen wie folgt / Im Auszug des Codes:

Code: Alles auswählen

Code und Includes im 3. Beitrag.

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 21.01.2014 16:44
von Bisonte
Ein wirklich ausführbarer Code, der dein Problem zeigt, wäre von nöten...
Das was Du da gepostet hast ist ja nicht mal im Ansatz lauffähig und zeigt nicht deine
Eventloop oder die Deklaration der Canvasgadgets...

Das ist für eine Fehlerbehebung in diesem Falle unerlässlich...

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 21.01.2014 17:17
von ts-soft
@Bisonte
Die der Titel bereits sagt: leidiges Anfängerproblem :mrgreen:

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 21.01.2014 20:59
von udg
Danke.
Leider habe ich nichts finden können und ewig rumprobiert, wie ich jedem Canvas ganz spezifisch die Funktion zuweise. (denn im Code vergebe ich ja eine ID, einmal für Exit und einmal für Minimize)
Wenn ich den Exitbutton erfolgreich hinbekommen habe und mouseOver funktioniert, als nächstes den Minimize Button aufrufe erfolgt der Event immer auf beiden CanvasGadgets.
Sie agieren nicht getrennt von einander " >_< ---> gehe ich mit der Maus über den Minimize Button erfolgt ebenfalls der "ExitButton Event".

Ich weiss, es liegt daran, das ich die IDs des CanvasGadgets nicht zuweise.
Jedoch, wie bewerkstelligt man diese Prozedur?

Vielen Dank für eine Hilfe.
LG

dazugehörige Grafiken: Direkt Download

Code: Alles auswählen

EnableExplicit
UsePNGImageDecoder()
UseJPEGImageDecoder()
Enumeration
#exit_button          ; Exit Button
#exitHover_button     ; Exit Hover Button
#minimize_button      ; minimize Button
#minimizeHover_button ; minimize Hover Button  
EndEnumeration
DataSection
  Hintergrund:
  IncludeBinary "back_.jpg"
  
  exit_button_start_1:
  IncludeBinary "exit.jpg"
  exit_button_1_End:
  exitHover_button_1:
  IncludeBinary "exitHover.jpg"
  exitHover_button_1_End:
       
  minimize_start_1:
  IncludeBinary "minimize_button.jpg"
  minimize_1_End:
  minimizeHover_start_1:
  IncludeBinary "minimizehover_blue.jpg"
  minimizeHover_1_End:
EndDataSection

Define exitButton_1, exitHover_1, minimize_1, minimizeHover_1

If OpenWindow(0,0,0,885,500,"PB - SkinWin Example 4",#PB_Window_BorderLess|#PB_Window_ScreenCentered|#PB_Window_Invisible)
  HideWindow(0,0)

;////////////
;- Exit Programm Button
;////////////
exitButton_1 = CatchImage(#PB_Any, ?exit_button_start_1, ?exit_button_1_End - ?exit_button_start_1) 
  CanvasGadget(#exit_button, 51, 1, 47, 18)
  If StartDrawing(CanvasOutput(#exit_button))
     DrawImage(ImageID(exitButton_1),0,0) ;x & y Koordinaten
     StopDrawing()
     FreeImage(exitButton_1)
  EndIf 
;////////////
;- Exit HOVER Button
;////////////
exitHover_1 = CatchImage(#PB_Any, ?exitHover_button_1, ?exitHover_button_1_End - ?exitHover_button_1) 
  CanvasGadget(#exitHover_button, 51, 1, 47, 18)
  If StartDrawing(CanvasOutput(#exitHover_button))
     DrawImage(ImageID(exitHover_1),0,0) ;x & y Koordinaten
     StopDrawing()
     HideGadget(#exitHover_button, 1); verstecke den Minimize Button
     FreeImage(exitHover_1)
  EndIf
;////////////
;- Minimize Button
;////////////
minimize_1 = CatchImage(#PB_Any, ?minimize_start_1, ?minimize_1_End - ?minimize_start_1) 
   CanvasGadget(#minimize_button, 22, 1, 29, 14)
   If StartDrawing(CanvasOutput(#minimize_button))
       DrawImage(ImageID(minimize_1),0,0) ;x & y Koordinaten
       StopDrawing()
       FreeImage(minimize_1)
   EndIf
;////////////
;- Minimize HOVER Button
;////////////
minimizeHover_1 = CatchImage(#PB_Any, ?minimizeHover_start_1, ?minimizeHover_1_End - ?minimizeHover_start_1) 
   CanvasGadget(#minimizeHover_button, 22, 1, 29, 14);|#AC_SRC_ALPHA)
   If StartDrawing(CanvasOutput(#minimizeHover_button));StartDrawing(ImageOutput(play_button_1))
       DrawImage(ImageID(minimizeHover_1),0,0) ;x & y Koordinaten
       HideGadget(#minimizeHover_button, 1); verstecke den Minimize Button
       StopDrawing()
       FreeImage(minimizeHover_1)
   EndIf   
  Repeat
    Select WaitWindowEvent()
      ; IF LeftMouseButton pressed...
      Case #WM_LBUTTONDOWN
        SendMessage_(WindowID(0),#WM_NCLBUTTONDOWN, #HTCAPTION,0)       
    EndSelect
;////////////
;- Exit Button Funktion
;////////////
 Select EventType()
   Case #PB_EventType_MouseEnter
      If EventType() = #PB_EventType_MouseEnter 
   Debug "ExitButton Da"
   HideGadget(#exitHover_button, 0); zeige Exit Hover Button
      EndIf   
   Case #PB_EventType_MouseLeave
      If #PB_EventType_MouseLeave
        If EventType() =  #PB_EventType_MouseLeave
   Debug "ExitButton weg"
         HideGadget(#exitHover_button, 1); verstecke Exit Hover Button
         HideGadget(#exit_button, 0); zeige Exit Hover Button  
        EndIf
      EndIf
   Case #PB_EventType_LeftButtonDown
      If #PB_EventType_LeftButtonDown
        If EventType() =  #PB_EventType_LeftButtonDown
   Debug "Exit Programm"
        EndIf
      EndIf
   End
 EndSelect 
;////////////
;-Minimize Event
;//////////// 
Select EventType()
   Case #PB_EventType_MouseEnter
      If EventType() = #PB_EventType_MouseEnter 
   Debug "ExitButton Da"
   HideGadget(#minimizeHover_button, 0); zeige Exit Hover Button
      EndIf   
   Case #PB_EventType_MouseLeave
      If #PB_EventType_MouseLeave
        If EventType() =  #PB_EventType_MouseLeave
   Debug "ExitButton weg"
         HideGadget(#minimizeHover_button, 1); verstecke Exit Hover Button
         HideGadget(#minimize_button, 0); zeige Exit Hover Button  
        EndIf
      EndIf
   Case #PB_EventType_LeftButtonDown
      If #PB_EventType_LeftButtonDown
        If EventType() =  #PB_EventType_LeftButtonDown
   Debug "Programm in Taskbar"
        SetWindowState(0, #PB_Window_Minimize) ; Minimiert hinteres Fenster in die TaskBar  
        EndIf
      EndIf
   EndSelect     
ForEver
EndIf
End

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 21.01.2014 22:02
von HeX0R
Vermutlich antwortet Dir hier deswegen keiner, weil man gar nicht weiss wo man anfangen soll.
Keine Ahnung, was Du da als Eventschleife gebastelt hast, da stimmt so ziemlich gar nichts.

Schau Dir doch mal in der Hilfe bei WaitWindowEvent() an, wie das richtig geht und versuche das entsprechend für Deine Zwecke zu erweitern (nicht umbauen erweitern!)

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 22.01.2014 00:01
von Bisonte
upsala... HeX0r... wo hast du denn da eine Eventschleife gefunden ?

Ok Angefangen haben wir alle mal...

Das Grundgerüst einer Anwendung mit einem Fenster und ein paar Gadgets sieht ungefähr so aus :

Code: Alles auswählen

OpenWindow(0, 0, 0, 640, 480, "Test", #PB_Window_ScreenCentered|#PB_Window_SystemMenu) ; < Fenster öffnen

; Hier ein paar Gadgets erstellen

ButtonGadget(1, 20, 20, 100, 25, "Hallo")

Repeat ; < Hier beginnt die Eventschleife
  
  Event = WaitWindowEvent() ; Hier warten wir darauf, dass ein Event passiert ... 
  
  Select Event ; Nun checken wir mal die Events auf die wir reagieren wollen
      
      ; Wir reagieren auf....
    Case #PB_Event_CloseWindow ; Fenster wird geschlossen
      Quit = 1 ; Also legen wir in die Schublade "Quit" eine 1
      
    Case #PB_Event_Gadget ; Irgend ein Gadget löst ein Event aus....
      ; Wir checken ob es unser ButtonGadget war...
      If EventGadget() = 1 ; Ah es ist unser ...
        Debug "Button 1" ; Also Debug Meldung  
      EndIf
      
  EndSelect
  
Until Quit > 0 ; Hier springen wir wieder zum Repeat, und zwar solange, bis in der Schublade "Quit" eine 1 liegt...
Man möge mir die schnippischen Kommentare verzeihen ;)

Des weiteren gehe ich mal davon aus, das du eigentlich nur 2 Canvasgadgets haben möchtest.
Ein Minimize Button und ein Close Button. Jeder davon soll eine Normale Optik und eine "MouseOver" Optik haben...
Du hast hier allerdings 4 Gadgets erstellt.

Lange Rede, kurzer Sinn ... schau dir diesen Code an und frage nach wenn etwas unklar ist...

Code: Alles auswählen

EnableExplicit

UseJPEGImageDecoder() ; Es sind nur JPG Bilder 

Enumeration ; Buttons
  #Btn_Minimize
  #Btn_Exit
EndEnumeration

DataSection
  
  Img_exitbutton:
  IncludeBinary "exit.jpg"
  Img_exitbutton_hoover:
  IncludeBinary "exitHover.jpg"
  
  Img_minimize:
  IncludeBinary "minimize_button.jpg"
  Img_minimize_hoover:
  IncludeBinary "minimizehover_blue.jpg"
  
EndDataSection

Global Dim Pictures(1,1) ; Anzahl der Buttons und die Anzahl der Zustände.... Es wird bei 0 angefangen zu zählen

; Bilder zuweisen
Pictures(#Btn_Minimize, 0) = CatchImage(#PB_Any, ?Img_minimize)
Pictures(#Btn_Minimize, 1) = CatchImage(#PB_Any, ?Img_minimize_hoover)
Pictures(#Btn_Exit, 0) = CatchImage(#PB_Any, ?Img_exitbutton)
Pictures(#Btn_Exit, 1) = CatchImage(#PB_Any, ?Img_exitbutton_hoover)

Procedure CanvasButton_Events() ; Eventabarbeitung der CanvasGadgets
  
  Protected Gadget = EventGadget()
  Protected EType  = EventType()
  
  Select EType
    Case #PB_EventType_MouseEnter ; Wenn maus ins Gadget kommt
      If StartDrawing(CanvasOutput(Gadget))
        If IsImage(Pictures(Gadget,1))
          DrawImage(ImageID(Pictures(Gadget,1)), 0, 0) ; soll bild 1 gezeichnet werden
        EndIf
        StopDrawing()
      EndIf
    Case #PB_EventType_MouseLeave ; Wenn maus das Gadget verlaesst
      If StartDrawing(CanvasOutput(Gadget))
        If IsImage(Pictures(Gadget,0))
          DrawImage(ImageID(Pictures(Gadget,0)), 0, 0) ; soll bild 0 gezeichnet werden
        EndIf
        StopDrawing()
      EndIf
    Case #PB_EventType_LeftButtonDown ; Wenn der linke Mausbutton gedrückt wird
      Select Gadget 
        Case #Btn_Exit
          End ; Soll beim Exit button ende sein
        Case #Btn_Minimize
          ShowWindow_(WindowID(0), #SW_MINIMIZE) ; Soll beim Minimize Button das fenster in die Taskleiste
      EndSelect    
  EndSelect
  
EndProcedure

Define Event

OpenWindow(0, 0, 0, 800, 600, "Test", #PB_Window_ScreenCentered|#PB_Window_BorderLess) ; Fenster öffnen

; Gadgets erstellen
CanvasGadget(#Btn_Minimize, 22, 1, 29, 14)
CanvasGadget(#Btn_Exit, 51, 1, 47, 18)

; Eventverarbeitung zuweisen
BindGadgetEvent(#Btn_Minimize, @CanvasButton_Events())
BindGadgetEvent(#Btn_Exit, @CanvasButton_Events())

; Hier kurz das Event #PB_EventType_MouseLeave erzeugen, damit das richtige bild zu sehen ist
PostEvent(#PB_Event_Gadget, 0, #Btn_Exit, #PB_EventType_MouseLeave)
PostEvent(#PB_Event_Gadget, 0, #Btn_Minimize, #PB_EventType_MouseLeave)

Repeat
  
  Event = WaitWindowEvent()
  
  Select Event
    Case #WM_LBUTTONDOWN ; Fenster mit Linkem Mausbutton bewegen
      SendMessage_(WindowID(0),#WM_NCLBUTTONDOWN, #HTCAPTION,0)
  EndSelect
  
ForEver

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 22.01.2014 00:11
von hjbremer
oder so

Code: Alles auswählen

EnableExplicit

UsePNGImageDecoder()
UseJPEGImageDecoder()

Enumeration
   #mainwindow
   #exit_button 
   #minimize_button
   #irgendwas_button
EndEnumeration

DataSection
   imgmem_1:
   IncludeBinary "exit.jpg"
   imgmem_2:
   IncludeBinary "exitHover.jpg"
   imgmem_3:
   IncludeBinary "minimize_button.jpg"
   imgmem_4:
   IncludeBinary "minimizehover_blue.jpg"
   imgmem_5:
EndDataSection

Define exitNormal_1     = CatchImage(#PB_Any, ?imgmem_1, ?imgmem_2 - ?imgmem_1) 
Define exitHover_1      = CatchImage(#PB_Any, ?imgmem_2, ?imgmem_3 - ?imgmem_2) 
Define minimizeNormal_1 = CatchImage(#PB_Any, ?imgmem_3, ?imgmem_4 - ?imgmem_3) 
Define minimizeHover_1  = CatchImage(#PB_Any, ?imgmem_4, ?imgmem_5 - ?imgmem_4) 

Define br = 885, hh = 500
Define windowflags = #PB_Window_BorderLess|#PB_Window_ScreenCentered|#PB_Window_Invisible

If OpenWindow(#mainwindow, 0, 0, br, hh, "PB - SkinWin Example 4", windowflags)
   
   ;- Exit Programm Button
   br = ImageWidth(exitNormal_1)
   hh = ImageHeight(exitNormal_1)
   CanvasGadget(#exit_button, 51, 1, br, hh)
   SetGadgetAttribute(#exit_button, #PB_Canvas_Image, ImageID(exitNormal_1))
   
   ;- Minimize Button
   br = ImageWidth(minimizeNormal_1)
   hh = ImageHeight(minimizeNormal_1)
   CanvasGadget(#minimize_button, 21, 1, br, hh)
   SetGadgetAttribute(#minimize_button, #PB_Canvas_Image, ImageID(minimizeNormal_1))
   
   ButtonGadget(#irgendwas_button, 22, 122, 99, 22, "Test")
   
   HideWindow(0,0)
   
   Define event, eventtype
   
   Repeat
      event = WaitWindowEvent()
      eventtype = EventType()
      
      Select event
            
         Case #PB_Event_Gadget            
            
            Select EventGadget()
                  
               Case #irgendwas_button
                  MessageRequester("Test", "Test und sonst passiert nix")
                  
               Case #exit_button                  
                  Select eventtype
                     Case #PB_EventType_MouseEnter
                        SetGadgetAttribute(#exit_button, #PB_Canvas_Image, ImageID(exitHover_1))
                        
                     Case #PB_EventType_MouseLeave
                        SetGadgetAttribute(#exit_button, #PB_Canvas_Image, ImageID(exitNormal_1))
                        
                     Case #PB_EventType_LeftButtonDown
                        Debug "Exit Programm"
                        event = #PB_Event_CloseWindow
                        
                  EndSelect                  
                  
               Case #minimize_button                  
                  Select eventtype
                     Case #PB_EventType_MouseEnter
                        SetGadgetAttribute(#minimize_button, #PB_Canvas_Image, ImageID(minimizeHover_1))
                        
                     Case #PB_EventType_MouseLeave
                        SetGadgetAttribute(#minimize_button, #PB_Canvas_Image, ImageID(minimizeNormal_1))
                        
                     Case #PB_EventType_LeftButtonDown
                        Debug "Programm in Taskbar"
                       SetWindowState(0, #PB_Window_Minimize) ; Minimiert hinteres Fenster in die TaskBar  
                        
                  EndSelect 
                  
            EndSelect
            
         Case #PB_Event_Menu
   
         Case #WM_LBUTTONDOWN    ;LeftMouseButton pressed...            
            SendMessage_(WindowID(0), #WM_NCLBUTTONDOWN, #HTCAPTION, 0)                               
            
      EndSelect
      
   Until event = #PB_Event_CloseWindow
   
   ;Progende
   ;es folgt z.B. Werte abspeichern
   
   End
   
Else
   Debug "konnte Window nicht erstellen"
   
EndIf

Re: CanvasGadget leidiges Anfängerproblem

Verfasst: 22.01.2014 17:54
von udg
@Bisonte

Vielen Dank für Deine ausführliche Erklärung. Ich habe mir die Beispiele gespeichert und lerne. Wenn man sich mit einer Programmiersprache befasst möchte man viele tolle Sachen erledigen und hört dies und jenes, was so alles machbar ist.
Man probiert hier und da und verzweifelt hin und wieder an Sachen die zwar logisch im Kopf sind aber nicht umsetzbar ;)

Also nochmals Vielen Dank für die Hilfe. Dieses CanvasGadget hat mich mehr als eine Woche beschäftigt. Es ging immer nur eins der beiden :(
Ich konnte zwar welche darstellen aber wusste einfach nicht wie diese zu trennen sind, sodass mehrere CanvasGadgets unabhängig von einander ihren Zwek erfüllen.

@hjbremer

Vielen Dank für das schon angepasste und ausführliche Beispiel. Nun war es mir ein Leichtes, hier und da einige Fehler und Befehle zu korrigieren, sodass ich laut Deines Beispiel's mir veranschaulichen konnte was bei mir nicht funktioniert und falsch ist/ war.
Mir war nicht bekannt das diese Funktion existiert: SetGadgetAttribute(#exit_button, (vor allem --> #PB_Canvas_Image), ImageID(exitNormal_1))
... das es ausreicht ein CanvasGadget mit wenig Zeilen zu zeichnen. Nach meiner Belesung habe ich da letztendlich viel mehr geschrieben um etwas darstellen zu können. Leider ohne Erfolg auch eine ID übergeben zu können.

Ich danke Dir nochmals für deine Zeit und dem Beispiel.

PS:
Es ist schon krass das in PB 113 Zeilen geschrieben werden müssen um 2 kleine Buttons mit einem Hover Effekt zu versehen.
Schön wäre es, wenn PB das wie im HTML Code "handeln" könnte. 5 Zeilen --> fertig

LG