ScrollableText prototype

Scrollable text is composed of 3 parts: a title, an image and the text.
It is based on the Scrollable prototype to support scrolling.

PROTO ScrollableText [
  # Data
  field	MFString title []
  field	MFString images []
  field	MFString content []

  # Style    
  field	MFString style ["ScrollableText"]  
  field MFString contentStyle ["ScrollableText-content"]
  field MFString titleStyle ["ScrollableText-title"]
  field	SFVec2f	size -1 -1
  field	SFVec2f	textScale 1 1
  field SFInt32 titleMaxLines 5
  field SFInt32 contentMaxLines 30
  field SFBool enable TRUE
]

Data fields

MFString title - Title, can have multiple lines
MFString images - Url of the image associated to the text content (to be scrolled)
MFString content - Text content (to be scrolled)

Style fields

MFString style - Path to the CSS node associated to ScrollableText proto
MFString contentStyle - Path to the CSS specific node associated to the content of ScrollableText proto
MFString titleStyle - Path to the CSS specific node associated to the title of ScrollableText proto
SFVec2f size - Size of the area where the ScrollableText proto is displayed
SFVec2f textScale - Use for scaling text if necessary (phone with small fonts)
SFInt32 titleMaxLines - Title max lines
SFInt32 contentMaxLines - Content max lines
SFBool enable - If FALSE, key and touch events will be ignored. Default: TRUE.

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

ScrollableText {
  size: 87% 75%;
  margin-left: 3.3%;// space between label and screen border relative to screen width
  background-color: white; //color of the rectangle if no icon is found 
}

ScrollableText-content {
  font-filter: true;
  vertical-align: top;
  font-size: 10;
  font-style: plain;
  color: black;
}

ScrollableText-title {
  font-filter: true;
  vertical-align: top;
  font-size: 10;
  font-style: bold;
  color: black;
}

Scrollable

EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO ScrollableText [] "ScrollableText.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 SCROLLTEXT ScrollableText {
      title   [ "Sed viverra dapibus porttitor" ]
      images  [ "img_32x32.png" ]
      content [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem nibh, sed bibendum mauris."
        "Quisque hendrerit interdum accumsan. Suspendisse varius vulputate ante, ac varius justo mollis eget."
        "Vivamus ornare condimentum eros quis vulputate."
        "Aenean nec tortor nisl, nec pellentesque ipsum."
        "Vivamus mollis placerat volutpat. Aliquam magna tortor, pellentesque quis vulputate eget, varius in arcu."
        "Nam in magna dui."
        "Etiam pharetra sagittis mauris a congue. In hac habitasse platea dictumst. Mauris vitae elit lorem, vitae eleifend quam."
        "In tristique dictum diam, a aliquet tellus iaculis sit amet. Sed a varius justo. Ut elit magna, vestibulum at mattis id, porta ut velit. Suspendisse vitae sagittis nunc. Praesent molestie porttitor luctus."
        ""
        "Aliquam erat volutpat."
        "Fusce gravida, enim at sodales mollis, tellus tellus egestas ante, id aliquam lorem est eu nibh."
        "Sed pellentesque laoreet sapien, eget congue nunc imperdiet id."
        "Pellentesque consequat mollis dictum."
        "Duis posuere, arcu commodo interdum pellentesque, sapien mi sagittis purus, sit amet euismod lectus urna at sem."
        "Vestibulum mauris neque, ornare nec pulvinar id, viverra pellentesque risus."
        "Sed viverra dapibus porttitor."
        "Nunc venenatis sollicitudin urna, non cursus nisl euismod ac."
        "Quisque a libero sapien."
        "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
        "Fusce sit amet nunc ligula, in luctus metus."
        "In mattis est id nibh dictum non dictum neque molestie."
        "Etiam eget sem magna."
        "Mauris lacinia, diam in scelerisque tristique, sapien odio pharetra augue, sed lobortis arcu urna eu tellus. Morbi est lectus, imperdiet non eleifend nec, mollis et quam."
        "Curabitur ac neque augue."
        "Suspendisse potenti."  
      ]
    }
		
    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
      
    ROUTE SIZE_NOTIFIER.screenSize TO SCROLLTEXT.size
    ROUTE SIZE_NOTIFIER.textScale TO SCROLLTEXT.textScale
  ]
}