Giter Site home page Giter Site logo

soltrinox / aframe-material Goto Github PK

View Code? Open in Web Editor NEW

This project forked from etiennepinchon/aframe-material

0.0 2.0 0.0 1.37 MB

🅰️ Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more for A-Frame

License: MIT License

HTML 6.46% JavaScript 93.54%

aframe-material's Introduction

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.

aframe-material's People

Contributors

dmreagan avatar etiennepinchon avatar machenmusik avatar ngokevin avatar

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.