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 5: Panels und Mausevents

Im vorherigen Tutorial haben wir Panels mit ihren verschiedenen Styles behandelt, ausser den PANEL_ACTIVE-Style. In diesem Tutorial werden wir dies nachholen und uns selbst in die Mausevents einführen.

Zum Sicherstellen dass das Programm wie gezeigt mit den Bildern läuft, lade die 3 Bilder unten auf deine Harddisk herunter und füge den richtigen Pfad und Dateinamen im Code ein.

 Button 1 Button 2
Button 3


Lass uns zuerst ein Panel mit einem Hintergrundbild erstellen, um einen Button zu simulieren.

   

SuperStrict

Import MaxGui.Driver

Local MyWindow:TGadget=CreateWindow("Panel-Beispiel", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(110,30,80,80, MyWindow)
Local image:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_1.jpg")

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
   End Select
  SetPanelPixmap MyPanel, image, PANELPIXMAP_CENTER
Forever


Wir haben nun einen Button in unserem Fenster, aber er macht im Moment noch nichts.

    Tut5 1


Lass uns ein paar Rüben mehr in unseren Code einfügen (fetter Text), es wird ein bisschen harrig aussehen, aber vertraue mir, ich werde dir Zeile um Zeile erklären.

   

SuperStrict

Import MaxGui.Driver

Local MyWindow:TGadget=CreateWindow("Panel-Beispiel", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(110,30,80,80, MyWindow, PANEL_ACTIVE)
Local image1:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_1.jpg")
Local image2:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_2.jpg")
Local image:TPixmap = image1

Repeat
  WaitEvent()
  Select EventID()

  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_MOUSEENTER
     image=image2
  Case EVENT_MOUSELEAVE
     image=image1
   End Select
  SetPanelPixmap MyPanel, image, PANELPIXMAP_CENTER
Forever


Wenn du jetzt den obenstehenden Code ausführst und mit der Maus über den Button fährst, siehst du den Rollover-Effekt.

    Tut5 2
Tut5 4


Jetzt lass uns sehen, wie dieser Effekt erreicht wurde.

   

SuperStrict

Import MaxGui.Driver

Local MyWindow:TGadget=CreateWindow("
Panel-Beispiel", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(110,30,80,80, MyWindow, PANEL_ACTIVE)


Hoffentlich bist du jetzt vertraut mit den ersten beiden Codezeilen.

Die dritte Linie ist eine der Interessanteren, besonders das PANEL_ACTIVE-Flag, das gesetzt sein muss. Der Rest besteht aus den normalen CreatePanel-Parameter.

    Local image1:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_1.jpg")
Local image2:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_2.jpg")


Die beiden Linien oben laden die Bilder, die wir als unsere Buttons benutzen wollen. Das wird gemacht mit der Blitzmaxfunktion LoadPixmap. Diese Funktion lädt unsere Bilder als Pixmap-Objekte in den Speicher.

Die LoadPixmap-Funktion erlaubt uns den Speicherplatz zu wissen, wo unser Bild zwischengespeichert ist. Wir müssen hier sehr spezifisch sein.

   
Local image:TPixmap = image1


Diese Zeile definiert eine Variable image vom Type Pixmap. Diese Variable können wir später bei SetPanelPixmap benutzen.

   
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_MOUSEENTER
     image=image2
  Case EVENT_MOUSELEAVE
     image=image1
   End Select


Unser "Select EventID()" reagiert jetzt auf 2 Mausevents,
EVENT_MOUSEENTER und EVENT_MOUSELEAVE.

Diese Events werden werden von MaxGUI gesendet, wenn die Maus in unser Panel "fährt" oder wieder "hinausgeht". Case überprüft dann, welcher Event gesendet wurde, und verbindet das benötigte Bild mit unserer image-Variable.

Und zum Schluss zeigt SetPanelPixmap das Bild auf unserem Panel an. Das ruft den Rollover-Effekt hervor.

      SetPanelPixmap MyPanel, image, PANELPIXMAP_CENTER


Beachte, dass du eher den PANELPIXMAP_CENTER-Style benutzen solltest, um das gewünschte Aussehen zu erreichen.

Zum Kompletieren unseres Tutorials fügen wir noch ein bisschen Code hinzu (fetter Text), um den Mausklick-Effekt zu erreichen.

   

SuperStrict

Import MaxGui.Driver

Local MyWindow:TGadget=CreateWindow("
Panel-Beispiel", 200,200,320,240)
Local MyPanel:TGadget=CreatePanel(110,30,80,80, MyWindow, PANEL_ACTIVE)
Local image1:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_1.jpg")
Local image2:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_2.jpg")
Local image3:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_3.jpg")
Local image:TPixmap = image1

Repeat
  WaitEvent()
  Select EventID()

  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_MOUSEENTER, EVENT_MOUSEUP
     image=image2
  Case EVENT_MOUSELEAVE
     image=image1
  Case EVENT_MOUSEDOWN
     image=image3

   End Select
  SetPanelPixmap MyPanel, image, PANELPIXMAP_CENTER
Forever


Kopiere das Programm, führe es aus, und klicke auf den Button. Du solltest nun den Mausklick-Effekt auf dem Button sehen. Im obigen Code wirst du sehen, dass wir ein drittes Bild (vom gedrückten Button) zu unserer Kollektion hinzugefügt haben.

Wir überprüfen dann die MOUSEUP und MOUSEDOWN Events und verknüpfen das benötigte Bild mit unserer Variable et voilà, wir haben unseren gewünschten Effekt.

Das PANEL_ACTIVE-Flag in unserer CreatePanel-Funktion erlaubt unserem Panel folgende Events zu detektieren:

EVENT_MOUSEDOWN Mausbutton gedrückt. EventData enthält den Buttoncode
EVENT_MOUSEUP Mausbutton losgelassen. EventData enthält den Buttoncode
EVENT_MOUSEMOVE Maus wurde bewegt. EventX und EventY enthalten die Mauskoordinaten
EVENT_MOUSEWHEEL Mausrad gedreht. EventData enthält Anzahl "Klicks"
EVENT_MOUSEENTER Maus kommt ins Panel
EVENT_MOUSELEAVE Maus hat Panel verlassen
EVENT_KEYDOWN Taste gedrückt. EventData enthält den Tastencode
EVENT_KEYUP Taste losgelassen. EventData enthält den Tastencode
EVENT_KEYCHAR Zeichen eingegeben. EventData enthält den UNICODE


In diesem Tutorial haben wir nur den MOUSE_DOWN, MOUSE_UP, MOUSE_LEAVE und MOUSE_ENTER Event benutzt. Die anderen werden wir in den nächsten Tutorials benützen.

Zum Schluss...

Zum errinnern was wir in diesem Tutorial gelernt haben.

  • Setzen des PANEL_ACTIVE-Flag erlaubt uns Events zu empfangen, die von unserem Panel gesendet wurden.
  • Zusammen mit SetPanelPixmap und LoadPixmap können wir BilderButtons in unserem MaxGUI-Programm benutzen; eine Funktion die im Funktionsumfang von MaxGUI fehlt.