ScrollableList prototype

Scrollable list with an image and a text per item.

PROTO ScrollableList [
  exposedField SFBool enableCycle TRUE
  field MFString elementsTitles [] 
  field MFString elementsLabels []
  field MFString elementsIcons []
  field MFInt32 elementsStates [] #to enable one state per item of the list (for example multi-selection : 'checked', 'not checked')
  field MFString stateIcons [] #to enable one state per item of the list (for example multi-selection : 'checked', 'not checked')
  field SFInt32 nbElements 0 #total number of element in the list (different of list.nbItems : number of elements shown with the current screenSize)
  
  # Events
  eventOut SFTime selection
  exposedField SFInt32 update 0 #update all elements
  exposedField SFInt32 updateElement 0 #used to update only one element
  exposedField SFInt32 currentElement 0
  exposedField SFBool enable TRUE
  eventIn SFInt32 goToElement
  
  # Styles
  field MFString style ["ScrollableList"]
  field MFString titleStyle ["ScrollableList-title"]
  field MFString scrollbarStyle ["Scrollbar"]
  field MFString focusbarStyle ["FocusBar" "ScrollableList-FocusBar"]
  field MFString focusbarImages ["focusBarBg.png" "focusBarOver.png"]
  field SFVec2f size -1 -1
  field SFVec2f textScale 1 1
  field SFVec2f titlePos 0 0
  field SFVec2f labelPos 0 0
  field SFVec2f separatorSize 0 0
  
  field SFInt32 itemHeight -1
  
  # Focus bar images
  field MFString images ["focusBarBg.png" "reflet.png"]
]

Data fields

MFString elementsTitles - Elements titles
MFString elementsLabels - Elements labels
MFString elementsIcons - Elements icons
MFInt32 elementsStates - Elements states to enable one state per item of the list (for example multi-selection : 'checked', 'not checked')
MFString stateIcons - Icons state to enable one state per item of the list (for example multi-selection : 'checked', 'not checked')
SFInt32 nbElements - Total number of element in the list (different of list.nbItems : number of elements shown with the current screenSize)

Style fields

MFString style - Style for this prototype
MFString titleStyle - Style for the title of the item
MFString scrollbarStyle - Style for the ScrollBar
MFString focusbarStyle - Style for the FocusBar
MFString focusbarImages - Images for the FocusBar
SFVec2f size - Size of the prototype
SFVec2f textScale - Use for scaling text if necessary (phone with small fonts)
SFVec2f titlePos - Title position
SFVec2f labelPos - Label position
SFInt32 itemHeight - Item height
MFString images - Images of the focusbar (background and reflect)

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

Exposed Fields

SFInt32 update - Update list. Call update is needed if Styles fields are modified
SFInt32 updateElement - Update an element in particular
SFInt32 currentElement - Current element
SFBool enable - Enable / disable
SFBool enableCycle - Allows focus bar to jump from first to last position when using the keyboard

Event Out

SFTime selection - The time when an item is selected in the list

Event In

SFInt32 goToElement - Force list to focus a given element

ScrollableList {
  font-filter: true;
  font-size: 10;
  font-style: plain;
  horizontal-align: left;
  vertical-align: middle;
  background-color: gray;
  color: black;
  rectangle-size: 100% 2px; 
  image-size: 11.667% 10.77%; 
  image-position: -11.667% 0%; 
  text-position: 0px 0px; 
  rectangle-position: 29.167% -8.46%; //-11.15%; 
  position: 70.833% 0%;
  size: 100% 16.92%; 
}

ScrollableList-FocusBar {
  size: 100% 16.92%; 
}

ScrollableList-title {
  font-filter: true;
  font-size: 10;
  font-style: bold;
  horizontal-align: left;
  vertical-align: middle;
  color: black;
  text-position: 0px 0px;
}

List

EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO ScrollableHor [] "ScrollableList.wrl"

Group {
  children [
    Style {
      url ["default.css"]
    }
    
    DEF SIZE_NOTIFIER SizeNotifier {}
    
    Shape {
      appearance Appearance {
        material Material2D {
          emissiveColor 1.0 1.0 1.0
        }
      }
      geometry DEF BACKGROUND Rectangle {
        size 20 20
      }
    }
    
    DEF LIST ScrollableList {
      enableCycle TRUE
      nbElements 7
      elementsTitles [
        "Item 1"
        "Item 2"
        "Item 3"
        "Item 4"
        "Item 5"
        "Item 6"
        "Item 7"
      ] 
      elementsLabels [
        "Description of item 1"
        "Description of item 2"
        "Description of item 3"
        "Description of item 4"
        "Description of item 5"
        "Description of item 6"
        "Description of item 7"
      ]
      stateIcons [
        "img_32x32.png"
        "img_32x32.png"
      ]
    }

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