Mobile Widgets

MenuBar prototype

Introduction
Interface
Fields description
CSS
See Also
Example

Introduction

Display a menu with two elements associate to softkeys.
Set an empty label disable the InputSensor, then, the key associated action.

Interface

PROTO MenuBar [
  # Button labels
  field MFString leftLabel ""
  field MFString rightLabel ""
  field SFBool enable TRUE

  # Events
  eventOut SFTime leftButtonClicked
  eventOut SFTime rightButtonClicked

  # Style
  field SFVec2f screenSize 0 0
  field SFVec2f textScale 1 1
  field MFString images ["menubarBg.png" "menubarLeftPressed.png" "menubarRightPressed.png"]
  field MFString style ["MenuBar"]
  field MFString labelStyle ["MenuBar-label"]
]

Fields description

Data fields

MFString leftLabel - Left label
MFString rightLabel - Right label
SFBool enable - enable/disable MenuBar Buttons

Style fields

SFVec2f screenSize - Size of the screen where the application is displayed
SFVec2f textScale - Use for scaling text if necessary (phone with small fonts)
MFString images - List of images for background, left overlay, right overlay
MFString style - Style to use for this prototype (Default: MenuBar)
MFString labelStyle - Style to use for the labels (Default: MenuBar-label)

Event Out

SFTime leftButtonClicked - time when push left button
SFTime rightButtonClicked - time when push right button

CSS

MenuBar {
  size: 100% 8.75%;
  background-color: gray;
  color: orange; 
}
 
MenuBar-label {
  disabled-color: gray;
  color: black;
  margin-left: 4%;
  vertical-align: middle;
  font-style: bold;
  font-size: 14;
  font-filter: true;
}

Example

EXTERNPROTO MenuBar [] "MenuBar.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 MENU_BAR MenuBar {
      leftLabel "Left"
      rightLabel "Right"
    }

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

Mobile Widgets

MenuBar prototype

Introduction

Interface

Fields description

Data fields

Style fields

Event Out

CSS

See Also

Example