ScrollBar prototype

Show a scroll bar to the right of the screen.
Set the bar height (sizeBar), the number of elements (eltTotal) and the shown elements (eltShown).
The cursor size (sizeCursor.y) would be calculate function of the number of elements.

PROTO ScrollBar [
  eventIn SFInt32 move
  eventIn SFInt32 moveTo
  eventIn SFInt32 update
  
  field MFString style ["Scrollbar"]
  
  field SFVec2f size 0 0
  
  field SFFloat eltShown 10
  field SFFloat eltTotal 20
]

Data fields

SFFloat eltShown - Number of shown elements
SFFloat eltTotal - Number of total elements
SFVec2f size - Size of the area where the ScrollBar proto is displayed

Style fields

MFString style - Path to the CSS node associated to Scrollbar proto

Warning:
Define style is required (we can use the default style - see Style node).

Event In

SFInt32 move - Move scroll bar using an increment: up = -1, down = +1
SFInt32 moveTo - Move scroll bar to a given element/position (min=0, max=eltTotal)
SFInt32 update - Update scroll bar y position

Scrollbar {
  background-color: gray; 
  color: #e9e9e9; // light-gray
  rectangle-size: 1.6% 28%; //cursor size
  size: 2.5% 100%;
}

EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO Scrollbar [] "Scrollbar.wrl"

Group {
  children [
    Style {
      url ["default.css"]
    }
    
    DEF SIZE_NOTIFIER SizeNotifier {}
    
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 1 1 1 }
      }
      geometry DEF BACKGROUND Rectangle {
        size 10 10
      }
    }
		
    DEF SCROLLBAR Scrollbar {
    }
		
    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
      
    ROUTE SIZE_NOTIFIER.screenSize TO SCROLLBAR.size
  ]
}