pxlHUD

pxlHUD

Class to handle a Heads-Up Display (HUD) management for pxlNav. Examples should be ran from your pxlRoom.build() function --

Constructor

new pxlHUD()

Description:

  • HUD drawing and management

Source:
Examples
// Add a button to the HUD from your room
let buttonData = { 'style': ['my-button-style'] };
this.pxlHUD.addItem('myButton', HUD_ELEMENT.BUTTON, buttonData, () => {
  console.log('Button clicked!');
});
// Add a draggable region to the HUD from your room
let dragData = { 'style': ['my-drag-style'] };
this.pxlHUD.addItem('myDragRegion', HUD_ELEMENT.DRAG_REGION, dragData, ( data ) => {
  // data = { type = pxlEnum, name='myDragRegion', value={ x: number, y: number } };
  console.log('Drag delta / relative offset : ', data.value );
});
// Add a thumbstick to the HUD from your room
let thumbData = { 'style': ['my-thumbstick-style'] };
this.pxlHUD.addItem('myThumbstick', HUD_ELEMENT.THUMBSTICK, thumbData, ( data ) => {
  // data = { type = pxlEnum, name='myThumbstick', value={ x: number (-1 to 1), y: number (-1 to 1) } };
  console.log('Thumbstick value : ', data.value );
});

Methods

(static) HUD#addItem(labelopt, type, data, callbackFnopt, parentObjopt) → {Object|null}

Description:

  • Add an item to the HUD.

Source:
Example
// Add a button to the HUD
//   Subscription passed through the `addItem()` function
//   Its preferer you use this function over directly creating HUD elements
//     As pxlHUD can manage the HUD elements and their subscriptions
let buttonData = { 'style': ['my-button-style'] };
this.pxlHUD.addItem('myButton', HUD_ELEMENT.BUTTON, buttonData, () => {
  console.log('Button clicked!');
});

// Add a draggable region to the HUD
//   Subscription called after hud element creation
let dragData = { 'style': ['my-drag-style'] };
this.pxlHUD.addItem('myDragRegion', HUD_ELEMENT.DRAG_REGION, dragData);
 // [...] // Later in your code
this.pxlHUD.subscribe('myDragRegion', ( data ) => {
  console.log('Drag delta / relative offset : ', data.value );
});
Parameters:
Name Type Attributes Default Description
label string <optional>
 'default'

The label for the HUD item.
type string

The type of HUD element.
data Object

The data for the HUD element.
callbackFn function | null <optional>
 null

The callback function for the HUD element.
parentObj Object | null <optional>
 null

The parent object for the HUD element.
Returns:

The created HUD element.

Type
Object | null

(static) HUD#addToHUD(hudElement)

Description:

  • Add an element to the HUD DOM Object.

Source:
Example
//Add an created element to the managed HUD or specific parent
let newButton = this.pxlHUD.createButton('myButton', buttonData, ( data )=>{
  console.log('Button clicked!');
});

this.pxlHUD.addToHUD( newButton );
Parameters:
Name Type Description
hudElement HTMLElement | Object

The HUD element to add.

(static) HUD#createButton(label, data, callbackFnopt) → {Object}

Description:

  • Create a button element.

Source:
Example
// Create a button element
let buttonData = { 'style': ['my-button-style'] };
let newButton = this.pxlHUD.createButton('myButton', buttonData, ( data )=>{
  console.log( 'Button clicked!' );
});
this.pxlHUD.addToHUD( newButton );
Parameters:
Name Type Attributes Default Description
label string

The label for the button.
data Object

The data for the button.
callbackFn function | null <optional>
 null

The callback function for the button.
Returns:

The created button element.

Type
Object

(static) HUD#createDragRegion(label, data, callbackFnopt) → {Object}

Description:

  • Create a draggable region element.

Source:
Example
// Create a draggable region element
let dragData = { 'style': ['my-drag-style'] };
let newDragRegion = this.pxlHUD.createDragRegion('myDragRegion', dragData, ( data )=>{
 console.log( 'Drag delta / relative offset {X,Y} :' );
 console.log( data.value );
});
this.pxlHUD.addToHUD( newDragRegion );
Parameters:
Name Type Attributes Default Description
label string

