Slider prototype

Slides some content and displays a background and title surrounding the content.

PROTO Slider [

  # Events
  eventOut SFVec2f contentPos
  eventOut SFTime finished
  exposedField SFBool hide TRUE
  exposedField SFBool enable TRUE

  # Items
  field MFString titleLabel	[""]
  field MFNode content [] # content that is slided  

  # Style
  field SFVec2f size 0 0
  field SFVec2f textScale 1 1
  field MFString style "Slider"
  field MFString titleStyle "Slider-title"
  field SFVec2f screenSize 0 0
  field MFString images ["" ""]
]

Data fields

MFString titleLabel - Title in a Ticker displayed above content, when empty, title zone will be hidden.
MFNode content - The content which slides

Style fields

SFVec2f size - Size of content of slider
SFVec2f textScale - Used for scaling text if necessary (phone with small fonts)
MFString style - Style to use for this prototype (Default: Slider)
MFString titleStyle - Style to use for the title (Default: Slider-title)
MFSting images - Optional title image & background image for the content
SFVec2f screenSize - Screen resolution

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

Exposed Fields

SFBool hide - Sends FALSE when sliderTrs starts to slide up and sends TRUE when sliderTrs starts to slide down
SFBool enable - Enable/disable Slider

Event Out

SFVec2f contentPos - Return position of the content
SFTime finished - When slide animation is finished

Ticker

Slider {
  background-color: white;
  margin-bottom: 8.75%; 
}

Slider-title {
  background-color: #414141; # dark-gray
  color: white;
  height: 8.75%;
  margin-left: 4%;
  font-style: bold;
  vertical-align: middle;
  font-filter: true;
}

EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO SimpleList [] "SimpleList.wrl"
EXTERNPROTO Slider [] "Slider.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 SLIDER Slider {
      titleLabel "My List"
      hide FALSE
      
      size 100 50
      
      content [
        DEF LIST SimpleList {
          elementsLabels [
            "Element 1"
            "Element 2"
            "Element 3"
            "Element 4"
            "Element 5"
          ]
          nbElements 5
          
          focusbarStyle ["FocusBar" "Menu-FocusBar"]
          images ["listSeparator.png"]
          
          enable TRUE
          
          size 100 200
        }
      ]
    }
    
		
    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
      
    ROUTE SIZE_NOTIFIER.screenSize TO SLIDER.screenSize
    ROUTE SIZE_NOTIFIER.textScale  TO SLIDER.textScale
  ]
}