BlitzBasic Portal Worklogs - [BMax] UI

Tot

Macintosh — Sun, 28 Oct 2012 23:23:02 +0100

Das Projekt ist ja schon seit langem tot,
nur falls es irgend jemanden interessiert gibt es noch die letzte version des codes.

"ui" - https://www.blitzforum.de/upload/file.php?id=12035

Folgende Module und Dateien werden dazu benötigt:
"Visuals" - https://www.blitzforum.de/upload/file.php?id=12036
"StdObject" - https://www.blitzforum.de/upload/file.php?id=12038
"StdGeometry" - https://www.blitzforum.de/upload/file.php?id=12037
(Die Modul-Abhängigkeiten müssen angepasst und durch includes der beiden letzten Dateien ersetzt werden)

(und entschuldigt das 'ausgraben' eines so alten worklogs )

Rotation und Animation

Macintosh — Mon, 27 Jun 2011 03:02:16 +0200

Hey, heute habe ich eine methode hinzugefügt welche eine Animation (StdAnimation) in den Animation-Queue eines views hinzufügt. Die Animationen werden dann der reihe nach abgespielt.
Auserdem siend alle views nun drehbar, was über dem VLayer gehandlet wird, der zusätzlich auch ein "Rotation-handle" hat, was bei allen views in der mitt egesetzt ist.
Die View-kollision (mouseEntered/mouseLeft) wird natürlich auch gedreht richtig berechnet.
Daszu gibt es die neue methode - collidesWithPointRotated(rot, handlex, handly, point) ind StdRect.

:)

Macintosh — Sat, 18 Jun 2011 14:27:59 +0200

Ich habe mal bei mir das system neu istalliert und vergessen den modul-odner von bmax mit zu backupen :'(
Hat jemand noch das zip was es mal zum download __gab__ ? denn dummerweise hatte ich auch vorher das zip aus dem archiev gelöscht

Danke

[EDIT]

Vielen dank nochmal an Xeres, der das Zip noch hatte

