A slider is a visual element that allows the user to select a numeric value within a predefined value range.
A slider uses an instance of Adjustment as its data model. An instance of Adjustment stores the limit values of the value range and the currently selected value. It also stores three additional values that ....
The introductory example of this section shows the use of a slider to change the stroke width of a brush. A series of advanced examples add further controls that influence other attributes of the drawing tool.
Archive file with this example: Slider001.tar.gz. Be sure to read the file README.txt for further instructions.
This window is implemented with the following piece of code:
import "gtk3" Graphics.UI.Gtk import Graphics.Rendering.Cairo -- final action when the main window is destroyed destroyEventHandler :: IO () destroyEventHandler = do mainQuit -- This function draws a diagonal line from the top left corner to -- to the bottom right corner of the drawing area. -- The function arguments are: -- w width of the drawing area -- h height of the drawing area -- strokewidth the width of the stroke to be drawn drawMethod :: Double -> Double -> Double -> Render () drawMethod w h strokeWidth = do setSourceRGB 1.0 0 0 setLineWidth strokeWidth setLineCap LineCapRound setAntialias AntialiasNone moveTo 20 20 lineTo (w - 20) (h - 20) strokePreserve setSourceRGB 1.0 1.0 1.0 setLineWidth 1.0 stroke -- refresh the content of the drawing area paintHandler :: DrawingArea -> Adjustment -> Render() paintHandler drawingArea adj = do w <- liftIO $ widgetGetAllocatedWidth drawingArea h <- liftIO $ widgetGetAllocatedHeight drawingArea sw <- liftIO $ adjustmentGetValue adj drawMethod (fromIntegral w) (fromIntegral h) sw -- handle a value change of the slider widget valueChangedHandler :: DrawingArea -> IO () valueChangedHandler paintArea = do widgetQueueDraw paintArea -- main program main :: IO () main = do initGUI -- the data model of the slider is created adjustment <- adjustmentNew 3.0 0.0 30.0 1.0 5.0 0.0 -- all needed widgets are created window <- windowNew hBox <- hBoxNew False 2 -- non-homogeneous packing paintArea <- drawingAreaNew slider <- vScaleNew adjustment scaleSetDrawValue slider False rangeSetInverted slider True -- the properties of the main window are set set window [windowDefaultWidth := 250, windowDefaultHeight := 280, windowWindowPosition := WinPosCenter, containerChild := hBox, windowTitle := "Slider"] -- all needed callback functions are provided on window objectDestroy destroyEventHandler onValueChanged adjustment (valueChangedHandler paintArea) on paintArea draw $ (paintHandler paintArea adjustment) -- the placement of the widgets is done here boxPackStart hBox slider PackNatural 0 boxPackStart hBox paintArea PackGrow 0 -- all widgets are made visible widgetShow slider widgetShow paintArea widgetShow hBox widgetShow window -- the event processing is started mainGUI
An adjustment ist created with the function adjustmentNew The arguments of this function are:
The values of the arguments line increment and page increment come into play when the arraw keys are used to change the selected value of a slider.
The arrow keys "up arrow" und "down arrow" change the selected value of an adjustment by the value of line increment. When pressed together with the control key, the arrow keys "up arrow" and "down arrow" change the selected value of adjustment by the value of page increment. Usually, the page increment is set to a larger value than line increment to allow for faster scrolling.
For an adjustment that is not used as data model of a scrollbar, the page size should be set to 0.
Archive file with this example: Slider001-2.tar.gz. Be sure to read the file README.txt for further instructions.
import "gtk3" Graphics.UI.Gtk import Graphics.Rendering.Cairo import Control.Applicative -- final action when the main window is destroyed destroyEventHandler :: IO () destroyEventHandler = do mainQuit -- This function draws a diagonal line from the top left corner to -- to the bottom right corner of the drawing area. -- The function arguments are: -- w width of the drawing area -- h height of the drawing area -- strokewidth the width of the stroke to be drawn drawMethod :: Double -> Double -> Double -> Render () drawMethod w h strokeWidth = do setSourceRGB 1.0 0 0 setLineWidth strokeWidth setLineCap LineCapRound setAntialias AntialiasNone moveTo 20 20 lineTo (w - 20) (h - 20) strokePreserve setSourceRGB 1.0 1.0 1.0 setLineWidth 1.0 stroke -- handle a value change of the slider widget valueChangedHandler :: DrawingArea -> IO () valueChangedHandler paintArea = do widgetQueueDraw paintArea -- main program main :: IO () main = do initGUI -- the data model of the slider is created adjustment <- adjustmentNew 9.0 0.0 30.0 1.0 5.0 0.0 -- all needed widgets are created and configured window <- windowNew hBox <- hBoxNew False 2 -- non-homogeneous packing paintArea <- drawingAreaNew slider <- vScaleNew adjustment scaleSetDrawValue slider False rangeSetInverted slider True -- the properties of the main window are set set window [windowDefaultWidth := 250, windowDefaultHeight := 280, windowWindowPosition := WinPosCenter, containerChild := hBox, windowTitle := "Slider"] -- all needed callback functions are provided on window objectDestroy $ destroyEventHandler onValueChanged adjustment (valueChangedHandler paintArea) -- on paintArea draw $ (paintHandler paintArea adjustment) on paintArea draw $ do w <- liftIO $ (fromIntegral <$> widgetGetAllocatedWidth paintArea) h <- liftIO $ (fromIntegral <$> widgetGetAllocatedHeight paintArea) sw <- liftIO $ (adjustmentGetValue adjustment) drawMethod w h sw -- the placement of the widgets is done here boxPackStart hBox slider PackNatural 0 boxPackStart hBox paintArea PackGrow 0 -- make all widgets visible widgetShow slider widgetShow paintArea widgetShow hBox widgetShow window -- the event processing is started mainGUI