aframe-material-snickell

v0.1.3

Published

3 years ago

Material design (inputs, keyboards, checkbox, radio button) for A-Frame (https://aframe.io).

Downloads

0High
0Medium
0Low

snickell

aframe aframe-component webvr vr

A-Frame Material Kit 👽

This is real! WebVR is getting even better! Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more - following the Google Material design guideline for A-Frame. It is perfect for room-scale webVR apps. 👌

Demo

👉👉 Live demo 😎 👈👈

Looks surreal if you have a headset! :)

Getting Started

Here is the code from the demo. That is it. Pure html!

<a-entity laser-controls="hand: right"></a-entity>

<!-- BEGIN INPUTS/KEYBOARD -->
<a-keyboard></a-keyboard>
<a-input position="-0.7 1 -2.5" placeholder="Username" color="black" width="1"></a-input>
<a-input position="-0.7 0.8 -2.5" type="password" placeholder="Password" color="black" width="1"></a-input>
<!-- END INPUTS/KEYBOARD -->

<!-- BEGIN FORM -->
<a-rounded position="0.5 0.5 -2.5" width="4" height="3.1" radius="0.05" rotation="0 -20 0" scale="0.3 0.3 0.3">
  <a-form>
    <a-switch position="0.2 2.7 0" enabled="true"></a-switch>
    <a-radio position="0.2 2.4 0" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>
    <a-radio position="0.2 2.1 0" width="3" name="food" label="Veggies" checked="true" disabled="true"></a-radio>
    <a-radio position="0.2 1.8 0" width="3" name="food" label="Ice cream"></a-radio>
    <a-checkbox position="0.2 1.5 0" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>
    <a-checkbox position="0.2 1.2 0" width="3" name="stuff" label="And I am another one" checked="true" disabled="true"></a-checkbox>
    <a-button position="0.2 0.8 0" name="stuff" value="Click me" type="raised"></a-button>
    <a-button position="0.2 0.35 0" width="3" name="stuff" value="You cannot click me" disabled="true"></a-button>
  </a-form>
</a-rounded>
<!-- END FORM -->

<!-- BEGIN TOAST -->
<a-toast message="This is a toast" action="Got it"></a-toast>
<!-- END TOAST -->

👉👉 Install 👈👈

Option 1:

Download the boilerplate and follow the readme (super easy).

Option 2:

Since this kit is using assets (icons and sounds) you need to download the git project and copy the assets folder to the location of your choice and specify the path in the head of the html page.

<head>
  <!--  
    ... MORE HEAD STUFF ...
  -->
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  <script src="./js/aframe-material.js"></script>
  <script type="text/javascript">
    AFRAME.ASSETS_PATH = "./assets";
  </script>
</head>

Documentation 🙌

👉👉 a-keyboard ⌨️🤤

Create a virtual keyboard that works with inputs out of the box.

<a-keyboard></a-keyboard>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | is-open | Whether or not the keyboard should be open | boolean | false | | physical-keyboard | Whether or not the physical keyboard should be respond to key press. (Great for debugging) | boolean | false |

Methods

| Name | Description | | --- | --- | | show() | Display the keyboard without any animations. | | hide() | Hide the keyboard without any animations. | | open() | Open the keyboard smoothly. | | dismiss() | Close the keyboard smoothly. | | destroy() | Remove the keyboard from the scene. |

Events

| Name | Description | | --- | --- | | didopen | Triggered when the keyboard did open. | | diddismiss | Triggered when the keyboard did close. | | input | Triggered when a key is pressed. | | backspace | Triggered when the backspace key is pressed. | | enter | Triggered when the enter is pressed. |

Custom example (just in case 😉)

let keyboard = document.querySelector("a-keyboard");
keyboard.open();
keyboard.addEventListener('input', (e)=>{
  str += e.detail;
  console.log(str);
});
keyboard.addEventListener('enter', (e)=>{
  console.log("Enter key pressed!")
})
keyboard.addEventListener('dismiss', (e)=>{
  console.log("Dismiss: ", e);
  keyboard.dismiss();
});
keyboard.addEventListener('backspace', (e)=>{
  str = str.slice(0, -1);
  console.log(str);
});

👉👉 a-input

Create a single line text input that work with the <a-keyboard>.

<a-input position="-1.25 2.1 -5" placeholder="Username" color="black" scale="2 2 2" width="1"></a-input>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | value | Value of the field. | string | "" | | name | Name of the field. | string | "" | | disabled | Whether or not the input should be disabled. | boolean | false | | color | Text color. | color | "#000" | | font | Text font | string. | "default" | | opacity | Input opacity. | number | 1 | | placeholder | Value of the placeholder. | string | "" | | placeholder-color | Text color of the placeholder. | color | "#AAA" | | max-length | Limit the number of characters. | int | 0 (Infinite) | | type | Can be either "text" or "password". | string | "text" | | width | Width of the input. | number | 1 | | cursor-width | Width of the cursor. | number | 0.01 | | cursor-height | Height of the cursor. | number | 0.08 | | cursor-color | Color of the cursor. | color | "#007AFF" | | background-color | Color of the field. | color | "#FFF" | | background-opacity | Opacity of the field background only. | number | 1 |

Methods

| Name | Description | | --- | --- | | focus() | Focus the input. | | blur() | Blur the input. |

Events

| Name | Description | | --- | --- | | focus | Triggered when the input is focused. | | blur | Triggered when the input is blurred. | | change | Triggered when the value of the input changed. |

