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 13: Sliders und Scrollbars

The MaxGUI Beginner Tutorial Series - Tutorial 13:  Sliders und Scrollbars
(c) Assari Dec 28 2005
Ins Deutsche übersetzt von simi

In diesem Tutorial werden wir Slider behandeln, ein anderer oft gebrauchter Gadget in modernen GUIs.

Lass uns mit einem einfachen MaxGUI-Programm starten, dass die Funktion von Slidern demonstriert:

    SuperStrict
Import MaxGui.Driver
Local MyWindow:TGadget=CreateWindow("Slider-Beispiel", 200,200,320,240)
Local MySlider:TGadget=CreateSlider(10,10,20,140,MyWindow)

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


Eine vertikale Scrollbar wird nun angezeigt. Sie wurde mit CreateSlider erstellt. Sie tut nicht viel, man kann aber sie aber nach oben und unten bewegen.

    Tut13 1


Die CreateSlider-Funktion hat folgende Syntax:

Function CreateSlider:TGadget(x,y,w,h,group:TGadget,style=0)


Gemäss der MaxGUI-Hilfe, kann ein Slider folgende Styles haben:

Constant Meaning
SLIDER_HORIZONTAL Der Slider kann nach links und rechts bewegt werden.
SLIDER_VERTICAL Der Slider kann nach oben und unten bewegt werden.
SLIDER_SCROLLBAR Der Slider hat einen einstellbaren "Griff".
SLIDER_TRACKBAR Der Slider hat einen festen (uneinstellbaren) "Griff".
SLIDER_STEPPER Der Slider hat keinen Griff, nur zwei Buttons.


SLIDER_TRACKBAR

Lass uns jeden Style einzeln anschauen. Beginnen wir mit dem SLIDER_TRACKBAR-Style.

    SuperStrict
