gibt's inzwischen für flat Button,hover Effekt PB Konstante?

udg · Beitrag von **udg** » 15.02.2016 03:42

Leider fehlt mir der bekannte hover Effekt wie man ihn von CSS für WebCode kennt.

Ich habe leider noch nicht dahinter steigen können ob diese Funktion in Purbasic realisierbar ist? Ich quäle mich immer mit Grafiken um diesen Mouse Over (hover) Effekt darzustellen.

Was ich meines Wissens darstellen kann ohne Grafiken ist:
Flat Button zB. blau und wenn ich mit der Maus darauf drücke, kann ich per Code angeben, dass er nun eine andere Farbe bekommen soll.

mit zb. ...

Code: Alles auswählen

Case #WM_MOUSEHOVER 
SetGadgetColor(1, #PB_Gadget_BackColor, $8C6830)

... könnte ich mir gut vorstellen, einfach einen hover Effekt zu bekommen --> geht aber nit.

Geht es überhaupt auf so scheinbar einfachem Weg?

mhs · Beitrag von **mhs** » 15.02.2016 09:13

Grundsätzlich ist der Weg schon richtig.

- Mausbewegung erkennen
- Ist der Cursor über dem Fenster? Hintergrund entsprechend einfärben

Du kannst allerdings mit SetGadgetColor nicht die Farbe eines Buttons verändern... Sollte aber per Win API gehen.

Derren · Beitrag von **Derren** » 15.02.2016 13:54

in before: "Warum willst du das Windows Thema, dass sich der User selbst aussucht unterminieren und dem Anwender deine eigenen Farbwünsche aufzwängen".

So, das wäre geklärt, braucht jetzt keiner mehr posten

In der API-Library von RSBasic findet sich folgender Code von ts-soft: http://www.rsbasic.de/aktualisierung/wi ... nderung.pb

Eine andere Möglichkeit wäre 2 Bilder zu malen, und ein ButtonImageGadget() zu verwenden, bei dem du einfach das Bild auswechselst.

Dann gibt es auch noch die Möglichkeit das Canvas-Gadget zu verwenden. zB: http://www.purebasic.fr/english/viewtop ... nvasbutton

udg · Beitrag von **udg** » 15.02.2016 16:08

mhs hat geschrieben:Grundsätzlich ist der Weg schon richtig.

- Mausbewegung erkennen
- Ist der Cursor über dem Fenster? Hintergrund entsprechend einfärben

diesen code habe ich bereits implementiert, dafür, wenn meine maus einen gedrückten button der durch das drücken grün wurde ,beim verlassen der Button ära wieder grau wird.

BeispielCode nutzt aber PureColor zum Färben der Button:

Code: Alles auswählen

Select event
     Case #WM_MOUSELEAVE
       If WindowMouseX(0) >= 320 And WindowMouseX(0) <= 550 And WindowMouseY(0) >= 720 And WindowMouseY(0) <= 840; Ära für Maus festlegen wo Button wieder verlassen wird
         SetGadgetText(#btn_Copy_Paste,"Forum Panel Text kopieren")  
         PureCOLOR_SetButtonColor(#btn_Copy_Paste, #PureCOLOR_SystemColor, $DCDCDC); Button Farbe
       EndIf 
EndSelect

funktioniert wie es soll und ich dachte mir wenn ich das Ganze umdrehe mit #WM_MOUSEHOVER geht das auch, aaaaber ---> nein natürlich nicht.
meine frage bleibt nun immer noch: warum wurde dies nicht einfach in PB als standard implementiert? wie zB es bei Visual Basic ja auch standard ist.

mhs hat geschrieben:Du kannst allerdings mit SetGadgetColor nicht die Farbe eines Buttons verändern... Sollte aber per Win API gehen.

ähm bedingt ja: um schnell einen Flat button erstellen zu können nehme ich ein TextGadget wie folgt:

Code: Alles auswählen

;- Btn Forward
     TextGadget(#Btn_Nav_Frwd, 32, 4, 30, 20, ">",#SS_CENTERIMAGE|#SS_NOTIFY|#SS_CENTER)
      SetGadgetFont(#Btn_Nav_Frwd, LoadFont(#Font_Btn_Nav_Frwd, "Lucida", 10, #PB_Font_HighQuality))  ; Button Font
      SetGadgetColor(#Btn_Nav_Frwd, #PB_Gadget_BackColor, RGB(48, 103, 140))  ;TEXT Hintergrund FARBE
      SetGadgetColor(#Btn_Nav_Frwd, #PB_Gadget_FrontColor, RGB(0, 0, 0))  ;TEXT FARBE

funktioniert bestens

udg · Beitrag von **udg** » 15.02.2016 16:21

Derren hat geschrieben:in before: "Warum willst du das Windows Thema, dass sich der User selbst aussucht unterminieren und dem Anwender deine eigenen Farbwünsche aufzwängen".

weil ich das so will

hier geht es um ein internes tool was nicht wie windows blub aussehen soll

.

Derren hat geschrieben:In der API-Library von RSBasic findet sich folgender Code von ts-soft: http://www.rsbasic.de/aktualisierung/wi ... nderung.pb

dieses Beispiel hatte ich mir schon angesehen aber auf einem flat button ist das nicht wirklich bezogen und ich lande wieder bei meiner Kernfrage, warum ist es nicht als standart bei PB vorgesehen. warum muss man eine prozedur mit callback schreiben damit man einen Hover Effekt bekommt. das geht doch einfacher.

Derren hat geschrieben:Eine andere Möglichkeit wäre 2 Bilder zu malen, und ein ButtonImageGadget() zu verwenden, bei dem du einfach das Bild auswechselst.
Dann gibt es auch noch die Möglichkeit das Canvas-Gadget zu verwenden. zB: http://www.purebasic.fr/english/viewtop ... nvasbutton

so betreibe ich es schon lange was aber mit schreibkram verbunden ist und darum entstand meine Frage, warum nicht Standart?

Auszug wie ich es nutze, damit ein Mouse Over-wechsel visuell entsteht:

ich definiere hier:

Code: Alles auswählen

; EXIT BUTTON NORMAL AND HOVER
  Define Exit_Normal = CatchImage(#Image_Exit_Normal, ?Image_Exit_Normal, ?Image_Exit_Normal_End - ?Image_Exit_Normal)
  Define Exit_Red = CatchImage(#Image_Exit_Red, ?Image_Exit_Red, ?Image_Exit_Red_End - ?Image_Exit_Red)
    br = ImageWidth(#Image_Exit_Normal)
    hh = ImageHeight(#Image_Exit_Red)
    ;  POSITION WEHRE TO PLACE ON SCREEN  
       CanvasGadget(#Btn_Exit, 676, -2, br, hh) 
       SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Normal))

und Calle hier:

Code: Alles auswählen

;- FUNKTION EXIT BUTTON    
          Case #Btn_Exit                 
            Select eventtype
              Case #PB_EventType_MouseEnter
                SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Red))
                 Case #PB_EventType_MouseLeave
                   SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Normal))
                   ;PROGRAM EXIT, IF CLICK ON EXIT BUTTON
                      Case #PB_EventType_LeftButtonDown
                      ;CLOSE ALL  
                        End
            EndSelect

Einfach wäre doch wenn es wirklich gehen würde:

Code: Alles auswählen

Case #WM_MOUSEHOVER
Befehl blub (1, #PB_Gadget_BackColor, $8C6830)

fertig.

Liebes PB Team, kann man darauf hoffen ?

Danke für eure Antworten.

Bisonte · Beitrag von **Bisonte** » 15.02.2016 16:41

Für mich ist soetwas ein Fall für das Eventgeplagte CanvasGadget().

Und die Events die "automatisch" passieren sollen, wie MouseHover oder Bildwechsel oder oder oder... werden
per BindGadgetEvent() ausgeführt.

Viel mehr Möglichkeiten und Crossplatform obendrein !

Und aus diesem Grund wird es wohl dafür kein PB Äquivalent in weiter Zukunft geben.

udg · Beitrag von **udg** » 15.02.2016 16:44

hab mal eben noch ein Beispiel erstellt:

Code: Alles auswählen

Enumeration
  ;Main Window
    #Window_0
    
  ; Main Gadgets 
    #Btn_Exit
    #Image_Exit_Normal
    #Image_Exit_Red
    
EndEnumeration
  
;Included Images
DataSection
  Image_Exit_Normal:
  ; exit_normal.png
  ;{ Size = 328 bytes
  Data.l $474E5089,$0A1A0A0D,$0D000000,$52444849,$22000000,$17000000,$00000208,$3A959601,$0000001D,$59487009,$0E000073,$0E0000C3
  Data.l $6FC701C3,$000064A8,$4449FA00,$9C785441,$FFFFF963,$6012033F,$19B75081,$F9915418,$647970AA,$74582CF5,$06865162,$1DF61450
  Data.l $C0722860,$812C8721,$AC164CCF,$071228A2,$BD9F12FA,$9CEA8864,$50E12E8F,$7E589554,$519B0A3A,$E13BF3AA,$0763C6DE,$76129F1E
  Data.l $2CF41517,$ED344F2B,$4D8AAF9C,$781EA70A,$07A09040,$CF4B200F,$5D1B8740,$2F9624F4,$5A69DF9B,$33A18CBE,$610C4B0A,$00D403D7
  Data.l $3BF3924C,$62CAB0A3,$BCACB3D7,$EEA7BE6D,$4A8CA46D,$11240F58,$5380D560,$A8307E0F,$DE9190F5,$0E86B1C8,$6B708C76,$76F96580
  Data.l $17CF2A89,$E2190B6D,$11D5A3E7,$C1C6B454,$1B7B75D7,$D7310ED0,$20EC122A,$D9601ACD,$7E3C5BBD,$46507CFE,$912B7A04,$60910F14
  Data.l $C3A7300D,$A287130B,$40DAC4F9,$809435AA,$000D65E1,$754D2247,$528F5DE3,$00000000,$444E4549,$826042AE
  Image_Exit_Normal_End:
  ;}
  Image_Exit_Red:
  ; exit_red.png
  ;{ Size = 326 bytes
  Data.l $474E5089,$0A1A0A0D,$0D000000,$52444849,$22000000,$17000000,$00000208,$3A959601,$0000001D,$59487009,$0E000073,$0E0000C3
  Data.l $6FC701C3,$000064A8,$4449F800,$9C785441,$AEC33963,$580480CE,$03371420,$FE6457C3,$B23CB857,$3A2C167A,$034328B1,$92550A28
  Data.l $C5CCEE19,$812C8721,$AC164CCF,$221228A2,$28706F1B,$D1D13C33,$E3789740,$C57C691F,$A33609E3,$39D59FCE,$781D844F,$5DD84A7C
  Data.l $7323D054,$1D7BC6E5,$A4D8AF8D,$0781EA70,$F07A0904,$0CF4B200,$45D1B874,$CA95F18F,$B43B3AB3,$96AE187B,$C594C79C,$01A807AE
  Data.l $EACF2498,$8F6093B4,$67E595CC,$23710FFB,$7AC25465,$AB008920,$F07A9C06,$87AD4183,$8E46F48C,$63B07435,$2C035B84,$476FC5CB
  Data.l $2E5D54BE,$D67750CF,$ACAD157F,$50BED379,$8ED000FC,$481D2F87,$6B3483B0,$F8B76580,$1CB3BADD,$F4088CA0,$1E293196,$601AC122
  Data.l $70D7874E,$DE35FC6F,$9073AF10,$6EC18126,$B735000D,$24470847,$00009783,$45490000,$42AE444E
  Data.b $60,$82
  Image_Exit_Red_End:
  ;}
EndDataSection
  
;Image Plugins
UsePNGImageDecoder()

OpenWindow(#Window_0, 298, 150, 250, 200, "",#PB_Window_BorderLess|#PB_Window_ScreenCentered)
SetWindowColor(#Window_0, RGB(219, 219, 219))

; EXIT BUTTON NORMAL AND HOVER
  Define Exit_Normal = CatchImage(#Image_Exit_Normal, ?Image_Exit_Normal, ?Image_Exit_Normal_End - ?Image_Exit_Normal)
  Define Exit_Red = CatchImage(#Image_Exit_Red, ?Image_Exit_Red, ?Image_Exit_Red_End - ?Image_Exit_Red)
    br = ImageWidth(#Image_Exit_Normal)
    hh = ImageHeight(#Image_Exit_Red)
    ;  POSITION WEHRE TO PLACE ON SCREEN  
       CanvasGadget(#Btn_Exit, 216, -2, br, hh) 
       SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Normal))
       
Repeat
  Event = WaitWindowEvent()
  EventGadget = EventGadget()
  EventType = EventType()

;- Button Funktionen    
  If Event = #PB_Event_Gadget
    Select EventGadget()
       ;- FUNKTION EXIT BUTTON    
          Case #Btn_Exit                 
            Select eventtype
              Case #PB_EventType_MouseEnter
                SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Red))
                 Case #PB_EventType_MouseLeave
                   SetGadgetAttribute(#Btn_Exit, #PB_Canvas_Image, ImageID(#Image_Exit_Normal))
                   ;PROGRAM EXIT, IF CLICK ON EXIT BUTTON
                      Case #PB_EventType_LeftButtonDown
                      ;CLOSE ALL  
                        End
            EndSelect
        EndSelect
  EndIf
  Until IsWindow(#Window_0)=0 And IsWindow(Fenster_ID)=0

udg · Beitrag von **udg** » 15.02.2016 16:47

Bisonte hat geschrieben:Für mich ist soetwas ein Fall für das Eventgeplagte CanvasGadget().
Und die Events die "automatisch" passieren sollen, wie MouseHover oder Bildwechsel oder oder oder... werden
per BindGadgetEvent() ausgeführt.
Viel mehr Möglichkeiten und Crossplatform obendrein !
Und aus diesem Grund wird es wohl dafür kein PB Äquivalent in weiter Zukunft geben.

... mag sein aber der Schreibkram für ein simples MouseOver (siehe Beispiel oben) ist doch enorm für mein Empfinden. Eine PB Konstante wäre da schlanker und freundlicher.
nun ja, mal schauen

Danke Dir

Lord · Beitrag von **Lord** » 16.02.2016 10:01

udg hat geschrieben:... internes tool was nicht wie windows blub aussehen soll...

Da würde ich vorschlagen im englischen Forum folgenden Request einzustellen:

Need a new command: MakeMeProgramNotLookingLikeWindowsBlub()

mk-soft · Beitrag von **mk-soft** » 16.02.2016 10:55

ButtonColorGadget

http://www.purebasic.fr/german/viewtopi ... olorgadget

Achtung Werbung

PureBoard

gibt's inzwischen für flat Button,hover Effekt PB Konstante?

gibt's inzwischen für flat Button,hover Effekt PB Konstante?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt es inzwischen beim Button - hover Effekt?

Re: gibt's inzwischen für flat Button,hover Effekt PB Konsta