👉👉 a-button

Create a button (can be raised of flat).

<a-button position="0 0.8 2" value="Click me" type="raised"></a-button>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | value | Value of the button. | string | "Button" | | name | Name of the button. | string | "" | | disabled | Whether or not the button should be disabled. | boolean | false | | type | Can be either "raised" or "flat". | string | "raised" | | color | Text color. | color | "#FFF" | | button-color | Color of the button. | color | "#4076fd" | | font | Text font | string. | "default" | | opacity | Input opacity. | number | 1 | | width | Width of the input. | number | 1 |

Events

| Name | Description | | --- | --- | | change:width | Triggered when the width of the button changed. |

a-form

Create a form to get the same html <form> behaviors with <a-input>, <a-radio>, <a-button>, <a-switch>, <a-checkbox>.

<a-form></a-form>

👉👉 a-radio

Create a radio button.

<a-radio position="0 0.8 2" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | checked | Whether or not the radio button should be checked. | boolean | false | | value | Value of the radio button. | string | "" | | name | Name of the radio button. | string | "" | | disabled | Whether or not the button should be disabled. | boolean | false | | label | Text following the radio button (totally optional). | string | "" | | color | Text color of the label. | color | "#757575" | | radio-button | Color of the radio button when unchecked. | color | "#757575" | | radio-color-checked | Color of the radio button when checked. | color | "#4076fd" | | font | Text font | string. | "default" | | opacity | Input opacity. | number | 1 | | width | Width of the input. | number | 1 |

Events

| Name | Description | | --- | --- | | change | Triggered when the value of the radio button changed. |

👉👉 a-checkbox

Create a checkbox.

<a-checkbox position="0 0.8 2" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | checked | Whether or not the checkbox should be checked. | boolean | false | | value | Value of the checkbox. | string | "" | | name | Name of the checkbox. | string | "" | | disabled | Whether or not the checkbox should be disabled. | boolean | false | | label | Text following the checkbox (totally optional). | string | "" | | color | Text color of the label. | color | "#757575" | | radio-button | Color of the checkbox when unchecked. | color | "#757575" | | radio-color-checked | Color of the checkbox when checked. | color | "#4076fd" | | font | Text font | string. | "default" | | opacity | Input opacity. | number | 1 | | width | Width of the input. | number | 1 |

Events

| Name | Description | | --- | --- | | change | Triggered when the value of the checkbox changed. |

👉👉 a-switch

Create a switch button that can be toggle on/off.

<a-switch position="0 0.8 2" enabled="true"></a-switch>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | enabled | Whether or not the switch should be enabled. | boolean | false | | name | Name of the checkbox. | string | "" | | disabled | Whether or not the switch should be disabled. | boolean | false | | fill-color | Color of the fill when off. | color | "#bababa" | | knob-color | Color of the knob when off. | color | "#f5f5f5" | | fill-color-enabled | Color of the fill when on. | color | "#80a8ff" | | knob-color-enabled | Color of the knob when on. | color | "#4076fd" | | fill-color-disabled | Color of the fill when disabled. | color | "#939393" | | knob-color-disabled | Color of the knob when disabled. | color | "#a2a2a2" |

Events

| Name | Description | | --- | --- | | change | Triggered when the switch is toggled. |

👉👉 a-toast

Create a toast to alert the user of something.

<a-toast message="This is a toast" action="Got it"></a-toast>

Attributes

| Name | Description | Type | Default | | --- | --- | --- | --- | | message | Text shown by the toast. | string | "You are cool" | | action | Text of the button (optional). | string | "" | | color | Text color. | color | "#FFF" | | background-color | Color of the toast. | color | "#4076fd" | | font | Text font | string. | "default" | | width | Width of the input. | number | 1 | | duration | Duration of the toast | number | 2000 (2sec) | | autoshow | Whether the toast should show right away. | boolean | true |

Events

| Name | Description | | --- | --- | | actionclick | Triggered when the action is clicked. |

Custom example (just in case 😉)

let button = document.querySelector('a-button');
let toast = document.querySelector('a-toast');
toast.addEventListener('actionclick', ()=>{
  toast.hide();
})
button.addEventListener('click', ()=> {
  toast.show();
})

👉👉 a-rounded

Create a rounded rectangle, useful to create beautiful interfaces 😁.

👉 github.com/etiennepinchon/aframe-rounded

Change log

0.1.1

Added enter keyboard event.
Added physical keyboard interaction using the physical-keyboard property.

Want to make some changes to it?

Installation

First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favorite browser:

http://localhost:3333/

License

Distributed under an MIT License.

Made by Etienne Pinchon (@etiennepinchon) - September 2017.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

A-Frame Material Kit 👽

Demo

👉👉 Live demo 😎 👈👈

Getting Started

👉👉 Install 👈👈

Option 1:

Option 2:

Documentation 🙌

👉👉 a-keyboard ⌨️🤤

Attributes

Methods

Events

Custom example (just in case 😉)

👉👉 a-input

Attributes

Methods

Events

👉👉 a-button

Attributes

Events

a-form

👉👉 a-radio

Attributes

Events

👉👉 a-checkbox

Attributes

Events

👉👉 a-switch

Attributes

Events

👉👉 a-toast

Attributes

Events

Custom example (just in case 😉)

👉👉 a-rounded

Change log

0.1.1

Want to make some changes to it?

Installation

Local Development

License