Mobile Widgets

SubTitle prototype

Introduction
Interface
Fields description
CSS
See also
Example

Introduction

Sub title bar. Use SubTitle with Title prototype.

Interface

PROTO SubTitle [
  field SFVec2f screenSize -1 -1
  field SFVec2f textScale 1 1
  field MFString style ["Subtitle"]
  field MFString title []
  field MFString images ["subTitleBg.png"]
]

Fields description

Data fields

MFString title - Label of the subtitle

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 style - Path to the CSS node associated to Subtitle proto, but also to the Ticker.
MFString images - Background image

CSS

Subtitle {
  background-color: gray;
  color: orange;
  font-style: bold;
  horizontal-align: middle;
  vertical-align: middle;
  font-size: 12;
  size: 100% 9%;
  text-size: 100% 9%;//size of layer2d containing ticker
  font-filter: true;
}

Example

EXTERNPROTO Title [] "Title.wrl"
EXTERNPROTO SubTitle [] "SubTitle.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 TITLE Title {
      title [ "My title" ]
    }
    
    DEF SUBTITLE SubTitle {
      title [ "My subtitle" ]
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size

    ROUTE SIZE_NOTIFIER.screenSize TO TITLE.screenSize
    ROUTE SIZE_NOTIFIER.textScale  TO TITLE.textScale
        
    ROUTE SIZE_NOTIFIER.screenSize TO SUBTITLE.screenSize
    ROUTE SIZE_NOTIFIER.textScale  TO SUBTITLE.textScale
  ]
}

Mobile Widgets

SubTitle prototype

Introduction

Interface

Fields description

Data fields

Style fields

CSS

See also

Example