Tabs prototype

Display a bar of tabs.

PROTO Tabs [
  # Proto Parameters
  field SFBool 		enableCycle FALSE
  field MFString 	elementsLabels []
  field MFString 	elementsIcons []
  field MFInt32 	elementsStates []
  field MFColor 	elementsColors []
  field SFInt32 	nbElements 0
  field SFFloat 	nbVisibleItems 4
  field SFBool 		animationEnable TRUE
  
  # Events
  exposedField SFInt32 update 0
  eventOut SFInt32 currentElement
  exposedField SFBool enable TRUE
  
  # Styles
  field MFString style ["Tabs"]
  field SFVec2f size -1 -1
  field SFVec2f textScale 1 1
  field SFTime repeatInterval 0.25
  field SFTime repeatDelay 0.5
  
  # Left and right filler images
  field MFString fillerImage [ "tabsFiller.png" ]
  field SFFloat  fillerImageRatio 	0.117
  field MFString fillerLeftArrows 	[ "" "arrowLeft.png" "arrowLeft_over.png" ]
  field MFString fillerRightArrows 	[ "" "arrowRight.png" "arrowRight_over.png" ]
  field SFFloat  fillerArrowsRatio 	0.524
]

Proto Parameters

SFBool enableCycle - this allow user to go from far left tabs to tab 0, when pressing right button, and vice-versa
MFString elementsLabels - this is tabs labels
MFString elementsIcons - this is tabs icons
MFInt32 elementsStates - to set enable and disabled tabs: 0 is enable -1 is disabled
MFColor elementsColors - to set text color for each tab
SFInt32 nbElements - total number of element in the list (different of list.nbItems : number of elements shown with the current screenSize)
SFFloat nbVisibleItems - number of on screen displayed tabs will automatically be set between 2 and 5
SFBool animationEnable - is sliding animation enable

Events

SFInt32 update - update all elements, can bet to any value to set focus on this tab
SFInt32 currentElement - returns the currently selected tab
SFBool enable - disable proto

Styles

MFString style - Style for Tabs proto
SFVec2f size - size of the tab proto
SFVec2f textScale - textScale for text sizing
SFTime repeatInterval - used by keysensor
SFTime repeatDelay - used by keysensor

Left and right filler images

MFString fillerImage - pictures for left and right arrows background
SFFloat fillerImageRatio - filler is 28px wide when screen is 240px, 28/240 = 0.117 ratio
MFString fillerLeftArrows - left arrow pictures
MFString fillerRightArrows - right arrow pictures
SFFloat fillerArrowsRatio - filler arrow picture is 11px/21px = 0.524 ratio

Tabs {
  font-style: bold;
  horizontal-align: middle;
  vertical-align: middle;
  font-size: 12;
  color: #414141;
  text-position: 0% 0%;
  image-size: 84%; // image will be resized related to tab height
  image-position: -25% 0%;
}

EXTERNPROTO Tabs [] "Tabs.wrl"
EXTERNPROTO SizeNotifier [] "SizeNotifier.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 TAB Tabs {
      elementsLabels [
        "Tab 1" "Tab 2" "Tab 3" "Tab 4"
      ]
      nbElements 4
      
      size 220 32
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
    
    ROUTE SIZE_NOTIFIER.textScale  TO TAB.textScale
  ]
}