https://github.com/rdub80/aframe-gui
Graphical User Interface Component Framework for A-Frame VR
https://github.com/rdub80/aframe-gui
Last synced: 26 days ago
JSON representation
Graphical User Interface Component Framework for A-Frame VR
- Host: GitHub
- URL: https://github.com/rdub80/aframe-gui
- Owner: rdub80
- License: mit
- Created: 2017-06-24T00:19:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T20:44:35.000Z (9 months ago)
- Last Synced: 2024-11-09T14:50:22.720Z (7 months ago)
- Language: JavaScript
- Homepage: https://rdub80.github.io/aframe-gui/
- Size: 115 MB
- Stars: 282
- Watchers: 20
- Forks: 64
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - aframe-gui, A Graphical User Interface Component Framework for A-Frame VR
README
# aframe-gui
A graphical User Interface framework for [A-Frame](https://aframe.io).
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-vertical-slider | a-gui-slider | Vertical 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 |
key_orange | '#ed5b21' |
key_orange_light | '#ef8c60' |
key_grey | '#22252a' |
key_grey_dark | '#2c3037' |
key_grey_light | '#606876' |
key_offwhite | '#d3d3d4' |
key_white | '#ffffff' |
## Examples
Examples are available at:
[https://rdub80.github.io/aframe-gui/examples/index.html](https://rdub80.github.io/aframe-gui/examples/index.html)
## Use in your AFrame project
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`
## Building
Run the following to build to the examples/js folder:
`npm run dist-example`
`npm run dist-example-min`
## Run locally
Run the following start the webpack-dev-server:
`npm start`
The webpack-dev-server should now be running at http://localhost:8080
## Components
### a-gui-flex-container Component
#### Properties
| 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', 'column' | 'row' |
| justify-content | property defines distributed space between and around content items along the main axis of their container: 'flexStart','center','flexEnd' | 'flexStart' |
| align-items | property 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 |
| panel-rounded | flex-container panel rounding radius | 0.05 |
```html
... gui items here...
```
### a-gui-cursor Component
#### Properties
| 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' |
```html
```
#### Example without fuse/gaze trigger (click trigger):
```html
```
### a-gui-button Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| on | Event that triggers onclick action | click |
| value | Text of button label | |
| font-size | Font size for button | 0.2 |
| font-family | Font family for button | '' |
| font-color | Text color for button label | #d3d3d4 |
| border-color | Border color of button | #d3d3d4 |
| focus-color | Focus color of button | #ef8c60 |
| 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 |
| toggle | If true, button acts as toggle button with on/off state | false |
| toggle-state | Setting the toggle button on/off state | false |
| width | Width of button | 1 |
| height | Height of button | 1 |
| depth | Depth of button | 0.02 |
| base-depth | Depth of the base of the button | 0.01 |
| gap | Gap between button and base | 0.025 |
| margin | Margin around button | 0 0 0 0 |
| bevel | If true, button bevel is enabled | false |
| bevel-segments | Segments of the button bevel | 5 |
| steps | Steps of the button bevel | 2 |
| bevel-size | Size of the button bevel | 0.1 |
| bevel-offset | Offset of the button bevel | 0 |
| bevel-thickness | Thickness of the button bevel | 0.1 |
```html
```
### a-gui-circle-loader Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| active-color | Color of ring that indicates loading progress | #ed5b21 |
| background-color | Background color of item | #22252a |
| loaded | Initial percentage progress value | 0.5 |
| font-color | Text color for progress percentage text | #d3d3d4 |
| font-family | Font family for progress percentage text | '' |
| font-size | Font size for progress percentage text | 0.2 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
```html
```
### a-gui-circle-timer Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| font-size | Font size for countdown text | 0.2 |
| font-family | Font family for progress countdown text | '' |
| font-color | Text color for progress countdown text | #d3d3d4 |
| border-color | Color of indicators that show 25/50/75/100 progress | #22252a |
| background-color | Background color of item | #22252a |
| active-color | Color of ring that indicates countdown progress | #ed5b21 |
| count-down | Initial countdown value in seconds | 0 |
| callback | callback function that fires when countdown expires | '' |
| width | Width of item | 1 |
| height | Height of item | 1 |
| margin | Margin around item | 0 0 0 0 |
```html
```
### a-gui-icon-button Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| on | Event that triggers onclick action | click |
| icon | | '' |
| icon-active | | '' |
| icon-font | Icon font family | 'assets/fonts/fa-regular-400.ttf' |
| icon-font-size | Icon Font size for button | 0.4 |
| 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 |
| toggle | Toggle status | false |
| toggle-state | Setting the toggle button on/off state | false |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
```html
```
### a-gui-icon-label-button Component
#### Properties
| Property | Description | Default Value |
| -------- | ---------------------------------------------------- | ------------- |
| on | Event that triggers onclick action | click |
| icon | icon char | '' |
| icon-active | icon char for the active state | '' |
| icon-font | Icon font family | 'assets/fonts/fa-regular-400.ttf' |
| icon-font-size | Icon Font size for button | 0.35 |
| font-color | Text color for button label | #d3d3d4 |
| value | | '' |
| font-family | Font family for button | '' |
| font-size | Font size for button | 0.2 |
| 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 |
| toggle | Toggle status | false |
| toggle-state | Setting the toggle button on/off state | false |
| height | Height of button | 1 |
| width | Width of button | 1 |
| margin | Margin around button | 0 0 0 0 |
```html
```
### a-gui-input Component
#### Properties
| Property | Description | Default Value |
| -------- | ---------------------------------------------------- | ------------- |
| onclick | Function to call on click event | |
| onhover | Function to call on hover event | |
| value | Input text value | |
| font-size | Font size for input | 0.2 |
| font-family | Font family for input | '' |
| font-color | Text input color | #2c3037 |
| border-color | Border color of input | #2c3037 |
| background-color | Background color of input | #22252a |
| border-hover-color | Border color when input is in hover state | #22252a |
| hover-color | Background color when input is in hover state | #2c3037 |
| margin | Margin around item | 0 0 0 0 |
| height | Height of item | 1 |
| width | Width of item | 1 |
```html
```
### a-gui-label Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| value | | '' |
| align | text-align: 'left','center','right' | 'center' |
| anchor | text anchor position: 'left','center','right' | 'center' |
| lineHeight | line-height of the label | 0.2 |
| font-size | Font size for input | 0.2 |
| font-family | Font family for input | '' |
| font-color | Text input color | #2c3037 |
| background-color | Background color of label | #d3d3d4 |
| text-depth | distance from the text to label background | 0.01 |
| height | Height of item | 1 |
| width | Width of item | 1 |
| margin | Margin around item | 0 0 0 0 |
```html
```
### a-gui-progress-bar Component
#### Properties
| 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 |
```html
```
### a-gui-radio Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | -------------- |
| on | Event that triggers onclick action | click |
| checked | | false |
| active | | true |
| toggle | Toggle status | false |
| toggle-state | Setting the radio button on/off state | false |
| value | | '' |
| font-family | Font family for radio button | '' |
| font-size | Font size for radio button | 0.2 |
| font-color | Text color for radio button label | #2c3037 |
| border-width | | 1 |
| border-color | Border color of radio button | #ffffff |
| background-color | Background color of radio button | #d3d3d4 |
| hover-color | Background color when radio button is in hover state | #606876 |
| handle-color | | #22252a |
| active-color | Background color when radio button is pressed down | #ed5b21 |
| height | Height of radio button | 1 |
| width | Width of radio button | 1 |
| margin | Margin around radio button | 0 0 0 0 |
```html
```
### a-gui-slider Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| active-color | | #ed5b21 |
| background-color | | #d3d3d4 |
| border-color | | #22252a |
| handle-color | | #ffffff |
| handle-outer-radius | | '0.17' |
| handle-inner-radius | | '0.13' |
| handle-outer-depth | | '0.04' |
| handle-inner-depth | | '0.02' |
| height | Height of item | 1 |
| hover-color | | #606876 |
| left-right-padding | | '0.25' |
| margin | Margin around item | 0 0 0 0 |
| onclick | Javascript function to execute on click | |
| onhover | Javascript function to execute on click | |
| percent | | '0.5' |
| slider-bar-depth | | '0.03' |
| slider-bar-height | | '0.05' |
| top-bottom-padding | | '0.125' |
| width | Width of item | 1 |
```html
```
### a-gui-toggle Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | -------------- |
| on | Event that triggers onclick action | click |
| checked | | false |
| active | | false |
| toggle | Toggle status | false |
| toggle-state | Setting the toggle toggle button on/off state | false |
| value | | '' |
| font-family | Font family for toggle button | '' |
| font-size | Font size for toggle button | 0.2 |
| font-color | Text color for toggle button label | #d3d3d4 |
| border-width | | 1 |
| border-color | Border color of toggle button | #d3d3d4 |
| background-color | Background color of toggle button | #22252a |
| hover-color | Background color when toggle button is in hover state | #2c3037 |
| handle-color | | #d3d3d4 |
| active-color | Background color when toggle button is pressed down | #ed5b21 |
| height | Height of toggle button | 1 |
| width | Width of toggle button | 1 |
| margin | Margin around toggle button | 0 0 0 0 |
```html
```
### a-gui-vertical-slider Component
#### Properties
| Property | Description | Default Value |
| -------- | ------------------------------------------------------- | ------------- |
| active-color | | #ed5b21 |
| background-color | | #d3d3d4 |
| border-color | | #22252a |
| handle-color | | #ffffff |
| handle-outer-radius | | 0.17 |
| handle-inner-radius | | 0.13 |
| handle-outer-depth | | 0.04 |
| handle-inner-depth | | 0.02 |
| hover-color | | #606876 |
| hover-font-size | Font size of label indicating where user is hovering | 0.2 |
| hover-height | Height of label indicating where user is hovering | 1.0 |
| hover-margin | Margin of label indicating where user is hovering | 1.0 |
| hover-percent | Current percentage where user is hovering | |
| hover-width | Width of label indicating where user is hovering | 1.0 |
| left-right-padding | | 0.25 |
| margin | Margin around item | '0 0 0 0' |
| onclick | Javascript function to execute on click | |
| onhover | Javascript function to execute on click | |
| opacity | Transparency of the vertical slider background | 1.0 |
| output-font-size | Font size of label indicating output value | 0.2 |
| output-function | Name of function to calculate output value from percent | |
| output-height | Height of label indicating output value | 1.0 |
| output-margin | Margin of label indicating output value | '0 0 0 0' |
| output-width | Width of label indicating output value | 1.0 |
| percent | Current selected slider value, from 0.0 to 1.0 | 0.5 |
| slider-bar-depth | | 0.03 |
| slider-bar-height | | 0.05 |
| top-bottom-padding | | 0.125 |
| height | Height of item | 1 |
| width | Width of item | 1 |
```html
```