Bubble prototype

Display a short message with a bubble.
When the message is modified, the bubble is shown.

PROTO Bubble [
  # Events
  exposedField SFTime duration 3
  exposedField SFTime startTime -1
  
  # Data
  field SFString message ""
  
  # Style
  field MFString images ["bubble.png"]
  field SFVec2f screenSize -1 -1
  field SFVec2f textScale 1 1
  field MFString style "Bubble"
]

Data fields

SFString message - Message information. If the message is modified, the bubble apears

Style fields

MFString images - Image used to display a background
MFString style - Style for this prototype. Default: "Bubble"
SFVec2f screenSize - Size of the screen where the application is displayed

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

Exposed Fields

SFTime duration - Duration of display
SFTime startTime - Force display if startTime is set to now (with async = TRUE)

Bubble {
  background-color: white;
  size: 93.3333% 32.5%; // 224x104 for the 240x320 style
  margin-bottom: 8.75%; // Bubble is above MenuBar
  color: black;
  padding-left: 5%; // left and right padding for the text
  horizontal-align: middle;
  vertical-align: middle;
  font-size: 8;
  font-filter: true;
}

EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO Bubble [] "Bubble.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 BUBBLE Bubble {
      duration 5
    }
		
    Script {
      field SFNode bubble USE BUBBLE
      url "
        function initialize(now) {
          bubble.message = 'My message in a bubble';
        }
      "
    }

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