1.0.2 • Published 7 years ago

aframe-ui-widgets v1.0.2

Weekly downloads
10
License
MIT
Repository
github
Last release
7 years ago

UI widgets for A-Frame.

Give it a whirl!

A-Frame UI Widgets

Works with HTC VIVE and Oculus touch in a WebVR enabled browser.

Basic usage

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

  <!-- Include component script into your project along with A-Frame. -->
  <script src="https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/ui-widgets.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- Adds hand controls -->
    <a-entity hand-controls="left"></a-entity>
    <a-entity hand-controls="right"></a-entity>

    <!-- Can also be controlled used with cursor -->
    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Adds UI button widget -->
    <a-entity id="mybutton" ui-button></a-entity>
  </a-scene>
  <script>
  var mybutton = document.querySelector('#mybutton');
  mybutton.addEventListener('pressed', function () {
    // do stuff here.
  });
  </script>
</body>

Skinnable with custom styles

Using mixins, you can define a UI component styles.

<a-assets>
  <a-mixin id="beveled-square" geometry="primitive: cone; radiusTop: 0.15; radiusBottom: 0.19; height: 0.02; segmentsRadial: 4; segmentsHeight: 1" rotation="0 45 0"></a-mixin>
  <a-mixin id="square" geometry="primitive: box; width: 0.18; height: 0.025; depth: 0.18;" position="0 0.02 0"></a-mixin>
  <a-mixin id="blue" material="color: #1E2768;"></a-mixin>
  <a-mixin id="darkgreen" material="color: #22FF90;"></a-mixin>
  <a-mixin id="yellow" material="color: #FFF88E;"></a-mixin>
  <a-mixin id="offset" position="0 0.01 0"></a-mixin>
</a-assets>

<a-entity id="button" ui-button="base: beveled-square, blue; top: square, darkgreen; pressed: yellow, offset"></a-entity>

UI Components

Button

<a-entity ui-button></a-entity>
Properties
PropertyDescriptionDefault Value
basemixins to use for button base.
topmixins to use for button top.
pressedmixins to use for when button is pressed (added to top).
colordefault button color#960960
pressedColordefault button-pressed color#FC2907
baseColordefault button-base color#618EFF
topYdefault button top height0.02
pressedYdefault button pressed height0.012
Events
EventDescription
buttondownEmitted when button is pushed down.
buttonupEmitted when button is released.
pressedEmitted when button has been has been pushed down and released.

Toggle switch

<a-entity ui-toggle></a-entity>
Properties
PropertyDescriptionDefault Value
valuesets toggle position.0

Events

EventDescription
changeEmitted when switch has been toggled.

Slider

<a-entity ui-slider></a-entity>
Properties
PropertyDescription
minsets minimum value0
maxsets maximum value1
valuesets value0
Change
EventDescription
changeEmitted when slider has been moved.

Rotary Knob

<a-entity ui-rotary></a-entity>
Events
EventDescription
changeEmitted when rotary has been turned.

npm

Install via npm:

npm install aframe-ui-widgets

Then require and use.

require('aframe');
require('aframe-ui-widgets');