GUI Tutorial für Anfänger
Vorwort:
Hallo, da ich schon seit längerem an einigen GUI Elementen arbeite, kommt nun ein Tutorial, dass zum einen
für die ist, die ihre eigenen GUI Elemente machen wollen. Zum anderen will ich sehen, ob mein gesammeltes
Wissen für ein Tutorial ausreicht.
-----------------------------------------------------------------------------------------------------------------------------------
Button:
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN]
SuperStrict
Global GW:Short, GH:Short Global MX:Short, MY:Short, MH1:Byte
GW = 800 GH = 600 Graphics GW, GH, 0, 60 SetClsColor 60, 60, 60
Repeat
Cls MX = MouseX() MY = MouseY() MH1= MouseHit(1)
If Button("Button 1", 50, 100) Then Print "Button 1 wurde gedrückt :'(" If Button("Button 2", 50, 150) Then Print "Button 2 wurde gedrückt " Flip Until AppTerminate() Or KeyDown(KEY_Escape) End
Function Button:Byte(txt:String, X:Short, Y:Short) Local Width :Short, Height :Byte Local txtWidth:Short, txtHeight:Byte Local txtSpaceW:Byte, txtSpaceH:Byte Local Feedback :Byte
txtWidth = TextWidth (txt) txtHeight = TextHeight(txt) txtSpaceW = 20 txtSpaceH = 6 Width = txtWidth + txtSpaceW Height = txtHeight + txtSpaceH
SetColor 178, 34 , 34 DrawRect X, Y, Width, Height
If MH1 Then If MX > X And MX < ( X + Width ) Then If MY > Y And MY < ( Y + Height ) Then SetColor 139, 0, 0 DrawRect X + Width * 0.05, Y + Height * 0.05 , Width * 0.9, Height * 0.9 Feedback = 1 EndIf EndIf EndIf SetColor 255 ,255 , 255 DrawText txt, X + txtSpaceW / 2, Y + txtSpaceH / 2
Return Feedback End Function
-----------------------------------------------------------------------------------------------------------------------------------
CheckBox
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] SuperStrict
Global GW:Short, GH:Short Global MX:Short, MY:Short, MH1:Byte Global CheckBoxList :TList = New TList Global CheckBoxCount:Byte
Type TCheckBox Field active:Byte Field ID:String Method New:TCheckBox() CheckBoxCount = CheckBoxCount + 1 End Method End Type Global Box:TCheckBox
GW = 800 GH = 600 Graphics GW, GH, 0, 60 SetClsColor 60, 60, 60
Repeat Cls MX = MouseX() MY = MouseY() MH1= MouseHit(1)
If CheckBox( 50, 100 ) Then Print "CheckBox 1" If CheckBox( 50, 150 ) Then Print "CheckBox 2" If CheckBox( 50, 200 ) Then Print "CheckBox 3" If CheckBox( 50, 250 ) Then Print "CheckBox 4" If CheckBox( 50, 300 ) Then Print "CheckBox 5" Flip Until AppTerminate() Or KeyDown(KEY_Escape) End
Function CheckBox:Byte(X:Short, Y:Short) Local Dimension:Byte = 30, ID:String Local Varification:Byte, Feedback:Byte
ID = String(X) + String(Y)
If Box:TCheckBox = Null Then Box:TCheckBox = New TCheckBox ListAddLast( CheckBoxList, Box ) Box.ID = ID Else For Box:TCheckBox = EachIn CheckBoxList If Box.ID = ID Then Exit Varification = Varification + 1 Next If Varification = CheckBoxCount Then Box:TCheckBox = New TCheckBox ListAddLast( CheckBoxList, Box ) Box.ID = ID EndIf EndIf SetColor 255, 255, 255 DrawRect X , Y , Dimension / 10, Dimension DrawRect X + Dimension - Dimension / 10, Y , Dimension / 10, Dimension DrawRect X , Y , Dimension , Dimension / 10 DrawRect X , Y + Dimension - Dimension / 10, Dimension , Dimension / 10
If MH1 Then If MX > X And MX < X + Dimension If MY > Y And MY < Y + Dimension Box.active = Not Box.active EndIf EndIf EndIf
If Box.active Then SetLineWidth Dimension / 10 DrawLine X + Dimension / 5, Y + Dimension / 5, X + Dimension - Dimension / 5, Y + Dimension - Dimension / 5 DrawLine X + Dimension / 5, Y + Dimension - Dimension / 5, X + Dimension - Dimension / 5, Y + Dimension / 5 SetLineWidth 1 Feedback = 1 EndIf Return Feedback End Function
Rem * Und jetzt kommt der Grund dafür, wieso ich Variablen für MouseX() usw. verwende (wenn man mal von der Gewohnheit absieht . Dazu solltest du die Zeile:
MH1= MouseHit(1)
... auskommentieren und folgendes ändern:
If MouseHit(1) Then If MX > X And MX < X + Dimension If MY > Y And MY < Y + Dimension Box.active = Not Box.active EndIf EndIf EndIf
Wenn du das getan hast und das Programm ausführst, wird dir sicherlich schnell auffallen, dass nur eine CheckBox mit einem Kreuz versehen werden kann. Jetzt könntest du auch noch die Zeile MH1 = MouseHit(1) wieder reinpacken, den Kollisionsteil aber beibehalten. In dem Fall kann man nämlich keine CheckBox mehr aktivieren.
Ja, die Schuld liegt bei MouseHit(1). Benutzt man diese Funktion, so wird nur der erste Klick erkannt. Für weitere Informationen: https://www.blitzforum.de/forum/viewtopic.php?p=253180#253180
Und das wars mit der CheckBox :)
-----------------------------------------------------------------------------------------------------------------------------------
Radiobox
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN]
SuperStrict
Global GW:Short, GH:Short Global MX:Short, MY:Short, MH1:Byte
Global RadioBoxList:TList = New TList Global RadioBoxCount:Byte
Type TRadioBox Field active:Byte Field ID:String Field Group:Byte Method New:TRadioBox() RadioBoxCount = RadioBoxCount + 1 End Method End Type Global Radio:TRadioBox
GW = 800 GH = 600 Graphics GW, GH, 0, 60 SetClsColor 60, 60, 60
Repeat Cls MX = MouseX() MY = MouseY() MH1= MouseHit(1) If RadioBox(100, 50 ) Then Print "RadioBox 1 | Gruppe 0" If RadioBox(100, 100 ) Then Print "RadioBox 2 | Gruppe 0" If RadioBox(100, 150 ) Then Print "RadioBox 3 | Gruppe 0" If RadioBox(100, 200 ) Then Print "RadioBox 4 | Gruppe 0" If RadioBox(200, 50, 1) Then Print "RadioBox 1 | Gruppe 1" If RadioBox(200, 100, 1) Then Print "RadioBox 2 | Gruppe 1" If RadioBox(200, 150, 1) Then Print "RadioBox 3 | Gruppe 1" If RadioBox(200, 200, 1) Then Print "RadioBox 4 | Gruppe 1" Flip Until AppTerminate() Or KeyDown(KEY_Escape) End
Function RadioBox:Byte(X:Short, Y:Short, Group:Byte = 0) Local Dimension:Byte = 30, ID:String Local Varification: Byte, Feedback:Byte Local Red:Int, Green:Int, Blue:Int ID = String (X) + String (Y) If Radio:TRadioBox = Null Then Radio:TRadioBox = New TRadioBox ListAddLast( RadioBoxList, Radio ) Radio.ID = ID Radio.Group = Group Else For Radio:TRadioBox = EachIn RadioBoxList If Radio.ID = ID Then Exit Varification = Varification + 1 Next If Varification = RadioBoxCount Then Radio:TRadioBox = New TRadioBox ListAddLast( RadioBoxList, Radio ) Radio.ID = ID Radio.Group = Group EndIf EndIf SetColor 255, 255, 255 DrawOval X, Y, Dimension, Dimension
GetClsColor( Red, Green, Blue ) SetColor Red, Green, Blue DrawOval X + Dimension / 10, Y + Dimension / 10, Dimension - Dimension / 5, Dimension - Dimension / 5
If MH1 Then If Sqr( (MX - X - Dimension / 2 ) * ( MX - X - Dimension / 2) + (MY - Y - Dimension / 2) * ( MY - Y - Dimension / 2) ) < Dimension / 2 Then Radio.active = Not Radio.active EndIf EndIf
If Radio.active Then SetColor 255, 255, 255 DrawOval X + Dimension / 5, Y + Dimension / 5, Dimension - Dimension / 2.5, Dimension - Dimension / 2.5 Feedback = 1 For Radio:TRadioBox = EachIn RadioBoxList If Radio.ID <> ID Then If Radio.Group = Group Then Radio.active = 0 EndIf EndIf Next EndIf Return Feedback End Function
-----------------------------------------------------------------------------------------------------------------------------------
DropDown Menu
BlitzMax: [AUSKLAPPEN] [EINKLAPPEN] SuperStrict
Global GW:Short, GH:Short Global MX:Short, MY:Short, MH1:Byte
Global DropDownList:TList = New TList Global DropDownCount:Byte
Type TDropDownMenu Field active: Byte Field Text: String Field Chosen: Byte Field ActualText:String Method New:TDropDownMenu() DropDownCount = DropDownCount + 1 End Method End Type Global DropDown:TDropDownMenu
GW = 800 GH = 600 Graphics GW, GH, 0, 60 SetClsColor 60, 60, 60
Repeat Cls MX = MouseX() MY = MouseY() MH1= MouseHit(1)
Select DropDownMenu (" 1; 2; 3; 4; 5", 50, 50) Case 1 Print 1 Case 2 Print 2 Case 3 Print 3 Case 4 Print 4 Case 5 Print 5 End Select Select DropDownMenu (" 6; 7; 8; 9;10",250, 50) Case 1 Print 6 Case 2 Print 7 Case 3 Print 8 Case 4 Print 9 Case 5 Print 10 End Select Select DropDownMenu ("Hallo;Hallo2;...",450, 50) Case 1 Print "Hallo" Case 2 Print "Hallo2" Case 3 Print "..." End Select Flip Until AppTerminate() Or KeyDown(KEY_Escape) End
Function LetterCount:Byte(txt:String, Letter:String) Local Lenght:Byte, Count:Byte, LetterT:String Lenght = Len(txt) For Local i:Byte = 0 To Lenght LetterT = Mid(txt, i, 1) If LetterT = Letter Then Count = Count + 1 EndIf Next Return Count End Function
Function DropDownMenu:Byte ( txt:String, X:Short, Y:Short ) Local Width: Short, Height: Byte
Local Text: String
Local SecondPoint: Byte, WordCount: Byte, WordPoint: Byte Local Varification:Byte If DropDown:TDropDownMenu = Null Then DropDown = New TDropDownMenu ListAddLast( DropDownList, DropDown ) DropDown.Text = txt Else For DropDown:TDropDownMenu = EachIn DropDownList If DropDown.Text = txt Then Exit Varification = Varification + 1 Next If Varification = DropDownCount Then DropDown:TDropDownMenu = New TDropDownMenu ListAddLast( DropDownList, DropDown ) DropDown.Text = txt EndIf EndIf Width = 150 Height = 30 SetColor 255, 255, 255 DrawRect X, Y, Width, Height SetColor 0, 0, 0 DrawRect X + Width * 0.05, Y + Height * 0.05, Width - Width * 0.1 , Height - Height * 0.1 SetColor 255, 255, 255 DrawRect X + Width, Y, Height, Height SetColor 0, 0, 0 DrawRect X + Width, Y + Height * 0.05, Height - Height * 0.1, Height - Height * 0.1 If MH1 Then If MX > X + Width And MX < X + Width + Height If MY > Y And MY < Y + Height DropDown.active = Not DropDown.active EndIf EndIf EndIf If DropDown.active Then WordCount = LetterCount ( txt, ";" ) If MH1 Then If MX > X And MX < X + Width + Height Then If MY > Y + Height And MY < Y + Height + (WordCount + 1) * TextHeight(txt) Then DropDown.Chosen = ( MY - Y - Height - Height / 5) / TextHeight(txt) + 1 DropDown.active = Not DropDown.active EndIf EndIf EndIf SetColor 255, 255, 255 DrawRect X, Y + Height, Width + Height, 300 SetColor 0, 0, 0 DrawRect X + Height / 10, Y + Height * 1.1, Width + Height - Height / 5, 300 - Height / 5 txt = ";" + txt For Local i:Byte = 0 To WordCount WordPoint = Instr(txt,";", SecondPoint) SecondPoint = Instr(txt,";", WordPoint + 1) Text = Mid( txt, WordPoint + 1, SecondPoint - 1 - WordPoint ) SetColor 255, 255, 255 DrawText Text, X + Width / 10, Y + Height + Height / 5 + TextHeight(txt) * i If i = DropDown.Chosen - 1 Then DropDown.ActualText = Text EndIf Next EndIf SetColor 255, 255, 255 DrawText DropDown.ActualText, X + (Width - TextWidth(DropDown.ActualText)) / 2, Y + (Height - TextHeight(DropDown.ActualText)) / 2 Return DropDown.Chosen End Function
-----------------------------------------------------------------------------------------------------------------------------------
InputBox
mfG Seven
|