A graphical User Interface framework for A-Frame.
The aframe-gui components provide layout and gui widgets that can be used
to create a user interface in an A-Frame scene.
The dist/aframe-gui.js file defines the following components:
| Component | Primitive | Description |
|---|---|---|
| gui-flex-container | a-gui-flex-container | Layout container with flexbox-inspired |
| gui-item | Used by other components for common properties like height and width | |
| gui-interactable | Used by other components to define onclick behavior | |
| gui-cursor | a-gui-cursor | Cursor used to interact with GUI elements. |
| gui-button | a-gui-button | Standard button component with text label |
| gui-icon-button | a-gui-icon-button | Button with icon label instead of text |
| gui-icon-label-button | a-gui-icon-label-button | Button with both icon and text labels |
| gui-radio | a-gui-radio | Radio button |
| gui-toggle | a-gui-toggle | Toggle button |
| gui-slider | a-gui-slider | Slider component |
| gui-input | a-gui-input | Text input field |
| gui-label | a-gui-label | Text label |
| gui-progress-bar | a-gui-progress-bar | Progress bar |
| gui-circle-loader | a-gui-circle-loader | Circular progress meter |
| gui-circle-timer | a-gui-circle-timer | Circular progress meter with timer |
Examples are available at:
https://rdub80.github.io/aframe-gui/examples/index.html
Include the following Javascript in the head of the page containing your AFrame scene:
https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js
Run the following to build to the examples/js folder:
npm run dist-example
npm run dist-example-min
Run the following start the webpack-dev-server:
npm start
The webpack-dev-server should now be running at http://localhost:8080
| Property | Description | Default Value |
|---|---|---|
| flex-direction | property specifies how flex items are placed in the flex container defining the main axis and the direction | 'row' |
| justify-content | property defines distributed space between and around content items along the main axis of their container | 'flexStart' |
| align-items | roperty defines distributed space between and around flex items along the cross-axis of their container. Like justify-content but in the perpendicular direction. | 'flexStart' |
| item-padding | Padding between items | 0.0 |
| opacity | Transparency of the flex-conntainer | 0.0 |
| is-top-container | Setting background of the flex-container | false |
| panel-color | Background color of the flex-container | #22252a |
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1" opacity="0.7" width="3.5" height="4.5"
position="2 2.5 -4" rotation="0 0 0"
>
... gui items here...
</a-gui-flex-container>| Property | Description | Default Value |
|---|---|---|
| color | Cursor initial color | #ffffff |
| hover-color | Cursor hover color | #ffffff |
| active-color | Cursor selection/active color | #ed5b21 |
| distance | distance of the pointer from the camera | -1 |
| design | choose a design: 'dot', 'ring', 'cross' or 'reticle' | 'dot' |
<!-- Camera + cursor. -->
<a-entity camera>
<a-entity raycaster="interval: 1000; objects: [gui-interactable]"
cursor="fuse: true; fuseTimeout: 2000"
gui-cursor="design:reticle;" >
</a-entity> <!-- /cursor -->
</a-entity> <!-- /camera -->| Property | Description | Default Value |
|---|---|---|
| active-color | Background color when button is pressed down | #ed5b21 |
| background-color | Background color of button | #22252a |
| border-color | Border color of button | #d3d3d4 |
| font-color | Text color for button label | #d3d3d4 |
| font-family | Font family for button | 'Helvetica' |
| height | Height of item | 1 |
| hover-color | Background color when button is in hover state | #2c3037 |
| key-code | Key shortcut to trigger onclick action | |
| on | Event that triggers onclick action | click |
| onclick | Javascript function to execute on click | |
| onhover | Javascript function to execute on click | |
| toggle | If true, button acts as toggle button with on/off state | false |
| value | Text of button label | |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-button
width="2.5" height="0.75"
onclick="buttonActionFunction" key-code="32"
value="test button"
font-family="Helvetica"
margin="0 0 0.05 0"
>
</a-gui-button>| Property | Description | Default Value |
|---|---|---|
| active-color | Color of ring that indicates loading progress | #ed5b21 |
| background-color | Background color of item | #22252a |
| count | Initial percentage progress value | #22252a |
| font-color | Text color for progress percentage text | #d3d3d4 |
| font-family | Font family for progress percentage text | 'Helvetica' |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-circle-loader
height="0.75"
font-family="Arial"
>
</a-gui-circle-loader>| Property | Description | Default Value |
|---|---|---|
| active-color | Color of ring that indicates countdown progress | #ed5b21 |
| background-color | Background color of item | #22252a |
| border-color | Color of indicators that show 25/50/75/100 progress | #22252a |
| count-down | Initial countdown value in seconds | #22252a |
| font-color | Text color for progress countdown text | #d3d3d4 |
| font-family | Font family for progress countdown text | 'Helvetica' |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-circle-timer
height="0.75"
count-down="5"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-circle-timer>| Property | Description | Default Value |
|---|---|---|
| on | Event that triggers onclick action | click |
| icon | '' | |
| icon-active | '' | |
| toggle | Toggle status | false |
| font-family | Font family for button | 'Helvetica' |
| font-color | Text color for button label | #d3d3d4 |
| border-color | Border color of button | #d3d3d4 |
| background-color | Background color of item | #22252a |
| hover-color | Background color when button is in hover state | #2c3037 |
| active-color | Background color when button is pressed down | #ed5b21 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-icon-button
height="0.75"
onclick="buttonActionFunction"
icon="social-twitter"
margin="0 0 0.05 0"
>
</a-gui-icon-button>| Property | Description | Default Value |
|---|---|---|
| on | Event that triggers onclick action | click |
| icon | '' | |
| icon-active | '' | |
| text | '' | |
| toggle | Toggle status | false |
| font-family | Font family for button | 'Helvetica' |
| font-color | Text color for button label | #d3d3d4 |
| border-color | Border color of button | #d3d3d4 |
| background-color | Background color of button | #22252a |
| hover-color | Background color when button is in hover state | #2c3037 |
| active-color | Background color when button is pressed down | #ed5b21 |
| height | Height of button | 1 |
| width | Width of button | 1 |
| margin | Margin around button | 0 0 0 0 |
<a-gui-icon-label-button
width="2.5" height="0.75"
onclick="buttonActionFunction"
icon="social-github"
value="label button"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-icon-label-button>| Property | Description | Default Value |
|---|---|---|
| on | Event that triggers onclick action | click |
| input-text | Input value | 'Placeholder' |
| toggle | Toggle status | false |
| font-family | Font family for input | 'Helvetica' |
| font-color | Text input color | #2c3037 |
| border-color | Border color of input | #2c3037 |
| border-hover-color | Border color when input is in hover state | #22252a |
| background-color | Background color of input | #22252a |
| hover-color | Background color when input is in hover state | #2c3037 |
| active-color | Background color when input is pressed down | #ed5b21 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-icon-label-button
width="2.5" height="0.75"
onclick="buttonActionFunction"
icon="social-github"
value="label button"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-icon-label-button>| Property | Description | Default Value |
|---|---|---|
| text | 'label text' | |
| label-for | null | |
| font-family | Font family for input | 'Helvetica' |
| font-color | Text input color | #2c3037 |
| background-color | Background color of label | #d3d3d4 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-label
width="2.5" height="0.75"
value="label text"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-label>| Property | Description | Default Value |
|---|---|---|
| background-color | Background color of progress bar | #22252a |
| active-color | Color for indicating progress level | #ed5b21 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-progressbar
width="2.5" height="0.25"
margin="0 0 0.05 0"
>
</a-gui-progressbar>| Property | Description | Default Value |
|---|---|---|
| on | Event that triggers onclick action | click |
| text | 'text' | |
| active | true | |
| checked | false | |
| font-family | Font family for radio | 'Helvetica' |
| font-color | Text radio color | #2c3037 |
| border-color | Border color of input | #ffffff |
| background-color | Background color of radio | #d3d3d4 |
| hover-color | #606876 | |
| active-color | #ed5b21 | |
| handle-color | #22252a | |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-radio
width="2.5" height="0.75"
onclick="toggleActionFunction"
value="label radio"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-radio>| Property | Description | Default Value |
|---|---|---|
| percent | '0.5' | |
| handle-outer-radius | '0.17' | |
| handle-inner-radius | '0.13' | |
| handle-outer-depth | '0.04' | |
| handle-inner-depth | '0.02' | |
| slider-bar-height | '0.05' | |
| slider-bar-depth | '0.03' | |
| left-right-padding | '0.25' | |
| top-bottom-padding | '0.125' | |
| border-color | #22252a | |
| background-color | #d3d3d4 | |
| hover-color | #606876 | |
| active-color | #ed5b21 | |
| handle-color | #ffffff | |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-slider
width="2.5" height="0.75"
onclick="slideActionFunction"
percent="0.29"
margin="0 0 0.05 0"
>
</a-gui-slider>| Property | Description | Default Value |
|---|---|---|
| on | Event that triggers onclick action | click |
| text | 'text' | |
| active | true | |
| checked | false | |
| border-width | 1 | |
| font-family | 'Helvetica' | |
| font-color | #2c3037 | |
| border-color | #22252a | |
| background-color | #d3d3d4 | |
| hover-color | #606876 | |
| active-color | #ed5b21 | |
| handle-color | #d3d3d4 | |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
<a-gui-toggle
width="2.5" height="0.75"
onclick="testToggleAction"
value="label toggle"
font-family="Arial"
margin="0 0 0.05 0"
>
</a-gui-toggle>