Ticker prototype

Text looping animation.
Animation can be either horizontal or vertical, and will only start if text is larger than the size of the Ticker.

Note:
Text alignment (with CSS vertical-align and horizontal-align properties) is relative to the size of the Ticker.

Limitation:
BASELINE is not supported for vertical alignment (MIDDLE will be used).

PROTO Ticker [
  field MFString string []
  field MFString style ["Ticker"]
  field SFVec2f size -1 -1
  field SFVec2f textScale 1 1
  field SFInt32 speed 50
  field SFBool cycle FALSE
  field SFBool vertical FALSE
  field SFInt32 maxLines 0
]

Data fields

MFString string - Text content
SFVec2f size - Content box size.

Style fields

SFVec2f textScale - Used for scaling text if necessary (phone with small fonts)
MFString style - Path to the CSS node associated to Ticker prototype

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

Control fields

SFInt32 speed - Speed of animation (pixels per second). Animation can be stopped with a value less or equal to 0. Default: 50
SFBool cycle - If TRUE, text will cycle, if FALSE, text will bounce. Default: FALSE
SFBool vertical - If TRUE, animation will be vertical and text is wrapped to the size of the ticker. Default: FALSE
SFInt32 maxLines - Max number of lines to display in vertical mode, 0 for no limit. Default: 0

Ticker {
  font-filter: true;
  color: black;
  horizontal-align: middle;
  vertical-align: middle;
  text-indent: 4px; // space between text and the size of the Ticker's box
}

EXTERNPROTO TextField [] "Ticker.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 TICKER Ticker {
      size 100 24
      string [ "Lorem ipsum dolor sit amet, consectetur adipiscing elit." ]
    }

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