Och nöööö :( [gefixt]

Macintosh — Mon, 13 Jun 2011 19:56:34 +0200

Grade habe ich einen riesigen Bug entdeckt. Die z-order bei events wird merkwürdiger wiese total durch einanader gehauen und ich weis nicht warum (
Fixen...
hab grade echt keine Lust auf so einen misst :/ werde wohl ein komplett anders System der events einbauen, so wie es vorerst gedacht war.

[Edit]
Bug gefixt, sollte alles super funktionieren, jetzt

Habe auch mal ein bisschen Performance getestet. Mehr als 1000 View's sollte man nicht verwenden

Bug's Gefixt

Macintosh — Thu, 09 Jun 2011 20:23:26 +0200

Habe heute mal einen der mit der Kollision zwischen Maus und View auftrat behoben. Mir ist bis jetzt kein weiterer Bug bekannt.
Ich habe vertikales Alignement zum "UILabel" view hinzugefügt und "Tick Marks" zum "UISlider".
Schaltet man die tickmarks ein, so rastet der Slider an den Werten ein.
Der Button zeichnet seinen Text nun auch über ein "UIView" was den vorteil bringt das amn den Text einfach alignen kann + Farbe ändern usw.

Fertige Views

Noch geplante Features

Code

Macintosh — Mon, 06 Jun 2011 20:24:12 +0200

Hier mal der Code vom Modul.
Sind noch 3 andere Module dabei, deren Code benötigt wird (nur "abgespeckte" versionen).

https://www.blitzforum.de/upload/file.php?id=10699
Im Ordner "Demo" des Moduls befindet sich das Colorpicker Sample.

Slider und Styles

Macintosh — Sun, 05 Jun 2011 02:28:37 +0200

Es hat sich was getan..
Fenster, Buttons, Slider und Labels sind komplett fertig.
Und es gibt jetzt schon einen Default Style (siehe Bild) der keine Bilder benötigt sondern _alles_
über einfache Zeichenbefehle zeichnet.
Als "Demo" habe ich mal einen einfachen Colorpicker für RGB farben programmiert, und dessen Code Dokumentiert (unten)

Hier der Code des Simplen Demo Programms.
[syntax="bmax"]Import modulo.UI

'Grafik und UI initialisieren.
Graphics(800, 600)
UI.initialize()

'Eine Instanz unseres Controllers erzeugen und die Mthode "init" aufrufen.
Local controllerInstance:MyController = New MyController
controllerInstance.init()

'Mainloop.
Repeat
UI.update()
Flip ; Cls
Until AppTerminate()

Type MyController

'Warum die views in eine Klasse?
'Ganz einfach: Durch das speichern der Views
'in einer klasse können wir von den Methoden der klasse direkt auf die views
'zugreifen.
'Denn wir wollen Globale Variablen vermeiden.
'Außerdem lässt sich die UI so gut "strukturieren", da für jedes Fenster oder ür jeden Abschnitt des programms
'ein eigener "Controller" benutzt werden kann.
Field window:UIWindow
Field sliderR:UISlider
Field sliderG:UISlider
Field sliderB:UISlider
Field labelR:UILabel
Field labelG:UILabel
Field labelB:UILabel
Field colorView:MyColorView

'Hier in der Methode "init" instanziieren wir unsere views
'und setzen Attribute wie Position, Größe, Farbe, ...
Method init()

'Als allererstes erstellen wir ein Fenster.
'Um eine Position und größe für das Fenster fest zu legen erstellen
'wir eine neue Instanz der Klasse "StdRect" mit den Parametern in der Reihnfolge:
' X, Y, Width, Height.
'So wird bei _allen_ views verfahren.
'Diese Position is Relativ zum "Superview"/"Parent".
'Die Zwei anderen Methoden dürften sich von selbst erklären.
'(Unterschied View und Control: Ein view kann selbst auf ereignisse, wie z.B.
'klick und tasten reagieren, aber _keine_ "Actions" an das "Target" senden. Ein Control
'schon. Siehe weiter unten)
window = UIWindow.Create(StdRect.Create(32, 32, 200, 148))
window.setTitle("Color")
window.setMinSize(StdSize.Create(200, 148))

sliderR = UISlider.Create(StdRect.Create(12, 12, 130, 16))
sliderR.setMinValue(0.0)
sliderR.setMaxValue(255.0)
sliderR.setValue(0.0)
sliderR.setAlign(1, 1, 1, 0, 1, 0)
'Wollen wir auf Aktionen des Benutzers an/auf einem View reagieren, so müssen
'wir unseren "Controller" als target der Aktion setzen.
'Dies geschieht mit der Methode "setTarget", die Alle Subklassen von
'"UIControl" besitzen, nicht aber Views, wie z.B. "UIWindow".
'In diesem fall setzen wir _diesen_ controller als "Target" des Views.
sliderR.setTarget(Self)
'mit "setAction" übergeben wir unserem Control die methode die es bei einer
'Interaktion aufrufen soll.
'Die methode wird über "Reflection" in dem _vorher_ gesetztem "Target" gesucht
'und zwischengespeichert.
'Somit ist dies kaum langsamer als ein normaler Methoden-aufruf.
sliderR.setAction("actionR")
'Wollen wir das unsere "Action" durchgängig währen der Interaktion aufgerufen wird,
'so können wir dies mit der Methode "setContinuously" einstellen.
'(Default ist False)
'Bei False wird die "Action" bei den meisten Views's nur bei einem loslassen der Linken
'Maustaste aufgerufen.
'Doch die Reaktion unterscheidet sich von View zu View
'Diese "Prozedur" wiederholen wir bei allen unseren Slidern, mit den jeweiligen "Action - Methoden".
sliderR.setContinuously(True)

sliderG = UISlider.Create(StdRect.Create(12, 36, 130, 16))
sliderG.setMinValue(0.0)
sliderG.setMaxValue(255.0)
sliderG.setValue(0.0)
sliderG.setAlign(1, 1, 1, 0, 1, 0)
sliderG.setTarget(Self)
sliderG.setAction("actionG")
sliderG.setContinuously(True)

sliderB = UISlider.Create(StdRect.Create(12, 60, 130, 16))
sliderB.setMinValue(0.0)
sliderB.setMaxValue(255.0)
sliderB.setValue(0.0)
sliderB.setAlign(1, 1, 1, 0, 1, 0)
sliderB.setTarget(Self)
sliderB.setAction("actionB")
sliderB.setContinuously(True)

labelR = UILabel.Create(StdRect.Create(138, 12, 50, 16))
labelR.setTextAlign(UIAlignRight)
labelR.setTextColor(VColor.Create(0.3, 0.3, 0.3, 1.0))
labelR.setText("0")
labelR.setAlign(0, 1, 1, 0, 0, 0)

labelG = UILabel.Create(StdRect.Create(138, 36, 50, 16))
labelG.setTextAlign(UIAlignRight)
labelG.setTextColor(VColor.Create(0.3, 0.3, 0.3, 1.0))
labelG.setText("0")
labelG.setAlign(0, 1, 1, 0, 0, 0)

labelB = UILabel.Create(StdRect.Create(138, 60, 50, 16))
labelB.setTextAlign(UIAlignRight)
labelB.setTextColor(VColor.Create(0.3, 0.3, 0.3, 1.0))
labelB.setText("0")
labelB.setAlign(0, 1, 1, 0, 0, 0)

colorView = MyColorView.Create(StdRect.Create(12, 84, 130, 32))
colorView.setAlign(1, 1, 1, 1, 1, 1)
colorView.r = 0
colorView.g = 0
colorView.b = 0

'Um das Fenster und die anderen Views an zu zeigen müssen wir sie
'einem anderen View als "Child" oder auch "Subview" hinzufügen.
'Doch was mit dem Fenster?
'Ein View das kein "Superview"/"Parent" haben soll wird mit der funktion "addSubview"
'der Klasse UI dem so genannten "Nullview", einem unsichtbaren view, hinzugefügt.
'Jedes view bitet die Methode "addSubview" mit der sich ein view hinzufügen lässt.
'Wir fügen das Fenster dem "Nullview" an und die Slider und Labels dem Fenster.
UI.addSubview(window)
window.addSubview(sliderR)
window.addSubview(sliderG)
window.addSubview(sliderB)
window.addSubview(labelR)
window.addSubview(labelG)
window.addSubview(labelB)
window.addSubview(colorView)
EndMethod

'-------
'actions
'-------

'Diese "Action" wird aufgerufen wenn "sliderR"
'bewegt wird. Als parameter übergibt sich der Slider selbst.
'(Der parameter muss "UIView" oder eine Subklasse sein)
Method actionR( sender:UISlider )
'Wir nehmen uns den aktuellen Wert des Sliders und
'setzen ihn als Text in "labelR".
'(in diesem fall zu "int" casten, da ein "UISlider" immer
'einen float als wert zurückgibt)
labelR.setText(Int(sender.getValue()))
'Hier setzen wir für unser eigenes view auch noch den Rotateil (siehe unten).
colorView.r = sender.getValue()
EndMethod

'Und nun das selbe für die anderen Zwei Slider.
'(praktischer weise könnte man auch Eine Methode
'für alle Drei Slider verwenden, was ich aber aus
'"Demonstrationszwecken" nicht tue)
Method actionG( sender:UISlider )
labelG.setText(Int(sender.getValue()))
colorView.g = sender.getValue()
EndMethod

Method actionB( sender:UISlider )
labelB.setText(Int(sender.getValue()))
colorView.b = sender.getValue()
EndMethod

EndType

'Wir brauchen ein View um unsere eingestellte Farbe anzuzeigen!
'Doch das Modul bietet ein solchen View standardmäßig nicht, was nun?
'Wir erstellen eine neue Subklasse von "UIView"
'Unser view Soll ein Rechteck in einer einstellbaren Farbe darstellen.
Type MyColorView Extends UIView

Field r:Int
Field g:Int
Field b:Int

'Mit der Funktion "Create" soll man ein neues "MyColorView" erstellen können.
'Dazu übergibt man ein Rechteck. Den Frame.
'Wie auch bei allen anderen Views des Moduls.
Function Create:MyColorView( frame_:StdRect )
Local ret_:MyColorView = New MyColorView
ret_.initWithFrame(frame_)
Return ret_
EndFunction

'initWithFrame? Ja, in dieser Methode wird das View initialisiert.
'da UIView diese Methode deffiniert, sollten wir diese bei unserer Superklasse auch aufrufen
Method initWithFrame( frame_:StdRect )
Super.initWithFrame(frame_)

r = 0
g = 0
b = 0
EndMethod

'So, nun zum zeichnen des Views.
'Jedes view zeichnet sich in seinem "Layer" (glMatrix).
'Man kann daher jedes View Drehen, Skallieren, usw.
'Doch all das passiert automatisch in UIView, so das wir nurnoch die Methode "render" überschreiben müssen.
Method render()
'Die Koordinaten werden so transliert, das wir bei (0;0) anfangen können.
'Die absolute Breite des Views bekommen wir über den Absoluten frame mit "getAbsoluteFrame".
'Diese Nethode liefert ein "StdRect" zurück, welches ein Size, "StdSize" Feld enthält.
'Wir zeichnen also unser Rechteck in unserer Farbe über das ganze View.
SetColor(r, g, b)
DrawRect(0, 0, getAbsoluteFrame().size.width, getAbsoluteFrame().size.height)
EndMethod

EndType[/syntax]

Anfang

Macintosh — Mon, 30 May 2011 21:12:50 +0200

Hey, da ich bisher kein meinen Vorstellungen entsprechendes ingame UI Modul oder dergleichen für BlitzMax gefunden habe, hatte ich mir überlegt etwas eigenes zu schreiben.
Das Modul ist auch schon relativ vorangeschritten.

Die UI ist relativ einfach gebaut, die "Gadgetklasse" (UIView) hat jeweils ein Superview (Parent) und eine liste von Subview's (Children). Wird ein neues event wie z.B. Mausklick-links an die UI gesendet so wird das in der Z-Order am höchsten liegende an der Maus-position gesucht und ihm wird die Nachricht geschickt.
Alle View's die eine Aktion senden sollen/können wie z.B. ein Button, erben von UIControl.
Das aufrufen der Aktion läuft nicht über eine "Callback" Funktion sondern über ein "TMethod-Object" was im vor raus gesucht und zwischengespeichert ist. Für jedes Control auf das reagiert werden soll muss daher ein "Target" gesetzt werden -> MVC.
Ausserdem besitzen View's die Möglichkeit ein "Delgate" zugewiesen zu bekommen. Und dem entsprechen Delegate-methoden aufzurufen.

Jedes View zeichnet in seinen eigenen "Layer", daher kann es ganz einfach gedreht oder skaliert usw. werden.
Zudem ist "Clipping" an-/ausschaltbar.
Alignement ist auch vollständig (mit "Autosizing") implimentiert.

Noch ein Bildchen (Andere View's ausser Fenster und Button sind noch nicht programmiert)

(Die Farbverläufe sind natürlich keine Bilder )

ToDo:
• Relatives Alignment fixen
• Styles implimentieren
• animationen implimentieren