Hallo Leute,
wenn es ein Gui-Element gibt was man am häufigsten braucht dann sind es wohl Buttons.
Ich habe mich oft dabei ertappt, dass ich für Projekte immer wieder das Rad neu erfunden hatte und eine Buttonklasse erstellt habe.
Da ich BMax gerne zum "rapid-prototyping" hernehme, um schnell mal zu testen, ob kleine Ideen so funktionieren wie ich sie im Kopf habe, musste ich mich nun mal dazu aufraffen ein Modul für Image-Buttons zu erstellen und möchte dieses mit euch teilen.
Hauptaugenmerk war, dass sie so einfach wie möglich und ohne viel Aufwand zu benutzen sind.
Man kann ganz einfach Buttons erstellen, welche zu jedem State ein Image haben. States sind normal, mouse hover und focused (wenn der Button geklickt wurde, ist er fokusiert)
Hier mal ein Screenshot, wo die Gui nur aus diesen Buttons besteht: (Ein Tool welches Images zu Pixelart konvertiert)
Bei Intersse, ist hier der Worklog.
Das Modul kann hier herunter geladen werden. Dieser Mod ist für Windows vorkompiliert, also einfach so herunterladen und in den Modordner von BlitzMax entpacken (BlitzMax -> mod -> rednib.mod)
Nach dem kopieren sollte die Dokumentation neu erstellt werden, damit dieser Mod ebenfalls in die Dokumentation mit einbezogen wird.
Auch wenn der Mod gut dokumentiert ist, hier noch eine kleine Übersicht und Erklärung mit anschließendem Beispiel:
Module rednib.Button
Types
TButton
Functions
mouseOverButton (button)
newButton (x, y, imgNormal, imgHover, imgFocus, alpha, midHandle)
renderbuttons ()
setTooltip (button, tooltipText)
setTooltipBgColor (red, green, blue, alpha)
setTooltipDelay (tooltipDelay)
setTooltipTextColor (red, green, blue)
getFocusedButton ()
getLastFocusedButton ()
setFocusedButton ()
unfocusButton ()
Imports
BRL.Blitz
BRL.LinkedList
BRL.Max2D
BRL.PolledInput
Infos
Version : 1.02
Author : Michael Binder
Date : Nov-2017
Types : 1
Functions : 11
mouseOverButton()
Description:
Checkt ob sich die Maus über dem Button befindet
Return:
True wenn ja, andernfalls false
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function mouseOverButton : Int ( button : TButton )
newButton()
Description:
Erstellt einen neuen Button
Long description
imgFocus ist ein image, welches dann gezeichnet wird, wenn der Button geklickt wurde und der Button somit fokusiert ist. Dieser parameter ist optional.
Return:
Button-Objekt vom Typ TButton
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function newButton : TButton ( x : Int y : Int imgNormal : TImage imgHover : TImage imgFocus : TImage (Default = Null) alpha : Float (Default = 1.0) midHandle : Int (Default = True)
)
renderButtons()
Description:
Updated und Zeichnet alle Buttons und ggf. Tooltips wenn diese gesetzt sind.
Long description
Die Funktion renderButtons() muss einmal in der Hauptschleife aufgerufen werden.
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function renderbuttons : Int ( )
setTooltip()
Description:
Erstellt ein Tooltip für den Button
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function setTooltip : Int ( button : TButton tooltipText : String )
setTooltipBgColor()
Description:
Setzt die Farbe und den Alphawert des Tooltiphintergrunds
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function setTooltipBgColor : Int ( red : Int green : Int blue : Int alpha : Float (Default = 1.0) )
setTooltipTextColor()
Description:
Setzt die Farbe des Tooltiptextes
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function setTooltipTextColor : Int ( red : Int green : Int blue : Int )
setTooltipDelay()
Description:
Setzt den delay des Tooltips
Long description
Wenn die Maus sich über dem Button befindet, entscheidet der delay-Wert, wie lange es dauert, bis der Tooltip angezeigt wird.
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function setTooltipDelay : Int ( tooltipDelay : Float )
getFocusedButton ()
Description:
Gibt den fokusierten/derzeit geklickten Button zurück
Long description
Dies kann nützlich sein, wenn man abhängig vom fokusierten Button, aktionen ausführen möchte.
Wie zB. in einem Bildbearbeitungsprogramm, wo man abhängig vom selektierten Werkzeug, unterschiedliche operationen am Bild durchführen kann
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function getFocusedButton : TButton ( )
getLastFocusedButton ()
Description:
Gibt den zuletzt fokusierten/letzten geklickten Button zurück. (der Button, welcher vor dem derzeit geklickten Button geklickt wurde)
Long description
Dies kann nützlich sein, wenn man abhängig vom fokusierten Button, aktionen ausführen möchte.
Wie zB. in einem Bildbearbeitungsprogramm, wo man abhängig vom selektierten Werkzeug, unterschiedliche operationen am Bild durchführen kann.
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function getLastFocusedButton : TButton ( )
setFocusedButton ()
Description:
Setzt den Button als derzeit fokusierten Button (letzter fokusierter Button wird ebenfalls gesetzt)
Long description
Dies kann nützlich sein, wenn man abhängig vom fokusierten Button, aktionen ausführen möchte.
Wie zB. in einem Bildbearbeitungsprogramm, wo man abhängig vom selektierten Werkzeug, unterschiedliche operationen am Bild durchführen kann
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function setFocusedButton( button:TButton )
unfocusButton ()
Description:
Setzt den derzeit fokusierten Button auf unfokusiert (derzeit fokusierter Button wird zu zuletzt fokusierter Button)
Long description
Dies kann nützlich sein, wenn man abhängig vom fokusierten Button, aktionen ausführen möchte.
Wie zB. in einem Bildbearbeitungsprogramm, wo man abhängig vom selektierten Werkzeug, unterschiedliche operationen am Bild durchführen kann
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Function unfocusButton( )
Und abschließend noch ein Beispiel, welches alle Funktionen benutzt:
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Import rednib.button
Graphics 1024, 768 SetBlend ALPHABLEND
setTooltipBgColor(20, 20, 20, 0.7) setTooltipTextColor(200, 200, 200) setTooltipDelay(500)
Local imgNormal:TImage = LoadImage("assets/myButton_normal.png") Local imgHover:TImage = LoadImage("assets/myButton_hover.png")
Local button1:TButton = newButton(50, 50, imgNormal, imgHover)
setTooltip(button1, "This is a tooltip text
While Not AppTerminate() If mouseOverButton(button1) And MouseHit(1) setFocusedButton(button1) Notify("clicked left") EndIf If KeyHit(KEY_SPACE) unfocusButton() EndIf Local focusedButton:TButton = getFocusedButton() If focusedButton = button1 Print("Your are in button1 mode") Else Print("No mode") EndIf renderbuttons() Flip;Cls Wend
Die ganze "focused Button" Geschichte ist optional und muss nicht verwendet werden. (Finde es allerdings praktisch)
Daher hier nochmal ein ganz minimalistisches Beispiel:
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] Import rednib.button
Graphics 1024, 768 SetBlend ALPHABLEND
Local imgNormal:TImage = LoadImage("assets/btnLoad_normal.png") Local imgHover:TImage = LoadImage("assets/btnLoad_hover.png")
Local button:TButton = newButton(50, 50, imgNormal, imgHover)
While Not AppTerminate() If mouseOverButton(button) And MouseHit(1) Notify("clicked left") EndIf renderbuttons() Flip;Cls Wend
Ich hoffe das es für den Einen oder Anderen nützlich ist.
Gruß Trust
Ps.: wer vor dem Download den Source sehen möchte:
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN]
Module rednib.button
ModuleInfo "Version: 1.02" ModuleInfo "Author: Michael Binder" ModuleInfo "Date: Nov-2017"
ModuleInfo "History: 1.02 Tooltip text- and bg- color are class variables now" ModuleInfo "History: _tooltipColorR/G/B/A and _tooltipTextColorR/G/B are now class variables and no longer fields of each button object" ModuleInfo "History: Fixed an issue where the hover image was drawn when the mouse was hovering over the button even when the button was focused - that seemed to be confusing" ModuleInfo "History: 1.01 Bug Fix" ModuleInfo "Fixed an issue where the tooltip was drawn outside of the screen area when the button was placed at the bottom or right border of the screen" ModuleInfo "History: 1.00 Release"
Import BRL.PolledInput Import BRL.LinkedList Import BRL.Max2D Import BRL.Blitz
Type TButton
Global _list:TList = New TList
Global _currentFocus:TButton = Null
Global _lastFocus:TButton = Null
Global _tooltipTextColorRed:Int = 255
Global _tooltipTextColorGreen:Int = 255
Global _tooltipTextColorBlue:Int = 255
Global _tooltipBgColorRed:Int = 0
Global _tooltipBgColorGreen:Int = 0
Global _tooltipBgColorBlue:Int = 0
Global _tooltipBgColorAlpha:Float
Global _tooltipDelay:Float
Field _tooltipText:String = Null
Field _x:Int
Field _y:Int
Field _imgNormal:TImage
Field _imgHover:TImage
Field _imgFocus:TImage
Field _imgNormalWidth:Int
Field _imgNormalHeight:Int
Field _imgHoverWidth:Int
Field _imgHoverHeight:Int
Field _imgFocusWidth:Int
Field _imgFocusHeight:Int
Field _alpha:Float
Field _tooltipDelayTimer:Float = 0.0
Field _tooltipDelayHasSet:Int = False
Field _midHandle:Int
Method New() Final TButton._list.AddLast(Self) End Method
Method _setTooltipDelayTimer() If Self._tooltipDelayHasSet = False If Self._tooltipDelay > 0.0 Self._tooltipDelayTimer = MilliSecs() + Self._tooltipDelay EndIf EndIf End Method
Method _hasTooltipDelayReached:Int() If MilliSecs() > Self._tooltipDelayTimer Return True EndIf Return False End Method
Method _updateTooltipTimer() If mouseOverButton(Self) Self._setTooltipDelayTimer() Self._tooltipDelayHasSet = True Else Self._tooltipDelayTimer = 0.0 Self._tooltipDelayHasSet = False EndIf End Method
Method _drawTooltip() Final If Self._hasTooltipDelayReached() If Self._tooltipText <> Null And mouseOverButton(Self) Local mx:Int = MouseX() Local my:Int = MouseY() Local gw:Int = GraphicsWidth() Local gh:Int = GraphicsHeight() Local width:Int = TextWidth(Self._tooltipText) Local height:Int = TextHeight(Self._tooltipText) Local cursorHeight:Int = 20 Local margin:Int = 6 Local xPos:Int Local yPos:Int If mx + width + margin*2 < gw xPos = mx Else xPos = mx - (width + margin*2) EndIf If my + height + cursorHeight + margin*2 < gh yPos = my + cursorHeight Else yPos = my - (height + margin*2) EndIf If Self._tooltipBgColorAlpha < 1.0 Then SetAlpha(TButton._tooltipBgColorAlpha) SetColor(TButton._tooltipBgColorRed, TButton._tooltipBgColorGreen, TButton._tooltipBgColorBlue) DrawRect(xPos, yPos, width + margin*2, height + margin*2) If TButton._tooltipBgColorAlpha < 1.0 Then SetAlpha(1.0) SetColor(TButton._tooltipTextColorRed, TButton._tooltipTextColorGreen, TButton._tooltipTextColorBlue) DrawText(Self._tooltipText, xPos + margin, yPos + margin) SetColor(255, 255, 255) EndIf EndIf End Method
Method _update() Self._updateTooltipTimer() End Method
Method _draw() Final Local x:Int, y:Int If mouseOverButton(Self) If Self._midhandle = True x = Self._x - Self._imgHoverWidth/2 y = Self._y - Self._imgHoverHeight/2 Else x = Self._x y = Self._y EndIf If TButton._currentFocus <> Self If Self._alpha < 1 Then SetAlpha(Self._alpha) DrawImage(Self._imgHover, x, y) If Self._alpha < 1 Then SetAlpha(1) Else If Self._alpha < 1 Then SetAlpha(Self._alpha) DrawImage(Self._imgFocus, x, y) If Self._alpha < 1 Then SetAlpha(1) EndIf Else If Self._imgFocus And TButton._currentFocus = Self If Self._midhandle = True x = Self._x - Self._imgFocusWidth/2 y = Self._y - Self._imgFocusHeight/2 Else x = Self._x y = Self._y EndIf If Self._alpha < 1 Then SetAlpha(Self._alpha) DrawImage(Self._imgFocus, x, y) If Self._alpha < 1 Then SetAlpha(1) Else If Self._midhandle = True x = Self._x - Self._imgNormalWidth/2 y = Self._y - Self._imgNormalHeight/2 Else x = Self._x y = Self._y EndIf If Self._alpha < 1 Then SetAlpha(Self._alpha) DrawImage(Self._imgNormal, x, y) If Self._alpha < 1 Then SetAlpha(1) EndIf EndIf End Method End Type
Function newButton:TButton(x:Int, y:Int, imgNormal:TImage, imgHover:TImage, imgFocus:TImage = Null, alpha:Float = 1.0, midHandle:Int = True) Local button:TButton = New TButton button._x = x button._y = y button._imgNormal = imgNormal button._imgHover = imgHover button._imgFocus = imgFocus button._imgNormalWidth = ImageWidth(button._imgNormal) button._imgNormalHeight = ImageHeight(button._imgNormal) button._imgHoverWidth = ImageWidth(button._imgHover) button._imgHoverHeight = ImageHeight(button._imgHover) If button._imgFocus button._imgFocusWidth = ImageWidth(button._imgFocus) button._imgFocusHeight = ImageHeight(button._imgFocus) EndIf button._alpha = alpha button._midHandle = midHandle Return button End Function
Function renderbuttons() Local button:TButton For button= EachIn TButton._list button._update() button._draw() Next button = Null For button = EachIn TButton._list button._drawTooltip() Next End Function
Function setTooltip(button:TButton, tooltipText:String) button._tooltipText = tooltipText End Function
Function setTooltipTextColor(red:Int, green:Int, blue:Int) TButton._tooltipTextColorRed = red TButton._tooltipTextColorGreen = green TButton._tooltipTextColorBlue = blue End Function
Function setTooltipBgColor(red:Int, green:Int, blue:Int, alpha:Float = 1.0) TButton._tooltipBgColorRed = red TButton._tooltipBgColorGreen = green TButton._tooltipBgColorBlue = blue TButton._tooltipBgColorAlpha = alpha End Function
Function setTooltipDelay(tooltipDelay:Float) TButton._tooltipDelay = tooltipDelay End Function
Function mouseOverButton:Int(button:TButton) If button._midhandle = True If button._imgFocus And TButton._currentFocus = button If MouseX() > button._x - button._imgFocusWidth/2 And MouseX() < button._x + button._imgFocusWidth/2 If MouseY() > button._y - button._imgFocusHeight/2 And MouseY() < button._y + button._imgFocusHeight/2 Return True EndIf EndIf Else If MouseX() > button._x - button._imgHoverWidth/2 And MouseX() < button._x + button._imgHoverWidth/2 If MouseY() > button._y - button._imgHoverHeight/2 And MouseY() < button._y + button._imgHoverHeight/2 Return True EndIf EndIf EndIf Else If button._imgFocus And TButton._currentFocus = button If MouseX() > button._x And MouseX() < button._x + button._imgFocusWidth If MouseY() > button._y And MouseY() < button._y + button._imgFocusHeight Return True EndIf EndIf Else If MouseX() > button._x And MouseX() < button._x + button._imgHoverWidth If MouseY() > button._y And MouseY() < button._y + button._imgHoverHeight Return True EndIf EndIf EndIf EndIf Return False End Function
Function setFocusedButton(button:TButton) If button <> Null TButton._lastFocus = TButton._currentFocus TButton._currentFocus = button EndIf End Function
Function unfocusButton() TButton._lastFocus = TButton._currentFocus TButton._currentFocus = Null End Function
Function getFocusedButton:TButton() If TButton._currentFocus <> Null Then Return TButton._currentFocus Return Null End Function
Function getLastFocusedButton:TButton() If TButton._lastFocus <> Null Then Return TButton._lastFocus Return Null End Function
|