The label for the draggable region.
data Object

The data for the draggable region.
callbackFn function | null <optional>
 null

The callback function for the draggable region.
Returns:

The created draggable region element.

Type
Object

(static) HUD#createImage(label, data, callbackFnopt) → {Object}

Description:

  • Create an image element.

Source:
Example
// Create an image element
let imageData = { 'src': 'path/to/image.png', 'style': ['my-image-style'] };
let newImage = this.pxlHUD.createImage('myImage', imageData, ( data )=>{
  console.log( 'Image clicked!' );
});
this.pxlHUD.addToHUD( newImage );
Parameters:
Name Type Attributes Default Description
label string

The label for the image.
data Object

The data for the image.
callbackFn function | null <optional>
 null

The callback function for the image.
Returns:

The created image element.

Type
Object

(static) HUD#createRegion(label, data, callbackFnopt) → {Object}

Description:

  • Create a region element.

Source:
Example
// Create a region element
let regionData = { 'style': ['my-region-style'] };
let newRegion = this.pxlHUD.createRegion('myRegion', regionData, ( data )=>{
  console.log( 'Region clicked!' );
  console.log( data );
});
this.pxlHUD.addToHUD( newRegion );
Parameters:
Name Type Attributes Default Description
label string

The label for the region.
data Object

The data for the region.
callbackFn function | null <optional>
 null

The callback function for the region.
Returns:

The created region element.

Type
Object

(static) HUD#createSlider(label, data, callbackFnopt) → {Object}

Description:

  • Create a slider element.

Source:
Example
// Create a slider element
let sliderData = { 'min': 0, 'max': 100, 'value': 50, 'style': ['my-slider-style'] };
let newSlider = this.pxlHUD.createSlider('mySlider', sliderData, ( data )=>{
  console.log( 'Slider value changed!' );
  console.log( data );
});
this.pxlHUD.addToHUD( newSlider );
Parameters:
Name Type Attributes Default Description
label string

The label for the slider.
data Object

The data for the slider.
callbackFn function | null <optional>
 null

The callback function for the slider.
Returns:

The created slider element.

Type
Object

(static) HUD#createText(label, data, callbackFnopt) → {Object}

Description:

  • Create a text element.

Source:
Example
// Create a text element
let textData = { 'text': 'Hello, world!', 'style': ['my-text-style'] };
let newText = this.pxlHUD.createText('myText', textData, ( data )=>{
  console.log( 'Text clicked!' );
});
this.pxlHUD.addToHUD( newText );
Parameters:
Name Type Attributes Default Description
label string

The label for the text.
data Object

The data for the text.
callbackFn function | null <optional>
 null

The callback function for the text.
Returns:

The created text element.

Type
Object

(static) HUD#createThumbstick(label, data, callbackFnopt) → {Object}

Description:

  • Create a thumbstick element.

Source:
Example
// Create a thumbstick element
let thumbstickData = { 'style': ['my-thumbstick-style'] };
let newThumbstick = this.pxlHUD.createThumbstick('myThumbstick', thumbstickData, ( data )=>{
  console.log( 'Thumbstick value changed!' );
  console.log( data );
});
this.pxlHUD.addToHUD( newThumbstick );
Parameters:
Name Type Attributes Default Description
label string

The label for the thumbstick.
data Object

The data for the thumbstick.
callbackFn function | null <optional>
 null

The callback function for the thumbstick.
Returns:

The created thumbstick element.

Type
Object

(static) HUD#emit(label, data)

Description:

  • Emit an event for a HUD element.

Source:
Parameters:
Name Type Description
label string

The label of the HUD element.
data Object

The data for the event.

(static) HUD#subscribe(label, callbackFn)

Description:

  • Subscribe to a HUD element's events.

Source:
Example
// Subscribe to a HUD element
let newButton = this.pxlHUD.addItem( 'myButton', HUD_ELEMENT.BUTTON );
this.pxlHUD.subscribe( 'myButton', ( data )=>{
  console.log( 'Button clicked!' );
});
Parameters:
Name Type Description
label string

The label of the HUD element.
callbackFn function

The callback function to subscribe.