FocusBar prototype

Highlight the focused element (eg, the current element of a list).

PROTO FocusBar [
  # Events
  eventIn SFInt32 move
  field SFVec2f translation 0 0

  # Style 
  field MFString images ["focusBarBg.png" "focusBarOver.png"]
  field MFString style "FocusBar"
  field SFVec2f size 0 0
]

Style fields

MFString images - List of images for background and overlay.
MFString style - Style for this prototype. Default: "FocusBar"
SFVec2f size - Focus bar size

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

Events

SFInt32 move - Trigger overlay animation
SFVec2f translation - Move Focus bar to given position

FocusBar {
  color: rgb(255, 153, 38); //Orange 1 0.6 0.15
  size: 100% 21.22%;
  animation: true;
  // background-image: true;
}

EXTERNPROTO FocusBar [] "FocusBar.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 FOCUS_BAR FocusBar {
      size 100 25
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
  ]
}