Import MaxGui.Driver
Local MyWindow:TGadget=CreateWindow("
Slider-Beispiel", 200,200,320,240)
Local MySlider:TGadget=CreateSlider(270,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local MyCanvas:TGadget=CreateCanvas(60,30,100,100,MyWindow)
Local r:Int=0

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_GADGETACTION
     r=int(25.5*EventData())
     SetStatusText MyWindow,
"Slider-Wert="+r
     RedrawGadget(MyCanvas)
Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
   
SetColor  r,0,0
    DrawRect  0,0,100,100
    Flip
   End Select
Forever


Was wir auf dem untenstehendem Screenshot sehen können, ist ein Slider rechts und ein quadratisches Canvas, das nach dem Wert der Trackbar eingefärbt wird. Wenn du den "Griff" bewegst kannst du das Wechseln der Farbe und den Wert des Sliders in der Statusbar sehen.

    Tut13 2


Lass uns einen näheren Blick auf unser Programm werfen. Zuerst müssen wir das Fenster erstellen und die zwei benötigten Gadgets, den Slider und das Canvas. Dann platzieren wir sie am richtigen Ort in unserem Fenster.

    Local MyWindow:TGadget=CreateWindow("Slider-Beispiel", 200,200,320,240)
Local MySlider:TGadget=CreateSlider(270,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local MyCanvas:TGadget=CreateCanvas(60,30,100,100,MyWindow)
Local r:Int=0


Wenn die Trackbar vom Benutzer bewegt wird, wir ein GADGET_ACTION-Event erstellt und die EventData()-Funktion liefert den aktuellen Wert des Sliders zurück (welcher einen Bereich von 1 bis 10 voreingestellt hat).

Weil wir den Wert in der SetColor-Funktion (welche einen Bereich von 0-255 hat) benutzen wollen, multiplizieren wir den Wert mit 25.5 und konvertieren ihn in einen Integer mittels int.

      Case EVENT_GADGETACTION
     r=Int(25.5*EventData())


SetStatusText schreibt dann unseren r-Wert in die Statusbar. Dann rufen wir RedrawGadget auf, so dass unser Canvas mit der neuen Farbe gezeichnet wird.

         SetStatusText MyWindow, "Slider-Wert="+r
     RedrawGadget(MyCanvas)


Wenn wir den EVENT_GADGETPAINT erhalten, setzten wir die Farbe auf r,0,0 und zeichnen unser Rechteck neu.

    Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
   
SetColor  r,0,0
    DrawRect  0,0,100,100
    Flip


Machen wir alles ein bisschen komplizierter und erweitern wir unser Programm so, dass jeder rgb-Wert der SetColor-Funktion eingestellt werden kann. Für das brauchen wir 3 Sliders, je einen für einen rgb-Wert:

    SuperStrict
Import MaxGui.Driver
Local MyWindow:TGadget=CreateWindow("
Slider-Beispiel", 200,200,320,240)
Local RedSlider:TGadget=CreateSlider(230,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local GreenSlider:TGadget=CreateSlider(250,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local BlueSlider:TGadget=CreateSlider(270,10,20,140,MyWindow,SLIDER_TRACKBAR)

Local MyCanvas:TGadget=CreateCanvas(60,30,100,100,MyWindow)
Local r:Int=0
Local g:Int=0
Local b:Int=0

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_GADGETACTION
     Select EventSource()
     Case RedSlider
        r=Int(25.5*EventData())
     Case GreenSlider
        g=Int(25.5*EventData())
     Case BlueSlider
        b=Int(25.5*EventData())
     
End Select
     SetStatusText MyWindow, "Slider-Wert (r,g,b)="+r+","+g+","+b
     RedrawGadget(MyCanvas)
Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
   
SetColor  r,g,b
    DrawRect  0,0,100,100
    Flip
   End Select
Forever


Nach dem Starten des Programmes wird uns folgendes Fenster angezeigt, mit dem wir die Farbe unseres Canvas einstellen können.

    Tut13 3


Wie immer, schauen wir uns das Programm nun im Detail an. Zuerst erstellen wir unsere 3 Sliders. Wir nenen sie RedSlider, GreenSlider und BlueSlider.

   
Local RedSlider:TGadget=CreateSlider(230,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local GreenSlider:TGadget=CreateSlider(250,10,20,140,MyWindow,SLIDER_TRACKBAR)
Local BlueSlider:TGadget=CreateSlider(270,10,20,140,MyWindow,SLIDER_TRACKBAR)


Dann erstellen wir die rgb-Variablen

    Local r:Int=0
Local g:Int=0
Local b:Int=0


Jetzt wo wir 3 verschiedene Slider haben, müssen wir wissen, welcher Slider den Event gesendet hat. Für das benutzen wir die EventSource-Funktion und das Select/Case-Konstrukt.

   
  Case EVENT_GADGETACTION
     Select EventSource()
     Case RedSlider
        r=Int(25.5*EventData())
     Case GreenSlider
        g=Int(25.5*EventData())
     Case BlueSlider
        b=Int(25.5*EventData())
     
End Select
 


Der Rest des Programmes ist wie vorher. Nur SetColor hat jetzt drei Variablen als Parameter anstatt nur einer.

SLIDER_STEPPER

Der nächste Style, den wir behandeln wollen, ist SLIDER_STEPPER. Wir ändern das obige Programm ab, um zu sehen, wie es mit dem Stepper-Style läuft:

    SuperStrict
Import MaxGui.Driver
Local MyWindow:TGadget=CreateWindow("
Slider-Beispiel", 200,200,320,240)
Local RedSlider:TGadget=CreateSlider(80,10,50,50,MyWindow,SLIDER_STEPPER)
Local GreenSlider:TGadget=CreateSlider(140,10,50,50,MyWindow,SLIDER_STEPPER)
Local BlueSlider:TGadget=CreateSlider(200,10,50,50,MyWindow,SLIDER_STEPPER)

Local MyCanvas:TGadget=CreateCanvas(120,65,100,100,MyWindow)
Local r:Int=0
Local g:Int=0
Local b:Int=0

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_GADGETACTION
     Select EventSource()
     Case RedSlider
        r=Int(25.5*EventData())
     Case GreenSlider
        g=Int(25.5*EventData())
     Case BlueSlider
        b=Int(25.5*EventData())
     
End Select
     SetStatusText MyWindow, "Slider-Wert (r,g,b)="+r+","+g+","+b
     RedrawGadget(MyCanvas)
Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
   
SetColor  r,g,b
    DrawRect  0,0,100,100
    Flip
   End Select
Forever


Was wir bekommen sind nur Buttons mit Pfeilen als "Text", die den Wert des Sliders ändern. Beachte dass wir nur die Grösse und Position des Sliders und des Canvas um den Stepperstyle zu zeigen. Der Rest des Programmes ist immer noch derselbe.

    Tut13 4


SLIDER_SCROLLBAR

Lass uns nun den letzten Style, SLIDER_SCROLLBAR, anschauen, den wir fast täglich in anderen Programmen sehen. Die Scrollbars sind nützlich um dem Benutzer das Scrollen durch Inhalte, die grösser als der Bildschirm sind, zu erlauben.

Im folgendem Beispiel laden wir ein 434x387 grosses Bild ein ein 200x200 Pixel grosses Canvas. Lade das Bild unten herunter, so dass wir es in unserem Programm verwenden können:

    Bg


Es ist ein längeres Programm als üblich. Aber mach dir keine Sorgen, ich werde es später im Detail erklären. Lass uns zuerst sehen, was es überhaupt macht. Kopiere und führe das Programm wie üblich aus. Denke daran den richtigen Pfad für das Bild anzugeben.

    SuperStrict
Import MaxGui.Driver
Local MyWindow:TGadget=CreateWindow("
Slider-Beispiel", 200,200,320,320)
Local HorizontalSlider:TGadget=CreateSlider(10,210,200,20,MyWindow, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL)
Local VerticalSlider:TGadget=CreateSlider(210,10,20,200,MyWindow, SLIDER_SCROLLBAR | SLIDER_VERTICAL)
Local MyCanvas:TGadget=CreateCanvas(10,10,200,200,MyWindow)

Local map:TPixmap=LoadPixmap("D:My Documents on E_Tutorialsbig.jpg")
Local
x:Int
=0
Local y:Int=0

SetSliderRange VerticalSlider,200,PixmapHeight(Map)
SetSliderRange HorizontalSlider,200,
PixmapWidth(Map)

Repeat
  WaitEvent()
  Select EventID()
  Case EVENT_WINDOWCLOSE
     End
  Case EVENT_GADGETACTION
     Select EventSource()
     Case HorizontalSlider
        x=EventData()
     Case VerticalSlider
        y=EventData()
     
End Select
     RedrawGadget(MyCanvas)
Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
    
Cls
    DrawPixmap map,0,0
    Local Pix:TPixmap=GrabPixmap(x,y,200,200)
   
Cls
    DrawPixmap  pix,0,0
    Flip
   End Select
   
SetStatusText  MyWindow,"Slider-Wert (x,y)="+x+","+y
Forever


Die horizontale und vertikale Scrollbar scrollen das Bild nun wie erwartet.

    Tut13 5


OK, lass uns die Details anschauen. Zuerst müssen wir die horizontale und vertikale Scrollbar definieren.  Es ist wichtig, dass wir die Slider am Canvasrand erstellen. Dies ist gut für die Ästhetik. Es hat aber keinen Einfluss auf die Funktion.

    Local HorizontalSlider:TGadget=CreateSlider(10,210,200,20,MyWindow, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL)
Local VerticalSlider:TGadget=CreateSlider(210,10,20,200,MyWindow, SLIDER_SCROLLBAR | SLIDER_VERTICAL)
Local MyCanvas:TGadget=CreateCanvas(10,10,200,200,MyWindow)


Wir laden dann unser Bild in ein Pixmap-Objekt und deklarieren auch die Variablen x und y welch die Startkoordinaten für unser Bild enthalten, das auf unserem Canvas dargestellt wird.

    Local map:TPixmap=LoadPixmap("D:My Documents on E_TutorialsT13-05.jpg")
Local
x:Int
=0
Local y:Int=0


Die nächsten beiden Zeilen setzten den Bereich für unsere Slider. Normalerweise ist der Bereich von 0-10. Wir wollen ihn aber jetzt passend zu unserer Bildgrösse setzten. Wir benutzen PixmapHeight
und PixmapWidth um den Bereich via SetSliderRange einzustellen.

Die Syntax für SetSliderRange aus der Hilfe ist folgende:

Function SetSliderRange(slider:TGadget,range0,range1)


Ich bevorzuge aber die BlitzPlus-Beschreibung. range0 ist der sichtbare Bereich (Canvasgrösse) und range1 ist die totale Grösse des Bildes.

Function SetSliderRange(slider:TGadget,Visible Range,Total Range)


So setzten wir unseren Sliderbereich wie folgt:

    SetSliderRange VerticalSlider,200,PixmapHeight(Map)
SetSliderRange HorizontalSlider,200,
PixmapWidth(Map)


Wenn die Scrollbar bewegt wird, wird ein EVENT_GADGETACTION-Event erstellt. Wir müssen dann den Sender des Events via EventSource ausmachen. Wir benutzen dann Select und Case um die relevanten Variablen zu aktualisieren.

      Case EVENT_GADGETACTION
     Select EventSource()
     Case HorizontalSlider
        x=EventData()
     Case VerticalSlider
        y=EventData()
     
End Select
     RedrawGadget(MyCanvas)


Die RedrawGadget-Funktion macht, dass unser Canvas neu gezeichnet wird. Wir zeichnen dann zuerst das Originalbild auf unser Canvas und grabben (ausschneiden) dann den sichtbaren Bereich und zeichnen diesen zurück auf unser Canvas, um den Scrolleffekt zu imitieren. Das alles läuft hinter den Kulissen ab. Der Benutzer sieht nur das entgültige Bild, nachdem wir Flip ausgeführt haben.

    Case EVENT_GADGETPAINT
    SetGraphics CanvasGraphics (MyCanvas)
    
Cls
    DrawPixmap map,0,0
    Local Pix:TPixmap=GrabPixmap(x,y,200,200)
   
Cls
    DrawPixmap  pix,0,0
    Flip


Am Schluss zeigen wir mit der bekannten SetStatusText-Funktion den Wert an, der durch EventData() zurückgegeben wurde.

       SetStatusText  MyWindow,"Slider-Wert (x,y)="+x+","+y


Zum Schluss...


Der Slider-Gadget, wie auch der Tabber-Gadget, ist ein einfaches Mittel für die Usereingabe. Der Job für das Scrollen oder Sliden muss vom Programm übernommen werden. Sliders sind da ein bisschen einfacher zu handhaben, da man nur die Werte verarbeiten muss. Scrollbars sind leicht schwerer, weil sie noch zusätlich etwas scrollen müssen (meist Text oder ein Bild).

Wiederholen wir, was wir bis jetzt gelernt haben

  • Sliders können mit CreateSlider erstellt werden. Sie können 3 verschiedene Styles haben: Trackbar, Stepper oder Scrollbar. All diese können entweder vertikal oder horizontal sein.
  • Der Wert des Sliders kann mit der EventData()-Funktion erhalten werden. Der Bereich ist normalerweise 0-10, kann aber per SetSliderRange verändert werden.
  • Mit SetSliderValue kann das Programm den Wert des Sliders einstellen (Ich erklärte dies nicht, da die Benutzung klar sein sollte).