Alert prototype

This VRML prototype is a two choice popup style message controlled by left and right soft key of the mobile phone.

PROTO Alert [
  # Events
  eventOut SFBool selection
  exposedField SFBool hide TRUE

  # Data
  field MFString title ""
  field MFString message ""
  field MFString rightLabel	""
  field MFString leftLabel ""
  field SFInt32 contextValue 0

  # Style
  field MFString style "Alert"
  field MFString images ""
  field MFString sliderStyle ["Slider" "Alert-Slider"]
  field MFString sliderTitleStyle ["Slider-title" "Alert-Slider-title"]
  field MFString sliderImages ""
  field MFString menubarStyle "Menubar"
  field MFString menubarLabelStyle "Menubar-label"
  field MFString menuBarImages ["menubarBg.png" "menubarLeftPressed.png" "menubarRightPressed.png"]
  field SFVec2f screenSize 0 0
  field SFVec2f textScale 1 1
]

Data fields

MFString title - Alert title (placed in a <Ticker>)
MFString message - Alert message (placed in a <Ticker>)
MFString rightLabel - Usually set to cancel
MFString leftLabel - Usually set to Ok
SFInt32 contextValue - unused value to let user associate data to this alert

General Style fields

MFString style - Path to the CSS node associated to Alert proto
MFString images - Icon associate to the alert (default: '!')

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

Slider style fields

MFString sliderStyle - Path to the CSS node specific to the slider in Alert proto
MFString sliderTitleStyle - Path to the CSS node specific to the title of the slider in Alert proto
MFString sliderImages - Image of the background slider

Menubar style fields

MFString menubarStyle - Path to the CSS node specific to the menubar in Alert proto
MFString menubarLabelStyle - Path to the CSS node specific to the label of the menubar in Alert proto
MFString menuBarImages - Images of menubar (background, keypressed)

Scalability field

SFVec2f screenSize - Size of the screen where the application is displayed

Exposed Fields

SFBool hide - Boolean to hide/show the alert

Event Out

SFBool selection - returns TRUE: left soft key, FALSE: right soft key. A selection launch the hide event

Alert {
  size: 90% 37.5%;
  background-color: white;
  border-width: 2px; // border color will be the color of the Alert-Slider.background-color
  // Icon properties
  image-size: 15% 18%;
  image-position: 0% 8%;
  // Message properties
  text-size: 80% 16;
  text-position: 0% -8%;
  color: black;
//  font-size: 12;
  font-filter: true;
  vertical-align: MIDDLE;
  horizontal-align: MIDDLE;
}
Alert-Slider {
  background-color: black;
  margin-bottom: 8.75%; 
}
Alert-Slider-title {
  background-color: black;
}

Slider, MenuBar, Ticker

EXTERNPROTO Alert [] "Alert.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 ALERT Alert {
  		hide       TRUE
	  	title      ["My alert"]
			message    ["This is my alert message"]
      rightLabel ["Cancel"]
      leftLabel  ["Ok"]
  	}

    Script {
      field SFNode alert USE ALERT
      url "
        function initialize() {
          alert.hide = false;
        }
      "
    }

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