Class Detail

var properties = {
  faces: [
    { id: 1, faceId: "face1", callback: null },
    { id: 2, faceId: "face2", callback: null },
    { id: 3, faceId: "face3", callback: null },
    { id: 4, faceId: "face4", callback: null },
    { id: 5, faceId: "face5", callback: null },
    { id: 6, faceId: "face6", callback: null }
  ],
  size: 300,
  shiftX: 0,
  shiftY: 0,
  shiftZ: -500,
  observerX: 150,
  observerY: 150,
  axis: "xy",
  focus: true,
  focusDuration: 200,
  dispatch: true,
  rotationCallback: null,
  rotationEndCallback: null
};
cube = new wink.ui.xyz.Cube(properties);
wink.byId("container").appendChild(cube.getDomNode());

Parameters:

{object} properties

The properties object

{array} properties.faces

An array of faces

{array} properties.faces.item

A face

{integer} properties.faces.item.id

Position of the face (1 to 6)

{string} properties.faces.item.faceId

The node id

{object|function} properties.faces.item.callback

The click callback

{integer} properties.size

The size of the Cube

{integer} properties.shiftX Optional, Default: 0

The shift of the Cube on x-axis

{integer} properties.shiftY Optional, Default: 0

the shift of the Cube on y-axis

{integer} properties.shiftZ Optional, Default: 0

the shift of the Cube on z-axis

{integer} properties.observerX Optional, Default: 0

The x position of the observer, relative to the Cube node, that influence the perspective view

{integer} properties.observerY Optional, Default: 0

the y position of the observer, relative to the Cube node, that influence the perspective view

{string} properties.axis Optional

Rotation axis (x, y or xy)

{boolean} properties.focus Optional, Default: false

Indicates whether a focus on a face must be performed after a rotation

{integer} properties.focusDuration Optional, Default: 0

The duration of the auto focus

{boolean} properties.dispatch Optional, Default: false

Indicates whether the face callback must be invoked when a face is selected

{object|function} properties.rotationCallback Optional

The callback to invoke when a rotation is performed

{object|function} properties.rotationEndCallback Optional

The callback to invoke when a rotation end occurs

Requires:

wink.math._geometric

wink.math._matrix

wink.fx._xyz

wink.ux.MovementTracker

See:

Test page

Test page (actu)

Test page (navigation)

Field Detail

Method Detail

• faceFocus(duration)
  Focus on the main visible face

  Parameters:

  {integer} duration

  Duration of the focus (millisecond)
• {HTMLElement} getDomNode()

  Returns:

  {HTMLElement} The component main dom node
• rotate(angleX, angleY, duration)
  Rotates the Cube by the given angles

  Parameters:

  {integer} angleX

  Angle done by a movement on x-axis, so around y-axis

  {integer} angleY

  Angle done by a movement on y-axis, so around x-axis

  {integer} duration

  Duration of the rotation (millisecond)
• setFace(faceObject)
  Sets the given faceObject

  Parameters:

  {object} faceObject

  A face object that will replace the previous

  {integer} faceObject.id

  Position of the face (1 to 6)

  {string} faceObject.faceId

  The node id

  {object|function} faceObject.callback

  The click callback