the-expanse / aframe-material-collection

Material UI based primitives and components for use in your aframe projects.

AFRAME Material Collection.

Aframe Material Collection uses material design and the yoga layout engine to make prototyping UI configurations much easier inside aframe. It goes further than providing some reusable components for your UI, but also integrates yoga for easy and powerful flex layouts. 2D primitives used inside the a-ui-scroll-pane are automatically measured for width and height to allow the layout engine to automatically place them with default settings, but all of these can be overridden with the ui-yoga component to allow granular control over the layout properties. Note only a subset of 2D primitives are supported for auto layout including a-plane, a-circle, a-ring, a-text ( width width and height explicitly set ) and all the primitives below.

Live Demo

DEMO

Inspiration

I wanted to port my scene editor built in Altspace VR to the browser as a standalone aframe based project. AltspaceVR provided a renderTarget based solution allowing you to render a browser to a texture. This made prototyping UIs as easy as making web apps. Without this solution available in the browser, I had to make my own UI components so I could re-create the editor UI in a WebGL context - as such aframe-material-collection was born.

Here is a demo of the new aframe based Shane's Editor with a more complex UI:

The Shane's Editor project is also open source and you can get involved at github, join our discord or take it for a test drive in the live demo

Getting Started

CDN for browser

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- Include yoga layout for scroll pane layouts after aframe -->
<script src="https://unpkg.com/aframe-material-collection/dist/aframe-yoga-layout.min.js"></script>
<!-- Include aframe-material-collection after aframe and yoga layout-->
<script src="https://unpkg.com/aframe-material-collection/dist/aframe-material-collection.min.js"></script>

Installing

npm i aframe-material-collection

Running

npm start

Building

npm run build

Documentation

Primitives

Components

Yoga Layout Engine

Examples

<!-- Button -->
<a-ui-button text-value="Button" class="intersectable"></a-ui-button>

<!-- FAB Button -->
<a-ui-fab-button color="#f44336" class="intersectable"></a-ui-fab-button>

<!-- Small FAB Button -->
<a-ui-fab-button-small class="intersectable" color="#2196f3"></a-ui-fab-button-small>

<!-- Switch -->
<a-ui-switch class="intersectable"></a-ui-switch>

<!-- Checkbox -->
<a-ui-checkbox class="intersectable" indeterminate="true"></a-ui-checkbox>

<!-- Radio -->
<a-entity width="1.8">
    <a-ui-radio selected="true" class="intersectable"></a-ui-radio>
    <a-ui-radio class="intersectable"></a-ui-radio>
    <a-ui-radio disabled="true" class="intersectable"></a-ui-radio>
</a-entity>

<!-- Text Input -->
<a-ui-input-text width="0.9" height="0.15" value="something"></a-ui-input-text>

TODOs:

• Need to add touchpad/joystick support for scrolling.
• Need to document yoga layout properties/strategies.
• Look at unit testing with Karma

aframe-material-collection's Issues

Add a window component

It would be nice to have a window component like the one in Shane's Editor providing title bar, close button and scroll pane.

the letter m does not work in text field

hi all keyboard letters are displayed in the text field except the letter M , if you can fix the problem to tell me how i can fix it it's very urgent thank you.

Create modal / window primitive

To make adopting easier and cut down amount of lines required it would be useful to have primitive which provides basic modal / window functionality:

Text overflow in firefox

If the content exceeds input box size the text wraps and overflows. observed in fire fox.

aframe-material-collection don't work with moonride a-frame

hello how use aframe-material-collection package with this layout a-frame moon-rider the problem is the text input don't work i add the inside the login layout i did

Is there a repository where I can directly use this component?

Hi!
I am trying to use this component using npm, but it generates errors. My operating system is Ubuntu v18 with node v8.10.0 and npm v3.5.2

But what really interests me is whether there is a version (rawgit, cdn) that can be used directly without having to use npm?
I've been searching and I can not find any, like most AFrame components.
Thank you in advance!

Maintenance?

Hey Shane, thanks for the awesome library.

Just wondering if you're going to be maintaining this library. My project will depend heavily on aframe-material-collection and I would like to know what I'm getting myself into beforehand :)

Thanks again!

Should baseLine attribute be spelled base-line or baseline?

I get some complaints in IDE for baseLine attribute. Maybe this is valid
discussion in stackoverflow:

https://stackoverflow.com/questions/36176474/camel-case-in-html-tag-attributes-and-jquery-doesnt-work-why

Support for Aframe ^1.0.0?

Hi @ShaneHarris, thanks for the awesome library.

Do you have any plan to support Aframe ^1.0.0?
Aframe has removed tween.js in favor of anime.js from v0.9.0. So it's not working for Aframe 0.9.0 and above.

Thanks.

Notcompatible with aframe 1.3.0

add Tabs

would it be possible to add some tab function?

using without CanvasInput.js

is it possible to use CanvasInput.js optional?

Not compatible with A-Frame v1.0.4

Unable to get this working with the latest version of A-Frame (v1.0.4). I keep getting an issue with TWEEN integration, which A-Frame no longer utilises since depreciating .

A generic way of defining action events and triggering functionality

• Define events a element sends when for example clicked.
• Define which events triggers a certain functionality in another element.

For example:

• A button is pressend and sends 'open-modal-x'-event.
  • <a-ui-button pressed-action='open-modal-x' ...
• Modal x listens for this event and receiving it triggers opening of the dialog:
  • <a-ui-modal open-trigger='open-modal-x' ...

Break out components/primitives into separate libs for including separately.

Choose what makes sense to put into a core lib, and then break out everything else into separate libs for including separately. Also include a full lib for including all at once.