Growbook, Cannabis, Notizbuch, Growbuch, Pflanzenzucht, Samenbank, Seedbank, Software, Stammbaum, Kreuzen, züchten,growen,anbauen,News,GIB,Lux,Omega,Mars, Dünger,BioBizz,Hesi,Athena,
die Software für deinen Anbau

Willkommen

Tutorial 4: Panels

Im vorhergehenden Tutorial behandelten wir die Buttons. In diesem Tutorial werden wir ein schwierigeres MaxGUI-Gadget anschauen, die Panels.

Zum Panel erstellen benutzen wir die CreatePanel-Funktion mit folgender Syntax:

Function CreatePanel:TGadget(x,y,w,h,group:TGadget,style=0,title$="")


Lass uns sehen, wie das einfachste Panel aussieht.

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel-Beispiel", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(5,5,200,200, MyWindow)

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Nicht sehr überraschend, wie du unten sehen kannst. Eigentlich schaut es genau gleich aus wie in unserem ersten Tutorial über CreateWindow.

    Tut4 1


Ein Panel kann drei Styles haben:

Konstante Bedeutung
PANEL_BORDER Das Panel ist mit einem Rand gezeichnet
PANEL_ACTIVE Das Panel generiert Mausevents
PANEL_GROUP Das Panel ist mit einem Text und einem viereckigen Rand gezeichnet


Lass uns einen Rand um das Panel ziehen, indem wir den PANEL_BORDER Style benutzen.

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel-Beispiel mit Rand", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(60,5,180,155, MyWindow, PANEL_BORDER)

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Jetzt hat unser Panel einen 3D-Rand.

    Tut4 2


Der nächste Style, PANEL_GROUP, erlaubt uns einen Namen auf unserem Panel anzuzeigen.

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel-Beispiel mit Rand", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(60,5,180,155, MyWindow, PANEL_GROUP, "Meine Gruppe")

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Das Panel hat jetzt einen hübschen Rahmen und oben links einen Namen.

    Tut4 3


Abgesehen dass Panels unsere Fenster schöner machen, haben sie auch einen andern Nutzen. Das Gruppieren von Radiobuttons ist einer davon.
Lass uns unser Radiobutton-Beispiel vom vorherigen Tutorial nochmals benutzen, jetzt aus einem anderen Grund.

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel-Tutorial", 200,200,320,240)

Local Label0:TGadget=CreateLabel("Bevorzugte Sprache für 2D und 3D?",80,10,300,20, MyWindow)
Local Radio1:TGadget=CreateButton("Blitz2D",120,40,100,20, MyWindow,BUTTON_RADIO)
Local Radio2:TGadget=CreateButton("BlitzMax",120,60,100,20, MyWindow,BUTTON_RADIO)
Local Radio3:TGadget=CreateButton("Blitz3D",120,80,100,20, MyWindow,BUTTON_RADIO)
Local Radio4:TGadget=CreateButton("BlitzMax mit Irrlicht",120,100,140,20, MyWindow,BUTTON_RADIO)

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Das Problem hier ist, dass wir nur einen Radiobutton von den vier auswählen können. Wie können wir machen, dass der Benutzer seine favorisierte 2D und 3D-Sprache auswählen kann?

    Tut4 4


Hier ist es, wo uns die Panels entgegen kommen. Unser Programm kann wie folgt umgeschrieben werden:

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Wähle deine bevorzugte Sprache aus", 200,200,320,240)

Local Panel2D:TGadget=CreatePanel(70,10,200,70, MyWindow, PANEL_GROUP, "2D")
Local Radio1:TGadget=CreateButton("Blitz2D",1,1,100,20, Panel2D,BUTTON_RADIO)
Local Radio2:TGadget=CreateButton("BlitzMax",1,22,100,20, Panel2D,BUTTON_RADIO)

Local Panel3D:TGadget=CreatePanel(70,82,200,70, MyWindow, PANEL_GROUP, "3D")
Local Radio3:TGadget=CreateButton("Blitz3D",1,1,100,20, Panel3D,BUTTON_RADIO)
Local Radio4:TGadget=CreateButton("BlitzMax mit Irrlicht",1,22,140,20, Panel3D,BUTTON_RADIO)

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Jetzt können wir sehen, dass die Panels uns erlauben, für jede Gruppe eine Antwort auszuwählen.

    Tut4 5


