caseyyee / aframe-ui-widgets Goto Github PK

View Code? Open in Web Editor NEW

88.0 5.0 18.0 42.69 MB

UI widgets for A-Frame.

License: MIT License

JavaScript 100.00%

aframe-ui-widgets's Introduction

UI widgets for A-Frame.

Give it a whirl!

Works with HTC VIVE and Oculus touch in a WebVR enabled browser and desktop with aframe-mouse-cursor-component.

Basic usage

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.7.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/aframe-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

Property	Description	Default Value
base	mixins to use for button base.
top	mixins to use for button top.
pressed	mixins to use for when button is pressed (added to top).
color	default button color	#960960
pressedColor	default button-pressed color	#FC2907
baseColor	default button-base color	#618EFF
topY	default button top height	0.02
pressedY	default button pressed height	0.012

Events

Event	Description
buttondown	Emitted when button is pushed down.
buttonup	Emitted when button is released.
pressed	Emitted when button has been has been pushed down and released.

Toggle switch

<a-entity ui-toggle></a-entity>

Properties

Property	Description	Default Value
value	sets toggle position.	0

Events

Event	Description
change	Emitted when switch has been toggled.

Slider

<a-entity ui-slider></a-entity>

Properties

Property	Description
min	sets minimum value
max	sets maximum value
value	sets value

Change

Event	Description
change	Emitted when slider has been moved.

Rotary Knob

<a-entity ui-rotary></a-entity>

Events

Event	Description
change	Emitted when rotary has been turned.

npm

Install via npm:

npm install aframe-ui-widgets

Then require and use.

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

aframe-ui-widgets's People

Contributors

Stargazers

Watchers

Forkers

ngokevin taofix eric-schleicher micahstubbs enterstudio celsoaguiar williero demo3d cwervo xiongzwen enterstudios chanokko jafetmorales tizenteam predrag56 rcos-virtual-music cloudinnovates mondocosm

aframe-ui-widgets's Issues

Update the minified src URL.

First of all thank you very much for this amazing component. It's been of great use :D!

It's just a quick heads up to update the URL of the script. It brings a 404 error.

This would be the correct one:
https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/aframe-ui-widgets.min.js

bugs in A-Frame 0.7.0?

the demo code under "Basic usage" does not work:
core:schema:warn Unknown property rotationOffset for component/system windows-motion-controls.

when trying to set an event listener to a toggle-button in my own code,, like
document.querySelector('#toggleRotate').addEventListener('change', function () {
console.log("toggled");
});

i get
Uncaught TypeError: Cannot read property 'addEventListener' of null

document.querySelector('#toggleRotate') returns

as expected

But as I am just learning - may be I am doing something wrong?

Start using release tags & link to unpkg

Hi!

Might I suggest two changes that would help with the stability of this project? It's a great effort, and I plan on using it more often in my work, so I'd love to give back to it! Two suggestions wrapped up in one "maintenance" topic:

Start using Github releases, so you can point to rawgit of tags, that way even if master changes/breaks, people can always have a reliable resource to link older versions of this file, and you don't have to worry because Github will host the file(s).
Start linking to unpkg for the distribution file. npm already supports versioning, and unpkg gives a reliable source of truth, whereas Rawgit (while historically stable) has _no guarantees about uptime & reliability. It'd mean changing the way the script gets compiled, I believe, because the current Unpkg link isn't usable by a vanilla JS project, but I've seen other A-Frame projects link to it like super-hands so it's certainly possible, and v reliable!

Remove jank demo code for animation

Use animation element instead.

Add sounds

Add menu widget

easily configurable menu.

Make work with gaze cursor.

Button and toggle switch already do. Make it so that slider and dial does as well.

hook up pause lifecycle method

just to remove event listeners.

Add keyboard and input fields.

Tracks work in https://github.com/caseyyee/aframe-ui-widgets/tree/keyboard

use mouse cursor component

https://github.com/mayognaise/aframe-mouse-cursor-component

avoids from having to use view center-locked cursor.

Works much better for desktop and mobile (non-vr) based apps.

Controlling audio instead of animations

I am interested in using this to control different things other than the animations provided. How could I control audio volume, audio speed, and thing like audio hi, mids, and lows with this instead? Also can I control aspects of video with this too?

caseyyee / aframe-ui-widgets Goto Github PK

aframe-ui-widgets's Introduction

UI widgets for A-Frame.

Basic usage

Skinnable with custom styles

UI Components

Button

Properties

Events

Toggle switch

Properties

Events

Slider

Properties

Change

Rotary Knob

Events

npm

aframe-ui-widgets's People

Contributors

Stargazers

Watchers

Forkers

aframe-ui-widgets's Issues

Recommend Projects

Recommend Topics

Recommend Org