Mosaic prototype

Display a mosaic of items with icons and labels (multi-pages).

PROTO Mosaic [
  # Events
  eventIn SFBool update
  exposedField SFBool startZoom FALSE # Set to TRUE to zoom in and to FALSE to zoom out
  exposedField SFInt32 index 0
  exposedField SFBool enable TRUE
  eventOut SFBool zoomFinished # will be set to TRUE on end of zoom in and to FALSE on end of zoom out
  eventOut SFString activeKey # Send touchCursor event to upper prototypes  
  
  # Data
  field MFString images []
  field MFString labels []
  field MFString defaultImages []
  
  # Style
  field SFVec2f itemsTrs 0 0
  field SFVec2f containerSize -1 -1
  field SFVec2f size -1 -1 #the size of each item
  field SFVec2f textScale 1 1
  field MFString style ["Mosaic"]
  field SFInt32 deltaMin 0
  field SFInt32 focusThickness 2
]

Data fields

MFString images - Icon of each item of mosaic
MFString labels - Label of each item of mosaic
MFString defaultImages - Default icon if it is missing for an item of mosaic

Style fields

SFVec2f itemsTrs - General translation of all the mosaic proto (to match with Carrousel itemTrs parameter)
SFVec2f containerSize - Size of the area where the proto is displayed (containerSize <= screenSize)
SFVec2f size - Size of the icon in Mosaic (each icon has the same size)
MFString style - Path to the CSS node associated to Mosaic proto
SFInt32 deltaMin - Minimum space between two icons (same horizontal and vertical)

Exposed Fields

SFBool enable - Enable/disable MenuBar Buttons
SFInt32 index - The current element in Mosaic

Event in

SFBool update - Update the Mosaic and position its index on the given element
SFBool startZoom - Set to TRUE to zoom in and to FALSE to zoom out. It set to FALSE by default: the mosaic is not visible

Event Out

SFBool zoomFinished - Set to TRUE on end of zoom in and to FALSE on end of zoom out
SFString activeKey - Send touchCursor event to upper prototypes

Mosaic {
  color: #ff9933;
  size: 22% 22%;
}

MosaicMatrix, TouchCursor

EXTERNPROTO Mosaic [] "Mosaic.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 MOSAIC Mosaic {
      images [
        "img_32x32.png" "img_32x32.png" "img_32x32.png" "img_32x32.png" "img_32x32.png"
        "img_32x32.png" "img_32x32.png" "img_32x32.png" "img_32x32.png" "img_32x32.png"
      ]
      labels [
        "Item 1" "Item 2" "Item 3" "Item 4" "Item 5"
        "Item 6" "Item 7" "Item 8" "Item 9" "Item 10"
      ]
      size 64 64
      deltaMin 10
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size
    
    ROUTE SIZE_NOTIFIER.screenSize TO MOSAIC.containerSize
  ]
}