Bevor wir zum letzten Style, PANEL_ACTIVE, übergehen, lass und eine andere interessante Fähigkeit von Panels erforschen. Ich meine damit das ändern der Hintergrundfarbe und das setzten eines Hintergrundbildes.

Lass uns mit dem Ändern der Hintergrundfarbe beginnen.

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel mit Hintergrundfarbe", 200,200,320,240)
Local Panel2D:TGadget=CreatePanel(70,40,200,70, MyWindow)
SetPanelColor Panel2D, 1,81,107

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Wenn du dieses Programm ausführst, solltest du das folgende bekommen:

    Tut4 6


Wie du sehen kannst, haben wir infolge von SetPanelColor nun ein farbiges Panel. Die Parameter für SetPanelColor sind

  • Der Name des Panels, das farbig werden soll
  • Der RGB-Wert der Farbe. Wenn du nicht weisst was das ist, experimentiere mit 3 Zahlen zwischen 0 und 255 => probiere 255,255,255 oder 0,0,0 oder 200,154,0 etc.

Die Syntax ist:

Function SetPanelColor( panel:TGadget,r,g,b )


Ein interessanteres Feature ist die SetPanelPixmap-Funktion. Anstatt einer Hintergrundfarbe kann man ein Hintergrundbild setzen. Die Syntax sieht so aus:

Function SetPanelPixmap( panel:TGadget,pixmap:TPixmap,flags=PANELPIXMAP_TILE)


Lass uns an einem simplen Beispiel ausprobieren, wie es aussehen würde:

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel mit Hintergrundbild", 200,200,320,240)
Local Panel2D:TGadget=CreatePanel(70,40,200,70, MyWindow)

Local image:TPixmap=LoadPixmap("D:My Documents on E_TutorialsB-max.png")
SetPanelPixmap Panel2D, image


Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Jetzt zeigt unser Panel ein sich wiederholendes BlitzMax-Logo an.


    Tut4 7

    Local image:TPixmap=LoadPixmap("D:My Documents on E_TutorialsB-max.png")


Die obige Codezeile lädt ein Bild von einer Datei. Du musst deinen eigenen Bildpfad angeben, dass dieses Beispiel funktioniert. Sonst bekommst du nur ein leeres Panel mit keinem Bild drin.

Die SetPanelPixmap funktion hat verschiedene Flags um das zu beeinflussen, was wir vorhin gesehen haben:

Konstante Bedeutung
PANELPIXMAP_TILE Das Bild wird wiederholt. (Standard)
PANELPIXMAP_CENTER Das Bild wird in der Mitte des Panels angezeigt.
PANELPIXMAP_FIT Das Bild wird skaliert, um am Besten in das Panel zu passen.
PANELPIXMAP_STRETCH Das Bild wird gestreckt, um das Panel auszufüllen.


Der TILE-Style ist der normalerweise eingeschaltete Style. Dieser Style arbeitet so, wie man es auch manchmal auf Webseiten sehen kann. Lass uns sehen wie der STRETCH-Style aussehen würde:

   

SuperStrict
Import MaxGui.Driver


Local MyWindow:TGadget=CreateWindow("Panel mit Hintergrundbild", 200,200,320,240)
Local Panel2D:TGadget=CreatePanel(70,40,200,70, MyWindow)

Local image:TPixmap=LoadPixmap("D:My Documents on E_TutorialsB-max.png")
SetPanelPixmap Panel2D, image, PANELPIXMAP_STRETCH


Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
Forever


Unser BlitzMax-Logo ist nun gestreckt um das Panel auszufüllen.

    Tut4 8


Ich will es als deine Übung belassen, dass du ausprobierst, wie die anderen Styles arbeiten.

Zum Schluss...

Das ist das Ende dieses Tutorials. Im Nächsten, werden wir die Mausevents behandeln, den Style PANEL_ACTIVE von CreatePanel.

So, bevor wir dieses Tutorial abschliessen, lass uns nochmals überdenken, was wir gelernt haben.

  • Panels sind Gadgets, die uns erlauben unsere Gadgets zu gruppieren
  • Panels können einen Rand, eine Hintergrundfarbe oder ein Hintergrundbild haben

Das Tollste an den Panels ist, ihre Fähigkeit Mausevents auszulösen, was wir als nächstes behandeln.