Custom Scrollbar Designer

[collectordave]

Started out just coding a custom scrollbar alongside coding a custom string gadget.

First with the custom string gadget replacing just one procedure allows me to have any kind of masked input I want. Applied the same thoughts to the custom scrollbar thinking why not custom scrollbars? I found that only four images are needed to draw a scrollbar. Tried with images but image resizing to fit was giving problems so used vector drawing commands to produce the scrollbar images.

Coded the following just to help a little.

Code: Select all

Enumeration FormWindow
  #WinMain
  #cnvScrollbar
  #btnShow0
  #btnShow50
  #btnShow100
  #txtHeight
  #strHeight
EndEnumeration

Global BackColour.i

Procedure   DrawLeft()
      
  StartVectorDrawing(CanvasVectorOutput(#cnvScrollbar))
    VectorSourceColor(RGBA(255,0,0,255))
      
    ;MainButton
    AddPathCircle(VectorOutputHeight()/2,VectorOutputHeight()/2,VectorOutputHeight()/2)
    FillPath()
      
    ;Arrow
    VectorSourceColor(RGBA(255,255,255,255))
    MovePathCursor(VectorOutputHeight()*0.7, VectorOutputHeight()* 0.2)
    AddPathLine(VectorOutputHeight()*0.1, VectorOutputHeight() * 0.5)
    AddPathLine(VectorOutputHeight()*0.7, VectorOutputHeight() * 0.8)
    ClosePath()
    FillPath()
      
    ;Start Of Track;
    VectorSourceColor(RGBA(255,0,0,255))
    AddPathCircle(VectorOutputHeight() * 1.5,VectorOutputHeight() * 0.5,VectorOutputHeight() * 0.4,90,270)
    StrokePath(VectorOutputHeight() /10)
  StopVectorDrawing()
  
EndProcedure 

Procedure   DrawTrack()
    
  StartVectorDrawing(CanvasVectorOutput(#cnvScrollbar))

  VectorSourceColor(RGBA(255,0,0,255))
  MovePathCursor(VectorOutputHeight() * 1.5 ,VectorOutputHeight()* 0.9)
  AddPathLine(VectorOutputWidth() - (VectorOutputHeight() * 1.5),VectorOutputHeight()* 0.9)
  MovePathCursor(VectorOutputHeight() * 1.5,VectorOutputHeight()* 0.1)
  AddPathLine(VectorOutputWidth() -(VectorOutputHeight() * 1.5),VectorOutputHeight()* 0.1)     
  StrokePath(VectorOutputHeight() /10)
  StopVectorDrawing()

EndProcedure

Procedure   DrawRight()
      
  Define Offset.i
   
  StartVectorDrawing(CanvasVectorOutput(#cnvScrollbar))
    VectorSourceColor(RGBA(255,0,0,255))
    
    Offset = VectorOutputWidth() - VectorOutputHeight() * 1.5
        
    ;MainButton
    AddPathCircle(Offset + VectorOutputHeight(),VectorOutputHeight()/2,VectorOutputHeight()/2)
    FillPath()
      
      ;Arrow
      VectorSourceColor(RGBA(255,255,255,255))
      MovePathCursor(Offset + VectorOutputHeight() * 0.8, VectorOutputHeight() * 0.2)
      AddPathLine   (Offset + VectorOutputHeight() * 0.8, VectorOutputHeight() * 0.8)
      AddPathLine   (Offset + VectorOutputHeight() * 1.4, VectorOutputHeight() * 0.5)
      ClosePath     ()
      FillPath      ()
      
      ;Start Of Track
      VectorSourceColor(RGBA(255,0,0,255))
      AddPathCircle(Offset,VectorOutputHeight() * 0.5,VectorOutputHeight() * 0.4,270,90)
      StrokePath(VectorOutputHeight() /10)
    StopVectorDrawing()
   
EndProcedure

Procedure DrawSlider(Value.d = 0)
    
  Define OffSet.d

  StartVectorDrawing(CanvasVectorOutput(#cnvScrollbar)) 
    VectorSourceColor(RGBA(0,255,0,255))
    Offset = (((VectorOutputWidth() - (VectorOutputHeight() * 3))/100) * Value) + VectorOutputHeight() * 1.5
    AddPathCircle(Offset,VectorOutputHeight() * 0.5,VectorOutputHeight() * 0.35)
    FillPath()
  StopVectorDrawing() 
    
  EndProcedure

OpenWindow(#WinMain, 5, 5, 400, 130, "Scroll Designer", #PB_Window_SystemMenu)
CanvasGadget(#cnvScrollbar, 10, 10, 380, 20)
ButtonGadget(#btnShow0, 10, 80, 40, 25, "0%")
ButtonGadget(#btnShow50, 70, 80, 40, 25, "50%")
ButtonGadget(#btnShow100, 130, 80, 40, 25, "100%")
TextGadget(#txtHeight, 200, 80, 80, 20, "Height", #PB_Text_Right)
StringGadget(#strHeight, 300, 80, 70, 20, "20")

;Get background colour where gadget will be drawn
StartDrawing(WindowOutput(#WinMain))
  BackColour = Point(4, 4)
StopDrawing()

StartDrawing(CanvasOutput(#cnvScrollbar))
  DrawingMode(#PB_2DDrawing_AllChannels)
  Box(0, 0, OutputWidth(),OutputHeight(), BackColour)
StopDrawing()

Repeat
  
  Event = WaitWindowEvent()
  
  Select event
      
    Case #PB_Event_CloseWindow
      End

    Case #PB_Event_Gadget
      
      Select EventGadget()
          
        Case #btnShow0
          
          ResizeGadget(#cnvScrollbar,#PB_Ignore,#PB_Ignore,#PB_Ignore,Val(GetGadgetText(#strHeight)))
          StartDrawing(CanvasOutput(#cnvScrollbar))
            DrawingMode(#PB_2DDrawing_AllChannels)
            Box(0, 0, OutputWidth(),OutputHeight(), BackColour)
          StopDrawing()         
          DrawLeft()
          DrawTrack()
          DrawRight()
          DrawSlider(0)
          
        Case #btnShow50
          
          ResizeGadget(#cnvScrollbar,#PB_Ignore,#PB_Ignore,#PB_Ignore,Val(GetGadgetText(#strHeight)))
          StartDrawing(CanvasOutput(#cnvScrollbar))
            DrawingMode(#PB_2DDrawing_AllChannels)
            Box(0, 0, OutputWidth(),OutputHeight(), BackColour)
          StopDrawing()         
          DrawLeft()
          DrawTrack()
          DrawRight() 
          DrawSlider(50)
          
        Case #btnShow100
          
          ResizeGadget(#cnvScrollbar,#PB_Ignore,#PB_Ignore,#PB_Ignore,Val(GetGadgetText(#strHeight)))
          StartDrawing(CanvasOutput(#cnvScrollbar))
            DrawingMode(#PB_2DDrawing_AllChannels)
            Box(0, 0, OutputWidth(),OutputHeight(), BackColour)
          StopDrawing()         
          DrawLeft()
          DrawTrack()
          DrawRight() 
          DrawSlider(100) 
          
      EndSelect
      
  EndSelect
  
ForEver

The basics are that four images are needed Leftbutton, rightbutton, track and slider so four procedured defined one for each.the left and right buttons are drawn 1.5 times wider than the height of the scrollbar to allow for docking of the slider when at minimum and maximum. The track image just joins these together no limitation on width of track except height of scrollbar. the button can be anything from a simple line to anything that can be drawn.

I have left my code in the above as an example. So any design of scrollbar is possible just limited by imagination. Once running just click one of the buttons to see the scrollbar design enter a new height as well to test.

The custom scrollbar gadget is coming along vertical and horizontal done and some events etc. Will post when closer to being complete.

In the meantime if anyone with some graphic skills can put together a scrollbar using Vectordrawing or even 2d drawing commands please post here.

Kind regards


cd

[collectordave]

Ok

Moving on. You can see my efforts on the scrollbar here http://www.purebasic.fr/english/viewtop ... 12&t=67411

Only two images need to be defined the "Track" and the "Slider" three designs implemented allready.

Enjoy

cd

[RichardL]

Hi,
Beware, developing trackbars and scrollbars can become addictive and consume valuable beer time

Search for 'RichardL MultiTrackBar'

Have a good year!
RichardL

[collectordave]

It does and brilliant code

Thanks for pointing me at that

regards

cd